https://github.com/71/parse-html-parts
Parse HTML parts in order to make literal templates.
https://github.com/71/parse-html-parts
Last synced: about 2 months ago
JSON representation
Parse HTML parts in order to make literal templates.
- Host: GitHub
- URL: https://github.com/71/parse-html-parts
- Owner: 71
- License: isc
- Created: 2020-12-27T22:30:33.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-27T23:37:54.000Z (over 5 years ago)
- Last Synced: 2025-12-26T16:37:02.548Z (6 months ago)
- Language: TypeScript
- Size: 9.77 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `parse-html-parts`
This project provides utilities for parsing HTML-like JavaScript
[template literals](
https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals),
similarly to [htl](https://github.com/observablehq/htl)
and [lit-html](https://github.com/Polymer/lit-html).
Unlike those libraries, though, the result is not directly usable in the DOM.
Instead, `LiteralPart`s are returned, which can be inspected to then create
your own renderers.
## Example
First, we parse the template literal into `LiteralPart`s. Each resulting
`LiteralPart` corresponds to a passed expression.
```ts
const parts = parseHtmlLiteral`
hey ${3}
`;
```
Tests
```ts
expect(parts.length).toBe(4);
const [part0, part1, part2, part3] = parts;
expect(part0.type).toBe(LiteralPart.Kind.Attribute);
expect(part1.type).toBe(LiteralPart.Kind.Attribute);
expect(part2.type).toBe(LiteralPart.Kind.Data);
expect(part3.type).toBe(LiteralPart.Kind.Node);
expect(part0.attributeName).toBe("style");
expect(part0.valueParts).toEqual(["", ":", ""]);
expect(part0.index).toBe(0);
expect(part1.attributeName).toBe("style");
expect(part1.valueParts).toBe(part0.valueParts);
expect(part1.index).toBe(1);
```
Then, we can render the parts into a valid HTML string.
```ts
const strings = (strings => strings)`
hey ${3}
`,
htmlString = renderToHtml(strings, parts),
root = document.createRange().createContextualFragment(htmlString);
```
And once it's rendered, we can find its marked nodes:
```ts
const finder = new LiteralNodesFinder(parts),
nodes = finder.find(root);
```
Tests
```ts
const p = root.children[0];
expect(nodes.length).toBe(4);
expect(nodes[0].ownerElement).toBe(p);
expect(nodes[1].ownerElement).toBe(p);
expect(nodes[2].ownerElement).toBe(p);
expect(nodes[3]).toBe(p.childNodes[1]);
```
Please see the [html.test.ts](html.test.ts) file for an example `html` function
that renders directly to a `DocumentFragment`.