https://github.com/leddgroup/typescript-transform-jsx

Typescript transform jsx to string
https://github.com/leddgroup/typescript-transform-jsx

jsx jsx-templates nodejs plugin transform typescript

Last synced: about 4 hours ago
JSON representation

Typescript transform jsx to string

• Host: GitHub
• URL: https://github.com/leddgroup/typescript-transform-jsx
• Owner: LeDDGroup
• License: mit
• Created: 2018-12-26T03:44:57.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T03:17:10.000Z (about 2 years ago)
• Last Synced: 2024-05-27T20:48:48.350Z (8 months ago)
• Topics: jsx, jsx-templates, nodejs, plugin, transform, typescript
• Language: TypeScript
• Size: 1.24 MB
• Stars: 25
• Watchers: 4
• Forks: 1
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# typescript-transform-jsx

[![npm version](https://img.shields.io/npm/v/typescript-transform-jsx.svg)](https://www.npmjs.com/package/typescript-transform-jsx)

[![Greenkeeper badge](https://badges.greenkeeper.io/LeDDGroup/typescript-transform-jsx.svg)](https://greenkeeper.io/)

[![Maintainability](https://api.codeclimate.com/v1/badges/4ee8f3e01be0a19931f8/maintainability)](https://codeclimate.com/github/LeDDGroup/typescript-transform-jsx/maintainability)

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

[![Built with Spacemacs](https://cdn.rawgit.com/syl20bnr/spacemacs/442d025779da2f62fc86c2082703697714db6514/assets/spacemacs-badge.svg)](http://spacemacs.org)

Typescript transform jsx to string

**Table of Contents**

- [typescript-transform-jsx](#typescript-transform-jsx)

  - [Motivation](#motivation)

  - [Install](#install)

  - [Usage with ttypescript](#usage-with-ttypescripthttpsgithubcomcevekttypescript)

  - [Setup](#setup)

  - [Example](#example)

  - [Roadmap/Caveats](#roadmapcaveats)

  - [Contributing](#contributing)

## Motivation

- Typesafe templates

- Transform jsx to string in compilation time

- Fast runtime

See [examples](https://github.com/LeDDGroup/typescript-transform-jsx/tree/master/examples)

## Install

```sh

$ npm i -D typescript-transform-jsx

```

## Usage with [ttypescript](https://github.com/cevek/ttypescript/)

Add it to _plugins_ in your _tsconfig.json_

```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:

```ts

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

```tsx

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:

```js

const App = props =>

  `
${props.persons

    .map(person => `
${person.name} is ${person.age} years old
`)

    .join("")}
`;

```


## 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:

```tsx

// input

const props = { class: "container" };

;

// output

const props = { class: "container" };

`
 `${key}="${value}"`

)}>
`;

```


## Contributing

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