babel-plugin-tsxt
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.1 • Public • Published

    TSXT

    TSXT is template engine for strongly typed JSX templates using TypeScript. The main use case is code generatation.

    Installation

    npm

    $ npm i babel-plugin-tsxt @babel/cli @babel/core @babel/preset-typescript @babel/preset-env

    yarn

    $ yarn add babel-plugin-tsxt @babel/cli @babel/core @babel/preset-typescript @babel/preset-env

    Then you can use it as simple babel-plugin.

    How It Works

    TSXT syntax is fully compatible with JSX syntax, that means you can use eslint and prettier JSX plugins to increase the quality of your code. Also it means that you can see all type errors in template.

    TSXT is a babel plugin that finds and transforms JSX nodes to string literals concatenation expressions.

    For example:

    export default (ctx: string) => <templ>{`Hello, ${ctx}`}</templ>;

    Compiles to:

    function _default(ctx) {
      return "" + ("" + `Hello, ${ctx}` + "\n");
    }

    You can find more examples in tests folder

    Usage

    Babel config should contain @babel/preset-typescript preset for typescript support and @babel/preset-env if you want to run it in different environments. Also you can use webpack to run templates in browser.

    Example babel.config.json:

    {
      "presets": [
        ["@babel/preset-env", { "targets": { "node": "current" } }],
        "@babel/preset-typescript"
      ],
      "plugins": [
        [
          "babel-plugin-tsxt",
          {
            "indentType": "space",
            "indentSize": 4
          }
        ]
      ]
    }

    Then you can compile your tsx templates, for example with command:

    $ babel --config-file ./templates/babel.config.json --extensions .tsx,.ts --out-dir ./templates/dist ./templates

    Tags

    TSXT provides three different tags (templ, indent, ln)

    templ - main tag that tells TSXT to concatinate all children JSXExpressionContainers to one string concatination expression.

    indent - simple tag that tells TSXT to increase indent for all nested JSXExpressionContainers. indent as well as templ transforms all children to one expression.

    ln - another simple tag that tells TSXT to insert JSXExpressionContainer with string literal that contains \n.

    Install

    npm i babel-plugin-tsxt

    DownloadsWeekly Downloads

    2

    Version

    1.5.1

    License

    MIT

    Unpacked Size

    67.9 kB

    Total Files

    83

    Last publish

    Collaborators

    • iamguid