https://github.com/qwreey/compactive-js

Web-COMponent based COMPACT reACTIVE library
https://github.com/qwreey/compactive-js

Last synced: 4 months ago
JSON representation

Web-COMponent based COMPACT reACTIVE library

• Host: GitHub
• URL: https://github.com/qwreey/compactive-js
• Owner: qwreey
• Created: 2024-10-26T13:06:31.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-12-06T05:49:04.000Z (over 1 year ago)
• Last Synced: 2025-12-08T18:56:26.154Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 35.2 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Web-**COMP**onent based **COMPACT** re**ACTIVE** library

## WHY??

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

## Example

```html

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

    }

}

    Hello world

```