Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/terkelg/facon
Tiny utility (365B) to create DOM elements with manner.
https://github.com/terkelg/facon
dom html template-literals utility view
Last synced: 3 days ago
JSON representation
Tiny utility (365B) to create DOM elements with manner.
- Host: GitHub
- URL: https://github.com/terkelg/facon
- Owner: terkelg
- License: mit
- Created: 2018-11-03T11:24:22.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-16T02:48:03.000Z (2 months ago)
- Last Synced: 2024-12-14T23:04:23.262Z (10 days ago)
- Topics: dom, html, template-literals, utility, view
- Language: JavaScript
- Homepage:
- Size: 101 KB
- Stars: 227
- Watchers: 8
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
Tiny utility (365B) to create DOM elements with manner.
Manually creating DOM nested elements can be very troublesome and verbose.
Facon is a tiny utility that makes it easy to create nested DOM elements using template literals and extract references.
There's no magic nor restrictive template logic. All you get are DOM references so that you can do whatever you like and take full advantage of the powerful native DOM API.
> **TLDR**: Facon fixes the tiring process of creating and assembling nested DOM elements or `.innerHTML` where you later have to query for references manually.
**~~lack of~~ Features**
- Tiny (365 bytes gzipped)
- Vanilla JS
- Zero Dependencies
- Fast
## Install
```
$ npm install facon
```
This module exposes three module definitions:
* **ES Module**: `dist/facon.mjs`
* **CommonJS**: `dist/facon.js`
* **UMD**: `dist/facon.min.js`
Include facon:
```js
// ES6
import f from 'facon'
// CJS
const f = require('facon');
```
The script can also be directly included from [unpkg.com](https://unpkg.com):
```html
```
## Usage
```js
import f from 'facon';
// Create a DOM element
let node = f`Hello World`;
document.body.appendChild(node);
// Create nested elements, and extract references
let node = f`
Façon
Create nested DOM elements with manner
`;
document.body.appendChild(node);
let {title, body} = node.collect();
title.textContent = 'Hello World';
// DOM node appends
let child = f`Hello World`;
let parent = f`
${child}`;
```
## API
### facon(string)
Returns: `Element`
Construct and returns a DOM `element`.
The returned `element` has a special `collect` method that is used to collect references to all elements with a `ref` attribute. Multiple elements containing identical `ref` attribute values result in an array of DOM references.
DOM Elements can be composed together/appended like this:
```js
let myNode = f`Hello World`;
let node = f`
${myNode}`;
// or this way
let myNode = document.createElement('div');
let node = f`
${myNode}`;
```
### node.collect(options)
Returns: `Object`
Method for extracting DOM references. E.g:
```js
const node = f`
Hello world!
- One
- Two
- Three
`;
let {title, list, items} = node.collect();
// ~> title is a dom reference to the inner h1 element.
// ~> list is a dom reference to the inner ul element.
// ~> items is an array of dom references to each li element.
// ~> node is by default the outer most element.
```
#### options.ref
Type: `String`
Default: `ref`
Attribute name used for collecting references.
#### options.keepAttribute
Type: `Boolean`
Default: `false`
Keep `ref` attributes on elements after collecting the references. Defaults to `false`.
#### options.to
Type: `Object`
Default: `{}`
Optional object reference to assign to.
This can be handy if you have a component and want to be able to access references through `this`. E.g:
```js
class MyElement extends Component {
view() {
const view = f`
Façon
Create nested DOM elements with manner
`;
view.collect({to:this});
}
// later ...
update() {
this.title = 'Hello World';
this.body = 'test';
}
}
```
## License
MIT © [Terkel Gjervig](https://terkel.com)