babel-plugin-transform-jsx-to-tt

babel-plugin-transform-jsx-to-tt

This is a babel plugin to converts JSX into Tagged Templates

That can work with hyperHTML, lit-html or some other libraries to rendering templates to DOM.

• Examples
• Installation
• Usage
• Options

---

Examples

Attributes in lit-html

In

const baz = (
  <div>
    <li attr1="A">First item</li>
    <li attr2="B">Second item</li>
    <li attr3={"C"}>Third item</li>
    <li class="main-colour">Third item</li>
    <li hidden={true}>Third item</li>
    <li onclick={() => console.log('test')}>Third item</li>
    <button color="blue" shadowSize={2} shadowSizeSum={2 + 1 + 1}>
      <small id={Date.now()}>Click Me</small>
    </button>
    <my-comp message={'hello world'}></my-comp>
    <my-text-box autocomplete={true} />
  </div>
);

Out

const baz = html`<div>
  <li attr1="A">First item</li>
  <li attr2="B">Second item</li>
  <li .attr3=${"C"}>Third item</li>
  <li class="main-colour">Third item</li>
  <li ?hidden=${true}>Third item</li>
  <li @click=${() => console.log('test')}>Third item</li>
  <button color="blue" .shadowSize=${2} .shadowSizeSum=${2 + 1 + 1}>
    <small id=${Date.now()}>Click Me</small>
  </button>
  <my-comp .message=${'hello world'}></my-comp>
  <my-text-box .autocomplete=${true}></my-text-box>
</div>`;

Options

{
  "tag": "html",
  "attributes": [
    {
      "preset": "lit-html"
    }
  ]
}

Composition

In

Bar.jsx

export class Bar {
  static define = (tag) => (properties) => AbstractElement;
  render() {
    return <p>Hello, World!</p>;
  }
}

index.jsx

import { Bar } from './Bar';

const BarElement = Bar.define('bar-bar');

const define = (tag) => {};

const FooElement = define('foo-foo');

const baz = (
  <div>
    <p>Hello, World!</p>
    <BarElement></BarElement>
    <FooElement></FooElement>
    <p>Hello, World!</p>
  </div>
);

Out

import { Bar } from './Bar';
const BarElement = Bar.define('bar-bar');

const define = (tag) => {};

const FooElement = define('foo-foo');
const baz = html`<div>
  <p>Hello, World!</p>
  <bar-bar></bar-bar>
  <foo-foo></foo-foo>
  <p>Hello, World!</p>
</div>`;

Class component

In

import { AbstractElement } from 'abstract-element';
import litRender from 'abstract-element/render/lit';

export class Loader extends AbstractElement {
  static define = (tag) => (properties) => AbstractElement;
  loading;

  constructor() {
    super(litRender, true);
  }

  render() {
    return this.loading ? <span>Loading 3 seconds, please...</span> : <span>That's a loaded content!</span>;
  }
}

const ElementLoader = Loader.define('a-a');

export class Converter extends AbstractElement {
  loading = true;

  constructor() {
    super(litRender, true);

    setInterval(() => {
      this.loading = !this.loading;
    }, 3000);
  }

  render() {
    return (
      <div>
        ⌛<ElementLoader loading={this.loading}></ElementLoader>
      </div>
    );
  }
}

Out

import { html } from 'lit-html';
import { AbstractElement } from 'abstract-element';
import litRender from 'abstract-element/render/lit';
export class Loader extends AbstractElement {
  static define = (tag) => (properties) => AbstractElement;
  loading;

  constructor() {
    super(litRender, true);
  }

  render() {
    return this.loading ? html`<span>Loading 3 seconds, please...</span>` : html`<span>That's a loaded content!</span>`;
  }
}
const ElementLoader = Loader.define('a-a');
export class Converter extends AbstractElement {
  loading = true;

  constructor() {
    super(litRender, true);
    setInterval(() => {
      this.loading = !this.loading;
    }, 3000);
  }

  render() {
    return html`<div>⌛<a-a .loading=${this.loading}></a-a></div>`;
  }
}

Options

{
  "tag": "html",
  "import": {
    "module": "lit-html",
    "export": "html"
  },
  "attributes": [
    {
      "preset": "lit-html"
    }
  ]
}

Most examples in abstract-element demo.

---

Installation

$ npm install babel-plugin-transform-jsx-to-tt

---

Usage

Via .babelrc.json (Recommended)

.babelrc.json

{
  "plugins": ["babel-plugin-transform-jsx-to-tt"]
}

Via CLI

$ babel --plugins babel-plugin-transform-jsx-to-tt script.js

Via Node API

require('babel-core').transform('code', {
  plugins: ['babel-plugin-transform-jsx-to-tt'],
});

---

Options

Option	Type	Default	Description
tag	String	"html"	The tagged function name.
define	String		A function name for define Custom Element. The first argument of this function has to be a Custom Element name - String value.
import	{ module: string; export: string }		Add import for a tagged function.
attributes	Array<{prefix: string; attributes: string[]; replace?: string;} | { preset?: 'lit-html' | 'global' }>		Mapping to convert JSX attributes.
quotedAttributes	Boolean	false	A property to force all attributes to be wrapped in quotes.

These options could be passed to the Babel plugin using a nested array. A complex config example:

"plugins": [
  ["babel-plugin-transform-jsx-to-htm", {
    "tag": "html",
    "define": "defineElement",
    "import": {
      "module": "some-html-render",
      "export": "html"
    },
    "attributes": [
      {
        "prefix": "",
        "attributes": [
          "on.*"
        ]
      },
      {
        "preset": "global"
      },
      {
        "prefix": "",
        "attributes": [
          "hidden",
          "draggable",
          "spellcheck"
        ]
      },
      {
        "prefix": ".",
        "attributes": [
          ".*"
        ]
      }
    ]
  }]
]

Changelog

[0.5.0] - 2023-10-06

• Property to force all attributes to be wrapped in quotes - quotedAttributes.