elebend-js

Easily create HTML5 elements

Platform	Build status
Linux
Windows

Example

const { html, head, title, body, h1, p } = Elebend;
 
html((context) => {
  head((context) => {
    title('This is an example.');
  });
  body((context) => {
    h1('Example header');
    p('Example content');
  });
});

But why

Can't really say, but one of the reasons why I made this is to personally use it for a project I am working on.

Usage

Install

NPM

npm i elebend-js

CDN

• jsDelivr

<script src="https://cdn.jsdelivr.net/npm/elebend-js/dist/index.min.js"></script>

• unpkg

<script src="https://unpkg.com/elebend-js/dist/index.min.js"></script>

Loading the module

CommonJS/ES

Loading the module provides a single object whose keys are based upon the HTML5 Tag names.

Browser

Loading the module defines an object named 'Elebend' whose keys are based upon the HTML5 Tag names.

Rendering the elements

Elebend is an object whose entries are functions that allows you to create an specific HTML5 element. The key to these functions are based upon the HTML5 Tag names.

For example, let's try to create a simple webpage using Elebend:

const { html, head, title, body, h1, p } = Elebend;
const el = html(() => {
  head(() => {
    title('This is an example.');
  });
  body(() => {
    h1('Example header');
    p('Example content');
  });
});

In this example, we created a fully built hiearchy for a single element, in which we can append into another element to render it.

The API

Elebend.tagname(attr: string | function | object [, body: string | function | object]);

Where:

• tagname is a name equivalent to an HTML5 tag e.g. a, p, div, main, etc.
• attr is the element's attributes IF it is an object provided. If it is a string or a function, attr is treated as a content body.
• body is an optional parameter, which is the content body of the element. Self-closing tags completely ignores this parameter.

Refer to the HTML5 Spec for the element tags.

To define a text node, you can use Elebend.text(string).

Calling any Elebend function automatically appends to its Elebend callee (given that the function is called in an Elebend callback).

If the given body/attr is a callback, that callback receives a single parameter, context, which points to the parent node.

Build

npm install
npm run build