HSM: A JavaScript framework

HSM is a micro-framework for the web. HSM is an extension of the web component api. I designed HSM because I wanted to learn more about web technologies such as shadow root. I was inspired to write this after learning about Hyperscript Tagged Markup. With HSM, I built a note taking app. This app includes the ability to drag notes around and layer them.

Example

import Component from "/static/projects/note/js/hsm.js";
class MyComponent extends Component {
    foo(){
        this.querySelector("#here").innerHTML = "test";
    }
    x = 0
    increase(){
        this.x = this.x + 1;
        this.querySelector("#increase").innerHTML = this.x;
    }
    getstyle(){
        return this.css`
            button {
                font-family: 'Courier New', Courier, monospace;
                border-radius: 5px;
                padding: 3px 10px 3px 10px;
                margin: 5px;
                background: yellow;
                border: none;
            }
        `
    }
    render(){
        return this.html`
            <button onclick="${this.foo}">Call foo()</button>  
            <p id="here"></p>
            <button onclick="${this.increase}">Increase</button>
            <p id="increase">0</p>
        `;
    }
}
customElements.define("my-component", MyComponent);

Then use <my-component></my-component>

Demo