view dom utility JavaScript HTML
Need help with facon?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
terkelg

Description

Tiny utility (272B) to create DOM elements with manner.

208 Stars 2 Forks MIT License 39 Commits 0 Opened issues

Services available

Need anything else?

facon

version codecov install size

Tiny utility (295B) 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 fix 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 (295B) - 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:

html

Usage

import f from 'facon';

// Create a DOM element let node = f<b>Hello World</b>; 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<b>Hello World</b>; 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:

let myNode = document.createElement('div');
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:

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 trough

this
. E.g: ```js class MyElement extends Component {
view() {
  const view = f`
    

Façon

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.