maverick.js

import { signal, effect, onDispose } from '@maverick-js/signals'; // A basic custom element definition using the reactive core class MyReactiveCounter extends HTMLElement { private count = signal(0); private disposeEffect: Function | undefined; constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot!.innerHTML = ` <style> :host { display: block; padding: 10px; border: 1px solid #ccc; } button { padding: 8px 12px; cursor: pointer; } span { margin-left: 10px; font-weight: bold; } </style> <button>Increment</button> <span>Count: 0</span> `; const button = this.shadowRoot!.querySelector('button'); const span = this.shadowRoot!.querySelector('span'); button?.addEventListener('click', () => { this.count.set(this.count() + 1); }); // Establish a reactive effect to update the DOM this.disposeEffect = effect(() => { if (span) { span.textContent = `Count: ${this.count()}`; } }); } connectedCallback() { // Re-establish effects if the element is re-connected, though often not needed for simple cases // The effect in constructor runs immediately and will be alive as long as instance is alive. } disconnectedCallback() { // Clean up the reactive effect when the element is removed from the DOM if (this.disposeEffect) { this.disposeEffect(); } } } customElements.define('my-reactive-counter', MyReactiveCounter); // To use this in an HTML file: // <my-reactive-counter></my-reactive-counter>