• Stars
    star
    222
  • Rank 179,123 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 6 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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:

// ES6
import f from 'facon'

// CJS
const f = require('facon');

The script can also be directly included from unpkg.com:

<script src="https://unpkg.com/facon"></script>

Usage

import f from 'facon';

// Create a <b> DOM element
let node = f`<b>Hello World</b>`;
document.body.appendChild(node);

// Create nested elements, and extract references
let node = f`
<div>
  <h1 ref="title">Façon</h1>
  <p ref="body">Create nested DOM elements with manner<p>
</div>
`;
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`<div>${child}</div>;

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`<div>${myNode}</div>`;

// or this way
let myNode = document.createElement('div');
let node = f`<div>${myNode}</div>;

node.collect(options)

Returns: Object

Method for extracting DOM references. E.g:

const node = f`
  <div>
    <h1 ref="title">Hello world!</h1>
    <ul ref="list">
      <li ref="items">One</li>
      <li ref="items">Two</li>
      <li ref="items">Three</li>
    </ul>
  <div>
`;
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:

class MyElement extends Component {

    view() {
      const view = f`
        <div>
          <h1 ref="title">Façon</h1>
          <p ref="body>Create nested DOM elements with manner<p>
        </div>
      `;
      view.collect({to:this});
    }

    // later ...

    update() {
      this.title = 'Hello World';
      this.body = 'test';
    }
}

License

MIT © Terkel Gjervig

More Repositories

1

awesome-creative-coding

Creative Coding: Generative Art, Data visualization, Interaction Design, Resources.
HTML
12,228
star
2

prompts

❯ Lightweight, beautiful and user-friendly interactive prompts
JavaScript
8,805
star
3

ramme

Unofficial Instagram Desktop App.
JavaScript
3,319
star
4

tiny-glob

Super tiny and ~350% faster alternative to node-glob
JavaScript
856
star
5

zet

Set() as it should be.
JavaScript
521
star
6

sqliterally

Lightweight SQL query builder
JavaScript
263
star
7

terkelg

A website inside an SVG, inside an image, inside HTML, inside markdown, inside a GitHub readme.md.
TypeScript
231
star
8

deakins

🎥 Small Canvas 2D Camera
TypeScript
135
star
9

math

Math snippets with graphic programming in mind.
113
star
10

zuckerberg.smile

🤖 Control Mark Zuckerbergs smile property
JavaScript
89
star
11

skaler

A (329B) client-side image resizer.
JavaScript
88
star
12

workshy

A small (376B) lazy function scheduler for a butter smooth main thread.
JavaScript
80
star
13

math-toolbox

Lightweight and modular math toolbox
JavaScript
76
star
14

globrex

Glob to regular expression with support for extended globs.
JavaScript
70
star
15

cantinflas

Tiny mustache-like template engine in ~50 LOC.
JavaScript
65
star
16

sisteransi

ANSI escape codes for some terminal swag.
JavaScript
58
star
17

eliminate

Delete files and directories without all the bullshit.
JavaScript
52
star
18

terkel.com-2016

My Personal website. Build with Vue and ThreeJS.
JavaScript
40
star
19

powerwalker

🏃Walk directories recursively.
JavaScript
28
star
20

hent

A small utility to fetch remote files into buffers
JavaScript
23
star
21

npm-scripts-as-build-tool

Nuggets on how to use NPM Scripts as your build tool. You don't need Grunt or Gulp
21
star
22

cursor-travel

📏 Measure how far your cursor travels.
Swift
19
star
23

favorite-awesomeness

A tiny collection of my favorite awesomelists
18
star
24

shrinktome

📘Shrink facebook by 5% every 10th second. You're welcome!
JavaScript
16
star
25

stopgap

Easily create/remove temporary directories.
JavaScript
16
star
26

simultan

Simultaneously run an async function on any iterable with limited concurrency
JavaScript
15
star
27

cursormuseum

A very brief history of pointing devices
CSS
14
star
28

mkdirplz

Make directories recursively -plz 🙏
JavaScript
13
star
29

antedate

A tiny pre-renderer for client side applications.
JavaScript
13
star
30

webpack-starter

'Just Add Water' Webpack 2, babel and glslify gourmet mix.
JavaScript
13
star
31

starter

No tooling starter because simplicity is the ultimate sophistication.
CSS
13
star
32

1d

🥞Make multi-dimensional arrays as flat as a pancake.
JavaScript
11
star
33

utters

Small (257B) promise wrapper for SpeechSynthesisUtterance
JavaScript
11
star
34

globalyzer

Detect and extract the static part of a glob string.
JavaScript
10
star
35

vimrc

I heard you like escape rooms?
Vim Script
10
star
36

foldersstructure

macOS Automator workflow to scaffold my project directory structure.
10
star
37

threejs-create

Create a generic three.js application for quick prototyping
JavaScript
9
star
38

exclamation

Holy Stratosphere, Robin exclamations❗
JavaScript
7
star
39

invisible

The Invisible Game: Huckle buckle beanstalk
JavaScript
6
star
40

brolly

Internet of Things Umbrella Game.
JavaScript
6
star
41

yeezify

Instantly change all images on any given webpage to Kanye West.
JavaScript
6
star
42

IMDb-Runtimes

A simple Google Chrome extension to convert runtimes on IMDb to hours and minutes.
JavaScript
4
star
43

judgedbycover

A Twitter bot that judge books based on their cover.
JavaScript
3
star
44

dmjx-intro

Website for DMJX freshers' weekend
HTML
1
star
45

terkeliknibe

I created this website after nearly four months of apartment searching
SCSS
1
star