jotai-state-tree 0.1.0

package/dist/react.d.mts

@@ -0,0 +1,144 @@
+import React, { ComponentType, FC, ReactNode } from 'react';
+
+/**
+ * React integration for jotai-state-tree
+ * Provides observer HOC and hooks
+ */
+
+interface ObserverOptions {
+    forwardRef?: boolean;
+}
+/**
+ * Higher-order component that makes a component reactive to state tree changes.
+ * Similar to mobx-react-lite's observer.
+ */
+declare function observer<P extends object>(Component: ComponentType<P>, options?: ObserverOptions): ComponentType<P>;
+interface ObserverComponentProps {
+    children: () => ReactNode;
+}
+/**
+ * Observer component using render props pattern.
+ * Useful for inline observation.
+ *
+ * @example
+ * <Observer>
+ *   {() => <div>{store.count}</div>}
+ * </Observer>
+ */
+declare const Observer: FC<ObserverComponentProps>;
+/**
+ * Hook that re-renders the component when any accessed state tree nodes change.
+ */
+declare function useObserver<T>(fn: () => T): T;
+/**
+ * Creates a local observable state tree instance.
+ * Similar to mobx-react-lite's useLocalObservable.
+ */
+declare function useLocalObservable<T>(initializer: () => T, dependencies?: unknown[]): T;
+/**
+ * Use a state tree instance with React's useSyncExternalStore.
+ * This provides better concurrent mode support.
+ */
+declare function useSyncedStore<T>(store: T): T;
+interface ProviderProps<T> {
+    store: T;
+    children: ReactNode;
+}
+/**
+ * Provider component for state tree stores.
+ * @deprecated Use createStoreContext() for better type inference
+ */
+declare function Provider<T>({ store, children, }: ProviderProps<T>): JSX.Element;
+/**
+ * Hook to access the store from context.
+ * @deprecated Use createStoreContext() for better type inference
+ */
+declare function useStore<T>(): T;
+/**
+ * Hook to access the store with snapshot subscription.
+ * @deprecated Use createStoreContext() for better type inference
+ */
+declare function useStoreSnapshot<T>(): T;
+declare function useStoreSnapshot<T, S>(selector: (store: T) => S): S;
+/**
+ * Creates a typed store context with Provider and hooks.
+ * This provides full type inference without needing to specify generic types.
+ *
+ * @example
+ * const RootStore = types.model("RootStore", {
+ *   count: types.number,
+ * }).actions(self => ({
+ *   increment() { self.count += 1; }
+ * }));
+ *
+ * type RootStoreInstance = Instance<typeof RootStore>;
+ *
+ * const { Provider, useStore, useStoreSnapshot } = createStoreContext<RootStoreInstance>();
+ *
+ * // In your app:
+ * const store = RootStore.create({ count: 0 });
+ * <Provider store={store}>
+ *   <App />
+ * </Provider>
+ *
+ * // In components:
+ * const store = useStore(); // Fully typed!
+ * store.increment(); // Type-safe
+ */
+declare function createStoreContext<T>(): {
+    Provider: ({ store, children, }: {
+        store: T;
+        children: ReactNode;
+    }) => JSX.Element;
+    useStore: () => T;
+    useStoreSnapshot: {
+        (): T;
+        <S>(selector: (store: T) => S): S;
+    };
+    useIsAlive: () => boolean;
+    Context: React.Context<T | null>;
+};
+/**
+ * Hook that returns the current snapshot and re-renders on changes.
+ */
+declare function useSnapshot<T>(target: unknown): T;
+/**
+ * Hook to watch specific paths in a state tree
+ */
+declare function useWatchPath<T>(target: unknown, path: string, defaultValue?: T): T;
+/**
+ * Hook that subscribes to patches on a node.
+ */
+declare function usePatches(target: unknown, callback: (patch: {
+    op: string;
+    path: string;
+    value?: unknown;
+}) => void): void;
+/**
+ * Hook that returns an action bound to a store.
+ * Useful for passing actions to child components.
+ */
+declare function useAction<T extends (...args: unknown[]) => unknown>(action: T): T;
+/**
+ * Hook that returns multiple actions bound to a store.
+ */
+declare function useActions<T extends Record<string, (...args: unknown[]) => unknown>>(actions: T): T;
+/**
+ * Batch multiple state updates to trigger a single re-render.
+ */
+declare function batch(fn: () => void): void;
+/**
+ * Schedule an update, batching if we're inside a batch() call.
+ */
+declare function scheduleUpdate(update: () => void): void;
+/**
+ * Hook that returns whether a node is alive.
+ * Uses proper subscription instead of polling for better performance.
+ */
+declare function useIsAlive(target: unknown): boolean;
+/**
+ * Hook that ensures cleanup when a component unmounts
+ */
+declare function useCleanup(cleanupFn: () => void): void;
+
+export { Observer, type ObserverOptions, Provider, batch, createStoreContext, observer, scheduleUpdate, useAction, useActions, useCleanup, useIsAlive, useLocalObservable, useObserver, usePatches, useSnapshot, useStore, useStoreSnapshot, useSyncedStore, useWatchPath };

package/dist/react.d.ts

@@ -0,0 +1,144 @@
+import React, { ComponentType, FC, ReactNode } from 'react';
+
+/**
+ * React integration for jotai-state-tree
+ * Provides observer HOC and hooks
+ */
+
+interface ObserverOptions {
+    forwardRef?: boolean;
+}
+/**
+ * Higher-order component that makes a component reactive to state tree changes.
+ * Similar to mobx-react-lite's observer.
+ */
+declare function observer<P extends object>(Component: ComponentType<P>, options?: ObserverOptions): ComponentType<P>;
+interface ObserverComponentProps {
+    children: () => ReactNode;
+}
+/**
+ * Observer component using render props pattern.
+ * Useful for inline observation.
+ *
+ * @example
+ * <Observer>
+ *   {() => <div>{store.count}</div>}
+ * </Observer>
+ */
+declare const Observer: FC<ObserverComponentProps>;
+/**
+ * Hook that re-renders the component when any accessed state tree nodes change.
+ */
+declare function useObserver<T>(fn: () => T): T;
+/**
+ * Creates a local observable state tree instance.
+ * Similar to mobx-react-lite's useLocalObservable.
+ */
+declare function useLocalObservable<T>(initializer: () => T, dependencies?: unknown[]): T;
+/**
+ * Use a state tree instance with React's useSyncExternalStore.
+ * This provides better concurrent mode support.
+ */
+declare function useSyncedStore<T>(store: T): T;
+interface ProviderProps<T> {
+    store: T;
+    children: ReactNode;
+}
+/**
+ * Provider component for state tree stores.
+ * @deprecated Use createStoreContext() for better type inference
+ */
+declare function Provider<T>({ store, children, }: ProviderProps<T>): JSX.Element;
+/**
+ * Hook to access the store from context.
+ * @deprecated Use createStoreContext() for better type inference
+ */
+declare function useStore<T>(): T;
+/**
+ * Hook to access the store with snapshot subscription.
+ * @deprecated Use createStoreContext() for better type inference
+ */
+declare function useStoreSnapshot<T>(): T;
+declare function useStoreSnapshot<T, S>(selector: (store: T) => S): S;
+/**
+ * Creates a typed store context with Provider and hooks.
+ * This provides full type inference without needing to specify generic types.
+ *
+ * @example
+ * const RootStore = types.model("RootStore", {
+ *   count: types.number,
+ * }).actions(self => ({
+ *   increment() { self.count += 1; }
+ * }));
+ *
+ * type RootStoreInstance = Instance<typeof RootStore>;
+ *
+ * const { Provider, useStore, useStoreSnapshot } = createStoreContext<RootStoreInstance>();
+ *
+ * // In your app:
+ * const store = RootStore.create({ count: 0 });
+ * <Provider store={store}>
+ *   <App />
+ * </Provider>
+ *
+ * // In components:
+ * const store = useStore(); // Fully typed!
+ * store.increment(); // Type-safe
+ */
+declare function createStoreContext<T>(): {
+    Provider: ({ store, children, }: {
+        store: T;
+        children: ReactNode;
+    }) => JSX.Element;
+    useStore: () => T;
+    useStoreSnapshot: {
+        (): T;
+        <S>(selector: (store: T) => S): S;
+    };
+    useIsAlive: () => boolean;
+    Context: React.Context<T | null>;
+};
+/**
+ * Hook that returns the current snapshot and re-renders on changes.
+ */
+declare function useSnapshot<T>(target: unknown): T;
+/**
+ * Hook to watch specific paths in a state tree
+ */
+declare function useWatchPath<T>(target: unknown, path: string, defaultValue?: T): T;
+/**
+ * Hook that subscribes to patches on a node.
+ */
+declare function usePatches(target: unknown, callback: (patch: {
+    op: string;
+    path: string;
+    value?: unknown;
+}) => void): void;
+/**
+ * Hook that returns an action bound to a store.
+ * Useful for passing actions to child components.
+ */
+declare function useAction<T extends (...args: unknown[]) => unknown>(action: T): T;
+/**
+ * Hook that returns multiple actions bound to a store.
+ */
+declare function useActions<T extends Record<string, (...args: unknown[]) => unknown>>(actions: T): T;
+/**
+ * Batch multiple state updates to trigger a single re-render.
+ */
+declare function batch(fn: () => void): void;
+/**
+ * Schedule an update, batching if we're inside a batch() call.
+ */
+declare function scheduleUpdate(update: () => void): void;
+/**
+ * Hook that returns whether a node is alive.
+ * Uses proper subscription instead of polling for better performance.
+ */
+declare function useIsAlive(target: unknown): boolean;
+/**
+ * Hook that ensures cleanup when a component unmounts
+ */
+declare function useCleanup(cleanupFn: () => void): void;
+
+export { Observer, type ObserverOptions, Provider, batch, createStoreContext, observer, scheduleUpdate, useAction, useActions, useCleanup, useIsAlive, useLocalObservable, useObserver, usePatches, useSnapshot, useStore, useStoreSnapshot, useSyncedStore, useWatchPath };