https://github.com/timluq/emmet-elem
Lightweight emmet expansion to DOM
https://github.com/timluq/emmet-elem
emmet
Last synced: 12 days ago
JSON representation
Lightweight emmet expansion to DOM
- Host: GitHub
- URL: https://github.com/timluq/emmet-elem
- Owner: TimLuq
- License: lgpl-3.0
- Created: 2022-03-12T11:12:31.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-04-03T08:19:36.000Z (about 3 years ago)
- Last Synced: 2025-10-28T03:24:27.983Z (8 months ago)
- Topics: emmet
- Language: TypeScript
- Homepage:
- Size: 215 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# emmet-elem
A small standalone library (~2k gzipped) containing the logic behind parsing Emmet syntax and building a caching DOM tree.
The provided functions are `emmetSlots(strings, options = undefined)`, `slotted(template, ...nodeData)`, and `emmet(template, ...nodeData)`.
For the `slotted` and `emmet` functions to be compatible with template literal syntax, those are unable to contain options.
As the `options` object is used to specify the document and cache to use for creating `Node`s, there exists an extra function with global side-effects `setDefDoc(document)` that controls which document will be used by default.
## `emmet` function
The `emmet` function will apply any parameters before returning an `Element` or `DocumentFragment` node expanded from the string.
Example 1.1:
```js
const root = emmet`(a#a>(b.clss+c)*3)+d+e>${4 * 2}`;
assert(() => serializeToString(root) == [
``,
``,
``,
``,
`8`
].join(""));
```
Example 1.2:
```js
const root = emmet`(a#a>(b.clss>${
(paramId, idx, max) => paramId + "<" + idx + "/" + max + ">"
}*2^c>${
(paramId, idx, max) => paramId + "<" + idx + "/" + max + ">"
})*3)+d+e>${4 * 1}`;
assert(() => serializeToString(root) == [
``,
`0<0/6>0<1/6>1<0/3>`,
`0<2/6>0<3/6>1<1/3>`,
`0<4/6>0<5/6>1<2/3>`,
`4`
].join(""));
```
## `slotted` function
The `slotted` function will insert the special node `emmet-slot` at each parameter location and fill those with the given value before returning an `Element` or `DocumentFragment` node wrapped together with a list of slots.
Example 2.1:
```js
const { root, slots } = slotted`(a#a>(b.clss+c)*3)+d+e>${4 * 1}`;
slots[0].textNode = "8";
assert(() => serializeToString(root) == [
``,
`0<0/6>0<1/6>1<0/3>`,
`0<2/6>0<3/6>1<1/3>`,
`0<4/6>0<5/6>1<2/3>`,
`8`
].join(""));
```