All Projects → terkelg → Facon

terkelg / Facon

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Facon

crab
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API
Stars: ✭ 22 (-89.62%)
Mutual labels:  dom, view
Drab
Remote controlled frontend framework for Phoenix.
Stars: ✭ 833 (+292.92%)
Mutual labels:  view, dom
prax
Experimental rendering library geared towards hybrid SSR+SPA apps. Focus on radical simplicity and performance. Tiny and dependency-free.
Stars: ✭ 18 (-91.51%)
Mutual labels:  dom, view
Crab
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API
Stars: ✭ 22 (-89.62%)
Mutual labels:  view, dom
Scrollbear
A modern tool that maintains scroll position when images loaded
Stars: ✭ 523 (+146.7%)
Mutual labels:  view, dom
Gomponents
Declarative view components in Go, that can render to HTML5.
Stars: ✭ 49 (-76.89%)
Mutual labels:  view, dom
Dot
Yet another management tool for dotfiles
Stars: ✭ 199 (-6.13%)
Mutual labels:  utility
Weathericonview
Weather Icon View for Android applications
Stars: ✭ 206 (-2.83%)
Mutual labels:  view
Android 3d Layout
Wow effect, transform your layout into 3D views
Stars: ✭ 199 (-6.13%)
Mutual labels:  view
Pagemenulayout
【Android分页菜单控件】快速实现美团、饿了么、京东、淘宝首页分页菜单效果
Stars: ✭ 197 (-7.08%)
Mutual labels:  view
Server Components
🔧 A simple, lightweight tool for composable HTML rendering in Node.js, based on web components.
Stars: ✭ 212 (+0%)
Mutual labels:  dom
Revealbanner
🚀🚀🚀 滑动特效banner
Stars: ✭ 209 (-1.42%)
Mutual labels:  view
Jest Dom
🦉 Custom jest matchers to test the state of the DOM
Stars: ✭ 2,908 (+1271.7%)
Mutual labels:  dom
Util
A collection of useful utility functions
Stars: ✭ 201 (-5.19%)
Mutual labels:  utility
Lxrunoffline
A full-featured utility for managing Windows Subsystem for Linux (WSL)
Stars: ✭ 3,005 (+1317.45%)
Mutual labels:  utility
Pudl
The Public Utility Data Liberation Project
Stars: ✭ 200 (-5.66%)
Mutual labels:  utility
Discord Image Downloader Go
A simple tool which downloads pictures posted in discord channels of your choice to a local folder.
Stars: ✭ 210 (-0.94%)
Mutual labels:  utility
Paco
Small utility library for coroutine-driven asynchronous generic programming in Python 3.4+
Stars: ✭ 198 (-6.6%)
Mutual labels:  utility
Domhandler
Handler for htmlparser2, to get a DOM
Stars: ✭ 203 (-4.25%)
Mutual labels:  dom
Artist
An artist creates views. Artist is a Gradle plugin that codegens a base set of Android Views.
Stars: ✭ 208 (-1.89%)
Mutual labels:  view

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].