@rawblock/core

rawblock is a small wrapper around web components and makes it easy to create small future proof web components.

While most other web component libraries let you extend HTMLElement directly or indirectly with your class rawblock uses your class as a blueprint and only extend HTMLElement with those methods and properties that are following your namespace.

This ensures that your component distinguishes between a clean future proof public API without name collisions and a full private internal API out of the box.

Basic usage

import { Component, prop, listen } from '@rawblock/core';

class Counter extends Component {
    static namespace = 'my';

    @prop({sanitize: Number})
    myNumber;

    setPropDefaults(){
        this.myNumber = 0;
    }

    render() {
        return `
            <button class="up">
                <slot></slot>
            </button>
            <input
                type="number"
                value="${this.myNumber}" />
        `;
    }

    // count is your private internal API because it is not namespaced
    // if you want to make it public call it myCount
    @listen('click', {delegate: 'closest button.up'})
    count() {
        this.myNumber++;
    }

}

// note your namespace is automatically added from the static property
Counter.define('counter', Counter);

// usage in html with content attributes
// <my-counter my-number="4">Count up</my-counter>

// usage with properties (for react or other view libs/frameworks)
// <my-counter myNumber="4">Count up</my-counter>
// usage with properties (for angular)
// <my-counter [myNumber]="4">Count up</my-counter>