simplify useSignalSelector API, do not require a wrapping Provider

Author: mike.duminy

src/signals/context.ts

@@ -15,15 +15,16 @@ export interface SignalContextValue<
 
 export { ReactReduxContext }
 
-export function useSignalContext<S>(): SignalContextValue<S> {
+export function useSignalContext<S>(
+  context?: React.Context<SignalContextValue<S>>,
+): SignalContextValue<S> {
   const contextValue = React.useContext(
-    ReactReduxContext as React.Context<SignalContextValue<S> | null>,
+    (context ||
+      ReactReduxContext) as React.Context<SignalContextValue<S> | null>,
   )
 
   if (!contextValue) {
-    throw new Error(
-      'useSignalSelector must be used within a <SignalProvider>',
-    )
+    throw new Error('useSignalSelector must be used within a <SignalProvider>')
   }
 
   // Verify this is actually a signal context (has registry + engine)

src/signals/useSignalSelector.ts

@@ -1,6 +1,8 @@
 import { React } from '../utils/react'
 import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
+import type { SignalContextValue } from './context'
 import { useSignalContext } from './context'
+import { reconcileState } from './diff'
 import {
   createTrackingProxy,
   getProxyPath,
@@ -9,7 +11,6 @@ import {
 
 const { useRef, useMemo, useEffect, useSyncExternalStore } = React
 
-
 /**
  * A React hook that selects state from a Redux store using signal-based
  * dependency tracking. Only re-renders when the selected value actually
@@ -18,13 +19,33 @@ const { useRef, useMemo, useEffect, useSyncExternalStore } = React
  * Must be used within a <SignalProvider>.
  * @param selector - Function that extracts a value from the store state
  * @param equalityFn - Custom equality function for change detection
+ * @param context - The signal context containing store, registry, and engine
  * @returns The selected value
  */
 export function useSignalSelector<S extends object, R>(
   selector: (state: S) => R,
   equalityFn: (a: R, b: R) => boolean = Object.is,
+  context?: React.Context<SignalContextValue<S>>,
 ): R {
-  const { store, registry, engine } = useSignalContext<S>()
+  const { store, registry, engine, subscription } = useSignalContext<S>(context)
+
+  const prevStateRef = React.useRef<S>(store.getState())
+
+  // Standard Provider subscription logic (from components/Provider.tsx)
+  // + signal diff on each dispatch
+  useIsomorphicLayoutEffect(() => {
+    subscription.onStateChange = () => {
+      // Run signal diff BEFORE notifying nested subs, so computed values
+      // are up-to-date when useSelector/useSignalSelector read them
+      const prev = prevStateRef.current
+      const next = store.getState()
+      prevStateRef.current = next
+      reconcileState(prev, next, registry, engine)
+
+      subscription.notifyNestedSubs()
+    }
+    subscription.trySubscribe()
+  }, [subscription])
 
   // Track latest selector/equalityFn via refs, synced in layout effect (not during render)
   const selectorRef = useRef(selector)
@@ -146,3 +167,12 @@ export function useSignalSelector<S extends object, R>(
 
   return useSyncExternalStore(bridge.subscribe, bridge.getSnapshot)
 }
+
+export const createUseSignalSelector = (
+  context?: React.Context<SignalContextValue<any>>,
+) => {
+  return <S extends object, R>(
+    selector: (state: S) => R,
+    equalityFn?: (a: R, b: R) => boolean,
+  ) => useSignalSelector(selector, equalityFn, context)
+}