<ceb/> is a library helping to develop Custom Elements.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
doc
example
src
test
.editorconfig
.gitignore
.jsbeautifyrc
.jshintignore
.jshintrc
.npmignore
LICENSE
README.md
book.json
bower.json
circle.yml
config.example.js
config.standalone.js
esdoc.json
karma.config.base.js
karma.config.ci.js
karma.config.local.js
package.json

README.md

<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.