import { tmplTag } from 'tmpl-htm';
const element = tmplTag`<${Component} />`;

// Setting JSX - Babel
...
{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "pragma": "h",
      "pragmaFrag": "Fragment",
    }]
  ]
}
...

// Setting JSX - Typescript < 4.1.1

...
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    //...
  }
}
...

// Setting JSX - Typescript >= 4.1.1

...
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "tmpl-htm",
    //...
  }
}
...

// Setting JSX - If you use TypeScript within a Babel toolchain

...
// typescript config
{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    //...
  }
}

// babel config
{
  presets: [
    "@babel/env",
    ["@babel/typescript", { jsxPragma: "h" }],
  ],
  plugins: [
    ["@babel/transform-react-jsx", { pragma: "h" }]
  ],
}
...

import { Fragment, tmplTag, appendAll } from 'tmpl-htm';

const Component = (props) => {
  return tmplTag`
    <${Fragment}>
      <li>count: ${props.count}</li>
      <button>increase</button>
    <//>
  `;
});

document.body.appendChild(tmplTag`<${Component} a=${7} />`);
appendAll(tmplTag`<${Component} a=${7} />`, document.querySelectorAll('.target'));
// append, appendAll, prepend, prependAll, replace, replaceAll, insertBefore, insertBeforeAll,