typescript-transform-jsx
Typescript transform jsx to string
Last updated a year ago by danielpanpm .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install typescript-transform-jsx 
SYNC missed versions from official npm registry.

typescript-transform-jsx

npm version Greenkeeper badge Maintainability

Conventional Commits code style: prettier Built with Spacemacs

Typescript transform jsx to string

Table of Contents

Motivation

  • Typesafe templates
  • Transform jsx to string in compilation time
  • Fast runtime

See examples

Install

$ npm i -D typescript-transform-jsx

Usage with ttypescript

Add it to plugins in your tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-native",
    "plugins": [{ "transform": "typescript-transform-jsx" }]
  }
}

See https://github.com/LeDDGroup/typescript-transform-jsx/tree/master/examples/example-ttypescript

Setup

Set the jsx flag to react-native or preserve in your tsconfig file. Then create a types.ts with the following content:

declare namespace JSX {
  type Element = string;
  interface ElementChildrenAttribute {
    children: any;
  }
  interface IntrinsicElements {
    [element: string]: {
      [property: string]: any;
    };
  }
}

This will declare custom JSX so you don't need react typings.

Example

interface Person {
  name: string;
  age: number;
}

const App = (props: { persons: Person[] }) => (
  <ul>
    {props.persons.map(person => (
      <li>
        {person.name} is {person.age} years old
      </li>
    ))}
  </ul>
);

Gets compiled to:

const App = props =>
  `<ul>${props.persons
    .map(person => `<li>${person.name} is ${person.age} years old</li>`)
    .join("")}</ul>`;

Roadmap/Caveats

  • Always handle children property implicitly

  • Self closing tags will be treated as such, (ie no children handling on the props)

  • Using spread operators on html elements require esnext environment because it compiles down to Object.entries expression:

// input
const props = { class: "container" };
<div {...props} />;
// output
const props = { class: "container" };
`<div ${Object.entries(...props).map(
  ([key, value]) => `${key}="${value}"`
)}></div>`;

Contributing

If you have any question or idea of a feature create an issue in github or make an PR.

Current Tags

  • 1.5.5                                ...           latest (a year ago)

12 Versions

  • 1.5.5                                ...           a year ago
  • 1.5.3                                ...           a year ago
  • 1.5.2                                ...           a year ago
  • 1.5.1                                ...           a year ago
  • 1.5.0                                ...           3 years ago
  • 1.4.0                                ...           3 years ago
  • 1.3.0                                ...           3 years ago
  • 1.2.1                                ...           3 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 2
Dependencies (0)
None
Dev Dependencies (7)
Dependents (1)

Copyright 2014 - 2021 © npmmirror.com |