synstate-react-hooks-compat 6.1.1 → 6.2.1

package/README.md

@@ -1,6 +1,6 @@
 # SynState React hooks (compat)
 
-synstate-react-hooks-compat re-exports all exports from synstate except for `createState`, `createReducer`, and `createBooleanState`, and exports modified versions of those creation functions.
+synstate-react-hooks-compat re-exports every function and type synstate exports except for `createState`, `createReducer`, and `createBooleanState`, and exports modified versions of those creation functions.
 
 The first element of the array returned by the `createState<T>` function provided by synstate-react-hooks-compat is changed from `InitializedObservable<T>` to a React hook `() => T`, and the `InitializedObservable<T>` has been moved to the `state` property in the object at index 2.
 

package/dist/synstate.d.mts

@@ -1,2 +1,3 @@
 export { attachIndex, audit, collectToArray, combine, combineLatest, counter, createAsyncChildObservable, createEventEmitter, createInitializedSyncChildObservable, createRootObservable, createScope, createSyncChildObservable, createValueEmitter, debounce, derive, distinctUntilChanged, empty, filter, flatMap, fromAbortablePromise, fromPromise, fromSubscribable, getCurrentScope, getKey, isChildObservable, isManagerObservable, isObservable, isRootObservable, just, keepEqualParts, map, mapOptional, mapResultErr, mapResultOk, mapTo, merge, mergeMap, onScopeDispose, pairwise, pluck, scan, skip, skipIfNoChange, skipUntil, skipWhile, source, switchMap, take, takeUntil, takeWhile, throttle, timer, untracked, unwrapOptional, unwrapResultErr, unwrapResultOk, withBuffered, withBufferedFrom, withCurrentValueFrom, withIndex, withInitialValue, withLatestFrom, zip, } from 'synstate';
+export type { AsyncChildObservable, AsyncChildObservableHooks, AsyncChildObservableTools, AuditOperatorObservable, ChildObservable, ChildObservableConfig, ChildObservableKind, CombineObservable, CombineObservableRefined, CounterObservable, DebounceOperatorObservable, DeriveObservable, DeriveObservableRefined, DropInitialValueOperator, FilterOperatorObservable, FromPromiseObservable, FromSubscribableObservable, InitializedAsyncChildObservable, InitializedChildObservableConfig, InitializedObservable, InitializedRootObservable, InitializedSourceObservable, InitializedSyncChildObservable, KeepEqualPartsOperatorObservable, KeepInitialValueOperator, ManagerObservable, ManagerObservableKind, MapOperatorObservable, MergeMapOperatorObservable, MergeObservable, MergeObservableRefined, NonEmptyUnknownList, Observable, ObservableBase, ObservableKind, ObservableValue, Operator, PairwiseOperatorObservable, RootObservable, RootObservableConfig, RootObservableTools, ScanOperatorObservable, Scope, SkipIfNoChangeOperatorObservable, SkipUntilOperatorObservable, SkipWhileOperatorObservable, SourceObservable, StateOptions, Subscribable, Subscriber, Subscription, SwitchMapOperatorObservable, SyncChildObservable, SyncChildObservableHooks, SyncChildObservableTools, TakeOperatorObservable, TakeUntilOperatorObservable, TakeWhileOperatorObservable, ThrottleOperatorObservable, TimerId, TimerObservable, TupleToQueueTuple, Unwrap, UpdateToken, WithBufferedFromOperatorObservable, WithCurrentValueFromOperatorObservable, WithInitialValueOperator, WithInitialValueOperatorObservable, Wrap, WrapInitialized, ZipObservable, ZipObservableRefined, } from 'synstate';
 //# sourceMappingURL=synstate.d.mts.map

package/dist/synstate.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"synstate.d.mts","sourceRoot":"","sources":["../src/synstate.mts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,KAAK,EACL,cAAc,EACd,OAAO,EACP,aAAa,EACb,OAAO,EACP,0BAA0B,EAC1B,kBAAkB,EAClB,oCAAoC,EACpC,oBAAoB,EACpB,WAAW,EACX,yBAAyB,EACzB,kBAAkB,EAClB,QAAQ,EACR,MAAM,EACN,oBAAoB,EACpB,KAAK,EACL,MAAM,EACN,OAAO,EACP,oBAAoB,EACpB,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,MAAM,EACN,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,gBAAgB,EAChB,IAAI,EACJ,cAAc,EACd,GAAG,EACH,WAAW,EACX,YAAY,EACZ,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,cAAc,EACd,SAAS,EACT,SAAS,EACT,MAAM,EACN,SAAS,EACT,IAAI,EACJ,SAAS,EACT,SAAS,EACT,QAAQ,EACR,KAAK,EACL,SAAS,EACT,cAAc,EACd,eAAe,EACf,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,GAAG,GACJ,MAAM,UAAU,CAAC"}
+{"version":3,"file":"synstate.d.mts","sourceRoot":"","sources":["../src/synstate.mts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,KAAK,EACL,cAAc,EACd,OAAO,EACP,aAAa,EACb,OAAO,EACP,0BAA0B,EAC1B,kBAAkB,EAClB,oCAAoC,EACpC,oBAAoB,EACpB,WAAW,EACX,yBAAyB,EACzB,kBAAkB,EAClB,QAAQ,EACR,MAAM,EACN,oBAAoB,EACpB,KAAK,EACL,MAAM,EACN,OAAO,EACP,oBAAoB,EACpB,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,MAAM,EACN,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,gBAAgB,EAChB,IAAI,EACJ,cAAc,EACd,GAAG,EACH,WAAW,EACX,YAAY,EACZ,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,cAAc,EACd,SAAS,EACT,SAAS,EACT,MAAM,EACN,SAAS,EACT,IAAI,EACJ,SAAS,EACT,SAAS,EACT,QAAQ,EACR,KAAK,EACL,SAAS,EACT,cAAc,EACd,eAAe,EACf,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,GAAG,GACJ,MAAM,UAAU,CAAC;AAElB,YAAY,EACV,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,EACzB,uBAAuB,EACvB,eAAe,EACf,qBAAqB,EACrB,mBAAmB,EACnB,iBAAiB,EACjB,wBAAwB,EACxB,iBAAiB,EACjB,0BAA0B,EAC1B,gBAAgB,EAChB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,qBAAqB,EACrB,0BAA0B,EAC1B,+BAA+B,EAC/B,gCAAgC,EAChC,qBAAqB,EACrB,yBAAyB,EACzB,2BAA2B,EAC3B,8BAA8B,EAC9B,gCAAgC,EAChC,wBAAwB,EACxB,iBAAiB,EACjB,qBAAqB,EACrB,qBAAqB,EACrB,0BAA0B,EAC1B,eAAe,EACf,sBAAsB,EACtB,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,0BAA0B,EAC1B,cAAc,EACd,oBAAoB,EACpB,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,EACL,gCAAgC,EAChC,2BAA2B,EAC3B,2BAA2B,EAC3B,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,2BAA2B,EAC3B,mBAAmB,EACnB,wBAAwB,EACxB,wBAAwB,EACxB,sBAAsB,EACtB,2BAA2B,EAC3B,2BAA2B,EAC3B,0BAA0B,EAC1B,OAAO,EACP,eAAe,EACf,iBAAiB,EACjB,MAAM,EACN,WAAW,EACX,kCAAkC,EAClC,sCAAsC,EACtC,wBAAwB,EACxB,kCAAkC,EAClC,IAAI,EACJ,eAAe,EACf,aAAa,EACb,oBAAoB,GACrB,MAAM,UAAU,CAAC"}

package/dist/use-observable-effect.d.mts

@@ -1,3 +1,17 @@
 import type { Observable } from 'synstate';
+/**
+ * Subscribes `subscriptionFn` to `observable$` while the component is mounted,
+ * and unsubscribes when it unmounts.
+ *
+ * Each value is passed to the `subscriptionFn` of the latest render, so it sees
+ * the current props and state; a new function on every render does not
+ * re-subscribe. Passing a different Observable moves the subscription to it,
+ * so pass one that keeps its identity across renders (made outside the
+ * component, or memoized): one built during render is subscribed again, and an
+ * initialized one calls `subscriptionFn` again, on every render.
+ *
+ * @param observable$ The Observable to subscribe to.
+ * @param subscriptionFn Called with each value `observable$` emits.
+ */
 export declare const useObservableEffect: <A>(observable$: Observable<A>, subscriptionFn: (v: A) => void) => void;
 //# sourceMappingURL=use-observable-effect.d.mts.map

package/dist/use-observable-effect.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"use-observable-effect.d.mts","sourceRoot":"","sources":["../src/use-observable-effect.mts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,mBAAmB,GAAI,CAAC,eACtB,UAAU,CAAC,CAAC,CAAC,kBACV,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,KAC7B,IAQF,CAAC"}
+{"version":3,"file":"use-observable-effect.d.mts","sourceRoot":"","sources":["../src/use-observable-effect.mts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,mBAAmB,GAAI,CAAC,eACtB,UAAU,CAAC,CAAC,CAAC,kBACV,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,KAC7B,IAmBF,CAAC"}

package/dist/use-observable-effect.mjs

@@ -1,10 +1,41 @@
 import * as React from 'react';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 export const useObservableEffect = (observable$, subscriptionFn) => {
+    const mut_subscriptionFnRef = React.useRef(subscriptionFn);
+
+
+
+    useBeforeEffects(() => {
+        mut_subscriptionFnRef.current = subscriptionFn;
+    });
     React.useEffect(() => {
-        const s = observable$.subscribe(subscriptionFn);
+        const s = observable$.subscribe((v) => {
+            mut_subscriptionFnRef.current(v);
+        });
         return () => {
             s.unsubscribe();
         };
-    }, []);
+    }, [observable$]);
 };
+
+
+
+
+const useBeforeEffects = 
+
+React.useInsertionEffect ??
+    (typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect);
 //# sourceMappingURL=use-observable-effect.mjs.map

package/dist/use-observable-effect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-observable-effect.mjs","sourceRoot":"","sources":["../src/use-observable-effect.mts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,WAA0B,EAC1B,cAA8B,EACxB,EAAE;IACR,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,CAAC,GAAG,WAAW,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QAEhD,OAAO,GAAG,EAAE;YACV,CAAC,CAAC,WAAW,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC"}
+{"version":3,"file":"use-observable-effect.mjs","sourceRoot":"","sources":["../src/use-observable-effect.mts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,WAA0B,EAC1B,cAA8B,EACxB,EAAE;IACR,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;IAE3D,2EAA2E;IAC3E,qEAAqE;IACrE,oBAAoB;IACpB,gBAAgB,CAAC,GAAG,EAAE;QACpB,qBAAqB,CAAC,OAAO,GAAG,cAAc,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,CAAC,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE;YACpC,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,CAAC,CAAC,WAAW,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;AACpB,CAAC,CAAC;AAEF,8EAA8E;AAC9E,wEAAwE;AACxE,8EAA8E;AAC9E,0CAA0C;AAC1C,MAAM,gBAAgB;AACpB,4HAA4H;AAC5H,KAAK,CAAC,kBAAkB;IACxB,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC"}

package/dist/use-value-as-observable.d.mts

@@ -1,3 +1,17 @@
 import { type Observable } from 'synstate';
+/**
+ * Returns an observable that holds `input` and emits each new `input` the
+ * component renders with. It completes when the component unmounts, in a timer
+ * of 0 ms.
+ *
+ * React 18 and later run an effect's cleanup without unmounting in two cases.
+ * StrictMode runs it once after mount in development and sets the effect up
+ * again at once; completing only in a timer after the cleanup lets that setup
+ * keep the same observable. `<Activity mode="hidden">` (React 19.2) runs it and
+ * keeps the component's state; the observable completes, and is replaced with a
+ * new one holding the latest value when the component renders or is shown
+ * again. So read the observable from each render rather than keeping the first
+ * one.
+ */
 export declare const useValueAsObservable: <A>(input: A) => Observable<A>;
 //# sourceMappingURL=use-value-as-observable.d.mts.map

package/dist/use-value-as-observable.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"use-value-as-observable.d.mts","sourceRoot":"","sources":["../src/use-value-as-observable.mts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,UAAU,EAEhB,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAU,CAAC,KAAG,UAAU,CAAC,CAAC,CA0B/D,CAAC"}
+{"version":3,"file":"use-value-as-observable.d.mts","sourceRoot":"","sources":["../src/use-value-as-observable.mts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,UAAU,EAEhB,MAAM,UAAU,CAAC;AAElB;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAU,CAAC,KAAG,UAAU,CAAC,CAAC,CAiD/D,CAAC"}

package/dist/use-value-as-observable.mjs

@@ -1,18 +1,58 @@
 import * as React from 'react';
 import { source, withInitialValue, } from 'synstate';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 export const useValueAsObservable = (input) => {
-    const sourceObservable = React.useMemo(source, []);
-    const state = React.useMemo(() => sourceObservable.pipe(withInitialValue(input)), []);
-    React.useEffect(() => () => {
-        state.complete();
-    }, []);
-    const setState = React.useCallback((nextState) => {
-        sourceObservable.next(nextState);
-        return nextState;
-    }, []);
+    const [observables, setObservables] = React.useState(() => createObservables(input));
+
+    const mut_setups = React.useRef(0);
+
+    if (observables.state.isCompleted) {
+        setObservables(createObservables(input));
+    }
+
+
     React.useEffect(() => {
-        setState(input);
-    }, [input]);
-    return state;
+        mut_setups.current += 1;
+        if (observables.state.isCompleted) {
+
+
+
+            setObservables(createObservables(input));
+            return undefined;
+        }
+        return () => {
+            const setups = mut_setups.current;
+            setTimeout(() => {
+                if (mut_setups.current === setups) {
+                    observables.state.complete();
+                }
+            }, 0);
+        };
+    }, [observables, input]);
+    React.useEffect(() => {
+
+        if (!observables.state.isCompleted &&
+            !Object.is(observables.state.getSnapshot().value, input)) {
+            observables.source.next(input);
+        }
+    }, [input, observables]);
+    return observables.state;
+};
+const createObservables = (input) => {
+    const source$ = source();
+    return { source: source$, state: source$.pipe(withInitialValue(input)) };
 };
 //# sourceMappingURL=use-value-as-observable.mjs.map

package/dist/use-value-as-observable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-value-as-observable.mjs","sourceRoot":"","sources":["../src/use-value-as-observable.mts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,MAAM,EACN,gBAAgB,GAGjB,MAAM,UAAU,CAAC;AAElB,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAK,KAAQ,EAAiB,EAAE;IAClE,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAsB,MAAM,EAAE,EAAE,CAAC,CAAC;IAExE,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CACzB,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,EACpD,EAAE,CACH,CAAC;IAEF,KAAK,CAAC,SAAS,CACb,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,KAAK,CAAC,QAAQ,EAAE,CAAC;IACnB,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAY,EAAK,EAAE;QACrD,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAEjC,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,KAAK,CAAC;AACf,CAAC,CAAC"}
+{"version":3,"file":"use-value-as-observable.mjs","sourceRoot":"","sources":["../src/use-value-as-observable.mts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,MAAM,EACN,gBAAgB,GAIjB,MAAM,UAAU,CAAC;AAElB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAK,KAAQ,EAAiB,EAAE;IAClE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CACxD,iBAAiB,CAAC,KAAK,CAAC,CACzB,CAAC;IAEF,8EAA8E;IAC9E,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAEnC,+EAA+E;IAC/E,IAAI,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QAClC,cAAc,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3C,CAAC;IAED,4EAA4E;IAC5E,sDAAsD;IACtD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;QAExB,IAAI,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;YAClC,gEAAgE;YAChE,oEAAoE;YACpE,8CAA8C;YAC9C,cAAc,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;YAEzC,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO,GAAG,EAAE;YACV,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC;YAElC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,UAAU,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC;oBAClC,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBAC/B,CAAC;YACH,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,8DAA8D;QAC9D,IACE,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW;YAC9B,CAAC,MAAM,CAAC,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,EACxD,CAAC;YACD,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAEzB,OAAO,WAAW,CAAC,KAAK,CAAC;AAC3B,CAAC,CAAC;AAOF,MAAM,iBAAiB,GAAG,CAAK,KAAQ,EAAkB,EAAE;IACzD,MAAM,OAAO,GAAG,MAAM,EAAK,CAAC;IAE5B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;AAC3E,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synstate-react-hooks-compat",
-  "version": "6.1.1",
+  "version": "6.2.1",
   "description": "SynState React hooks for React 16.8–17 (without useSyncExternalStore)",
   "repository": {
     "type": "git",
@@ -28,8 +28,8 @@
     "LICENSE"
   ],
   "dependencies": {
-    "synstate": "6.1.1",
-    "ts-data-forge": "^14.10.0",
+    "synstate": "6.2.1",
+    "ts-data-forge": "^14.10.2",
     "ts-type-forge": "^9.2.2"
   },
   "devDependencies": {
@@ -38,10 +38,10 @@
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vitest/browser-playwright": "5.0.5",
-    "eslint-config-typed": "7.1.0",
-    "eslint-plugin-ts-data-forge": "0.10.5",
-    "eslint-plugin-ts-fortress": "1.3.10",
-    "eslint-plugin-ts-type-forge": "0.8.15",
+    "eslint-config-typed": "7.3.1",
+    "eslint-plugin-ts-data-forge": "0.10.8",
+    "eslint-plugin-ts-fortress": "1.3.12",
+    "eslint-plugin-ts-type-forge": "0.8.17",
     "playwright": "1.64.1",
     "prettier": "3.9.10",
     "prettier-plugin-organize-imports": "4.3.0",

package/src/synstate.mts

@@ -63,3 +63,78 @@ export {
   withLatestFrom,
   zip,
 } from 'synstate';
+
+export type {
+  AsyncChildObservable,
+  AsyncChildObservableHooks,
+  AsyncChildObservableTools,
+  AuditOperatorObservable,
+  ChildObservable,
+  ChildObservableConfig,
+  ChildObservableKind,
+  CombineObservable,
+  CombineObservableRefined,
+  CounterObservable,
+  DebounceOperatorObservable,
+  DeriveObservable,
+  DeriveObservableRefined,
+  DropInitialValueOperator,
+  FilterOperatorObservable,
+  FromPromiseObservable,
+  FromSubscribableObservable,
+  InitializedAsyncChildObservable,
+  InitializedChildObservableConfig,
+  InitializedObservable,
+  InitializedRootObservable,
+  InitializedSourceObservable,
+  InitializedSyncChildObservable,
+  KeepEqualPartsOperatorObservable,
+  KeepInitialValueOperator,
+  ManagerObservable,
+  ManagerObservableKind,
+  MapOperatorObservable,
+  MergeMapOperatorObservable,
+  MergeObservable,
+  MergeObservableRefined,
+  NonEmptyUnknownList,
+  Observable,
+  ObservableBase,
+  ObservableKind,
+  ObservableValue,
+  Operator,
+  PairwiseOperatorObservable,
+  RootObservable,
+  RootObservableConfig,
+  RootObservableTools,
+  ScanOperatorObservable,
+  Scope,
+  SkipIfNoChangeOperatorObservable,
+  SkipUntilOperatorObservable,
+  SkipWhileOperatorObservable,
+  SourceObservable,
+  StateOptions,
+  Subscribable,
+  Subscriber,
+  Subscription,
+  SwitchMapOperatorObservable,
+  SyncChildObservable,
+  SyncChildObservableHooks,
+  SyncChildObservableTools,
+  TakeOperatorObservable,
+  TakeUntilOperatorObservable,
+  TakeWhileOperatorObservable,
+  ThrottleOperatorObservable,
+  TimerId,
+  TimerObservable,
+  TupleToQueueTuple,
+  Unwrap,
+  UpdateToken,
+  WithBufferedFromOperatorObservable,
+  WithCurrentValueFromOperatorObservable,
+  WithInitialValueOperator,
+  WithInitialValueOperatorObservable,
+  Wrap,
+  WrapInitialized,
+  ZipObservable,
+  ZipObservableRefined,
+} from 'synstate';

package/src/use-observable-effect.mts

@@ -1,15 +1,49 @@
 import * as React from 'react';
 import type { Observable } from 'synstate';
 
+/**
+ * Subscribes `subscriptionFn` to `observable$` while the component is mounted,
+ * and unsubscribes when it unmounts.
+ *
+ * Each value is passed to the `subscriptionFn` of the latest render, so it sees
+ * the current props and state; a new function on every render does not
+ * re-subscribe. Passing a different Observable moves the subscription to it,
+ * so pass one that keeps its identity across renders (made outside the
+ * component, or memoized): one built during render is subscribed again, and an
+ * initialized one calls `subscriptionFn` again, on every render.
+ *
+ * @param observable$ The Observable to subscribe to.
+ * @param subscriptionFn Called with each value `observable$` emits.
+ */
 export const useObservableEffect = <A,>(
   observable$: Observable<A>,
   subscriptionFn: (v: A) => void,
 ): void => {
+  const mut_subscriptionFnRef = React.useRef(subscriptionFn);
+
+  // On React 18 and later, runs before the layout and passive effects of the
+  // commit, so a value one of them emits already reaches this render's
+  // `subscriptionFn`.
+  useBeforeEffects(() => {
+    mut_subscriptionFnRef.current = subscriptionFn;
+  });
+
   React.useEffect(() => {
-    const s = observable$.subscribe(subscriptionFn);
+    const s = observable$.subscribe((v) => {
+      mut_subscriptionFnRef.current(v);
+    });
 
     return () => {
       s.unsubscribe();
     };
-  }, []);
+  }, [observable$]);
 };
+
+// `useInsertionEffect` is React 18's (`'useInsertionEffect' in React` narrows
+// to `never`, as the types have it). Before it, `useLayoutEffect` comes
+// closest, running before the passive effects only; it warns when rendered on
+// the server, where nothing emits anyway.
+const useBeforeEffects: typeof React.useLayoutEffect =
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- React 16 and 17 have none, whatever the types say
+  React.useInsertionEffect ??
+  (typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect);

package/src/use-value-as-observable.mts

@@ -2,34 +2,83 @@ import * as React from 'react';
 import {
   source,
   withInitialValue,
+  type InitializedObservable,
   type Observable,
   type SourceObservable,
 } from 'synstate';
 
+/**
+ * Returns an observable that holds `input` and emits each new `input` the
+ * component renders with. It completes when the component unmounts, in a timer
+ * of 0 ms.
+ *
+ * React 18 and later run an effect's cleanup without unmounting in two cases.
+ * StrictMode runs it once after mount in development and sets the effect up
+ * again at once; completing only in a timer after the cleanup lets that setup
+ * keep the same observable. `<Activity mode="hidden">` (React 19.2) runs it and
+ * keeps the component's state; the observable completes, and is replaced with a
+ * new one holding the latest value when the component renders or is shown
+ * again. So read the observable from each render rather than keeping the first
+ * one.
+ */
 export const useValueAsObservable = <A,>(input: A): Observable<A> => {
-  const sourceObservable = React.useMemo<SourceObservable<A>>(source, []);
-
-  const state = React.useMemo(
-    () => sourceObservable.pipe(withInitialValue(input)),
-    [],
+  const [observables, setObservables] = React.useState(() =>
+    createObservables(input),
   );
 
-  React.useEffect(
-    () => () => {
-      state.complete();
-    },
-    [],
-  );
+  /** Bumped by every setup, so that a completion scheduled before it lapses. */
+  const mut_setups = React.useRef(0);
+
+  // Replaced during render, so that what renders below gets the new one at once.
+  if (observables.state.isCompleted) {
+    setObservables(createObservables(input));
+  }
+
+  // A new `input` runs this effect's cleanup and setup again at once, and the
+  // setup cancels the completion the cleanup scheduled.
+  React.useEffect(() => {
+    mut_setups.current += 1;
+
+    if (observables.state.isCompleted) {
+      // Shown again with no render: start from the latest input React
+      // committed, which a render while hidden may have changed after the
+      // completed observable stopped taking values.
+      setObservables(createObservables(input));
 
-  const setState = React.useCallback((nextState: A): A => {
-    sourceObservable.next(nextState);
+      return undefined;
+    }
 
-    return nextState;
-  }, []);
+    return () => {
+      const setups = mut_setups.current;
+
+      setTimeout(() => {
+        if (mut_setups.current === setups) {
+          observables.state.complete();
+        }
+      }, 0);
+    };
+  }, [observables, input]);
 
   React.useEffect(() => {
-    setState(input);
-  }, [input]);
+    // The observable already holds the value it was created with.
+    if (
+      !observables.state.isCompleted &&
+      !Object.is(observables.state.getSnapshot().value, input)
+    ) {
+      observables.source.next(input);
+    }
+  }, [input, observables]);
+
+  return observables.state;
+};
+
+type Observables<A> = Readonly<{
+  source: SourceObservable<A>;
+  state: InitializedObservable<A>;
+}>;
+
+const createObservables = <A,>(input: A): Observables<A> => {
+  const source$ = source<A>();
 
-  return state;
+  return { source: source$, state: source$.pipe(withInitialValue(input)) };
 };