synstate-react-hooks 6.2.0 → 7.0.0

package/README.md

@@ -137,8 +137,8 @@ const [useCount, setCount, { state: count$ }] = createState(0);
 // Derived InitializedObservable — no fallback needed.
 const doubled$ = count$.pipe(map((n) => n * 2));
 
-// Imagine an Observable<string> that has no initial value
-// (e.g. one waiting on an async source).
+// Imagine an Observable<string> that has no initial value (e.g. one waiting on
+// an async source).
 declare const userName$: Observable<string>;
 
 const Profile = (): React.JSX.Element => {

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

@@ -1,14 +1,14 @@
 import type { Observable } from 'synstate';
 /**
- * Subscribes `subscriptionFn` to `observable$` while the component is
- * mounted, and unsubscribes when it unmounts.
+ * 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
+ * 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.
+ * 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.

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;;;;;;;;;;;;;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,gEAAgE;IAChE,KAAK,CAAC,kBAAkB,CAAC,GAAG,EAAE;QAC5B,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"}
+{"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,8EAA8E;IAC9E,6DAA6D;IAC7D,KAAK,CAAC,kBAAkB,CAAC,GAAG,EAAE;QAC5B,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"}

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",
-  "version": "6.2.0",
+  "version": "7.0.0",
   "description": "Type-safe State Management Library for TypeScript/JavaScript",
   "repository": {
     "type": "git",
@@ -28,28 +28,28 @@
     "LICENSE"
   ],
   "dependencies": {
-    "synstate": "6.1.1",
-    "ts-data-forge": "^14.10.0",
+    "synstate": "7.0.0",
+    "ts-data-forge": "^14.11.0",
     "ts-type-forge": "^9.2.2"
   },
   "devDependencies": {
-    "@sumi-lang/cli": "0.1.3",
+    "@sumi-lang/cli": "0.1.6",
     "@testing-library/dom": "10.4.2",
     "@testing-library/react": "16.3.3",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vitest/browser-playwright": "5.0.5",
-    "eslint-config-typed": "7.2.1",
-    "eslint-plugin-ts-data-forge": "0.10.6",
-    "eslint-plugin-ts-fortress": "1.3.11",
-    "eslint-plugin-ts-type-forge": "0.8.16",
+    "eslint-config-typed": "7.4.0",
+    "eslint-plugin-ts-data-forge": "0.10.9",
+    "eslint-plugin-ts-fortress": "1.3.13",
+    "eslint-plugin-ts-type-forge": "0.8.18",
     "playwright": "1.64.1",
     "prettier": "3.9.10",
     "prettier-plugin-organize-imports": "4.3.0",
     "prettier-plugin-packagejson": "3.0.2",
     "react": "19.3.1",
     "react-dom": "19.3.1",
-    "ts-repo-utils": "10.7.1"
+    "ts-repo-utils": "10.7.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0"

package/src/use-observable-effect.mts

@@ -2,15 +2,15 @@ import * as React from 'react';
 import type { Observable } from 'synstate';
 
 /**
- * Subscribes `subscriptionFn` to `observable$` while the component is
- * mounted, and unsubscribes when it unmounts.
+ * 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
+ * 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.
+ * 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.
@@ -21,8 +21,8 @@ export const useObservableEffect = <A,>(
 ): void => {
   const mut_subscriptionFnRef = React.useRef(subscriptionFn);
 
-  // Runs before the layout and passive effects of the commit, so a value one
-  // of them emits already reaches this render's `subscriptionFn`.
+  // Runs before the layout and passive effects of the commit, so a value one of
+  // them emits already reaches this render's `subscriptionFn`.
   React.useInsertionEffect(() => {
     mut_subscriptionFnRef.current = subscriptionFn;
   });

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)) };
 };