Notable Pseudocode Mashups

    facon

    2.0.3 • Public • Published

    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

    Install

    npm i facon

    DownloadsWeekly Downloads

    27

    Version

    2.0.3

    License

    MIT

    Unpacked Size

    9.61 kB

    Total Files

    6

    Last publish

    Collaborators

    • terkelg