npm

@ts-docs/jsx-to-str
TypeScript icon, indicating that this package has built-in type declarations

0.1.11 • Public • Published

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>

Readme

Keywords

Package Sidebar

Install

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

Weekly Downloads

1

Version

0.1.11

License

MIT

Unpacked Size

71.3 kB

Total Files

14

Last publish

Collaborators

  • popai