@reckona/mreact-reactive-core 0.0.65 → 0.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reckona/mreact-reactive-core",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "description": "Fine-grained reactive primitives used across mreact.",
   "keywords": [
     "jsx",
@@ -24,7 +24,8 @@
     "dist/**/*.js",
     "dist/**/*.js.map",
     "dist/**/*.d.ts",
-    "dist/**/*.d.ts.map"
+    "dist/**/*.d.ts.map",
+    "src/**/*"
   ],
   "type": "module",
   "sideEffects": false,

package/src/batch.ts

@@ -0,0 +1,33 @@
+import { runtimeState } from "./state.js";
+import { schedulePendingFlush } from "./scheduler.js";
+import { flushPendingComputed } from "./tracking.js";
+
+export function batch<T>(fn: () => T): T {
+  runtimeState.batchDepth += 1;
+
+  try {
+    return fn();
+  } finally {
+    runtimeState.batchDepth -= 1;
+
+    if (runtimeState.batchDepth === 0) {
+      flushPendingComputed();
+      schedulePendingFlush();
+    }
+  }
+}
+
+export async function batchAsync<T>(fn: () => Promise<T> | T): Promise<T> {
+  runtimeState.batchDepth += 1;
+
+  try {
+    return await fn();
+  } finally {
+    runtimeState.batchDepth -= 1;
+
+    if (runtimeState.batchDepth === 0) {
+      flushPendingComputed();
+      schedulePendingFlush();
+    }
+  }
+}

package/src/cell.ts

@@ -0,0 +1,65 @@
+import type { Cell } from "./types.js";
+import type { Source } from "./state.js";
+import { notifySubscribers, trackSource } from "./tracking.js";
+
+declare const __MREACT_CLIENT_DEVTOOLS__: boolean | undefined;
+
+export function cell<T>(initial: T): Cell<T> {
+  let current = initial;
+  const source: Source = {
+    subscribers: new Set(),
+  };
+
+  return {
+    get(): T {
+      trackSource(source);
+      return current;
+    },
+    set(next: T | ((prev: T) => T)): void {
+      const resolved = typeof next === "function" ? (next as (prev: T) => T)(current) : next;
+
+      if (Object.is(current, resolved)) {
+        return;
+      }
+
+      if (
+        typeof __MREACT_CLIENT_DEVTOOLS__ !== "undefined" &&
+        __MREACT_CLIENT_DEVTOOLS__ === false
+      ) {
+        current = resolved;
+      } else {
+        const devtools = (
+          globalThis as typeof globalThis & {
+            __mreactDevtools?:
+              | { emit?: (event: Record<string, unknown>) => void }
+              | undefined;
+          }
+        ).__mreactDevtools;
+        const emit = devtools?.emit;
+
+        if (typeof emit !== "function") {
+          current = resolved;
+        } else {
+          const previous = current;
+          current = resolved;
+          emit.call(devtools, {
+            package: "@reckona/mreact-reactive-core",
+            previous,
+            subscribers: source.subscribers.size,
+            timestamp: Date.now(),
+            type: "reactive:cell:set",
+            value: resolved,
+          });
+        }
+      }
+      const singleSubscriber = source.singleSubscriber;
+      if (
+        singleSubscriber !== undefined &&
+        (singleSubscriber.disposed || singleSubscriber.queued)
+      ) {
+        return;
+      }
+      notifySubscribers(source);
+    },
+  };
+}

package/src/cleanup-scope.ts

@@ -0,0 +1,19 @@
+import { runtimeState } from "./state.js";
+
+export function withCleanupScope<T>(
+  owner: (dispose: () => void) => void,
+  run: () => T,
+): T {
+  const previousOwner = runtimeState.cleanupOwner;
+  runtimeState.cleanupOwner = owner;
+
+  try {
+    return run();
+  } finally {
+    runtimeState.cleanupOwner = previousOwner;
+  }
+}
+
+export function registerCleanup(dispose: () => void): void {
+  runtimeState.cleanupOwner?.(dispose);
+}

package/src/computed.ts

@@ -0,0 +1,232 @@
+import type { ReactiveComputation, Source } from "./state.js";
+import { schedulePendingFlush } from "./scheduler.js";
+import { runtimeState } from "./state.js";
+import { cleanupDeps, notifySubscribers, trackSource } from "./tracking.js";
+import type { ReadonlyCell } from "./types.js";
+
+export type ComputedEquality<T> = (previous: T, next: T) => boolean;
+
+export interface ComputedOptions<T> {
+  equals?: ComputedEquality<T> | undefined;
+}
+
+export function computed<T>(
+  fn: () => T,
+  options?: ComputedOptions<T> | ComputedEquality<T>,
+): ReadonlyCell<T> {
+  let hasValue = false;
+  let value: T;
+  let dirty = true;
+  const equals = typeof options === "function" ? options : (options?.equals ?? Object.is);
+
+  const source: Source = {
+    subscribers: new Set(),
+  };
+
+  const computation: ReactiveComputation = {
+    id: runtimeState.nextComputationId,
+    deps: new Set(),
+    disposed: false,
+    queued: false,
+    markDirty() {
+      if (dirty) {
+        if (source.subscribers.size === 0 || computation.queued) {
+          return;
+        }
+      }
+
+      dirty = true;
+
+      if (source.subscribers.size > 0) {
+        if (runtimeState.notificationDepth > 0) {
+          computation.queued = true;
+          runtimeState.pendingComputed.add(computation);
+          return;
+        }
+
+        publishIfChanged();
+      }
+    },
+    run() {
+      publishIfChanged();
+    },
+    trackSource(source) {
+      trackComputedSource(source, computation);
+    },
+    dispose() {
+      if (computation.disposed) {
+        return;
+      }
+
+      computation.disposed = true;
+      cleanupDeps(computation);
+      source.subscribers.clear();
+    },
+  };
+
+  runtimeState.nextComputationId += 1;
+
+  function publishIfChanged(): void {
+    const previousHasValue = hasValue;
+    const previousValue = value;
+
+    try {
+      const nextValue = recompute();
+
+      if (!previousHasValue || !equals(previousValue, nextValue)) {
+        notifySubscribers(source);
+      }
+    } catch {
+      runtimeState.batchDepth += 1;
+
+      try {
+        notifySubscribers(source);
+      } finally {
+        runtimeState.batchDepth -= 1;
+
+        if (runtimeState.batchDepth === 0) {
+          schedulePendingFlush();
+        }
+      }
+    }
+  }
+
+  function recompute(): T {
+    if (!dirty && hasValue) {
+      return value;
+    }
+
+    const previousTracker = runtimeState.activeTracker;
+    const previousDepsSize = computation.deps.size;
+    const nextTrackingVersion = (computation.trackingVersion ?? 0) + 1;
+
+    computation.trackingAddedDeps = [];
+    computation.trackingCount = 0;
+    computation.trackingVersion = nextTrackingVersion;
+    runtimeState.activeTracker = computation;
+
+    try {
+      const nextValue = fn();
+
+      const addedDeps = computation.trackingAddedDeps;
+      const trackedCount = computation.trackingCount ?? 0;
+
+      if (trackedCount !== previousDepsSize || (addedDeps?.length ?? 0) > 0) {
+        cleanupUntrackedDeps(computation, nextTrackingVersion);
+      }
+
+      value = nextValue;
+      hasValue = true;
+      dirty = false;
+
+      return value;
+    } catch (error) {
+      cleanupAddedDeps(computation);
+      dirty = true;
+
+      throw error;
+    } finally {
+      computation.trackingAddedDeps = undefined;
+      computation.trackingCount = undefined;
+      computation.trackingVersion = undefined;
+      runtimeState.activeTracker = previousTracker;
+    }
+  }
+
+  return {
+    get(): T {
+      trackSource(source);
+      return recompute();
+    },
+  };
+}
+
+function trackComputedSource(
+  source: Source,
+  computation: ReactiveComputation,
+): void {
+  const trackingVersion = computation.trackingVersion;
+
+  if (trackingVersion === undefined) {
+    trackSource(source);
+    return;
+  }
+
+  if (source.trackedBy === computation && source.trackedVersion === trackingVersion) {
+    return;
+  }
+
+  source.trackedBy = computation;
+  source.trackedVersion = trackingVersion;
+  computation.trackingCount = (computation.trackingCount ?? 0) + 1;
+
+  if (computation.deps.has(source)) {
+    return;
+  }
+
+  const previousSize = source.subscribers.size;
+  source.subscribers.add(computation);
+  computation.deps.add(source);
+  computation.trackingAddedDeps?.push(source);
+
+  if (previousSize === 0) {
+    source.singleSubscriber = computation;
+  } else if (source.subscribers.size > 1) {
+    source.singleSubscriber = undefined;
+  }
+}
+
+function cleanupUntrackedDeps(
+  computation: ReactiveComputation,
+  trackingVersion: number,
+): void {
+  for (const dep of computation.deps) {
+    if (dep.trackedBy === computation && dep.trackedVersion === trackingVersion) {
+      continue;
+    }
+
+    if (!dep.subscribers.delete(computation)) {
+      continue;
+    }
+
+    if (dep.trackedBy === computation) {
+      dep.trackedBy = undefined;
+      dep.trackedVersion = undefined;
+    }
+
+    computation.deps.delete(dep);
+
+    if (dep.subscribers.size === 0) {
+      dep.singleSubscriber = undefined;
+    } else if (dep.subscribers.size === 1) {
+      dep.singleSubscriber = dep.subscribers.values().next().value;
+    }
+  }
+}
+
+function cleanupAddedDeps(computation: ReactiveComputation): void {
+  const addedDeps = computation.trackingAddedDeps;
+
+  if (addedDeps === undefined) {
+    return;
+  }
+
+  for (const dep of addedDeps) {
+    if (!dep.subscribers.delete(computation)) {
+      continue;
+    }
+
+    if (dep.trackedBy === computation) {
+      dep.trackedBy = undefined;
+      dep.trackedVersion = undefined;
+    }
+
+    computation.deps.delete(dep);
+
+    if (dep.subscribers.size === 0) {
+      dep.singleSubscriber = undefined;
+    } else if (dep.subscribers.size === 1) {
+      dep.singleSubscriber = dep.subscribers.values().next().value;
+    }
+  }
+}

package/src/devtools.ts

@@ -0,0 +1,39 @@
+type DevtoolsEmitter = (event: Record<string, unknown>) => void;
+
+export function emitReactiveDevtoolsEvent(event: Record<string, unknown>): void {
+  const devtools = currentDevtools();
+  const emit = devtools?.emit;
+
+  if (typeof emit !== "function") {
+    return;
+  }
+
+  emit.call(devtools, {
+    package: "@reckona/mreact-reactive-core",
+    timestamp: Date.now(),
+    ...event,
+  });
+}
+
+export function hasReactiveDevtoolsEmitter(): boolean {
+  return typeof currentDevtools()?.emit === "function";
+}
+
+export function currentDevtoolsEmitter(): DevtoolsEmitter | undefined {
+  const devtools = currentDevtools();
+  const emit = devtools?.emit;
+
+  return typeof emit === "function" ? emit.bind(devtools) : undefined;
+}
+
+function currentDevtools():
+  | { emit?: DevtoolsEmitter | undefined }
+  | undefined {
+  const devtools = (
+    globalThis as typeof globalThis & {
+      __mreactDevtools?: { emit?: DevtoolsEmitter } | undefined;
+    }
+  ).__mreactDevtools;
+
+  return devtools;
+}

package/src/effect.ts

@@ -0,0 +1,107 @@
+import { queueComputation } from "./scheduler.js";
+import { currentDevtoolsEmitter } from "./devtools.js";
+import { registerCleanup } from "./cleanup-scope.js";
+import { runtimeState, type ReactiveComputation } from "./state.js";
+import { cleanupDeps } from "./tracking.js";
+
+declare const __MREACT_CLIENT_DEVTOOLS__: boolean | undefined;
+
+export function effect(fn: () => void | (() => void)): () => void {
+  let cleanup: (() => void) | undefined;
+
+  const computation: ReactiveComputation = {
+    id: runtimeState.nextComputationId,
+    deps: new Set(),
+    disposed: false,
+    queued: false,
+    markDirty() {
+      queueComputation(computation);
+    },
+    run() {
+      if (computation.disposed) {
+        return;
+      }
+
+      const previousTracker = runtimeState.activeTracker;
+
+      if (cleanup !== undefined) {
+        const currentCleanup = cleanup;
+        currentCleanup();
+        cleanup = undefined;
+      }
+
+      cleanupDeps(computation);
+      runtimeState.activeTracker = computation;
+
+      if (
+        typeof __MREACT_CLIENT_DEVTOOLS__ !== "undefined" &&
+        __MREACT_CLIENT_DEVTOOLS__ === false
+      ) {
+        try {
+          const result = fn();
+          cleanup = typeof result === "function" ? result : undefined;
+        } finally {
+          runtimeState.activeTracker = previousTracker;
+        }
+        return;
+      }
+
+      const emit = currentDevtoolsEmitter();
+      const startedAt = emit === undefined ? 0 : performanceNow();
+
+      try {
+        const result = fn();
+        cleanup = typeof result === "function" ? result : undefined;
+      } finally {
+        runtimeState.activeTracker = previousTracker;
+        if (emit !== undefined) {
+          emit({
+            durationMs: performanceNow() - startedAt,
+            id: computation.id,
+            package: "@reckona/mreact-reactive-core",
+            timestamp: Date.now(),
+            type: "reactive:effect:run",
+          });
+        }
+      }
+    },
+    dispose() {
+      if (computation.disposed) {
+        return;
+      }
+
+      computation.disposed = true;
+      cleanupDeps(computation);
+
+      if (cleanup !== undefined) {
+        const currentCleanup = cleanup;
+        cleanup = undefined;
+        currentCleanup();
+      }
+    },
+  };
+
+  runtimeState.nextComputationId += 1;
+
+  try {
+    computation.run();
+  } catch (error) {
+    computation.disposed = true;
+    cleanupDeps(computation);
+
+    if (cleanup !== undefined) {
+      const currentCleanup = cleanup;
+      cleanup = undefined;
+      currentCleanup();
+    }
+
+    throw error;
+  }
+
+  registerCleanup(computation.dispose);
+  return computation.dispose;
+}
+
+function performanceNow(): number {
+  return typeof performance === "undefined" ? Date.now() : performance.now();
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export type { Cell, ReadonlyCell } from "./types.js";
+export type { ComputedEquality, ComputedOptions } from "./computed.js";
+export { batch, batchAsync } from "./batch.js";
+export { cell } from "./cell.js";
+export { computed } from "./computed.js";
+export { effect } from "./effect.js";
+export { untrack } from "./untrack.js";

package/src/internal.ts

@@ -0,0 +1,8 @@
+export type { Scheduler } from "./scheduler.js";
+export { withCleanupScope } from "./cleanup-scope.js";
+export {
+  flushQueuedComputations,
+  schedulePendingFlush,
+  setScheduler,
+} from "./scheduler.js";
+export { getGlobalRuntimeState } from "./runtime-state.js";

package/src/runtime-state-public.ts

@@ -0,0 +1 @@
+export { getGlobalRuntimeState } from "./runtime-state.js";

package/src/runtime-state.ts

@@ -0,0 +1,17 @@
+type RuntimeGlobal = typeof globalThis & Record<string, unknown>;
+
+export function getGlobalRuntimeState<TState extends object>(
+  key: string,
+  create: () => TState,
+): TState {
+  const global = globalThis as RuntimeGlobal;
+  const existing = global[key];
+
+  if (existing !== undefined) {
+    return existing as TState;
+  }
+
+  const state = create();
+  global[key] = state;
+  return state;
+}

package/src/scheduler.ts

@@ -0,0 +1,130 @@
+import { runtimeState, type ReactiveComputation } from "./state.js";
+
+export interface Scheduler {
+  schedule(flush: () => void): void;
+}
+
+const defaultScheduler: Scheduler = {
+  schedule(flush) {
+    if (typeof queueMicrotask === "function") {
+      queueMicrotask(flush);
+      return;
+    }
+
+    void Promise.resolve().then(flush);
+  },
+};
+
+let scheduler = defaultScheduler;
+let queue: ReactiveComputation[] = [];
+let lastQueuedComputationId = -1;
+let queueRequiresSort = false;
+let scheduled = false;
+let flushing = false;
+const maxFlushIterations = 100;
+
+export function setScheduler(nextScheduler: Scheduler): () => void {
+  const previous = scheduler;
+  scheduler = nextScheduler;
+
+  return () => {
+    scheduler = previous;
+  };
+}
+
+export function queueComputation(computation: ReactiveComputation): void {
+  if (computation.disposed || computation.queued) {
+    return;
+  }
+
+  if (computation.id < lastQueuedComputationId) {
+    queueRequiresSort = true;
+  }
+
+  lastQueuedComputationId = computation.id;
+  queue.push(computation);
+  computation.queued = true;
+
+  if (runtimeState.batchDepth > 0) {
+    return;
+  }
+
+  schedulePendingFlush();
+}
+
+export function schedulePendingFlush(): void {
+  if (queue.length === 0 || scheduled || flushing) {
+    return;
+  }
+
+  scheduled = true;
+
+  try {
+    scheduler.schedule(flushQueuedComputations);
+  } catch (error) {
+    scheduled = false;
+    for (const computation of queue) {
+      computation.queued = false;
+    }
+    clearQueue();
+    throw error;
+  }
+}
+
+export function flushQueuedComputations(): void {
+  if (flushing) {
+    return;
+  }
+
+  scheduled = false;
+  flushing = true;
+  let firstError: unknown;
+
+  try {
+    for (let iteration = 0; queue.length > 0; iteration += 1) {
+      if (iteration >= maxFlushIterations) {
+        throw new Error("Reactive flush limit exceeded");
+      }
+
+      const current = takeQueuedComputations();
+
+      for (const computation of current) {
+        computation.queued = false;
+
+        if (!computation.disposed) {
+          try {
+            computation.run();
+          } catch (error) {
+            firstError ??= error;
+          }
+        }
+      }
+    }
+
+    if (firstError !== undefined) {
+      throw firstError;
+    }
+  } finally {
+    flushing = false;
+  }
+}
+
+function clearQueue(): void {
+  queue = [];
+  lastQueuedComputationId = -1;
+  queueRequiresSort = false;
+}
+
+function takeQueuedComputations(): ReactiveComputation[] {
+  if (queueRequiresSort) {
+    const current = queue.sort((a, b) => a.id - b.id);
+    clearQueue();
+    return current;
+  }
+
+  const current = queue;
+  queue = [];
+  lastQueuedComputationId = -1;
+  queueRequiresSort = false;
+  return current;
+}

package/src/state.ts

@@ -0,0 +1,40 @@
+export interface Source {
+  singleSubscriber?: ReactiveComputation | undefined;
+  subscribers: Set<ReactiveComputation>;
+  trackedBy?: ReactiveComputation | undefined;
+  trackedVersion?: number | undefined;
+}
+
+export interface ReactiveComputation {
+  readonly id: number;
+  deps: Set<Source>;
+  trackingAddedDeps?: Source[] | undefined;
+  trackingCount?: number | undefined;
+  trackingVersion?: number | undefined;
+  disposed: boolean;
+  queued: boolean;
+  markDirty(): void;
+  run(): void;
+  dispose(): void;
+  trackSource?(source: Source): void;
+}
+
+export type Tracker = ReactiveComputation | null;
+
+export const runtimeState: {
+  activeTracker: Tracker;
+  batchDepth: number;
+  cleanupOwner: ((dispose: () => void) => void) | undefined;
+  flushingComputed: boolean;
+  nextComputationId: number;
+  notificationDepth: number;
+  pendingComputed: Set<ReactiveComputation>;
+} = {
+  activeTracker: null,
+  batchDepth: 0,
+  cleanupOwner: undefined,
+  flushingComputed: false,
+  nextComputationId: 0,
+  notificationDepth: 0,
+  pendingComputed: new Set(),
+};

package/src/testing.ts

@@ -0,0 +1,11 @@
+import { flushQueuedComputations } from "./scheduler.js";
+
+export async function flushMicrotasks(): Promise<void> {
+  await Promise.resolve();
+}
+
+export async function flushEffects(): Promise<void> {
+  flushQueuedComputations();
+  await Promise.resolve();
+  flushQueuedComputations();
+}

package/src/tracking.ts

@@ -0,0 +1,166 @@
+import { runtimeState, type ReactiveComputation, type Source } from "./state.js";
+
+const maxPendingComputedFlushIterations = 100;
+
+export function trackSource(source: Source): void {
+  const tracker = runtimeState.activeTracker;
+
+  if (tracker === null || tracker.disposed) {
+    return;
+  }
+
+  if (tracker.trackSource !== undefined) {
+    tracker.trackSource(source);
+    return;
+  }
+
+  if (source.singleSubscriber === tracker) {
+    tracker.deps.add(source);
+    return;
+  }
+
+  const previousSize = source.subscribers.size;
+  source.subscribers.add(tracker);
+  tracker.deps.add(source);
+
+  if (previousSize === 0) {
+    source.singleSubscriber = tracker;
+  } else if (source.subscribers.size > 1) {
+    source.singleSubscriber = undefined;
+  }
+}
+
+export function cleanupDeps(computation: ReactiveComputation): void {
+  for (const dep of computation.deps) {
+    if (!dep.subscribers.delete(computation)) {
+      continue;
+    }
+
+    if (dep.trackedBy === computation) {
+      dep.trackedBy = undefined;
+      dep.trackedVersion = undefined;
+    }
+
+    if (dep.subscribers.size === 0) {
+      dep.singleSubscriber = undefined;
+    } else if (dep.subscribers.size === 1) {
+      dep.singleSubscriber = dep.subscribers.values().next().value;
+    }
+  }
+
+  computation.deps.clear();
+}
+
+export function notifySubscribers(source: Source): void {
+  if (source.subscribers.size === 0) {
+    return;
+  }
+
+  const cachedSingleSubscriber = source.singleSubscriber;
+  if (cachedSingleSubscriber !== undefined) {
+    if (cachedSingleSubscriber.disposed || cachedSingleSubscriber.queued) {
+      return;
+    }
+
+    runtimeState.notificationDepth += 1;
+
+    try {
+      cachedSingleSubscriber.markDirty();
+    } finally {
+      runtimeState.notificationDepth -= 1;
+
+      if (runtimeState.notificationDepth === 0 && runtimeState.batchDepth === 0) {
+        flushPendingComputed();
+      }
+    }
+    return;
+  }
+
+  runtimeState.notificationDepth += 1;
+
+  try {
+    const singleSubscriber =
+      source.subscribers.size === 1
+        ? source.subscribers.values().next().value
+        : undefined;
+
+    if (singleSubscriber !== undefined) {
+      if (!singleSubscriber.disposed && !singleSubscriber.queued) {
+        singleSubscriber.markDirty();
+      }
+    } else {
+      const subscribers = orderedComputations(source.subscribers);
+
+      for (const subscriber of subscribers) {
+        if (!subscriber.disposed && !subscriber.queued) {
+          subscriber.markDirty();
+        }
+      }
+    }
+  } finally {
+    runtimeState.notificationDepth -= 1;
+
+    if (runtimeState.notificationDepth === 0 && runtimeState.batchDepth === 0) {
+      flushPendingComputed();
+    }
+  }
+}
+
+export function flushPendingComputed(): void {
+  if (runtimeState.flushingComputed) {
+    return;
+  }
+
+  runtimeState.flushingComputed = true;
+
+  try {
+    for (
+      let iteration = 0;
+      runtimeState.pendingComputed.size > 0;
+      iteration += 1
+    ) {
+      if (iteration >= maxPendingComputedFlushIterations) {
+        runtimeState.pendingComputed.clear();
+        throw new Error("Reactive computed flush limit exceeded");
+      }
+
+      const computations =
+        runtimeState.pendingComputed.size === 1
+          ? [runtimeState.pendingComputed.values().next().value as ReactiveComputation]
+          : orderedComputations(runtimeState.pendingComputed);
+      runtimeState.pendingComputed.clear();
+
+      for (const computation of computations) {
+        computation.queued = false;
+
+        if (!computation.disposed) {
+          computation.run();
+        }
+      }
+    }
+  } finally {
+    runtimeState.flushingComputed = false;
+  }
+}
+
+function orderedComputations(
+  computations: ReadonlySet<ReactiveComputation>,
+): ReactiveComputation[] {
+  const ordered: ReactiveComputation[] = [];
+  let previousId = -1;
+  let monotonic = true;
+
+  for (const computation of computations) {
+    ordered.push(computation);
+
+    if (computation.id < previousId) {
+      monotonic = false;
+    }
+
+    previousId = computation.id;
+  }
+
+  return monotonic || ordered.length < 2
+    ? ordered
+    : ordered.sort((a, b) => a.id - b.id);
+}

package/src/types.ts

@@ -0,0 +1,7 @@
+export interface ReadonlyCell<T> {
+  get(): T;
+}
+
+export interface Cell<T> extends ReadonlyCell<T> {
+  set(value: T | ((prev: T) => T)): void;
+}

package/src/untrack.ts

@@ -0,0 +1,12 @@
+import { runtimeState } from "./state.js";
+
+export function untrack<T>(fn: () => T): T {
+  const previousTracker = runtimeState.activeTracker;
+  runtimeState.activeTracker = null;
+
+  try {
+    return fn();
+  } finally {
+    runtimeState.activeTracker = previousTracker;
+  }
+}