Nucleus

Nucleus is a lightweight web component library that leverages Custom Elements.

Nucleus provides a simple way to register custom DOM elements, bind to their lifecycle and handle events.

Why Nucleus?

• Multiple component instances!
• Lifecycle hooks for free
• Property bindings
• Components are just DOM elements

Installation

Nucleus has a dependency on JQuery, Lodash and a Custom Elements Polyfill.

Usage

Lifecycle Hooks

  Nucleus.Component('my-element', {

    created: function() {
      // component created
    },

    attached: function() {
      // component added to DOM
    }

    detached: function() {
      // component removed from DOM
    },

    attributeChanged: function(attrName, oldVal, newVal) {
      // attribute changed using element.setAttribute()
    }

  });

Events

  Nucleus.Component('my-element', {

    events: {
      'click': 'handleClick',
      'click .class-selector': 'handleChildClick'
    },

    handleClick: function() {
      // do stuff here
    },

    handleChildClick: function() {
      // do more stuff here
    }
  });

Properties

  Nucleus.Component('my-element', {
    
    properties: {
      name: String,
      age: Number,
      location: {
        type: String,
        default: "San Francisco"
      },
      stats: Object
    },

    nameChanged: function() {
      console.log(this.name);
    }
  });

<my-element name="Christos" age="32" stats='{"data": "goes here"}'></my-element>

Extend

  Nucleus.Component('x-button', {
    extends: 'button'
  });

<button is="x-button">Submit</button>