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.

Package Sidebar

Install

npm i ceb

Weekly Downloads

54

Version

1.0.4

License

MIT

Last publish

Collaborators

  • thibaultmorin