JSX2TAG
Social Media Photo by Andre Taissin on Unsplash
Enable JSX for Template Literal Tags based projects.
Features
- a
createPragma(tag, config?)utility to have aReact.createElementlike function to use as pragma - a
bindutility to mimic.prop=${value}in the template - automatic
onEventNameto@eventNameconversion - automatic
?prop=${value}conversion in the template, when the property is boolean
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
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.
