Read and update signals

Use writable, readonly, and computed values with synchronous batching.

APIs demonstrated

signal from @pibbl/core
computed from @pibbl/core
batch from @pibbl/core
untracked from @pibbl/core
isSignal from @pibbl/core
resolveSignalValue from @pibbl/core
Signal from @pibbl/core
WritableSignal from @pibbl/core
SignalValue from @pibbl/core
SignalEquals from @pibbl/core
SignalOptions from @pibbl/core

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

import {
  signal,
  computed,
  batch,
  untracked,
  isSignal,
  resolveSignalValue,
  type Signal,
  type WritableSignal,
  type SignalValue,
  type SignalEquals,
  type SignalOptions,
} from "@pibbl/core";

const equals: SignalEquals<number> = (a, b) => a === b;
const options: SignalOptions<number> = { equals, debugName: "count" };
const count: WritableSignal<number> = signal(1, options);
const readonlyCount: Signal<number> = count.asReadonly();
const doubled = computed(() => readonlyCount.get() * 2);
const input: SignalValue<number> = count;
const output = document.createElement("pre");
const button = document.createElement("button");
button.textContent = "Increment twice in one batch";
function show() {
  output.textContent = `Count: ${resolveSignalValue(input)}; doubled: ${doubled.get()}; is signal: ${isSignal(input)}; untracked read: ${untracked(() => count.get())}`;
}
button.addEventListener("click", () => {
  batch(() => {
    count.update((value) => value + 1);
    count.update((value) => value + 1);
  });
  show();
});
document.body.append(button, output);
show();

Usage notes

Untracked reads do not attach dependency edges. This example refreshes the DOM explicitly; Pibbl component reads subscribe automatically.

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.