https://github.com/beenotung/html-template-lite
Simple template with html code escape
https://github.com/beenotung/html-template-lite
escape html sanitize template
Last synced: 4 months ago
JSON representation
Simple template with html code escape
- Host: GitHub
- URL: https://github.com/beenotung/html-template-lite
- Owner: beenotung
- License: bsd-2-clause
- Created: 2021-11-30T15:03:41.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-07T14:23:37.000Z (over 2 years ago)
- Last Synced: 2025-01-01T05:42:00.546Z (over 1 year ago)
- Topics: escape, html, sanitize, template
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/html-template-lite
- Size: 20.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# html-template-lite
Simple template with html code escape for both node.js and browser.
[](https://www.npmjs.com/package/html-template-lite)
Loops and conditions are intentionally not handled by this library. They can be handled natively with javascript expression _outside_ the template, e.g. in component's code.
## Features
- [x] Extremely simple, the [source code](./src/index.ts) is below 1KB
- [x] Cross-Platform, works in browser and node.js
- [x] Secure, prevent XSS attack (malicious script injection) with HTML escape characters
- [x] 100% test coverage with ts-mocha
## Installation
### Install for npm projects:
```bash
pnpm install html-template-lite
```
or
```bash
yarn add html-template-lite
```
or
```bash
npm install html-template-lite
```
### Direct usage from browser (via script over CDN)
```html
username: {username}
version: v{version}
let main = document.querySelector('main.demo')
let template = document.querySelector('template.demo')
main.textContent = 'loading html-template-lite ...'
import { render } from 'https://cdn.jsdelivr.net/npm/html-template-lite@1/dist/esm/index.js'
main.innerHTML = render(template.innerHTML, {
username: '<b>o</b>',
version: '1.2.3',
})
```
Details see [example/demo.html](./example/demo.html)
## Typescript Signature
```typescript
export function render(
template: string,
data: object[] | object,
separator: string = '',
): string
```
## Usage Guideline
The `render()` function takes a html `template` in string, and a `data`` object. It substitutes the object fields into the template and return composed html fragment in string.
If the `data` is an array of object, it will be mapped over the `render()` function again and joined with the given `separator`.
If the separator is not specified, each rendered html fragment will be joined without extra characters.
### Placeholder Syntax in `template`
- use `{field}` to sanitize and substitute literal (act like setting `element.textContent`)
- use `[field]` to substitute trusted html fragment (act like setting `element.innerHTML`)
## Usage Example
### Substitute Context Object
```typescript
import { render } from 'html-template-lite'
let html = render(
`
Name: {name}
Rank: {rank}
`,
{ name: "o's", rank: 42 },
)
console.log(html)
/*
Name: <b>o's</b>
Rank: 42
*/
```
Details see [example/demo.ts](./example/demo.ts)
### Substitute List of Objects
```typescript
import { render } from 'html-template-lite'
let listTemplate = `
[items]
let itemTemplate = `
let items = [
{ url: 'https://github.com', title: 'Github' },
{ url: 'https://gitlab.com', title: 'Gitlab' },
{ url: 'https://bitbucket.org', title: 'Bitbucket' },
]
let html = render(listTemplate, {
items: render(itemTemplate, items, '\n'),
})
console.log(html)
/*
*/
```
Details see [example/demo.ts](./example/demo.ts)
## License
This project is licensed with [BSD-2-Clause](./LICENSE)
This is free, libre, and open-source software. It comes down to four essential freedoms [[ref]](https://seirdy.one/2021/01/27/whatsapp-and-the-domestication-of-users.html#fnref:2):
- The freedom to run the program as you wish, for any purpose
- The freedom to study how the program works, and change it so it does your computing as you wish
- The freedom to redistribute copies so you can help others
- The freedom to distribute copies of your modified versions to others