/** @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>

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

/** @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'} />);

/** @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'} />);

/** @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'} />);