GitHub - LeDDGroup/typescript-transform-jsx: Typescript transform jsx to string (original) (raw)

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[] }) => (

{props.persons.map(person => (
• {person.name} is {person.age} years old
))}

Gets compiled to:

const App = props => <ul>${props.persons .map(person =>

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" };