elebend-js v0.2.1
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