Installation

As of now, is not published on npm. It is only accessible through our CDN. We provide Nabu in three versions: a minified script registering a global variable; and an ES6 version for use in modules, either uncompressed or minified.

Script

To load for scripts, include the following tag in the head of your HTML document:

<script src="https://nabu.barbierrenard.fr/cdn/1.0.0/nabu.script.js" integrity="sha384-aCOXf450CmreM5v+n7gQ1y1U+fCEewmp56Ctnve6SLR0gL2FJkUxLgphU4rVBd7X" crossorigin="anonymous"></script>

The global variable nabu will be declared and made available anywhere in your project.

ES6 module

For a more modern and controlled integration of , we also provide an ES6 module implementation. First, place the following tag in the head of your HTML document:

<script type="importmap">{"imports":{"@nabu":"https://nabu.barbierrenard.fr/cdn/1.0.0/nabu.min.js"},"integrity":{"https://nabu.barbierrenard.fr/cdn/1.0.0/nabu.min.js":"sha384-iup0Luot5+F/TG8kTWbONzMXt8tlO7DUPinGWbbfz2aVTU0DIoiv8GSUd6WmZrt9"}}</script>

You are then enabled to import in your code by inserting at the beginning of dependant modules the line:

import nabu from '@nabu';

Alternatively, you can import directly, in only one line, in any file without inserting any HTML tag via:

import nabu from 'https://nabu.barbierrenard.fr/cdn/1.0.0/nabu.min.js';

However, this last method is not recommended as it does not ensure the file's integrity.

Usage

The object

takes the form of a single variable (referred hereafter as nabu).

Description

You can easily create any DOM element using syntax:

const element = nabu.tagName([arguments*]);

The tagName corresponds to any HTML tag written in camelCase.

Further arguments are optional. Arguments corresponds either to attributes of the created element, or to child nodes:

Node or string

Nodes and strings (considered as text nodes) are appended sequentially to the list of children of the element.

Dictionary

Element's attributes are set following the key/value pairs of the dictionary. Values can either be strings, numbers, boolean or functions. Special behaviours are available for specific attributes:

• For attributes class or for, the associated value can additionally be a list of strings.
• For the style attribute, a dictionary of style properties (using keys either in camelCase or kebab-case) can be passed.

Examples

Element construction with

const div = nabu.div();

const items = ['First item','Second item',nabu.b('Third item')];
const ol = nabu.ol(*items.map(item=>nabu.li(item)));

const button = nabu.button(
    // Children
    nabu.span('I am a ',{style: {color: 'red'}}),
    nabu.b('colourful ',{style: {color: 'green'}}),
    nabu.span('button!',{style: {color: 'blue'}}),
    // Attributes
    {
        id: 'my-button', name: 'my-button', class ['useless'],
        onclick: ()=>alert('You clicked the button!'),
        style: {
            backgroundColor: 'white',
            border: 'solid black 2px',
            borderRadius: '5px'
        }
    }
);

Syntax comparison with native ECMAScript DOM manipulation

Compared to native ECMAScript methods, provides a clearer and more concise alternative by enabling defining attributes and nesting elements at construction.

Native ECMAScript

const p = document.createElement('p');
p.id = 'p1';
p.classlist.add('paragraph');
p.appendChild(document.createTextNode('My paragraph '));

const span = document.createElement('span');
span.style.color = 'red';
span.appendChild(document.createTextNode('is colourful!'));
p.appendChild(span);

document.body.appendChild(p)

document.body.appendChild(
  nabu.p({id: 'p1', class: ['paragraph']},
    'My paragraph ',
    nabu.span({style: {color: 'red'}},'is colourful!')
  )
);

Integration with HTML custom elements

// Usual web-component declaration
class MyElement extends HTMLElement {
    constructor(){super();}
    connectedCallback(){}
}
customElements.define('my-element', MyElement);

// my-element is already available to use with nabu under the
// method 'myElement'!
const myElement = nabu.myElement(); 

Other namespaces

Specifying a namespace

You can use for creating elements from other namespaces, in particular SVG and MathML tags, by specifying the namespace URI before the tag:

const element = nabu('namespace').tagName([arguments*]);

For example, a svg element from the SVG namespace is created with:

const svg = nabu('http://www.w3.org/2000/svg').svg();

Namespace abbreviations

Common namespaces come with integrated abbreviations, which can be used instead of the full namespace URI. These abbreviations are case-insensitive.

const svg = nabu('SVG').svg();