jsx-to-str

A typescript transformer which transforms JSX into template literal strings during the compilation phase of your program.

• Can't be bothered to learn the syntax of a template engine like pug, ejs or eta?
• Worried about the performance overhead of said templating engines (parsing + compiling)?
• Tired of working with outdated and barely working VSCode plugins for said templating engines?
• Want something more closely integrated to typescript, allowing you to write safe, clean and reusable code?

... then this is perfect for you! jsx-to-str turns JSX syntax to regular template strings during compilation! Use the speed of V8 for parsing and running the templates!

Usage

Install:

npm i --save-dev @ts-docs/jsx-to-str

In order for this transformer to work, make sure you set the following options in your tsconfig.json file:

"jsx": "react-native",

and also place this at the start of your main file:

/// <reference path="path_to_root/node_modules/@ts-docs/jsx-to-str/jsx.d.ts" />

You can use this either by using ttypescript or webpack

TTypescript

• Install ttypescript: npm i --save-dev ttypescript
• Add this to your compiler options:

        "plugins": [
            { "transform": "@ts-docs/jsx-to-str" },
        ]

• Run ttypescript: ttsc

Webpack (with ts-loader)

const TsxToJs = require("@ts-docs/jsx-to-str");

options: {
      getCustomTransformers: program => {
        before: [TsxToJs(program, { customConfig: true })],
        after: [TsxToJs(program, { customConfig: true })],
      }
}

A taste

Original:

type User = { name: string, age: number };

function User(props: User) {
    return <div>name: {props.name}, age: {props.age}</div>;
}

export function UserList(props: { users: Array<User> }) {
    return <ul>
        {...props.users.map(user => <li><User {...user}></User></li>)}
    </ul>;
}

console.log(UserList({
    users: [
        { name: "Google", age: 72 },
        { name: "Yahoo", age: 19 },
        { name: "Hidden", age: 33 }
    ]
}));

Transpiled:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UserList = void 0;
function User(props) {
    return `<div>name: ${props.name}, age: ${props.age}</div>`;
}
function UserList(props) {
    return `<ul>\r\n        ${props.users.map(user => `<li>${User(user, "")}</li>`).join("")}\r\n    </ul>`;
}
exports.UserList = UserList;

Console log:

<ul>
        <li><div>name: Google, age: 72</div></li><li><div>name: Yahoo, age: 19</div></li><li><div>name: Hidden, age: 33</div></li>
</ul>