Nurturing Palpable Magnificence

    drowjs

    0.0.3 • Public • Published

    Gitpod ready-to-code

    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() - 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

    Install

    npm i drowjs

    DownloadsWeekly Downloads

    1

    Version

    0.0.3

    License

    ISC

    Unpacked Size

    1.17 MB

    Total Files

    43

    Last publish

    Collaborators

    • avatar