signalium 0.2.8 → 0.3.1

package/src/react/provider.tsx

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import { SignalScope, SignalStoreMap } from '../hooks.js';
+import { ScopeContext } from './context.js';
+
+export function ContextProvider({
+  children,
+  contexts,
+  inherit = true,
+}: {
+  children: React.ReactNode;
+  contexts: SignalStoreMap;
+  inherit?: boolean;
+}) {
+  const parentScope = useContext(ScopeContext);
+  const scope = new SignalScope(contexts, inherit ? parentScope : undefined);
+
+  return <ScopeContext.Provider value={scope}>{children}</ScopeContext.Provider>;
+}

package/src/react/setup.ts

@@ -0,0 +1,10 @@
+import { setConfig } from '../config.js';
+import { useScope } from './context.js';
+import { useSignalValue } from './signal-value.js';
+
+export function setupReact() {
+  setConfig({
+    useSignalValue,
+    getFrameworkScope: useScope,
+  });
+}

package/src/react/signal-value.ts

@@ -0,0 +1,49 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import { ScopeContext } from './context.js';
+import { watcher } from '../hooks.js';
+
+export function useSignalValue<T>(key: string, fn: () => T): T {
+  const [, setVersion] = useState(0);
+  const scope = useContext(ScopeContext);
+  const ref = useRef<{
+    value: T | undefined;
+    unsub: (() => void) | undefined;
+    key: string | undefined;
+  }>({
+    value: undefined,
+    unsub: undefined,
+    key: undefined,
+  });
+
+  const currentKey = ref.current.key;
+
+  if (key !== currentKey) {
+    ref.current.unsub?.();
+
+    const w = watcher(fn, { scope });
+
+    let initialized = false;
+
+    ref.current.unsub = w.addListener(
+      value => {
+        ref.current.value = value;
+
+        // Trigger an update to the component
+        if (initialized) {
+          setVersion(v => v + 1);
+        }
+
+        initialized = true;
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    ref.current.key = key;
+  }
+
+  useEffect(() => ref.current.unsub, []);
+
+  return ref.current.value!;
+}

package/src/react/state.ts

@@ -0,0 +1,13 @@
+import { useRef } from 'react';
+import { state } from '../hooks.js';
+import { SignalOptions, WriteableSignal } from '../types.js';
+
+export function useStateSignal<T>(value: T, opts?: SignalOptions<T, unknown[]>): WriteableSignal<T> {
+  const ref = useRef<WriteableSignal<T> | undefined>(undefined);
+
+  if (!ref.current) {
+    ref.current = state(value, opts);
+  }
+
+  return ref.current;
+}

package/src/scheduling.ts

@@ -1,15 +1,33 @@
 import { ComputedSignal } from './signals.js';
-import { scheduleFlush, runBatch } from './config.js';
+import { scheduleFlush as _scheduleFlush, runBatch } from './config.js';
+import { Tracer } from './trace.js';
 
 let PENDING_DIRTIES: ComputedSignal<any>[] = [];
 let PENDING_PULLS: ComputedSignal<any>[] = [];
 let PENDING_WATCHERS: ComputedSignal<any>[] = [];
+let PENDING_CONNECTS = new Map<ComputedSignal<any>, number>();
 let PENDING_DISCONNECTS = new Map<ComputedSignal<any>, number>();
+let PENDING_EFFECTS: ComputedSignal<any>[] = [];
+let PENDING_TRACERS: Tracer[] = [];
 
 const microtask = () => Promise.resolve();
 
+let currentFlush: { promise: Promise<void>; resolve: () => void } | null = null;
+
+const scheduleFlush = (fn: () => void) => {
+  if (currentFlush) return;
+
+  let resolve: () => void;
+  const promise = new Promise<void>(r => (resolve = r));
+
+  currentFlush = { promise, resolve: resolve! };
+
+  _scheduleFlush(flushWatchers);
+};
+
 export const scheduleWatcher = (watcher: ComputedSignal<any>) => {
   PENDING_WATCHERS.push(watcher);
+
   scheduleFlush(flushWatchers);
 };
 
@@ -23,6 +41,14 @@ export const schedulePull = (signal: ComputedSignal<any>) => {
   scheduleFlush(flushWatchers);
 };
 
+export const scheduleConnect = (connect: ComputedSignal<any>) => {
+  const current = PENDING_CONNECTS.get(connect) ?? 0;
+
+  PENDING_CONNECTS.set(connect, current + 1);
+
+  scheduleFlush(flushWatchers);
+};
+
 export const scheduleDisconnect = (disconnect: ComputedSignal<any>) => {
   const current = PENDING_DISCONNECTS.get(disconnect) ?? 0;
 
@@ -31,7 +57,21 @@ export const scheduleDisconnect = (disconnect: ComputedSignal<any>) => {
   scheduleFlush(flushWatchers);
 };
 
+export const scheduleEffect = (signal: ComputedSignal<any>) => {
+  PENDING_EFFECTS.push(signal);
+  scheduleFlush(flushWatchers);
+};
+
+export const scheduleTracer = (tracer: Tracer) => {
+  PENDING_TRACERS.push(tracer);
+  scheduleFlush(flushWatchers);
+};
+
 const flushWatchers = async () => {
+  const flush = currentFlush!;
+
+  // Flush all the dirty signals and pulls recursively, clearing
+  // the microtask queue until they are all settled
   while (PENDING_DIRTIES.length > 0 || PENDING_PULLS.length > 0) {
     for (const dirty of PENDING_DIRTIES) {
       dirty._dirtyConsumers();
@@ -47,16 +87,44 @@ const flushWatchers = async () => {
     await microtask();
   }
 
+  // Clear the flush so that if any more watchers are scheduled,
+  // they will be flushed in the next tick
+  currentFlush = null;
+
   runBatch(() => {
     for (const watcher of PENDING_WATCHERS) {
       watcher._check();
     }
 
+    for (const [signal, count] of PENDING_CONNECTS) {
+      signal._check(true, count);
+    }
+
     for (const [signal, count] of PENDING_DISCONNECTS) {
       signal._disconnect(count);
     }
 
+    for (const signal of PENDING_EFFECTS) {
+      signal._runEffects();
+    }
+
+    for (const tracer of PENDING_TRACERS) {
+      tracer.flush();
+    }
+
     PENDING_WATCHERS = [];
+    PENDING_CONNECTS.clear();
     PENDING_DISCONNECTS.clear();
+    PENDING_EFFECTS = [];
+    PENDING_TRACERS = [];
   });
+
+  // resolve the flush promise
+  flush.resolve();
+};
+
+export const settled = async () => {
+  while (currentFlush) {
+    await currentFlush.promise;
+  }
 };