GitHub - superlucky84/tmpl-htm: Generate HTML elements using HTM ("Hyperscript Tagged Markup") or JSX.

2 min read Original article ↗

Generate HTML elements using HTM ("Hyperscript Tagged Markup") or JSX.

(4.20 KiB / gzip: 1.90 KiB)

🚩 Table of Contents

How To Install

Use NPM

Or Use CDN

With HTM

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

With JSX

  • If you don't want to use 'tmplTag', you can use 'JSX' as an alternative.

import { h } from 'tmpl-htm';

// 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" }]
  ],
}
...

Examples

With ESM

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,

With UMD

<script src="https://cdn.jsdelivr.net/npm/tmpl-htm@1.0.0/dist/tmplHtm.umd.js"></script>

<div class="target"></div>

<script>
const { Fragment, tmplTag, appendAll } = tmplHtm;

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,
</script>

Related Projects

  • htm - making Hyperscript Tagged Markup possible

Develop Guide

It's open source, so you can develop and contribute together.

pnpm install (this project was created using pnpm.)

project install

git clone https://github.com/superlucky84/tmpl-htm.git

cd tmpl-htm

pnpm install

project build

Running the development environment

Test

// pnpm install
pnpm test