synstate-react-hooks-compat 1.0.0

package/README.md

@@ -0,0 +1,112 @@
+# SynState React hooks
+
+synstate-react-hooks re-exports all exports from synstate 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-preact-hooks 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.
+
+## Installation
+
+```bash
+npm add synstate-react-hooks-compat
+```
+
+Or with other package managers:
+
+```bash
+# Yarn
+yarn add synstate-react-hooks-compat
+
+# pnpm
+pnpm add synstate-react-hooks-compat
+```
+
+## Quick Start
+
+### Simple State Management
+
+```tsx
+import type * as React from 'react';
+import { createState } from 'synstate-react-hooks-compat';
+
+// Global state (outside component)
+const [useUserState, setUserState] = createState({
+    name: '',
+    email: '',
+});
+
+const UserProfile = (): React.JSX.Element => {
+    const user = useUserState();
+
+    return (
+        <div>
+            <p>{`Name: ${user.name}`}</p>
+            <button
+                onClick={() => {
+                    setUserState({
+                        name: 'Alice',
+                        email: 'alice@example.com',
+                    });
+                }}
+            >
+                {'Set User'}
+            </button>
+        </div>
+    );
+};
+```
+
+With `resetState`, `updateState`, `state` APIs:
+
+```tsx
+import type * as React from 'react';
+import { createState } from 'synstate-react-hooks-compat';
+
+// Global state (outside component)
+const [
+    useUserState,
+    setUserState,
+    {
+        resetState: resetUserState,
+        updateState: updateUserState,
+        state: userState,
+    },
+] = createState({
+    name: '',
+    email: '',
+});
+
+userState.subscribe((u) => {
+    console.log('User is updated:', u);
+});
+
+const UserProfile = (): React.JSX.Element => {
+    const user = useUserState();
+
+    return (
+        <div>
+            <p>{`Name: ${user.name}`}</p>
+            <button
+                onClick={() => {
+                    setUserState({
+                        name: 'Alice',
+                        email: 'alice@example.com',
+                    });
+                }}
+            >
+                {'Set User'}
+            </button>
+            <button
+                onClick={() => {
+                    updateUserState((prev) => ({
+                        name: prev.name,
+                        email: '',
+                    }));
+                }}
+            >
+                {'Reset email'}
+            </button>
+            <button onClick={resetUserState}>{'Reset'}</button>
+        </div>
+    );
+};
+```

package/dist/create-boolean-state.d.mts

@@ -0,0 +1,13 @@
+import { type InitializedObservable } from 'synstate';
+export declare const createBooleanState: (initialState: boolean) => readonly [useCurrentValue: () => boolean, Readonly<{
+    state: InitializedObservable<boolean>;
+    setTrue: () => void;
+    setFalse: () => void;
+    setState: (next: boolean) => boolean;
+    toggle: () => boolean;
+    updateState: (updateFn: (prev: boolean) => boolean) => boolean;
+    resetState: () => boolean;
+    getSnapshot: () => boolean;
+    initialState: boolean;
+}>];
+//# sourceMappingURL=create-boolean-state.d.mts.map

package/dist/create-boolean-state.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-boolean-state.d.mts","sourceRoot":"","sources":["../src/create-boolean-state.mts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,qBAAqB,EAE3B,MAAM,UAAU,CAAC;AAGlB,eAAO,MAAM,kBAAkB,GAC7B,cAAc,OAAO,KACpB,SAAS,CACV,eAAe,EAAE,MAAM,OAAO,EAC9B,QAAQ,CAAC;IACP,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC;IACrC,MAAM,EAAE,MAAM,OAAO,CAAC;IACtB,WAAW,EAAE,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,KAAK,OAAO,CAAC;IAC/D,UAAU,EAAE,MAAM,OAAO,CAAC;IAC1B,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC,CA+BH,CAAC"}

package/dist/create-boolean-state.mjs

@@ -0,0 +1,24 @@
+import { createBooleanState as createBooleanState$1 } from 'synstate';
+import { useObservableValue } from './use-observable-value.mjs';
+
+const createBooleanState = (initialState) => {
+    const [state, { setTrue, setFalse, setState, toggle, updateState, resetState, getSnapshot, },] = createBooleanState$1(initialState);
+    const useCurrentValue = () => useObservableValue(state);
+    return [
+        useCurrentValue,
+        {
+            state,
+            setTrue,
+            setFalse,
+            setState,
+            toggle,
+            updateState,
+            resetState,
+            getSnapshot,
+            initialState,
+        },
+    ];
+};
+
+export { createBooleanState };
+//# sourceMappingURL=create-boolean-state.mjs.map

package/dist/create-boolean-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-boolean-state.mjs","sources":["../src/create-boolean-state.mts"],"sourcesContent":[null],"names":["createBooleanStateBase"],"mappings":";;;AAMO,MAAM,kBAAkB,GAAG,CAChC,YAAqB,KAcnB;IACF,MAAM,CACJ,KAAK,EACL,EACE,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,EACX,UAAU,EACV,WAAW,GACZ,EACF,GAAGA,oBAAsB,CAAC,YAAY,CAAC;IAExC,MAAM,eAAe,GAAG,MAAe,kBAAkB,CAAC,KAAK,CAAC;IAEhE,OAAO;QACL,eAAe;AACf,QAAA;YACE,KAAK;YACL,OAAO;YACP,QAAQ;YACR,QAAQ;YACR,MAAM;YACN,WAAW;YACX,UAAU;YACV,WAAW;YACX,YAAY;AACb,SAAA;KACO;AACZ;;;;"}

package/dist/create-reducer.d.mts

@@ -0,0 +1,7 @@
+import { type InitializedObservable } from 'synstate';
+export declare const createReducer: <S, A>(reducer: Reducer<S, A>, initialState: S) => readonly [useCurrentValue: () => S, dispatch: (action: A) => S, Readonly<{
+    state: InitializedObservable<S>;
+    getSnapshot: () => S;
+    initialState: S;
+}>];
+//# sourceMappingURL=create-reducer.d.mts.map

package/dist/create-reducer.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-reducer.d.mts","sourceRoot":"","sources":["../src/create-reducer.mts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,UAAU,CAAC;AAGlB,eAAO,MAAM,aAAa,GAAI,CAAC,EAAE,CAAC,EAChC,SAAS,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,EACtB,cAAc,CAAC,KACd,SAAS,CACV,eAAe,EAAE,MAAM,CAAC,EACxB,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,EAC1B,QAAQ,CAAC;IACP,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC,CAAC;IACrB,YAAY,EAAE,CAAC,CAAC;CACjB,CAAC,CAUH,CAAC"}

package/dist/create-reducer.mjs

@@ -0,0 +1,11 @@
+import { createReducer as createReducer$1 } from 'synstate';
+import { useObservableValue } from './use-observable-value.mjs';
+
+const createReducer = (reducer, initialState) => {
+    const [state, dispatch, { getSnapshot }] = createReducer$1(reducer, initialState);
+    const useCurrentValue = () => useObservableValue(state);
+    return [useCurrentValue, dispatch, { state, getSnapshot, initialState }];
+};
+
+export { createReducer };
+//# sourceMappingURL=create-reducer.mjs.map

package/dist/create-reducer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-reducer.mjs","sources":["../src/create-reducer.mts"],"sourcesContent":[null],"names":["createReducerBase"],"mappings":";;;MAMa,aAAa,GAAG,CAC3B,OAAsB,EACtB,YAAe,KASb;AACF,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,WAAW,EAAE,CAAC,GAAGA,eAAiB,CAC1D,OAAO,EACP,YAAY,CACb;IAED,MAAM,eAAe,GAAG,MAAS,kBAAkB,CAAC,KAAK,CAAC;AAE1D,IAAA,OAAO,CAAC,eAAe,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,CAAC;AAC1E;;;;"}

package/dist/create-state.d.mts

@@ -0,0 +1,9 @@
+import { type InitializedObservable } from 'synstate';
+export declare const createState: <S>(initialState: S) => readonly [useCurrentValue: () => S, setState: (v: S) => S, Readonly<{
+    state: InitializedObservable<S>;
+    updateState: (updateFn: (prev: S) => S) => S;
+    resetState: () => S;
+    getSnapshot: () => S;
+    initialState: S;
+}>];
+//# sourceMappingURL=create-state.d.mts.map

package/dist/create-state.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-state.d.mts","sourceRoot":"","sources":["../src/create-state.mts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,UAAU,CAAC;AAGlB,eAAO,MAAM,WAAW,GAAI,CAAC,EAC3B,cAAc,CAAC,KACd,SAAS,CACV,eAAe,EAAE,MAAM,CAAC,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EACrB,QAAQ,CAAC;IACP,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAChC,WAAW,EAAE,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC,CAAC;IACrB,YAAY,EAAE,CAAC,CAAC;CACjB,CAAC,CAkBH,CAAC"}

package/dist/create-state.mjs

@@ -0,0 +1,21 @@
+import { createState as createState$1 } from 'synstate';
+import { useObservableValue } from './use-observable-value.mjs';
+
+const createState = (initialState) => {
+    const [state, setState, { updateState, resetState, getSnapshot }] = createState$1(initialState);
+    const useCurrentValue = () => useObservableValue(state);
+    return [
+        useCurrentValue,
+        setState,
+        {
+            state,
+            updateState,
+            resetState,
+            getSnapshot,
+            initialState,
+        },
+    ];
+};
+
+export { createState };
+//# sourceMappingURL=create-state.mjs.map

package/dist/create-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-state.mjs","sources":["../src/create-state.mts"],"sourcesContent":[null],"names":["createStateBase"],"mappings":";;;AAMO,MAAM,WAAW,GAAG,CACzB,YAAe,KAWb;AACF,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,GAC/DA,aAAe,CAAC,YAAY,CAAC;IAE/B,MAAM,eAAe,GAAG,MAAS,kBAAkB,CAAC,KAAK,CAAC;IAE1D,OAAO;QACL,eAAe;QACf,QAAQ;AACR,QAAA;YACE,KAAK;YACL,WAAW;YACX,UAAU;YACV,WAAW;YACX,YAAY;AACb,SAAA;KACO;AACZ;;;;"}

package/dist/globals.d.mts

@@ -0,0 +1 @@
+/// <reference types="ts-type-forge" />

package/dist/index.d.mts

@@ -0,0 +1,8 @@
+export * from './create-boolean-state.mjs';
+export * from './create-reducer.mjs';
+export * from './create-state.mjs';
+export * from './synstate.mjs';
+export * from './use-observable-effect.mjs';
+export * from './use-observable-value.mjs';
+export * from './use-value-as-observable.mjs';
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../src/index.mts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC"}

package/dist/index.mjs

@@ -0,0 +1,8 @@
+export { createBooleanState } from './create-boolean-state.mjs';
+export { createReducer } from './create-reducer.mjs';
+export { createState } from './create-state.mjs';
+export { AsyncChildObservableClass, InitializedSyncChildObservableClass, ObservableBaseClass, RootObservableClass, SyncChildObservableClass, attachIndex, audit, collectToArray, combine, combineLatest, counter, createEventEmitter, createValueEmitter, debounce, distinctUntilChanged, filter, flatMap, fromAbortablePromise, fromPromise, fromSubscribable, getKey, isChildObservable, isManagerObservable, isRootObservable, just, map, mapOptional, mapResultErr, mapResultOk, mapTo, merge, mergeMap, pairwise, pluck, scan, skip, skipIfNoChange, skipUntil, skipWhile, source, switchMap, take, takeUntil, takeWhile, throttle, timer, unwrapOptional, unwrapResultErr, unwrapResultOk, withBuffered, withBufferedFrom, withCurrentValueFrom, withIndex, withInitialValue, withLatestFrom, zip } from 'synstate';
+export { useObservableEffect } from './use-observable-effect.mjs';
+export { useObservableValue } from './use-observable-value.mjs';
+export { useValueAsObservable } from './use-value-as-observable.mjs';
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/synstate.d.mts

@@ -0,0 +1,2 @@
+export { AsyncChildObservableClass, InitializedSyncChildObservableClass, ObservableBaseClass, RootObservableClass, SyncChildObservableClass, attachIndex, audit, collectToArray, combine, combineLatest, counter, createEventEmitter, createValueEmitter, debounce, distinctUntilChanged, filter, flatMap, fromAbortablePromise, fromPromise, fromSubscribable, getKey, isChildObservable, isManagerObservable, isRootObservable, just, map, mapOptional, mapResultErr, mapResultOk, mapTo, merge, mergeMap, pairwise, pluck, scan, skip, skipIfNoChange, skipUntil, skipWhile, source, switchMap, take, takeUntil, takeWhile, throttle, timer, unwrapOptional, unwrapResultErr, unwrapResultOk, withBuffered, withBufferedFrom, withCurrentValueFrom, withIndex, withInitialValue, withLatestFrom, zip, } from 'synstate';
+//# sourceMappingURL=synstate.d.mts.map

package/dist/synstate.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"synstate.d.mts","sourceRoot":"","sources":["../src/synstate.mts"],"names":[],"mappings":"AAAA,OAAO,EACL,yBAAyB,EACzB,mCAAmC,EACnC,mBAAmB,EACnB,mBAAmB,EACnB,wBAAwB,EACxB,WAAW,EACX,KAAK,EACL,cAAc,EACd,OAAO,EACP,aAAa,EACb,OAAO,EACP,kBAAkB,EAClB,kBAAkB,EAClB,QAAQ,EACR,oBAAoB,EACpB,MAAM,EACN,OAAO,EACP,oBAAoB,EACpB,WAAW,EACX,gBAAgB,EAChB,MAAM,EACN,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,IAAI,EACJ,GAAG,EACH,WAAW,EACX,YAAY,EACZ,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,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,cAAc,EACd,eAAe,EACf,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,GAAG,GACJ,MAAM,UAAU,CAAC"}

package/dist/synstate.mjs

@@ -0,0 +1,2 @@
+export { AsyncChildObservableClass, InitializedSyncChildObservableClass, ObservableBaseClass, RootObservableClass, SyncChildObservableClass, attachIndex, audit, collectToArray, combine, combineLatest, counter, createEventEmitter, createValueEmitter, debounce, distinctUntilChanged, filter, flatMap, fromAbortablePromise, fromPromise, fromSubscribable, getKey, isChildObservable, isManagerObservable, isRootObservable, just, map, mapOptional, mapResultErr, mapResultOk, mapTo, merge, mergeMap, pairwise, pluck, scan, skip, skipIfNoChange, skipUntil, skipWhile, source, switchMap, take, takeUntil, takeWhile, throttle, timer, unwrapOptional, unwrapResultErr, unwrapResultOk, withBuffered, withBufferedFrom, withCurrentValueFrom, withIndex, withInitialValue, withLatestFrom, zip } from 'synstate';
+//# sourceMappingURL=synstate.mjs.map

package/dist/synstate.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"synstate.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/tsconfig.json

@@ -0,0 +1 @@
+{"include":["."]}

package/dist/types.d.mts

@@ -0,0 +1,2 @@
+import './globals.d.mts';
+export * from './entry-point.mjs';

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

@@ -0,0 +1,3 @@
+import { type Observable } from 'synstate';
+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

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

package/dist/use-observable-effect.mjs

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+const useObservableEffect = (observable$, subscriptionFn) => {
+    React.useEffect(() => {
+        const s = observable$.subscribe(subscriptionFn);
+        return () => {
+            s.unsubscribe();
+        };
+    }, []);
+};
+
+export { useObservableEffect };
+//# sourceMappingURL=use-observable-effect.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-observable-effect.mjs","sources":["../src/use-observable-effect.mts"],"sourcesContent":[null],"names":[],"mappings":";;MAGa,mBAAmB,GAAG,CACjC,WAA0B,EAC1B,cAA8B,KACtB;AACR,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;QACnB,MAAM,CAAC,GAAG,WAAW,CAAC,SAAS,CAAC,cAAc,CAAC;AAE/C,QAAA,OAAO,MAAK;YACV,CAAC,CAAC,WAAW,EAAE;AACjB,QAAA,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;AACR;;;;"}

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

@@ -0,0 +1,6 @@
+import { type InitializedObservable, type Observable } from 'synstate';
+export declare function useObservableValue<A, B = A>(observable$: Observable<A>, initialValue: B): A | B;
+export declare function useObservableValue<A>(observable$: InitializedObservable<A>): A;
+export declare function useObservableValue<A>(observable$: Observable<A>): A | undefined;
+export declare function useObservableValue<A, B = A>(observable$: Observable<A>, initialValue: B): A | B;
+//# sourceMappingURL=use-observable-value.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-observable-value.d.mts","sourceRoot":"","sources":["../src/use-observable-value.mts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAGvE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EACzC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,EAC1B,YAAY,EAAE,CAAC,GACd,CAAC,GAAG,CAAC,CAAC;AAET,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,WAAW,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;AAEhF,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,GACzB,CAAC,GAAG,SAAS,CAAC;AAEjB,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EACzC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,EAC1B,YAAY,EAAE,CAAC,GACd,CAAC,GAAG,CAAC,CAAC"}

package/dist/use-observable-value.mjs

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Optional } from 'ts-data-forge';
+
+function useObservableValue(observable$, initialValue) {
+    const [value, setValue] = React.useState(() => Optional.unwrapOr(observable$.getSnapshot(), initialValue));
+    React.useEffect(() => {
+        const { unsubscribe } = observable$.subscribe((v) => {
+            setValue(v);
+        });
+        return unsubscribe;
+    }, [observable$]);
+    return value;
+}
+
+export { useObservableValue };
+//# sourceMappingURL=use-observable-value.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-observable-value.mjs","sources":["../src/use-observable-value.mts"],"sourcesContent":[null],"names":[],"mappings":";;;AAoBM,SAAU,kBAAkB,CAChC,WAA0B,EAC1B,YAAgB,EAAA;IAEhB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAoB,MAC1D,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,EAAE,YAAY,CAAC,CAC3D;AAED,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;QACnB,MAAM,EAAE,WAAW,EAAE,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,KAAI;YAClD,QAAQ,CAAC,CAAC,CAAC;AACb,QAAA,CAAC,CAAC;AAEF,QAAA,OAAO,WAAW;AACpB,IAAA,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAEjB,IAAA,OAAO,KAAK;AACd;;;;"}

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

@@ -0,0 +1,3 @@
+import { type Observable } from 'synstate';
+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

@@ -0,0 +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,EAAG,OAAO,CAAC,KAAG,UAAU,CAAC,CAAC,CA0B/D,CAAC"}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { source, withInitialValue } from 'synstate';
+
+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;
+    }, []);
+    React.useEffect(() => {
+        setState(input);
+    }, [input]);
+    return state;
+};
+
+export { useValueAsObservable };
+//# sourceMappingURL=use-value-as-observable.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-value-as-observable.mjs","sources":["../src/use-value-as-observable.mts"],"sourcesContent":[null],"names":[],"mappings":";;;AAQO,MAAM,oBAAoB,GAAG,CAAK,KAAQ,KAAmB;IAClE,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAsB,MAAM,EAAE,EAAE,CAAC;IAEvE,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CACzB,MAAM,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,EACpD,EAAE,CACH;AAED,IAAA,KAAK,CAAC,SAAS,CACb,MAAM,MAAK;QACT,KAAK,CAAC,QAAQ,EAAE;IAClB,CAAC,EACD,EAAE,CACH;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAY,KAAO;AACrD,QAAA,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC;AAEhC,QAAA,OAAO,SAAS;IAClB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;QACnB,QAAQ,CAAC,KAAK,CAAC;AACjB,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,OAAO,KAAK;AACd;;;;"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "synstate-react-hooks-compat",
+  "version": "1.0.0",
+  "description": "SynState React hooks for React 16.8–17 (without useSyncExternalStore)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/noshiro-pf/synstate.git"
+  },
+  "license": "Apache-2.0",
+  "author": "noshiro-pf <noshiro.pf@gmail.com>",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "src",
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsx ./scripts/cmd/build.mts",
+    "build:min": "tsx ./scripts/cmd/build.mts --skip-check",
+    "check:ext": "tsx ./scripts/cmd/check-ext.mts",
+    "check-all": "tsx ./scripts/cmd/check-all.mts",
+    "codemod": "convert-to-readonly '{src,samples,test}/**/*.{mts,tsx}'",
+    "doc": "run-s doc:embed doc:embed:jsdoc fmt",
+    "doc:embed": "tsx ./scripts/cmd/embed-examples.mts",
+    "doc:embed:jsdoc": "tsx ./scripts/cmd/embed-examples-in-jsdoc.mts",
+    "fmt": "format-uncommitted",
+    "fmt:full": "pnpm run z:prettier .",
+    "gen:re-export": "run-s gen:re-export:script fmt",
+    "gen:re-export:script": "tsx ./scripts/cmd/generate-re-export-script.mts",
+    "gi": "run-s gi:src fmt",
+    "gi:src": "gen-index-ts ./src --index-ext .mts --export-ext .mjs --target-ext .mts --target-ext .tsx --exclude entry-point.mts",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "pnpm run z:vitest:node run",
+    "test:browser": "pnpm run z:vitest --project='Browser' run",
+    "test:cov": "pnpm run z:vitest:node run --coverage",
+    "test:cov:ui": "vite preview --outDir ./coverage",
+    "test:ui": "pnpm run z:vitest:node --ui",
+    "testw": "pnpm run z:vitest:node watch",
+    "tsc": "tsc --noEmit",
+    "tscw": "tsc --noEmit --watch",
+    "type-check": "tsc --noEmit",
+    "update-packages": "pnpm update --latest",
+    "z:prettier": "prettier --config ../../.prettierrc --ignore-path ../../.prettierignore --ignore-path ../../.gitignore --ignore-unknown --no-error-on-unmatched-pattern --write",
+    "z:vitest": "vitest --config ./configs/vitest.config.mts",
+    "z:vitest:node": "pnpm run z:vitest --project='Node.js'"
+  },
+  "dependencies": {
+    "synstate": "workspace:*",
+    "ts-data-forge": "^6.8.0"
+  },
+  "devDependencies": {
+    "@types/argparse": "^2.0.17",
+    "@types/react": "^17.0.0",
+    "argparse": "^2.0.1",
+    "react": "^17.0.2"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  }
+}

package/src/create-boolean-state.mts

@@ -0,0 +1,52 @@
+import {
+  type InitializedObservable,
+  createBooleanState as createBooleanStateBase,
+} from 'synstate';
+import { useObservableValue } from './use-observable-value.mjs';
+
+export const createBooleanState = (
+  initialState: boolean,
+): readonly [
+  useCurrentValue: () => boolean,
+  Readonly<{
+    state: InitializedObservable<boolean>;
+    setTrue: () => void;
+    setFalse: () => void;
+    setState: (next: boolean) => boolean;
+    toggle: () => boolean;
+    updateState: (updateFn: (prev: boolean) => boolean) => boolean;
+    resetState: () => boolean;
+    getSnapshot: () => boolean;
+    initialState: boolean;
+  }>,
+] => {
+  const [
+    state,
+    {
+      setTrue,
+      setFalse,
+      setState,
+      toggle,
+      updateState,
+      resetState,
+      getSnapshot,
+    },
+  ] = createBooleanStateBase(initialState);
+
+  const useCurrentValue = (): boolean => useObservableValue(state);
+
+  return [
+    useCurrentValue,
+    {
+      state,
+      setTrue,
+      setFalse,
+      setState,
+      toggle,
+      updateState,
+      resetState,
+      getSnapshot,
+      initialState,
+    },
+  ] as const;
+};

package/src/create-reducer.mts

@@ -0,0 +1,27 @@
+import {
+  createReducer as createReducerBase,
+  type InitializedObservable,
+} from 'synstate';
+import { useObservableValue } from './use-observable-value.mjs';
+
+export const createReducer = <S, A>(
+  reducer: Reducer<S, A>,
+  initialState: S,
+): readonly [
+  useCurrentValue: () => S,
+  dispatch: (action: A) => S,
+  Readonly<{
+    state: InitializedObservable<S>;
+    getSnapshot: () => S;
+    initialState: S;
+  }>,
+] => {
+  const [state, dispatch, { getSnapshot }] = createReducerBase(
+    reducer,
+    initialState,
+  );
+
+  const useCurrentValue = (): S => useObservableValue(state);
+
+  return [useCurrentValue, dispatch, { state, getSnapshot, initialState }];
+};

package/src/create-state.mts

@@ -0,0 +1,36 @@
+import {
+  createState as createStateBase,
+  type InitializedObservable,
+} from 'synstate';
+import { useObservableValue } from './use-observable-value.mjs';
+
+export const createState = <S,>(
+  initialState: S,
+): readonly [
+  useCurrentValue: () => S,
+  setState: (v: S) => S,
+  Readonly<{
+    state: InitializedObservable<S>;
+    updateState: (updateFn: (prev: S) => S) => S;
+    resetState: () => S;
+    getSnapshot: () => S;
+    initialState: S;
+  }>,
+] => {
+  const [state, setState, { updateState, resetState, getSnapshot }] =
+    createStateBase(initialState);
+
+  const useCurrentValue = (): S => useObservableValue(state);
+
+  return [
+    useCurrentValue,
+    setState,
+    {
+      state,
+      updateState,
+      resetState,
+      getSnapshot,
+      initialState,
+    },
+  ] as const;
+};

package/src/globals.d.mts

@@ -0,0 +1 @@
+/// <reference types="ts-type-forge" />

package/src/index.mts

@@ -0,0 +1,7 @@
+export * from './create-boolean-state.mjs';
+export * from './create-reducer.mjs';
+export * from './create-state.mjs';
+export * from './synstate.mjs';
+export * from './use-observable-effect.mjs';
+export * from './use-observable-value.mjs';
+export * from './use-value-as-observable.mjs';

package/src/synstate.mts

@@ -0,0 +1,58 @@
+export {
+  AsyncChildObservableClass,
+  InitializedSyncChildObservableClass,
+  ObservableBaseClass,
+  RootObservableClass,
+  SyncChildObservableClass,
+  attachIndex,
+  audit,
+  collectToArray,
+  combine,
+  combineLatest,
+  counter,
+  createEventEmitter,
+  createValueEmitter,
+  debounce,
+  distinctUntilChanged,
+  filter,
+  flatMap,
+  fromAbortablePromise,
+  fromPromise,
+  fromSubscribable,
+  getKey,
+  isChildObservable,
+  isManagerObservable,
+  isRootObservable,
+  just,
+  map,
+  mapOptional,
+  mapResultErr,
+  mapResultOk,
+  mapTo,
+  merge,
+  mergeMap,
+  pairwise,
+  pluck,
+  scan,
+  skip,
+  skipIfNoChange,
+  skipUntil,
+  skipWhile,
+  source,
+  switchMap,
+  take,
+  takeUntil,
+  takeWhile,
+  throttle,
+  timer,
+  unwrapOptional,
+  unwrapResultErr,
+  unwrapResultOk,
+  withBuffered,
+  withBufferedFrom,
+  withCurrentValueFrom,
+  withIndex,
+  withInitialValue,
+  withLatestFrom,
+  zip,
+} from 'synstate';

package/src/use-observable-effect.mts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { type Observable } from 'synstate';
+
+export const useObservableEffect = <A,>(
+  observable$: Observable<A>,
+  subscriptionFn: (v: A) => void,
+): void => {
+  React.useEffect(() => {
+    const s = observable$.subscribe(subscriptionFn);
+
+    return () => {
+      s.unsubscribe();
+    };
+  }, []);
+};

package/src/use-observable-value.mts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { type InitializedObservable, type Observable } from 'synstate';
+import { Optional } from 'ts-data-forge';
+
+export function useObservableValue<A, B = A>(
+  observable$: Observable<A>,
+  initialValue: B,
+): A | B;
+
+export function useObservableValue<A>(observable$: InitializedObservable<A>): A;
+
+export function useObservableValue<A>(
+  observable$: Observable<A>,
+): A | undefined;
+
+export function useObservableValue<A, B = A>(
+  observable$: Observable<A>,
+  initialValue: B,
+): A | B;
+
+export function useObservableValue<A, B = A>(
+  observable$: Observable<A>,
+  initialValue?: B,
+): A | B | undefined {
+  const [value, setValue] = React.useState<A | B | undefined>(() =>
+    Optional.unwrapOr(observable$.getSnapshot(), initialValue),
+  );
+
+  React.useEffect(() => {
+    const { unsubscribe } = observable$.subscribe((v) => {
+      setValue(v);
+    });
+
+    return unsubscribe;
+  }, [observable$]);
+
+  return value;
+}

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {
+  source,
+  withInitialValue,
+  type Observable,
+  type SourceObservable,
+} from 'synstate';
+
+export const useValueAsObservable = <A,>(input: A): Observable<A> => {
+  const sourceObservable = React.useMemo<SourceObservable<A>>(source, []);
+
+  const state = React.useMemo(
+    () => sourceObservable.pipe(withInitialValue(input)),
+    [],
+  );
+
+  React.useEffect(
+    () => () => {
+      state.complete();
+    },
+    [],
+  );
+
+  const setState = React.useCallback((nextState: A): A => {
+    sourceObservable.next(nextState);
+
+    return nextState;
+  }, []);
+
+  React.useEffect(() => {
+    setState(input);
+  }, [input]);
+
+  return state;
+};