Super Components

Give your Web Components modern-day superpowers:

• create stateful web components similar to React
• manage your components state with an xstate inspired state machine
• bring your own client-side rendering framework/library such as lit-html
• works in every major browser
• lightweight (400 bytes)

Installation

Install via NPM

npm i -S @codewithkyle/supercomponent

Install via CDN

<script src="https://unpkg.com/@codewithkyle/supercomponent@1/supercomponent.min.js"></script>

import SuperComponent from "https://unpkg.com/@codewithkyle/supercomponent@1/supercomponent.min.mjs";

Usage

import SuperComponent from "@codewithkyle/supercomponent";

type ExampleModel = {
    products: Array<any>;
}
class Example extends SuperComponent<ExampleModel>{
    constructor(){
        super();
        this.state = "LOADING";
        this.stateMachine = {
            LOADING: {
                SUCCESS: "IDLING",
                ERROR: "ERROR",
            },
            IDLING: {
                TOGGLE: "LOADING",
            }
        }

        // Set the model & trigger the first render
        this.set({
            products: [],
        });
    }

    override async connected(){
        const request = await fetch("/products.json");
        if (request.ok){
            const response = await request.json();

            // Updates the model
            this.set({ products: response });

            // Trigger a state transition
            this.trigger("SUCCESS");
        } else {
            this.trigger("ERROR");
        }
    }

    override disconnected() {
        // Do something when the component disconnects from the DOM
    }

    override updated() {
        // Do something after the model updates
    }

    override render() {
        // Render this component model using whatever client-side UI framework you prefer
        switch (this.state){
            case "ERROR":
                // Render error message
                break;
            case "IDLING":
                // Render products
                break;
            default:
                // Render loading animation
                break;
        }
    }
}
customElements.define("example-component", Example);