{"library":"maverick.js","title":"Maverick.js UI Framework & Signals","description":"Maverick.js is a collection of JavaScript/TypeScript libraries designed for building fast, type-safe, and highly reactive UI component libraries and web applications. Its core is the `@maverick-js/signals` package, a lightweight (~1KB minzipped) and extremely performant reactivity system inspired by SolidJS and Svelte. This signals library provides primitives like `signal`, `computed`, and `effect` for fine-grained, lazy, and batched updates, working seamlessly across browsers and Node.js. The ecosystem also includes `@maverick-js/elemental` for creating reactive Web Components with JSX and Server-Side Rendering (SSR) support, and `@maverick-js/maverick` as the main UI component library which leverages these foundations. The project is actively developed, with version 0.43.2 being the current stable release, demonstrating frequent patch and minor updates. Its key differentiators include minimal bundle size, strong TypeScript support, and a focus on web standards while providing a highly efficient reactive programming model.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install maverick.js"],"cli":null},"imports":["import { signal } from '@maverick-js/signals';","import { computed } from '@maverick-js/signals';","import { effect, onDispose } from '@maverick-js/signals';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { signal, effect, onDispose } from '@maverick-js/signals';\n\n// A basic custom element definition using the reactive core\nclass MyReactiveCounter extends HTMLElement {\n  private count = signal(0);\n  private disposeEffect: Function | undefined;\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this.shadowRoot!.innerHTML = `\n      <style>\n        :host { display: block; padding: 10px; border: 1px solid #ccc; }\n        button { padding: 8px 12px; cursor: pointer; }\n        span { margin-left: 10px; font-weight: bold; }\n      </style>\n      <button>Increment</button>\n      <span>Count: 0</span>\n    `;\n\n    const button = this.shadowRoot!.querySelector('button');\n    const span = this.shadowRoot!.querySelector('span');\n\n    button?.addEventListener('click', () => {\n      this.count.set(this.count() + 1);\n    });\n\n    // Establish a reactive effect to update the DOM\n    this.disposeEffect = effect(() => {\n      if (span) {\n        span.textContent = `Count: ${this.count()}`;\n      }\n    });\n  }\n\n  connectedCallback() {\n    // Re-establish effects if the element is re-connected, though often not needed for simple cases\n    // The effect in constructor runs immediately and will be alive as long as instance is alive.\n  }\n\n  disconnectedCallback() {\n    // Clean up the reactive effect when the element is removed from the DOM\n    if (this.disposeEffect) {\n      this.disposeEffect();\n    }\n  }\n}\n\ncustomElements.define('my-reactive-counter', MyReactiveCounter);\n\n// To use this in an HTML file:\n// <my-reactive-counter></my-reactive-counter>","lang":"typescript","description":"Demonstrates creating a reactive Web Component using `@maverick-js/signals` to manage and display an incrementing counter, including proper lifecycle cleanup.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}