https://github.com/hugodf/html-esc
JavaScript Template Literal Tag that converts to HTML-escaped content. Eg. html`<div>${myVar}</div>`
https://github.com/hugodf/html-esc
javascript-template-literals tagged-template-literal web-components
Last synced: about 2 months ago
JSON representation
JavaScript Template Literal Tag that converts to HTML-escaped content. Eg. html`<div>${myVar}</div>`
- Host: GitHub
- URL: https://github.com/hugodf/html-esc
- Owner: HugoDF
- License: mit
- Created: 2024-10-20T21:13:08.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-10-21T20:36:18.000Z (6 months ago)
- Last Synced: 2024-10-22T10:28:18.788Z (6 months ago)
- Topics: javascript-template-literals, tagged-template-literal, web-components
- Language: JavaScript
- Homepage: https://npm.im/html-esc
- Size: 22.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# `html-esc`
JavaScript Template Literal Tag that converts to HTML-escaped content. Eg. `` html`
${myVar}` ``.
Barebones (and tiny, [<50 lines of code](./html-esc.js)) alternative to [`lit-html`](https://www.npmjs.com/package/lit-html) and [`htl`](https://github.com/observablehq/htl), ideal for use in web components or to template in Vanilla/no build JavaScript.
It's ready for use straight in the browser via CDN (or copy-pasting into your project).
```html
{ "imports": { "html-esc": "https://esm.sh/html-esc" } }
import { html } from "html-esc";
const message = "<strong>strong but will get escaped</strong>";
document.body.innerHTML = html`<div>I'm ${message}</div>`;
```
Or via npm (assuming you want to use a bundler).
```sh
npm i html-esc
```
## Why is this necessary?
`htl` has a great section on this: [htl - why not concatenate?](https://www.npmjs.com/package/htl#why-not-concatenate).
In short: values containing certain characters are not safe to be interpolated for cross-site scripting ("XSS") reasons and content display reasons (eg. `&` having special meaning in HTML).
## Credit
Credit to [developit/vhtml](https://github.com/developit/vhtml) and [dodoas/stringjsx](https://github.com/dodoas/stringjsx) for:
- HTML entity escape function
- the approach to tracking "already seen sanitized strings", this allows for avoiding "double escaping" ie. this renders as expected: ``html`
${html`html-tagged`}` ``
## 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).