Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/superlucky84/tmpl-htm
Generate HTML elements using HTM ("Hyperscript Tagged Markup") or JSX.
https://github.com/superlucky84/tmpl-htm
fragment generator htm jsx template tmpl tmpl-htm tmpl-jsx
Last synced: about 1 month ago
JSON representation
Generate HTML elements using HTM ("Hyperscript Tagged Markup") or JSX.
- Host: GitHub
- URL: https://github.com/superlucky84/tmpl-htm
- Owner: superlucky84
- License: mit
- Created: 2023-07-04T13:20:42.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-14T01:53:09.000Z (over 1 year ago)
- Last Synced: 2024-12-02T06:38:16.305Z (about 2 months ago)
- Topics: fragment, generator, htm, jsx, template, tmpl, tmpl-htm, tmpl-jsx
- Language: TypeScript
- Homepage: https://github.com/superlucky84/tmpl-htm
- Size: 179 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tmpl-htm
Generate HTML elements using HTM ("Hyperscript Tagged Markup") or JSX.
`(4.20 KiB / gzip: 1.90 KiB)`
## 🚩 Table of Contents
- [How To Install](#how-to-install)
- [Use NPM](#use-npm)
- [Use CDN](#or-use-cdn)
- [With HTM](#with-htm)
- [With JSX](#with-jsx)
- [Examples](#examples)
- [With ESM](#with-esm)
- [With UMD](#with-umd)
- [Related Projects](#related-projects)
- [Develop Guide](#develop-guide)
- [Test](#test)
## How To Install
#### Use NPM
```bash
pnpm add tmpl-htm
```
#### Or Use CDN
* UMD : https://cdn.jsdelivr.net/npm/[email protected]/dist/tmplHtm.umd.js
#### With HTM
```js
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';`
```js
// Setting JSX - Babel
...
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
"pragma": "h",
"pragmaFrag": "Fragment",
}]
]
}
...
```
```js
// Setting JSX - Typescript < 4.1.1
...
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",
//...
}
}
...
```
```js
// Setting JSX - Typescript >= 4.1.1
...
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "tmpl-htm",
//...
}
}
...
```
```js
// 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
```js
import { Fragment, tmplTag, appendAll } from 'tmpl-htm';
const Component = (props) => {
return tmplTag`
<${Fragment}>
increase
/>
`;
});
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
```html
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,
```
## Related Projects
- [htm](https://www.npmjs.com/package/htm) - making **H**yperscript **T**agged **M**arkup possible
## Develop Guide
It's open source, so you can develop and contribute together.
### pnpm install (this project was created using pnpm.)
```bash
npm install -g pnpm
```
### project install
```bash
git clone https://github.com/superlucky84/tmpl-htm.git
cd tmpl-htm
pnpm install
```
### project build
```bash
pnpm build
```
### Running the development environment
```bash
pnpm dev
```
## Test
```bash
// pnpm install
pnpm test
```