Miss any of our Open RFC calls?Watch the recordings here! »

drowjs

0.0.2 • Public • Published

DrowJS

Simple Web Component Library for creating custom HTML Components.

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()
  • watch - function(obj)

HTML

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

JavaScript

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

        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

Install

npm i drowjs

DownloadsWeekly Downloads

1

Version

0.0.2

License

ISC

Unpacked Size

1.3 MB

Total Files

49

Last publish

Collaborators

  • avatar