silmaril

Compile-time reactivity for plain JS and TS.

$$ defines a reactive boundary. A variable declared inside it is reactive when it is written, reads another reactive variable or binds a store. $ reacts when such a variable changes. The compiler works out which code reads which variable, so a write runs only the code that reads the written variable.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { $$, $ } from 'silmaril';

$$(() => {
  let count = 1;
  const double = count * 2;

  $(console.log(`${count} doubled is ${double}`));

  // Writes after the first run, so the log shows the change
  setTimeout(() => {
    count = 21;
  }, 10);
});

Features

• Compile-time reactivity. silmaril/compiler finds the reactive variables and the code that reads them.
• Static reactive graph. A write runs only the code that reads the written variable.
• Minimal runtime. silmaril has no dependencies and ships less than 1.5 kB gzipped.
• Auto-memoization. A computed variable runs again only when a variable it reads changes.
• Stores. $store binds any store with get and subscribe to a variable.

Where to go next

• Getting started installs the package and lists the requirements.
• Bundler setup adds the compiler to Vite, Rollup, webpack and others.
• Basic reactivity starts the guide. Computed variables, synchronous tracking, lifecycles and composition follow it.
• Stores and SolidJS connect reactive code with the rest of an app.
• API reference lists every export. Migrating from 0.4 lists what changed. Internals and Limits explain how the compiler and the runtime work and what they do not track.

Inspirations and prior art

• Svelte
• Malina
• solid-labels
• Vue's Reactivity Transform

Sponsors

License

MIT, by lxsmnsyc. The source is on GitHub.