DrowJS

Simple Web Component Library for creating custom HTML Components.

---

Setup

Include the drow.js in an html file:

<script src="dist/drow.js"></script>

Or as an NPM Module

import DrowJS from 'drow';

Define a DrowJS Component

Define a DrowJS Object to setup a componet:

Component needs to have a

• name : name of HTML Custom Component
  
• props : properties set on the Custom Component
  
• template : standard html template
  
• init : function() - optional
  
• watch : function(obj) - optional
  
• templating : You can now use handlebars/mustache style variables in templates there are applied by prop name Ex: {prop1}

HTML

<my-comp prop1="AAA" prop2="BBB">

JavaScript

var config = {
    "name" : "my-comp",
    "props": ['prop1','prop2'],
    "template": `<b>Click for the timestamp</b><div>{{prop1}}</div>`,
    "init" : function(config) {

        let prop1 = this.getProp('prop1') ? this.getAttribute('prop1') : "";

        //in the init this.getComp() is used to obtain the component

        this.getComp().addEventListener('click', e => {
            this.getComp().querySelector("b").innerHTML = new Date();
        });
    },
    watch : function(attribute) {
        if (attribute.name == 'name') {
            //in the watch this.comp is a reference to this component
            attribute.comp.querySelector('b').innerHTML = `Hello, ${attribute.newValue}`;
        }
    }
}

DrowJS.register(config);

Examples

Basic Example:

Example 1

Setup from npm

First install dependencies:

npm install

Run commands:

npm run server

Credits

Author johnfacey.dev

Twitter twitter.com/johnfacey