# domtagger
> The hyperHTML's template literal parser
Latest version **0.7.2** (published 2021-10-19) · ISC license · 0 weekly downloads
## Install
```sh
npm install domtagger
pnpm add domtagger
yarn add domtagger
bun add domtagger
```
## Health
**Score 28/100 (F)** — status: abandoned.
Positive: has types package; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.7.2 |
| Published | 2021-10-19 |
| First published | 2018-11-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | separate (@types/domtagger) |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 57.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 45 |
| Author | Andrea Giammarchi |
| Maintainers | webreflection |
## Links
- npm: https://www.npmjs.com/package/domtagger
- Repository: https://github.com/webreflection/domtagger
- Homepage: https://github.com/webreflection/domtagger#readme
- Issues: https://github.com/webreflection/domtagger/issues
- npm.io page: https://npm.io/package/domtagger
## Dependencies (7)
- [umap](https://npm.io/package/umap.md) ^1.0.2
- [@ungap/trim](https://npm.io/package/@ungap/trim.md) ^0.2.0
- [domconstants](https://npm.io/package/domconstants.md) ^0.1.2
- [domsanitizer](https://npm.io/package/domsanitizer.md) ^0.2.2
- [@ungap/weakmap](https://npm.io/package/@ungap/weakmap.md) ^0.2.1
- [@ungap/import-node](https://npm.io/package/@ungap/import-node.md) ^0.2.0
- [@ungap/create-content](https://npm.io/package/@ungap/create-content.md) ^0.2.0
## Recent versions
- 0.7.2 (latest) — 2021-10-19
- 0.7.1 — 2021-01-08
- 0.7.0 — 2020-06-27
- 0.6.2 — 2020-03-15
- 0.6.1 — 2019-12-08
- 0.6.0 — 2019-11-27
- 0.5.11 — 2019-11-23
- 0.5.10 — 2019-10-18
- 0.5.9 — 2019-09-04
- 0.5.8 — 2019-09-04
- 0.5.7 — 2019-09-04
- 0.5.6 — 2019-09-04
- 0.5.5 — 2019-08-29
- 0.5.4 — 2019-08-29
- 0.5.3 — 2019-07-24
- … 21 more at https://npm.io/package/domtagger/versions
## README
# domtagger
[](https://travis-ci.com/WebReflection/domtagger) [](https://coveralls.io/github/WebReflection/domtagger?branch=master) [](https://greenkeeper.io/) 
The [hyperHTML](https://github.com/WebReflection/hyperHTML#hyperhtml)'s template literal parser, used to handle all repeated updates per each attribute or node.
* CDN as global utility, via https://unpkg.com/domtagger
* ESM via `import domtagger from 'domtagger'`
* CJS via `const domtagger = require('domtagger')`
[Live test](https://webreflection.github.io/domtagger/test/)
### Example
The tagger accepts a configuration object with mandatory methods that should return a function to invoke per each update.
Optionally, the object could have a `type` property, as either `html` or `svg` string, and a `transform` method that must return some string as content, after receiving the markup that is going to be used.
```js
var html = domtagger({
// can be html or svg
type: 'html',
// how to handle attributes
// Note: this callback is simplified for example purpose.
// The node is the attribute owner
attribute: function (node, name, attribute) {
return function (value) {
var type = typeof value;
if (type === 'boolean' || type === 'function')
node[name] = value;
else if (value == null)
node.removeAttribute(name);
else
node.setAttribute(name, value);
}
},
// how to handle generic content
// Note: this callback is simplified for example purpose.
// The comment node is the hole placeholder
// use domdiff or other techniques to handle nodes
any: function (comment, childNodes) {
var parentNode = comment.parentNode;
return function (html) {
parentNode.innerHTML = html;
};
},
// how to handle cases where content
// can only be some text
// The node is one that can only have text
text: function (node) {
return function (textContent) {
node.textContent = textContent;
};
},
// OPTIONAL
// a man in the middle for the output
// The html string is what will be used to generate the content
// this is always invoked after sanitizing the template parts
transform: function (html) {
// it must return the eventually transformed html
return html;
},
// for adventurous 3rd parts libraries only:
// previously internally known as `sanitize`,
// it will run before transform and it must return a *string*
// that contains domconstants.UID/UIDC in the right place
// or the whole library will break
convert: function (template) {
// see domsanitizer logic
// https://github.com/WebReflection/domsanitizer/blob/master/esm/index.js
// or see a possible wrap solution/hint/workaround
// https://github.com/WebReflection/domtagger/issues/17#issuecomment-526151473
return template.join(domconstants.UIDC).replace(sani, tize);
}
});
document.body.appendChild(
render({
onclick: function (e) {
alert(e.currentTarget.outerHTML);
},
html: 'Hello domtagger!',
text: "isn't this cool?"
})
);
// render example
function render(model) {
return html`
`;
}
```
#### About devs-only comments
If you'd like to create a dev only comment that will be removed at runtime once parsed, you can either start the comment with a ghost emoji 👻 or use `/*` and `*/` right at the boundaries of the comment.
```html
```
---
_Source: https://npm.io/package/domtagger · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._