1.1.0 • Published 8 months ago

compactive v1.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

Web-COMPonent based COMPACT reACTIVE library

WHY??

Many reactive libraries require downloading at least 16kB. compactive uses the Web-Component to minimize the size, and hit 1.7kB (!!!)

Example

<!-- In head... you should embed compactive.js or compactive.min.js -->
<script>
class MY_Switch extends BaseElement {
    static { Init(this,_=>_
        .tag("my-switch")
        .content(html`
            <button -ref="btn"><slot></slot></button>
        `)
        .style(css`
            button.activate {
                background-color: red;
            }
        `)
        .attr("activate")
    )}
    constructor() {
        super()
        this.btn.onclick = () => { this.activate = !this.activate }
    }
    activateAttr(val) {
        if (val) this.btn.classList.add("activate")
        else this.btn.classList.remove("activate")
    }
}
</script>
<!-- In body... -->
<my-switch data-activate="true">
    Hello world
</my-switch>
1.1.0

8 months ago

1.0.0

8 months ago