https://github.com/hugodf/render-tmpl
Use `<template>` as a rendering engine, < 100 lines of code.
https://github.com/hugodf/render-tmpl
Last synced: 4 months ago
JSON representation
Use `<template>` as a rendering engine, < 100 lines of code.
- Host: GitHub
- URL: https://github.com/hugodf/render-tmpl
- Owner: HugoDF
- License: mit
- Created: 2024-10-20T22:33:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-20T23:08:54.000Z (over 1 year ago)
- Last Synced: 2025-09-26T04:33:11.907Z (9 months ago)
- Language: JavaScript
- Homepage: https://npm.im/render-tmpl
- Size: 12.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# `render-tmpl`
Use `` as a rendering engine, [< 100 lines of code](./render-tmpl.js).
- Alpine/Vue-like directive notation `data-s-{text,attr,show}` for use with `` elements.
- No reactivity, pairs well with web components/custom elements.
- copy-paste onto your page ([< 100 lines of code](./render-tmpl.js) or ESM import).
## Quickstart
```html
![]()
{ "imports": { "render-tmpl": "https://esm.sh/render-tmpl" } }
import { renderTmpl } from "render-tmpl";
document.appendChild(
renderTmpl(document.querySelector("[data-s-tmpl=tmpl]"), {
greeting: "hello",
url: "my-url",
}),
);
```
## Directives
### `data-s-tmpl`
`data-s-tmpl` is a convention to denote templates that will be used with `render-tmpl`.
Usage: ``.
### `data-s-show`
`data-s-show` will set `display: none;` if the expression is false and will unset `display` if it's true.
Usage: `
`
Use of negation is allowed with `!`, eg. `
`, **note**: any arbitrary number of `!` works, but other boolean logic (`&&`, `||`, `()`) will **not work**, this is because the value is not `eval`-ed as JavaScript.
### `data-s-text`
Set the `textContent` of the node to the value of the referenced variable.
Usage: `
`
### `data-s-attr`
Set attributes on the element based on provided key-value `attr1=value1,attr2=value2` pairs.
Aliases: `data-s-attrs`
Usage: `![]()
` sets `src` and `alt` attributes to the values contained in `url` and `greeting` variables.
### `data-s-slot`
Used as the element into which sub-templates are injected.
Usage:
```html
No Results
import { renderTmpl } from "render-tmpl";
document.appendChild(
renderTmpl(document.querySelector("[data-s-tmpl=tmpl]"), {}, (tmpl) =>
renderTmpl(tmpl.querySelector("[data-s-tmpl=no-results]"), {
requestId: "1234",
}),
),
);
```
## Requirements
- Node 20
- npm v8+
## Setup
1. Clone the repository
2. Run `npm install` installs all required dependencies.
## npm scripts
- `npm test` will run tests using the [Node.js test runner](https://nodejs.org/api/test.html#running-tests-from-the-command-line) and the `node:test` module.
- `npm run format` will run prettier on all the examples files (and tests).
## LICENSE
Code is licensed under the [MIT License](./LICENSE).