Naboo's Podracing Misadventure

    elebend-js

    0.2.1 • Public • Published

    elebend-js

    Easily create HTML5 elements

    NPM

    Platform Build status
    Linux
    Windows Build status

    codecov Known Vulnerabilities

    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

    Install

    npm i elebend-js

    DownloadsWeekly Downloads

    2

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    36.6 kB

    Total Files

    14

    Last publish

    Collaborators

    • lxsmnsyc