Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/uzitech/emel
Create DOM elements with Emmet
https://github.com/uzitech/emel
Last synced: 19 days ago
JSON representation
Create DOM elements with Emmet
- Host: GitHub
- URL: https://github.com/uzitech/emel
- Owner: UziTech
- License: mit
- Created: 2019-02-02T05:52:06.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-12T14:28:32.000Z (7 months ago)
- Last Synced: 2024-04-14T09:45:20.201Z (7 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/emel
- Size: 3.06 MB
- Stars: 6
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/UziTech/emel/actions)
# emel
**em(met) el(ement)**
Create DOM elements with Emmet
## Installation
```sh
npm install emel
```
## Usage
You can use any [emmet abbreviation](https://docs.emmet.io/abbreviations/syntax/).
Options:
- [`doc`](#doc): `Document`
- [`returnSingleChild`](#returnsinglechild): `boolean`
- [`multiline`](#multiline): `boolean`
- [`placeholders`](#placeholders): `mixed`
```js
import emel from "emel";
// or const emel = require("emel"); // for cjs
// or const emel = global.emel; // for umd
const emmetString = "table>thead>tr>th{col1}+th{col2}^^tbody>(tr>td[colspan=2]{2 col width})+tr>td.col${1 col width}*2";
const options = {};
const element = emel(emmetString, options);
/**
* TABLE DOM element:
*
*
*
* col1
* col2
*
*
*
*
* 2 col width
*
*
* 1 col width
* 1 col width
*
*
*
*/
```
### Setting default options
You can set the default options by creating a new instance of emel and pass the default options.
```js
import Emel from "emel";
// or const Emel = require("emel"); // for cjs
// or const Emel = global.emel; // for umd
const { emel } = new Emel({placeholders: [1, 2]});
const element = emel("div{?}+div{?}");
/**
*
1
* 2
*/
```
### Doc
Default to browser `document`.
For [Angular SSR](https://angular.io/guide/universal), use `injector.get(DOCUMENT)`
```ts
import { DOCUMENT } from '@angular/common';
emel(`div>p*3`, {
doc: injector.get(DOCUMENT)
});
```
### ReturnSingleChild
By default emel will always return the elements as children of a document fragment.
If you set the `returnSingleChild` option to `true` it will only wrap the elements in a document fragment if there are multiple top level elements.
### Multiline
By default space characters are not allowed outside of text nodes.
If you want to write readable strings with multiple lines you can use the `multiline` option to remove newline characters and surrounding spaces.
```js
emel(`
table>
thead>
tr>
th{col1}+
th{col2}^^
tbody>
tr>
td[colspan=2]{2 col width}^
tr>
td.col\${1 col width}*2
`, {
multiline: true
});
/**
*
*
*
* col1
* col2
*
*
*
*
* 2 col width
*
*
* 1 col width
* 1 col width
*
*
*
*/
```
***Note***: The `multiline` option will remove newline characters and surrounding spaces from text nodes as well (which might not be expected).
```js
emel(`
div{
line 1
line 2
}
`, {
multiline: true
})
//
line 1line 2
```
### Placeholders
You can use placeholders to insert dynamic content into any string value.
Replacements can be a string to replace all placeholders with the same value:
```js
emel("?#?.?[?=?]{?}", {
placeholders: "test"
});
// test
```
Or an array to replace each placeholder with different value:
```js
emel("?#?.?[?=?]{?}", {
placeholders: ["tag", "id", "class", "attrName", "attrValue", "text"]
});
// text
```
***Note***: Placeholders are replaced after parsing so values do not need to be escaped. This comes with a few unintuitive cases.
- Text placeholders (`{?}`) are replaced after attributes:
```js
// INCORRECT:
emel("?{?}#?", {
placeholders: ["tag", "text", "id"]
});
// id
// CORRECT:
emel("?{?}#?", {
placeholders: ["tag", "id", "text"]
});
// text
```
- Placeholders on multiplied elements are not copied to every element:
```js
// INCORRECT:
emel("div{?}*2+span{?}", {
placeholders: ["div", "span"]
});
//
divspan?
// CORRECT:
emel("div{?}*2+span{?}", {
placeholders: ["div", "div", "span"]
});
//
divdivspan
```
Placeholders can also be an object with keys that refer to any value:
```js
emel("this#is.replaced[with=placeholders]{placeholders}", {
placeholders: {
this: "tag",
is: "id",
replaced: "class",
with: "attr",
placeholders: ["value", "text"],
}
});
// text
```
Placeholder keys must match the entire value to be replaced:
```js
emel("#this.is[not='replaced with placholders']", {
placeholders: {
this: "id",
is: "class",
replaced: ["attr"],
with: ["value"],
placeholders: "text",
}
});
//
```
Text placeholders may also be replaced by a [DOM Node](https://developer.mozilla.org/en-US/docs/Web/API/Node):
```js
const span = emel("span{text}")
emel("div{?}", {
placeholders: span
});
//
text
```
Attribute name placeholders that equal `false`, `null`, or `undefined` will not be set.
```js
emel("div[attr=val]", {
placeholders: {
attr: undefined
}
});
//
emel("div[attr=val]", {
placeholders: {
attr: null
}
});
//
emel("div[attr.]", {
placeholders: {
attr: false
}
});
//
```
Attribute name placeholders that equal `true` will not be changed.
```js
emel("input[type='checkbox' checked.]", {
placeholders: {
checked: false
}
});
//
emel("input[type='checkbox' checked.]", {
placeholders: {
checked: true
}
});
//
```