# Alacris **Web components with signals and fine-grained DOM updates — in 6.60 kB.** ESM-only · zero dependencies · no build step required · works inside any framework [![CI](https://github.com/bmartel/alacris/actions/workflows/ci.yml/badge.svg)](https://github.com/bmartel/alacris/actions/workflows/ci.yml) [![Docs](https://github.com/bmartel/alacris/actions/workflows/docs.yml/badge.svg)](https://bmartel.github.io/alacris/) [![npm](https://img.shields.io/npm/v/@alacris/core.svg)](https://www.npmjs.com/package/@alacris/core) [![core size](https://img.shields.io/badge/core-6.59%20kB%20gzip-blue)](#size) [![license](https://img.shields.io/badge/license-MIT-green)](LICENSE) ***alacris*** *(Latin)* — brisk, lively, quick. **[Documentation →](https://bmartel.github.io/alacris/)** · **[Try it in your browser →](https://bmartel.github.io/alacris/playground/)**
```html ``` That's the whole install. One ` ``` **React** (19+ passes objects and events straight through) ```jsx console.log(e.detail)} /> ``` On React 18 and earlier, set object props and listeners through a ref: ```jsx const ref = useRef(); useEffect(() => { ref.current.tags = ['a', 'b']; // object prop const on = e => console.log(e.detail); ref.current.addEventListener('greet', on); return () => ref.current.removeEventListener('greet', on); }, []); return ; ``` **Vue** ```vue ``` Add `app.config.compilerOptions.isCustomElement = tag => tag.includes('-')`. **Svelte / Angular / Solid / Astro / Django / Rails** — write the tag. Attributes work for strings, numbers and booleans; properties (`el.tags = [...]`) work for everything. ## API | | | | --- | --- | | `signal(value, equals?)` | readable/writable reactive value | | `computed(fn, equals?)` | lazy, memoized derived value | | `effect(fn)` | run on change; return a cleanup; returns a disposer | | `batch(fn)` | coalesce writes | | `untrack(fn)` | read without subscribing | | `tracking()` | whether a subscriber is currently collecting dependencies | | `root(fn)` | ownership scope; returns a disposer for everything created inside | | `onCleanup(fn)` | register a cleanup with the enclosing effect or root | | `flush()` | run queued effects now | | `html` / `svg` | template tags | | `css` | cached, composable stylesheet | | `vars(prefix, defaults)` | declare the custom properties a component is themed by | | `adoptGlobal(...styles)` | push styles into every component; returns a remover | | `keyed(key, template)` | give a list item a stable identity | | `each(source, row, key?)` | list with a reactive scope per row | | `render(value, container)` | render outside a component; returns a disposer | | `define(name, options)` | register a custom element | From `@alacris/core/store`: | | | | --- | --- | | `store(object)` | deeply reactive object; every path is independent | | `unwrap(value)` | the raw object, untracked | | `update(target, fn)` | apply many mutations as one update | | `selector(source, equals?)` | O(1) "is this the selected one?" | From `@alacris/core/context`: | | | | --- | --- | | `createContext(description?)` | a context key | | `provide(host, ctx, value)` | serve it to descendants; returns a stopper | | `consume(host, ctx, fallback?)` | read the nearest provider, as a signal | | `provideTo(host, ctx, value)` | `provide`, torn down with the enclosing scope | TypeScript declarations ship with the package. ## Good to know - **ESM only.** No CommonJS build, and none planned. - **Modern browsers**: needs `