webreflection / jsx2tag

Enable JSX for Template Literal Tags based projects.

JSX2TAG

^{Social Media Photo by Andre Taissin on Unsplash}

Enable JSX for Template Literal Tags based projects.

• µhtml live demo
• µland live demo
• µbe live demo
• lit-html live demo

Features

• a createPragma(tag, config?) utility to have a React.createElement like function to use as pragma
• a bind utility to mimic .prop=${value} in the template
• automatic onEventName to @eventName conversion
• automatic ?prop=${value} conversion in the template, when the property is boolean
• optionally boost performance via @ungap/plugin-transform-static-jsx, able to create best template literals tags' arguments

Example

See test/index.jsx to see all features applied.

/** @jsx h *//** @jsxFrag h */

// your template literal library of choice
const {render, html} = require('uhtml-ssr');

// this module utils
const {bind, createPragma} = require('jsx2tag');

// create your `h` / pragma function
const h = createPragma(html);
// if your env works already with `React.createElement`, use:
// const React = {createElement: createPragma(html)};

// any component (passed as template value)
const Bold = ({children}) => html`<strong>${children}</strong>`;

// any generic value
const test = 123;

// test it!
const myDocument = (
  <p class="what" test={bind(test)} onClick={console.log}>
    <Bold>Hello</Bold>, <input type="password" disabled={false} />
    <span id="greetings">Hello</span>
  </p>
);

render(String, myDocument);
// <p class="what" test="123"><strong>Hello</strong>, <input type="password"><span id="greetings">Hello</span></p>

How To Transpile JSX

Specify pragma and pragmaFrag or use this syntax on top:

/** @jsx h */
/** @jsxFrag h */

Otherwise, follow @Robbb_J post about minimal requirements and you'll be good.

A huge thanks to him for writing such simple, step by step, guide.

How to render keyed components

The config object accepts a keyed(tagName, props) callback that can return a keyed version of the component.

/** @jsx h *//** @jsxFrag h */
import {createPragma} from '//unpkg.com/jsx2tag?module';
import {render, html} from '//unpkg.com/uhtml?module';

// used as weakMap key for global keyed references
const refs = {};
const h = createPragma(html, {
  // invoked when a key={value} is found in the node
  // to render regular elements (or µbe classes)
  keyed(tagName, {key}) {
    const ref = refs[tagName] || (refs[tagName] = {});
    return html.for(ref, key);
  }
});

render(document.body, <div key={'unique-id'} />);

Alternatively, each library might have its own way, but the gist of this feature, whenever available, is that the key property is all we're after:

/** @jsx h *//** @jsxFrag h */

import {createPragma} from '//unpkg.com/jsx2tag?module';
import {render, html} from '//unpkg.com/uhtml?module';

const h = createPragma(html);

const App = ({name, key}) => html.for(App, key)`Hello ${name} 👋`;

render(document.body, <App name="JSX" key={'specific-key'} />);

Conditional keyed components are also possible.

Here another uhtml example:

/** @jsx h *//** @jsxFrag h */

import {createPragma} from '//unpkg.com/jsx2tag?module';
import {render, html} from '//unpkg.com/uhtml?module';

const h = createPragma(html);

const App = ({name, key}) => {
  const tag = key ? html.for(App, key) : html;
  return tag`Hello ${name} 👋`;
};

render(document.body, <App name="JSX" key={'specific-key'} />);

In few words, there's literally nothing stopping template literal tags libraries to be keyed compatible.

jsx2tag's Issues

Optimize hoisted static content

Based on this tweet, and its code example, "truly constant elements" are passed right away as children.

uhtml and friends have this Hole class concept, that would make it kinda easier to aggregate children as arrray, but there's no way to pass this check around and help other cases too, and currently, the logic doesn't aggregate "holes" in an efficient way, as empty text nodes are inserted in between.

This might not even be a real-world performance issue, but it's something to think about, either here or in the specialized transformer, if even possible with ease.

P.S. right now everything looks fine and working as expected

Issue with text nodes

issue with text nodes:
WebReflection/uhtml#75

SVG not rendering

https://codepen.io/kethan-the-selector/pen/RwxpLgO?editors=0011