@legendapp/state 3.0.0-alpha.35 → 3.0.0-alpha.37

package/configureReactive-BAV1PS2I.d.mts

@@ -0,0 +1,32 @@
+import { ReactNode, FC, LegacyRef, ComponentClass } from 'react';
+import { Selector, Observable } from '@legendapp/state';
+
+type ShapeWithNew$<T> = Partial<Omit<T, 'children'>> & {
+    [K in keyof T as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
+} & {
+    children?: Selector<ReactNode>;
+};
+interface BindKey<P> {
+    handler?: keyof P;
+    getValue?: (e: any) => any;
+    defaultValue?: any;
+    selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
+}
+type BindKeys<P = any> = Record<keyof P, BindKey<P>>;
+type FCReactiveObject<T> = {
+    [K in keyof T]: FC<ShapeWithNew$<T[K]>>;
+};
+type FCReactive<P, P2> = P & FC<ShapeWithNew$<P2> & {
+    ref?: LegacyRef<P> | undefined;
+}>;
+interface UseSelectorOptions {
+    suspense?: boolean;
+    skipCheck?: boolean;
+}
+
+declare function configureReactive({ components, binders, }: {
+    components?: Record<string, FC | ComponentClass<any>>;
+    binders?: Record<string, BindKeys>;
+}): void;
+
+export { type BindKeys as B, type FCReactiveObject as F, type ShapeWithNew$ as S, type UseSelectorOptions as U, type BindKey as a, type FCReactive as b, configureReactive as c };

package/configureReactive-BAV1PS2I.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode, FC, LegacyRef, ComponentClass } from 'react';
+import { Selector, Observable } from '@legendapp/state';
+
+type ShapeWithNew$<T> = Partial<Omit<T, 'children'>> & {
+    [K in keyof T as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
+} & {
+    children?: Selector<ReactNode>;
+};
+interface BindKey<P> {
+    handler?: keyof P;
+    getValue?: (e: any) => any;
+    defaultValue?: any;
+    selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
+}
+type BindKeys<P = any> = Record<keyof P, BindKey<P>>;
+type FCReactiveObject<T> = {
+    [K in keyof T]: FC<ShapeWithNew$<T[K]>>;
+};
+type FCReactive<P, P2> = P & FC<ShapeWithNew$<P2> & {
+    ref?: LegacyRef<P> | undefined;
+}>;
+interface UseSelectorOptions {
+    suspense?: boolean;
+    skipCheck?: boolean;
+}
+
+declare function configureReactive({ components, binders, }: {
+    components?: Record<string, FC | ComponentClass<any>>;
+    binders?: Record<string, BindKeys>;
+}): void;
+
+export { type BindKeys as B, type FCReactiveObject as F, type ShapeWithNew$ as S, type UseSelectorOptions as U, type BindKey as a, type FCReactive as b, configureReactive as c };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/state",
-  "version": "3.0.0-alpha.35",
+  "version": "3.0.0-alpha.37",
   "description": "legend-state",
   "sideEffects": false,
   "private": false,
@@ -73,6 +73,31 @@
       "require": "./trace.js",
       "types": "./trace.d.ts"
     },
+    "./react-reactive/enableReactive": {
+      "import": "./react-reactive/enableReactive.mjs",
+      "require": "./react-reactive/enableReactive.js",
+      "types": "./react-reactive/enableReactive.d.ts"
+    },
+    "./react-reactive/enableReactComponents": {
+      "import": "./react-reactive/enableReactComponents.mjs",
+      "require": "./react-reactive/enableReactComponents.js",
+      "types": "./react-reactive/enableReactComponents.d.ts"
+    },
+    "./react-reactive/enableReactNativeComponents": {
+      "import": "./react-reactive/enableReactNativeComponents.mjs",
+      "require": "./react-reactive/enableReactNativeComponents.js",
+      "types": "./react-reactive/enableReactNativeComponents.d.ts"
+    },
+    "./react-reactive/enableReactive.native": {
+      "import": "./react-reactive/enableReactive.native.mjs",
+      "require": "./react-reactive/enableReactive.native.js",
+      "types": "./react-reactive/enableReactive.native.d.ts"
+    },
+    "./react-reactive/enableReactive.web": {
+      "import": "./react-reactive/enableReactive.web.mjs",
+      "require": "./react-reactive/enableReactive.web.js",
+      "types": "./react-reactive/enableReactive.web.d.ts"
+    },
     "./as/stringAsSet": {
       "import": "./as/stringAsSet.mjs",
       "require": "./as/stringAsSet.js",

package/react-reactive/enableReactComponents.d.mts

@@ -0,0 +1,9 @@
+import { FCReactiveObject, configureReactive } from '@legendapp/state/react';
+
+declare function enableReactComponents(config: typeof configureReactive): void;
+declare module '@legendapp/state/react' {
+    interface IReactive extends FCReactiveObject<JSX.IntrinsicElements> {
+    }
+}
+
+export { enableReactComponents };

package/react-reactive/enableReactComponents.d.ts

@@ -0,0 +1,9 @@
+import { FCReactiveObject, configureReactive } from '@legendapp/state/react';
+
+declare function enableReactComponents(config: typeof configureReactive): void;
+declare module '@legendapp/state/react' {
+    interface IReactive extends FCReactiveObject<JSX.IntrinsicElements> {
+    }
+}
+
+export { enableReactComponents };

package/react-reactive/enableReactComponents.js

@@ -0,0 +1,19 @@
+'use strict';
+
+// src/react-reactive/enableReactComponents.ts
+function enableReactComponents(config) {
+  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+  const bindInfoInput = Object.assign(
+    { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
+    bindInfo
+  );
+  config({
+    binders: {
+      input: bindInfoInput,
+      textarea: bindInfo,
+      select: bindInfo
+    }
+  });
+}
+
+exports.enableReactComponents = enableReactComponents;

package/react-reactive/enableReactComponents.mjs

@@ -0,0 +1,17 @@
+// src/react-reactive/enableReactComponents.ts
+function enableReactComponents(config) {
+  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+  const bindInfoInput = Object.assign(
+    { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
+    bindInfo
+  );
+  config({
+    binders: {
+      input: bindInfoInput,
+      textarea: bindInfo,
+      select: bindInfo
+    }
+  });
+}
+
+export { enableReactComponents };

package/react-reactive/enableReactNativeComponents.d.mts

@@ -0,0 +1,22 @@
+import { FCReactiveObject, FCReactive, configureReactive } from '@legendapp/state/react';
+import { ActivityIndicator, ActivityIndicatorProps, Button, ButtonProps, FlatList, FlatListProps, Image, ImageProps, Pressable, PressableProps, ScrollView, ScrollViewProps, SectionList, SectionListProps, Switch, SwitchProps, Text, TextProps, TextInput, TextInputProps, TouchableWithoutFeedback, TouchableWithoutFeedbackProps, View, ViewProps } from 'react-native';
+
+declare function enableReactNativeComponents(configure: typeof configureReactive): void;
+declare module '@legendapp/state/react' {
+    interface IReactive extends FCReactiveObject<JSX.IntrinsicElements> {
+        ActivityIndicator: FCReactive<ActivityIndicator, ActivityIndicatorProps>;
+        Button: FCReactive<Button, ButtonProps>;
+        FlatList: FCReactive<FlatList, FlatListProps<any>>;
+        Image: FCReactive<Image, ImageProps>;
+        Pressable: FCReactive<typeof Pressable, PressableProps>;
+        ScrollView: FCReactive<ScrollView, ScrollViewProps>;
+        SectionList: FCReactive<SectionList, SectionListProps<any>>;
+        Switch: FCReactive<Switch, SwitchProps>;
+        Text: FCReactive<Text, TextProps>;
+        TextInput: FCReactive<TextInput, TextInputProps>;
+        TouchableWithoutFeedback: FCReactive<TouchableWithoutFeedback, TouchableWithoutFeedbackProps>;
+        View: FCReactive<View, ViewProps>;
+    }
+}
+
+export { enableReactNativeComponents };

package/react-reactive/enableReactNativeComponents.d.ts

@@ -0,0 +1,22 @@
+import { FCReactiveObject, FCReactive, configureReactive } from '@legendapp/state/react';
+import { ActivityIndicator, ActivityIndicatorProps, Button, ButtonProps, FlatList, FlatListProps, Image, ImageProps, Pressable, PressableProps, ScrollView, ScrollViewProps, SectionList, SectionListProps, Switch, SwitchProps, Text, TextProps, TextInput, TextInputProps, TouchableWithoutFeedback, TouchableWithoutFeedbackProps, View, ViewProps } from 'react-native';
+
+declare function enableReactNativeComponents(configure: typeof configureReactive): void;
+declare module '@legendapp/state/react' {
+    interface IReactive extends FCReactiveObject<JSX.IntrinsicElements> {
+        ActivityIndicator: FCReactive<ActivityIndicator, ActivityIndicatorProps>;
+        Button: FCReactive<Button, ButtonProps>;
+        FlatList: FCReactive<FlatList, FlatListProps<any>>;
+        Image: FCReactive<Image, ImageProps>;
+        Pressable: FCReactive<typeof Pressable, PressableProps>;
+        ScrollView: FCReactive<ScrollView, ScrollViewProps>;
+        SectionList: FCReactive<SectionList, SectionListProps<any>>;
+        Switch: FCReactive<Switch, SwitchProps>;
+        Text: FCReactive<Text, TextProps>;
+        TextInput: FCReactive<TextInput, TextInputProps>;
+        TouchableWithoutFeedback: FCReactive<TouchableWithoutFeedback, TouchableWithoutFeedbackProps>;
+        View: FCReactive<View, ViewProps>;
+    }
+}
+
+export { enableReactNativeComponents };

package/react-reactive/enableReactNativeComponents.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var react = require('react');
+var react$1 = require('@legendapp/state/react');
+var reactNative = require('react-native');
+
+// src/react-reactive/enableReactNativeComponents.ts
+function enableReactNativeComponents(configure) {
+  configure({
+    components: {
+      ActivityIndicator: reactNative.ActivityIndicator,
+      Button: reactNative.Button,
+      FlatList: reactNative.FlatList,
+      Image: reactNative.Image,
+      Pressable: reactNative.Pressable,
+      ScrollView: reactNative.ScrollView,
+      SectionList: reactNative.SectionList,
+      Switch: reactNative.Switch,
+      Text: reactNative.Text,
+      TextInput: reactNative.TextInput,
+      TouchableWithoutFeedback: reactNative.TouchableWithoutFeedback,
+      View: reactNative.View
+    },
+    binders: {
+      TextInput: {
+        value: {
+          handler: "onChange",
+          getValue: (e) => e.nativeEvent.text,
+          defaultValue: ""
+        }
+      },
+      Switch: {
+        value: {
+          handler: "onValueChange",
+          getValue: (e) => e,
+          defaultValue: false
+        }
+      },
+      FlatList: {
+        data: {
+          selector: (propsOut, p) => {
+            const state = react.useRef(0);
+            const [renderNum, value] = react$1.useSelector(() => [state.current++, p.get(true)]);
+            propsOut.extraData = renderNum;
+            return value;
+          }
+        }
+      }
+    }
+  });
+}
+
+exports.enableReactNativeComponents = enableReactNativeComponents;

package/react-reactive/enableReactNativeComponents.mjs

@@ -0,0 +1,51 @@
+import { useRef } from 'react';
+import { useSelector } from '@legendapp/state/react';
+import { ActivityIndicator, Button, FlatList, Image, Pressable, ScrollView, SectionList, Switch, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+
+// src/react-reactive/enableReactNativeComponents.ts
+function enableReactNativeComponents(configure) {
+  configure({
+    components: {
+      ActivityIndicator,
+      Button,
+      FlatList,
+      Image,
+      Pressable,
+      ScrollView,
+      SectionList,
+      Switch,
+      Text,
+      TextInput,
+      TouchableWithoutFeedback,
+      View
+    },
+    binders: {
+      TextInput: {
+        value: {
+          handler: "onChange",
+          getValue: (e) => e.nativeEvent.text,
+          defaultValue: ""
+        }
+      },
+      Switch: {
+        value: {
+          handler: "onValueChange",
+          getValue: (e) => e,
+          defaultValue: false
+        }
+      },
+      FlatList: {
+        data: {
+          selector: (propsOut, p) => {
+            const state = useRef(0);
+            const [renderNum, value] = useSelector(() => [state.current++, p.get(true)]);
+            propsOut.extraData = renderNum;
+            return value;
+          }
+        }
+      }
+    }
+  });
+}
+
+export { enableReactNativeComponents };

package/react-reactive/enableReactive.d.mts

@@ -0,0 +1,7 @@
+import { c as configureReactive } from '../configureReactive-BAV1PS2I.mjs';
+import 'react';
+import '@legendapp/state';
+
+declare function enableReactive(config: typeof configureReactive): void;
+
+export { enableReactive };

package/react-reactive/enableReactive.d.ts

@@ -0,0 +1,7 @@
+import { c as configureReactive } from '../configureReactive-BAV1PS2I.js';
+import 'react';
+import '@legendapp/state';
+
+declare function enableReactive(config: typeof configureReactive): void;
+
+export { enableReactive };

package/react-reactive/enableReactive.js

@@ -0,0 +1,24 @@
+'use strict';
+
+// src/react-reactive/enableReactComponents.ts
+function enableReactComponents(config) {
+  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+  const bindInfoInput = Object.assign(
+    { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
+    bindInfo
+  );
+  config({
+    binders: {
+      input: bindInfoInput,
+      textarea: bindInfo,
+      select: bindInfo
+    }
+  });
+}
+
+// src/react-reactive/enableReactive.ts
+function enableReactive(config) {
+  enableReactComponents(config);
+}
+
+exports.enableReactive = enableReactive;

package/react-reactive/enableReactive.mjs

@@ -0,0 +1,22 @@
+// src/react-reactive/enableReactComponents.ts
+function enableReactComponents(config) {
+  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+  const bindInfoInput = Object.assign(
+    { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
+    bindInfo
+  );
+  config({
+    binders: {
+      input: bindInfoInput,
+      textarea: bindInfo,
+      select: bindInfo
+    }
+  });
+}
+
+// src/react-reactive/enableReactive.ts
+function enableReactive(config) {
+  enableReactComponents(config);
+}
+
+export { enableReactive };

package/react-reactive/enableReactive.native.d.mts

@@ -0,0 +1,5 @@
+import { configureReactive } from '@legendapp/state/react';
+
+declare function enableReactive(configure: typeof configureReactive): void;
+
+export { enableReactive };

package/react-reactive/enableReactive.native.d.ts

@@ -0,0 +1,5 @@
+import { configureReactive } from '@legendapp/state/react';
+
+declare function enableReactive(configure: typeof configureReactive): void;
+
+export { enableReactive };

package/react-reactive/enableReactive.native.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var react = require('react');
+var react$1 = require('@legendapp/state/react');
+var reactNative = require('react-native');
+
+// src/react-reactive/enableReactNativeComponents.ts
+function enableReactNativeComponents(configure) {
+  configure({
+    components: {
+      ActivityIndicator: reactNative.ActivityIndicator,
+      Button: reactNative.Button,
+      FlatList: reactNative.FlatList,
+      Image: reactNative.Image,
+      Pressable: reactNative.Pressable,
+      ScrollView: reactNative.ScrollView,
+      SectionList: reactNative.SectionList,
+      Switch: reactNative.Switch,
+      Text: reactNative.Text,
+      TextInput: reactNative.TextInput,
+      TouchableWithoutFeedback: reactNative.TouchableWithoutFeedback,
+      View: reactNative.View
+    },
+    binders: {
+      TextInput: {
+        value: {
+          handler: "onChange",
+          getValue: (e) => e.nativeEvent.text,
+          defaultValue: ""
+        }
+      },
+      Switch: {
+        value: {
+          handler: "onValueChange",
+          getValue: (e) => e,
+          defaultValue: false
+        }
+      },
+      FlatList: {
+        data: {
+          selector: (propsOut, p) => {
+            const state = react.useRef(0);
+            const [renderNum, value] = react$1.useSelector(() => [state.current++, p.get(true)]);
+            propsOut.extraData = renderNum;
+            return value;
+          }
+        }
+      }
+    }
+  });
+}
+
+// src/react-reactive/enableReactive.native.ts
+function enableReactive(configure) {
+  enableReactNativeComponents(configure);
+}
+
+exports.enableReactive = enableReactive;

package/react-reactive/enableReactive.native.mjs

@@ -0,0 +1,56 @@
+import { useRef } from 'react';
+import { useSelector } from '@legendapp/state/react';
+import { ActivityIndicator, Button, FlatList, Image, Pressable, ScrollView, SectionList, Switch, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+
+// src/react-reactive/enableReactNativeComponents.ts
+function enableReactNativeComponents(configure) {
+  configure({
+    components: {
+      ActivityIndicator,
+      Button,
+      FlatList,
+      Image,
+      Pressable,
+      ScrollView,
+      SectionList,
+      Switch,
+      Text,
+      TextInput,
+      TouchableWithoutFeedback,
+      View
+    },
+    binders: {
+      TextInput: {
+        value: {
+          handler: "onChange",
+          getValue: (e) => e.nativeEvent.text,
+          defaultValue: ""
+        }
+      },
+      Switch: {
+        value: {
+          handler: "onValueChange",
+          getValue: (e) => e,
+          defaultValue: false
+        }
+      },
+      FlatList: {
+        data: {
+          selector: (propsOut, p) => {
+            const state = useRef(0);
+            const [renderNum, value] = useSelector(() => [state.current++, p.get(true)]);
+            propsOut.extraData = renderNum;
+            return value;
+          }
+        }
+      }
+    }
+  });
+}
+
+// src/react-reactive/enableReactive.native.ts
+function enableReactive(configure) {
+  enableReactNativeComponents(configure);
+}
+
+export { enableReactive };

package/react-reactive/enableReactive.web.d.mts

@@ -0,0 +1,5 @@
+import { configureReactive } from '@legendapp/state/react';
+
+declare function enableReactive(configure: typeof configureReactive): void;
+
+export { enableReactive };

package/react-reactive/enableReactive.web.d.ts

@@ -0,0 +1,5 @@
+import { configureReactive } from '@legendapp/state/react';
+
+declare function enableReactive(configure: typeof configureReactive): void;
+
+export { enableReactive };

package/react-reactive/enableReactive.web.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var react = require('react');
+var react$1 = require('@legendapp/state/react');
+var reactNative = require('react-native');
+
+// src/react-reactive/enableReactNativeComponents.ts
+function enableReactNativeComponents(configure) {
+  configure({
+    components: {
+      ActivityIndicator: reactNative.ActivityIndicator,
+      Button: reactNative.Button,
+      FlatList: reactNative.FlatList,
+      Image: reactNative.Image,
+      Pressable: reactNative.Pressable,
+      ScrollView: reactNative.ScrollView,
+      SectionList: reactNative.SectionList,
+      Switch: reactNative.Switch,
+      Text: reactNative.Text,
+      TextInput: reactNative.TextInput,
+      TouchableWithoutFeedback: reactNative.TouchableWithoutFeedback,
+      View: reactNative.View
+    },
+    binders: {
+      TextInput: {
+        value: {
+          handler: "onChange",
+          getValue: (e) => e.nativeEvent.text,
+          defaultValue: ""
+        }
+      },
+      Switch: {
+        value: {
+          handler: "onValueChange",
+          getValue: (e) => e,
+          defaultValue: false
+        }
+      },
+      FlatList: {
+        data: {
+          selector: (propsOut, p) => {
+            const state = react.useRef(0);
+            const [renderNum, value] = react$1.useSelector(() => [state.current++, p.get(true)]);
+            propsOut.extraData = renderNum;
+            return value;
+          }
+        }
+      }
+    }
+  });
+}
+
+// src/react-reactive/enableReactive.web.ts
+function enableReactive(configure) {
+  enableReactNativeComponents(configure);
+}
+
+exports.enableReactive = enableReactive;

package/react-reactive/enableReactive.web.mjs

@@ -0,0 +1,56 @@
+import { useRef } from 'react';
+import { useSelector } from '@legendapp/state/react';
+import { ActivityIndicator, Button, FlatList, Image, Pressable, ScrollView, SectionList, Switch, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+
+// src/react-reactive/enableReactNativeComponents.ts
+function enableReactNativeComponents(configure) {
+  configure({
+    components: {
+      ActivityIndicator,
+      Button,
+      FlatList,
+      Image,
+      Pressable,
+      ScrollView,
+      SectionList,
+      Switch,
+      Text,
+      TextInput,
+      TouchableWithoutFeedback,
+      View
+    },
+    binders: {
+      TextInput: {
+        value: {
+          handler: "onChange",
+          getValue: (e) => e.nativeEvent.text,
+          defaultValue: ""
+        }
+      },
+      Switch: {
+        value: {
+          handler: "onValueChange",
+          getValue: (e) => e,
+          defaultValue: false
+        }
+      },
+      FlatList: {
+        data: {
+          selector: (propsOut, p) => {
+            const state = useRef(0);
+            const [renderNum, value] = useSelector(() => [state.current++, p.get(true)]);
+            propsOut.extraData = renderNum;
+            return value;
+          }
+        }
+      }
+    }
+  });
+}
+
+// src/react-reactive/enableReactive.web.ts
+function enableReactive(configure) {
+  enableReactNativeComponents(configure);
+}
+
+export { enableReactive };

package/react.d.mts

@@ -1,6 +1,8 @@
 import * as react from 'react';
-import { ReactNode, ReactElement, FC, LegacyRef, ComponentClass, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
+import { ReactNode, ReactElement, FC, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
 import { ObservableParam, Observable, ObservableBoolean, Selector, RecursiveValueOrFunction, ObserveOptions, ObserveEvent, ObserveEventCallback } from '@legendapp/state';
+import { B as BindKeys, U as UseSelectorOptions } from './configureReactive-BAV1PS2I.mjs';
+export { a as BindKey, b as FCReactive, F as FCReactiveObject, S as ShapeWithNew$, c as configureReactive } from './configureReactive-BAV1PS2I.mjs';
 
 declare function Computed({ children }: {
     children: ObservableParam | (() => ReactNode);
@@ -28,36 +30,9 @@ declare function usePauseProvider(): {
 
 declare const Memo: react.MemoExoticComponent<typeof Computed>;
 
-type ShapeWithNew$<T> = Partial<Omit<T, 'children'>> & {
-    [K in keyof T as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
-} & {
-    children?: Selector<ReactNode>;
-};
-interface BindKey<P> {
-    handler?: keyof P;
-    getValue?: (e: any) => any;
-    defaultValue?: any;
-    selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
-}
-type BindKeys<P = any> = Record<keyof P, BindKey<P>>;
-type FCReactiveObject<T> = {
-    [K in keyof T]: FC<ShapeWithNew$<T[K]>>;
-};
-type FCReactive<P, P2> = P & FC<ShapeWithNew$<P2> & {
-    ref?: LegacyRef<P> | undefined;
-}>;
-interface UseSelectorOptions {
-    suspense?: boolean;
-    skipCheck?: boolean;
-}
-
 interface IReactive {
 }
 declare const Reactive: IReactive;
-declare function configureReactive({ components, binders, }: {
-    components?: Record<string, FC | ComponentClass<any>>;
-    binders?: Record<string, BindKeys>;
-}): void;
 
 interface PropsIf<T> {
     if: Selector<T>;
@@ -158,4 +133,4 @@ declare const useUnmountOnce: typeof useUnmount;
 declare function useWhen<T>(predicate: Selector<T>, effect: (value: T) => any | (() => any)): Promise<any>;
 declare function useWhenReady<T>(predicate: Selector<T>, effect: (value: T) => any | (() => any)): Promise<any>;
 
-export { type BindKey, type BindKeys, Computed, type ExtractFCPropsType, type FCReactive, type FCReactiveObject, For, type IReactive, Memo, type ObjectShapeWith$, Reactive, type ShapeWith$, type ShapeWithNew$, type ShapeWithPick$, Show, Switch, type UseObserveOptions, type UseSelectorOptions, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };
+export { BindKeys, Computed, type ExtractFCPropsType, For, type IReactive, Memo, type ObjectShapeWith$, Reactive, type ShapeWith$, type ShapeWithPick$, Show, Switch, type UseObserveOptions, UseSelectorOptions, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };

package/react.d.ts

@@ -1,6 +1,8 @@
 import * as react from 'react';
-import { ReactNode, ReactElement, FC, LegacyRef, ComponentClass, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
+import { ReactNode, ReactElement, FC, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
 import { ObservableParam, Observable, ObservableBoolean, Selector, RecursiveValueOrFunction, ObserveOptions, ObserveEvent, ObserveEventCallback } from '@legendapp/state';
+import { B as BindKeys, U as UseSelectorOptions } from './configureReactive-BAV1PS2I.js';
+export { a as BindKey, b as FCReactive, F as FCReactiveObject, S as ShapeWithNew$, c as configureReactive } from './configureReactive-BAV1PS2I.js';
 
 declare function Computed({ children }: {
     children: ObservableParam | (() => ReactNode);
@@ -28,36 +30,9 @@ declare function usePauseProvider(): {
 
 declare const Memo: react.MemoExoticComponent<typeof Computed>;
 
-type ShapeWithNew$<T> = Partial<Omit<T, 'children'>> & {
-    [K in keyof T as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
-} & {
-    children?: Selector<ReactNode>;
-};
-interface BindKey<P> {
-    handler?: keyof P;
-    getValue?: (e: any) => any;
-    defaultValue?: any;
-    selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
-}
-type BindKeys<P = any> = Record<keyof P, BindKey<P>>;
-type FCReactiveObject<T> = {
-    [K in keyof T]: FC<ShapeWithNew$<T[K]>>;
-};
-type FCReactive<P, P2> = P & FC<ShapeWithNew$<P2> & {
-    ref?: LegacyRef<P> | undefined;
-}>;
-interface UseSelectorOptions {
-    suspense?: boolean;
-    skipCheck?: boolean;
-}
-
 interface IReactive {
 }
 declare const Reactive: IReactive;
-declare function configureReactive({ components, binders, }: {
-    components?: Record<string, FC | ComponentClass<any>>;
-    binders?: Record<string, BindKeys>;
-}): void;
 
 interface PropsIf<T> {
     if: Selector<T>;
@@ -158,4 +133,4 @@ declare const useUnmountOnce: typeof useUnmount;
 declare function useWhen<T>(predicate: Selector<T>, effect: (value: T) => any | (() => any)): Promise<any>;
 declare function useWhenReady<T>(predicate: Selector<T>, effect: (value: T) => any | (() => any)): Promise<any>;
 
-export { type BindKey, type BindKeys, Computed, type ExtractFCPropsType, type FCReactive, type FCReactiveObject, For, type IReactive, Memo, type ObjectShapeWith$, Reactive, type ShapeWith$, type ShapeWithNew$, type ShapeWithPick$, Show, Switch, type UseObserveOptions, type UseSelectorOptions, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };
+export { BindKeys, Computed, type ExtractFCPropsType, For, type IReactive, Memo, type ObjectShapeWith$, Reactive, type ShapeWith$, type ShapeWithPick$, Show, Switch, type UseObserveOptions, UseSelectorOptions, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };

package/react.js

@@ -3,6 +3,7 @@
 var state = require('@legendapp/state');
 var React = require('react');
 var index_js = require('use-sync-external-store/shim/index.js');
+var enableReactive = require('@legendapp/state/react-reactive/enableReactive');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -336,8 +337,27 @@ function For({
   return out;
 }
 var Memo = React.memo(Computed, () => true);
+
+// src/react/configureReactive.ts
 var ReactiveFns = /* @__PURE__ */ new Map();
 var ReactiveFnBinders = /* @__PURE__ */ new Map();
+function configureReactive({
+  components,
+  binders
+}) {
+  if (components) {
+    for (const key in components) {
+      ReactiveFns.set(key, components[key]);
+    }
+  }
+  if (binders) {
+    for (const key in binders) {
+      ReactiveFnBinders.set(key, binders[key]);
+    }
+  }
+}
+
+// src/react/Reactive.tsx
 var Reactive = new Proxy(
   {},
   {
@@ -357,21 +377,7 @@ var Reactive = new Proxy(
     }
   }
 );
-function configureReactive({
-  components,
-  binders
-}) {
-  if (components) {
-    for (const key in components) {
-      ReactiveFns.set(key, components[key]);
-    }
-  }
-  if (binders) {
-    for (const key in binders) {
-      ReactiveFnBinders.set(key, binders[key]);
-    }
-  }
-}
+enableReactive.enableReactive(configureReactive);
 function Show({ if: if_, ifReady, else: else_, $value, wrap, children }) {
   const value = useSelector(if_ != null ? if_ : ifReady);
   const show = ifReady !== void 0 ? state.isObservableValueReady(value) : value;

package/react.mjs

@@ -1,6 +1,7 @@
 import { isFunction, isEmpty, observable, isPromise, isObservable, when, computeSelector, isArray, isMap, isObservableValueReady, linked, observe, whenReady, internal, trackSelector, isPrimitive } from '@legendapp/state';
 import React, { memo, forwardRef, createElement, useState, useContext, useMemo, useRef, useEffect, createContext, useCallback } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
+import { enableReactive } from '@legendapp/state/react-reactive/enableReactive';
 
 // src/react/Computed.tsx
 
@@ -330,8 +331,27 @@ function For({
   return out;
 }
 var Memo = memo(Computed, () => true);
+
+// src/react/configureReactive.ts
 var ReactiveFns = /* @__PURE__ */ new Map();
 var ReactiveFnBinders = /* @__PURE__ */ new Map();
+function configureReactive({
+  components,
+  binders
+}) {
+  if (components) {
+    for (const key in components) {
+      ReactiveFns.set(key, components[key]);
+    }
+  }
+  if (binders) {
+    for (const key in binders) {
+      ReactiveFnBinders.set(key, binders[key]);
+    }
+  }
+}
+
+// src/react/Reactive.tsx
 var Reactive = new Proxy(
   {},
   {
@@ -351,21 +371,7 @@ var Reactive = new Proxy(
     }
   }
 );
-function configureReactive({
-  components,
-  binders
-}) {
-  if (components) {
-    for (const key in components) {
-      ReactiveFns.set(key, components[key]);
-    }
-  }
-  if (binders) {
-    for (const key in binders) {
-      ReactiveFnBinders.set(key, binders[key]);
-    }
-  }
-}
+enableReactive(configureReactive);
 function Show({ if: if_, ifReady, else: else_, $value, wrap, children }) {
   const value = useSelector(if_ != null ? if_ : ifReady);
   const show = ifReady !== void 0 ? isObservableValueReady(value) : value;

package/sync-plugins/supabase.d.mts

@@ -26,7 +26,7 @@ interface SyncedSupabaseConfiguration extends Omit<SyncedSupabaseConfig<{
     as?: Exclude<CrudAsOption, 'value'>;
 }
 interface SyncedSupabaseProps<Client extends SupabaseClient<any, any>, Collection extends SupabaseCollectionOf<Client, SchemaName>, SchemaName extends SchemaNameOf<Client> = 'public', TOption extends CrudAsOption = 'object', TRemote extends SupabaseRowOf<Client, Collection, SchemaName> = SupabaseRowOf<Client, Collection, SchemaName>, TLocal = TRemote> extends SyncedSupabaseConfig<TRemote, TLocal>, Omit<SyncedCrudPropsMany<TRemote, TRemote, TOption>, 'list'> {
-    supabase: Client;
+    supabase?: Client;
     collection: Collection;
     schema?: SchemaName;
     select?: (query: PostgrestQueryBuilder<SupabaseSchemaOf<Client>, SupabaseTableOf<Client, SchemaName>[Collection], Collection>) => PostgrestFilterBuilder<SupabaseSchemaOf<Client>, TRemote, TRemote[], Collection, []>;

package/sync-plugins/supabase.d.ts

@@ -26,7 +26,7 @@ interface SyncedSupabaseConfiguration extends Omit<SyncedSupabaseConfig<{
     as?: Exclude<CrudAsOption, 'value'>;
 }
 interface SyncedSupabaseProps<Client extends SupabaseClient<any, any>, Collection extends SupabaseCollectionOf<Client, SchemaName>, SchemaName extends SchemaNameOf<Client> = 'public', TOption extends CrudAsOption = 'object', TRemote extends SupabaseRowOf<Client, Collection, SchemaName> = SupabaseRowOf<Client, Collection, SchemaName>, TLocal = TRemote> extends SyncedSupabaseConfig<TRemote, TLocal>, Omit<SyncedCrudPropsMany<TRemote, TRemote, TOption>, 'list'> {
-    supabase: Client;
+    supabase?: Client;
     collection: Collection;
     schema?: SchemaName;
     select?: (query: PostgrestQueryBuilder<SupabaseSchemaOf<Client>, SupabaseTableOf<Client, SchemaName>[Collection], Collection>) => PostgrestFilterBuilder<SupabaseSchemaOf<Client>, TRemote, TRemote[], Collection, []>;

package/sync-plugins/supabase.js

@@ -30,7 +30,7 @@ function wrapSupabaseFn(fn) {
 function syncedSupabase(props) {
   props = { ...supabaseConfig, ...props };
   const {
-    supabase: client,
+    supabase,
     collection,
     select: selectFn,
     schema,
@@ -53,6 +53,7 @@ function syncedSupabase(props) {
     delete: deleteParam,
     ...rest
   } = props;
+  const client = supabase;
   const fieldCreatedAt = fieldCreatedAtParam || (changesSince === "last-sync" ? "created_at" : void 0);
   const fieldUpdatedAt = fieldUpdatedAtParam || (changesSince === "last-sync" ? "updated_at" : void 0);
   const fieldDeleted = fieldDeletedParam || (changesSince === "last-sync" ? "deleted" : void 0);
@@ -143,7 +144,7 @@ function syncedSupabase(props) {
         }
       }
     ).subscribe();
-    return channel.unsubscribe;
+    return () => channel.unsubscribe();
   } : void 0;
   let transform = transformParam;
   if (stringifyDates) {

package/sync-plugins/supabase.mjs

@@ -28,7 +28,7 @@ function wrapSupabaseFn(fn) {
 function syncedSupabase(props) {
   props = { ...supabaseConfig, ...props };
   const {
-    supabase: client,
+    supabase,
     collection,
     select: selectFn,
     schema,
@@ -51,6 +51,7 @@ function syncedSupabase(props) {
     delete: deleteParam,
     ...rest
   } = props;
+  const client = supabase;
   const fieldCreatedAt = fieldCreatedAtParam || (changesSince === "last-sync" ? "created_at" : void 0);
   const fieldUpdatedAt = fieldUpdatedAtParam || (changesSince === "last-sync" ? "updated_at" : void 0);
   const fieldDeleted = fieldDeletedParam || (changesSince === "last-sync" ? "deleted" : void 0);
@@ -141,7 +142,7 @@ function syncedSupabase(props) {
         }
       }
     ).subscribe();
-    return channel.unsubscribe;
+    return () => channel.unsubscribe();
   } : void 0;
   let transform = transformParam;
   if (stringifyDates) {

package/sync.js

@@ -1080,7 +1080,6 @@ function syncObservable(obs$, syncOptionsOrSynced) {
     }
   }
   syncStateValue.reset = async () => {
-    var _a;
     const wasPersistEnabled = syncStateValue.isPersistEnabled;
     const wasSyncEnabled = syncStateValue.isSyncEnabled;
     const metadata = metadatas.get(obs$);
@@ -1103,7 +1102,10 @@ function syncObservable(obs$, syncOptionsOrSynced) {
     unsubscribe == null ? void 0 : unsubscribe();
     unsubscribe = void 0;
     const promise = syncStateValue.clearPersist();
-    obs$.set((_a = syncOptions.initial) != null ? _a : void 0);
+    onChangeRemote(() => {
+      var _a;
+      obs$.set((_a = syncOptions.initial) != null ? _a : void 0);
+    });
     syncState$.isLoaded.set(false);
     syncStateValue.isPersistEnabled = wasPersistEnabled;
     syncStateValue.isSyncEnabled = wasSyncEnabled;

package/sync.mjs

@@ -1078,7 +1078,6 @@ function syncObservable(obs$, syncOptionsOrSynced) {
     }
   }
   syncStateValue.reset = async () => {
-    var _a;
     const wasPersistEnabled = syncStateValue.isPersistEnabled;
     const wasSyncEnabled = syncStateValue.isSyncEnabled;
     const metadata = metadatas.get(obs$);
@@ -1101,7 +1100,10 @@ function syncObservable(obs$, syncOptionsOrSynced) {
     unsubscribe == null ? void 0 : unsubscribe();
     unsubscribe = void 0;
     const promise = syncStateValue.clearPersist();
-    obs$.set((_a = syncOptions.initial) != null ? _a : void 0);
+    onChangeRemote(() => {
+      var _a;
+      obs$.set((_a = syncOptions.initial) != null ? _a : void 0);
+    });
     syncState$.isLoaded.set(false);
     syncStateValue.isPersistEnabled = wasPersistEnabled;
     syncStateValue.isSyncEnabled = wasSyncEnabled;