Nifty Procrastination Machine

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    ceb

    1.0.4 • Public • Published

    <ceb/> custom-element-builder

    Circle CI Dependency Status devDependency Status Coverage Status Sauce Test Status

    <ceb/> is a library helping to develop Custom Elements (v0).

    Its core is a builder which executes others builders. By this way, <ceb/> is natively opened to extensions and builders easily sharable.

    Obviously, <ceb/> exposes builders and helpers handling the common needs:

    • property
    • attribute
    • events
    • delegation to child element (attribute, property and method)
    • templating
    • event dispatching
    • type checking
    • etc.

    A ceb's playground is available showing how-to build simple and more complex Custom Elements.

    Quick overview

    import {element, property, method, dispatchCustomEvent} from 'ceb';
     
    // create a fresh element builder
    let builder = element();
     
    builder.builders(
        // add a property named foo initialized to 0
        property('foo').value(0),
     
        // add a method named incFoo, which will increment the foo value
        method('incFoo').invoke( (el, num=1) => el.foo = el.foo + num )
    );
     
    builder.builders(
        // add a method named bar, which will dispatch the custom event 'bar' when invoked
        method('bar').invoke( (el, detail) => dispatchCustomEvent(el, 'bar', {detail}) )
    );
     
    // build and register the custom element 
    let CebExample = builder.register('ceb-example');
     
    // export the class of the custom element
    export default CebExample;
    // create an instance of ceb-example
    let cebExample = document.createElement('ceb-example');
     
    // by default foo is 0
    console.log(cebExample.foo) // => 0
     
    cebExample.incFoo();
    console.log(cebExample.foo) // => now it's: 1
     
    cebExample.incFoo(2);
    console.log(cebExample.foo) // => and finally: 3
     
    cebExample.bar('foo'); // => dispatch the custom event 'bar' with the detail 'foo'

    Download

    <ceb/> is available from npm and bower.

    From npm:

    npm install ceb

    From bower:

    bower install ceb

    <ceb/> can also be fetched from a unpkg, a CDN:

    <script src="https://unpkg.com/ceb/dist/umd/ceb.js"></script>
    <script src="https://unpkg.com/ceb/dist/umd/ceb.min.js"></script>

    License

    Released under the MIT license.

    Install

    npm i ceb

    DownloadsWeekly Downloads

    2

    Version

    1.0.4

    License

    MIT

    Last publish

    Collaborators

    • thibaultmorin