typescript-transform-jsx

Typescript transform jsx to string

Table of Contents

• typescript-transform-jsx
  • Motivation
  • Install
  • Usage with ttypescript
  • Setup
  • Example
  • Roadmap/Caveats
  • Contributing

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.