@legendapp/state 3.0.0-beta.7 → 3.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/state",
-  "version": "3.0.0-beta.7",
+  "version": "3.0.0-beta.9",
   "description": "legend-state",
   "sideEffects": false,
   "private": false,
@@ -48,6 +48,12 @@
     "./types/babel": {
       "types": "./types/babel.d.ts"
     },
+    "./types/reactive-web": {
+      "types": "./types/reactive-web.d.ts"
+    },
+    "./types/reactive-native": {
+      "types": "./types/reactive-native.d.ts"
+    },
     ".": {
       "import": "./index.mjs",
       "require": "./index.js",

package/react-reactive/enableReactComponents.d.mts

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

package/react-reactive/enableReactComponents.d.ts

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

package/react-reactive/enableReactComponents.js

@@ -1,7 +1,12 @@
 'use strict';
 
 // src/react-reactive/enableReactComponents.ts
-function enableReactComponents(config) {
+var isEnabled = false;
+function enableReactComponents_(config) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
   const bindInfoInput = Object.assign(
     { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
@@ -16,4 +21,4 @@ function enableReactComponents(config) {
   });
 }
 
-exports.enableReactComponents = enableReactComponents;
+exports.enableReactComponents_ = enableReactComponents_;

package/react-reactive/enableReactComponents.mjs

@@ -1,5 +1,10 @@
 // src/react-reactive/enableReactComponents.ts
-function enableReactComponents(config) {
+var isEnabled = false;
+function enableReactComponents_(config) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
   const bindInfoInput = Object.assign(
     { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
@@ -14,4 +19,4 @@ function enableReactComponents(config) {
   });
 }
 
-export { enableReactComponents };
+export { enableReactComponents_ };

package/react-reactive/enableReactNativeComponents.d.mts

@@ -1,22 +1,5 @@
-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';
+import { configureReactive } from '@legendapp/state/react';
 
-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>;
-    }
-}
+declare function enableReactNativeComponents_(configure: typeof configureReactive): void;
 
-export { enableReactNativeComponents };
+export { enableReactNativeComponents_ };

package/react-reactive/enableReactNativeComponents.d.ts

@@ -1,22 +1,5 @@
-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';
+import { configureReactive } from '@legendapp/state/react';
 
-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>;
-    }
-}
+declare function enableReactNativeComponents_(configure: typeof configureReactive): void;
 
-export { enableReactNativeComponents };
+export { enableReactNativeComponents_ };

package/react-reactive/enableReactNativeComponents.js

@@ -1,11 +1,16 @@
 'use strict';
 
-var react = require('react');
 var react$1 = require('@legendapp/state/react');
+var react = require('react');
 var reactNative = require('react-native');
 
 // src/react-reactive/enableReactNativeComponents.ts
-function enableReactNativeComponents(configure) {
+var isEnabled = false;
+function enableReactNativeComponents_(configure) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   configure({
     components: {
       ActivityIndicator: reactNative.ActivityIndicator,
@@ -50,4 +55,4 @@ function enableReactNativeComponents(configure) {
   });
 }
 
-exports.enableReactNativeComponents = enableReactNativeComponents;
+exports.enableReactNativeComponents_ = enableReactNativeComponents_;

package/react-reactive/enableReactNativeComponents.mjs

@@ -1,9 +1,14 @@
-import { useRef } from 'react';
 import { useSelector } from '@legendapp/state/react';
+import { useRef } from '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) {
+var isEnabled = false;
+function enableReactNativeComponents_(configure) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   configure({
     components: {
       ActivityIndicator,
@@ -48,4 +53,4 @@ function enableReactNativeComponents(configure) {
   });
 }
 
-export { enableReactNativeComponents };
+export { enableReactNativeComponents_ };

package/react-reactive/enableReactive.js

@@ -1,7 +1,12 @@
 'use strict';
 
 // src/react-reactive/enableReactComponents.ts
-function enableReactComponents(config) {
+var isEnabled = false;
+function enableReactComponents_(config) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
   const bindInfoInput = Object.assign(
     { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
@@ -18,7 +23,7 @@ function enableReactComponents(config) {
 
 // src/react-reactive/enableReactive.ts
 function enableReactive(config) {
-  enableReactComponents(config);
+  enableReactComponents_(config);
 }
 
 exports.enableReactive = enableReactive;

package/react-reactive/enableReactive.mjs

@@ -1,5 +1,10 @@
 // src/react-reactive/enableReactComponents.ts
-function enableReactComponents(config) {
+var isEnabled = false;
+function enableReactComponents_(config) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
   const bindInfoInput = Object.assign(
     { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
@@ -16,7 +21,7 @@ function enableReactComponents(config) {
 
 // src/react-reactive/enableReactive.ts
 function enableReactive(config) {
-  enableReactComponents(config);
+  enableReactComponents_(config);
 }
 
 export { enableReactive };

package/react-reactive/enableReactive.native.js

@@ -1,11 +1,16 @@
 'use strict';
 
-var react = require('react');
 var react$1 = require('@legendapp/state/react');
+var react = require('react');
 var reactNative = require('react-native');
 
 // src/react-reactive/enableReactNativeComponents.ts
-function enableReactNativeComponents(configure) {
+var isEnabled = false;
+function enableReactNativeComponents_(configure) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   configure({
     components: {
       ActivityIndicator: reactNative.ActivityIndicator,
@@ -52,7 +57,7 @@ function enableReactNativeComponents(configure) {
 
 // src/react-reactive/enableReactive.native.ts
 function enableReactive(configure) {
-  enableReactNativeComponents(configure);
+  enableReactNativeComponents_(configure);
 }
 
 exports.enableReactive = enableReactive;

package/react-reactive/enableReactive.native.mjs

@@ -1,9 +1,14 @@
-import { useRef } from 'react';
 import { useSelector } from '@legendapp/state/react';
+import { useRef } from '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) {
+var isEnabled = false;
+function enableReactNativeComponents_(configure) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   configure({
     components: {
       ActivityIndicator,
@@ -50,7 +55,7 @@ function enableReactNativeComponents(configure) {
 
 // src/react-reactive/enableReactive.native.ts
 function enableReactive(configure) {
-  enableReactNativeComponents(configure);
+  enableReactNativeComponents_(configure);
 }
 
 export { enableReactive };

package/react-reactive/enableReactive.web.js

@@ -1,11 +1,16 @@
 'use strict';
 
-var react = require('react');
 var react$1 = require('@legendapp/state/react');
+var react = require('react');
 var reactNative = require('react-native');
 
 // src/react-reactive/enableReactNativeComponents.ts
-function enableReactNativeComponents(configure) {
+var isEnabled = false;
+function enableReactNativeComponents_(configure) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   configure({
     components: {
       ActivityIndicator: reactNative.ActivityIndicator,
@@ -52,7 +57,7 @@ function enableReactNativeComponents(configure) {
 
 // src/react-reactive/enableReactive.web.ts
 function enableReactive(configure) {
-  enableReactNativeComponents(configure);
+  enableReactNativeComponents_(configure);
 }
 
 exports.enableReactive = enableReactive;

package/react-reactive/enableReactive.web.mjs

@@ -1,9 +1,14 @@
-import { useRef } from 'react';
 import { useSelector } from '@legendapp/state/react';
+import { useRef } from '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) {
+var isEnabled = false;
+function enableReactNativeComponents_(configure) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   configure({
     components: {
       ActivityIndicator,
@@ -50,7 +55,7 @@ function enableReactNativeComponents(configure) {
 
 // src/react-reactive/enableReactive.web.ts
 function enableReactive(configure) {
-  enableReactNativeComponents(configure);
+  enableReactNativeComponents_(configure);
 }
 
 export { enableReactive };

package/react.d.mts

@@ -101,10 +101,10 @@ type ObjectShapeWith$<T> = {
 type ExtractFCPropsType<T> = T extends FC<infer P> ? P : never;
 declare const hasSymbol: false | ((key: string) => symbol);
 declare function observer<P extends FC<any>>(component: P): P;
-declare function reactive<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWith$<ExtractFCPropsType<T>>>;
-declare function reactive<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
-declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWith$<ExtractFCPropsType<T>>>;
-declare function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
+declare function reactive<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWith$<ExtractFCPropsType<T>>>;
+declare function reactive<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
+declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWith$<ExtractFCPropsType<T>>>;
+declare function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
 declare function reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P>;
 
 declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;

package/react.d.ts

@@ -101,10 +101,10 @@ type ObjectShapeWith$<T> = {
 type ExtractFCPropsType<T> = T extends FC<infer P> ? P : never;
 declare const hasSymbol: false | ((key: string) => symbol);
 declare function observer<P extends FC<any>>(component: P): P;
-declare function reactive<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWith$<ExtractFCPropsType<T>>>;
-declare function reactive<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
-declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWith$<ExtractFCPropsType<T>>>;
-declare function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
+declare function reactive<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWith$<ExtractFCPropsType<T>>>;
+declare function reactive<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
+declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWith$<ExtractFCPropsType<T>>>;
+declare function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
 declare function reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P>;
 
 declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;

package/sync-plugins/crud.js

@@ -256,40 +256,38 @@ function syncedCrud(props) {
     const saveResult = async (itemKey, input, data, isCreate) => {
       var _a;
       if (data) {
-        const saved = (transform == null ? void 0 : transform.load) ? await transform.load(data, "set") : data;
+        let saved = (transform == null ? void 0 : transform.load) ? await transform.load(data, "set") : data;
         const isChild = itemKey !== "undefined" && asType !== "value";
         const currentPeeked = state.getNodeValue(node);
         const currentValue = isChild ? (_a = asType === "array" && state.isArray(currentPeeked) ? currentPeeked.find((v) => v[fieldId] === itemKey) : void 0) != null ? _a : currentPeeked[itemKey] : currentPeeked;
-        const dataOnSaved = {
-          saved,
-          input,
-          currentValue,
-          isCreate,
-          props
-        };
-        let savedOut = saved;
-        if (savedOut && !state.isNullOrUndefined(currentValue)) {
-          savedOut = clone(savedOut);
-          Object.keys(savedOut).forEach((key) => {
+        if (saved && !state.isNullOrUndefined(currentValue)) {
+          if (onSaved) {
+            const ret = onSaved({
+              saved,
+              input,
+              currentValue,
+              isCreate,
+              props
+            });
+            if (ret) {
+              saved = ret;
+            }
+          }
+          saved = clone(saved);
+          Object.keys(saved).forEach((key) => {
             const i = input[key];
             const c = currentValue[key];
             if (
               // value is already the new value, can ignore
-              savedOut[key] === c || // user has changed local value
-              key !== "id" && i !== c
+              saved[key] === c || // user has changed local value
+              key !== fieldId && i !== c
             ) {
-              delete savedOut[key];
+              delete saved[key];
             }
           });
-          if (onSaved) {
-            const ret = onSaved(dataOnSaved);
-            if (ret) {
-              savedOut = ret;
-            }
-          }
-          const createdAt = fieldCreatedAt ? savedOut[fieldCreatedAt] : void 0;
-          const updatedAt = fieldUpdatedAt ? savedOut[fieldUpdatedAt] : void 0;
-          const value2 = itemKey !== "undefined" && asType !== "value" ? { [itemKey]: savedOut } : savedOut;
+          const createdAt = fieldCreatedAt ? saved[fieldCreatedAt] : void 0;
+          const updatedAt = fieldUpdatedAt ? saved[fieldUpdatedAt] : void 0;
+          const value2 = itemKey !== "undefined" && asType !== "value" ? { [itemKey]: saved } : saved;
           update({
             value: value2,
             lastSync: updatedAt || createdAt ? +new Date(updatedAt || createdAt) : void 0,

package/sync-plugins/crud.mjs

@@ -254,40 +254,38 @@ function syncedCrud(props) {
     const saveResult = async (itemKey, input, data, isCreate) => {
       var _a;
       if (data) {
-        const saved = (transform == null ? void 0 : transform.load) ? await transform.load(data, "set") : data;
+        let saved = (transform == null ? void 0 : transform.load) ? await transform.load(data, "set") : data;
         const isChild = itemKey !== "undefined" && asType !== "value";
         const currentPeeked = getNodeValue(node);
         const currentValue = isChild ? (_a = asType === "array" && isArray(currentPeeked) ? currentPeeked.find((v) => v[fieldId] === itemKey) : void 0) != null ? _a : currentPeeked[itemKey] : currentPeeked;
-        const dataOnSaved = {
-          saved,
-          input,
-          currentValue,
-          isCreate,
-          props
-        };
-        let savedOut = saved;
-        if (savedOut && !isNullOrUndefined(currentValue)) {
-          savedOut = clone(savedOut);
-          Object.keys(savedOut).forEach((key) => {
+        if (saved && !isNullOrUndefined(currentValue)) {
+          if (onSaved) {
+            const ret = onSaved({
+              saved,
+              input,
+              currentValue,
+              isCreate,
+              props
+            });
+            if (ret) {
+              saved = ret;
+            }
+          }
+          saved = clone(saved);
+          Object.keys(saved).forEach((key) => {
             const i = input[key];
             const c = currentValue[key];
             if (
               // value is already the new value, can ignore
-              savedOut[key] === c || // user has changed local value
-              key !== "id" && i !== c
+              saved[key] === c || // user has changed local value
+              key !== fieldId && i !== c
             ) {
-              delete savedOut[key];
+              delete saved[key];
             }
           });
-          if (onSaved) {
-            const ret = onSaved(dataOnSaved);
-            if (ret) {
-              savedOut = ret;
-            }
-          }
-          const createdAt = fieldCreatedAt ? savedOut[fieldCreatedAt] : void 0;
-          const updatedAt = fieldUpdatedAt ? savedOut[fieldUpdatedAt] : void 0;
-          const value2 = itemKey !== "undefined" && asType !== "value" ? { [itemKey]: savedOut } : savedOut;
+          const createdAt = fieldCreatedAt ? saved[fieldCreatedAt] : void 0;
+          const updatedAt = fieldUpdatedAt ? saved[fieldUpdatedAt] : void 0;
+          const value2 = itemKey !== "undefined" && asType !== "value" ? { [itemKey]: saved } : saved;
           update({
             value: value2,
             lastSync: updatedAt || createdAt ? +new Date(updatedAt || createdAt) : void 0,

package/trace.js

@@ -19,13 +19,12 @@ function getNodePath(node) {
 // src/trace/useTraceListeners.ts
 var { optimized, tracking } = state.internal;
 function useTraceListeners(name) {
-  if (process.env.NODE_ENV === "development" && tracking.current) {
+  if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && tracking.current) {
     tracking.current.traceListeners = traceNodes.bind(this, name);
   }
 }
 function traceNodes(name, nodes) {
-  if (process.env.NODE_ENV === "development" && tracking.current) {
-    tracking.current.traceListeners = void 0;
+  if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && nodes.size) {
     const arr = [];
     if (nodes) {
       for (const tracked of nodes.values()) {
@@ -45,7 +44,7 @@ ${arr.join("\n")}`
 }
 var { tracking: tracking2 } = state.internal;
 function useTraceUpdates(name) {
-  if (process.env.NODE_ENV === "development" && tracking2.current) {
+  if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && tracking2.current) {
     tracking2.current.traceUpdates = replaceUpdateFn.bind(void 0, name);
   }
 }
@@ -54,13 +53,13 @@ function replaceUpdateFn(name, updateFn) {
 }
 function onChange(name, updateFn, params) {
   const { changes } = params;
-  if (process.env.NODE_ENV === "development") {
+  if (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") {
     changes.forEach(({ path, valueAtPath, prevAtPath }) => {
       console.log(`[legend-state] Rendering ${name ? name + " " : ""}because "${path}" changed:
 from: ${JSON.stringify(prevAtPath)}
 to: ${JSON.stringify(valueAtPath)}`);
     });
-    return updateFn();
+    return updateFn(params);
   }
 }
 var { optimized: optimized2, tracking: tracking3 } = state.internal;

package/trace.mjs

@@ -17,13 +17,12 @@ function getNodePath(node) {
 // src/trace/useTraceListeners.ts
 var { optimized, tracking } = internal;
 function useTraceListeners(name) {
-  if (process.env.NODE_ENV === "development" && tracking.current) {
+  if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && tracking.current) {
     tracking.current.traceListeners = traceNodes.bind(this, name);
   }
 }
 function traceNodes(name, nodes) {
-  if (process.env.NODE_ENV === "development" && tracking.current) {
-    tracking.current.traceListeners = void 0;
+  if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && nodes.size) {
     const arr = [];
     if (nodes) {
       for (const tracked of nodes.values()) {
@@ -43,7 +42,7 @@ ${arr.join("\n")}`
 }
 var { tracking: tracking2 } = internal;
 function useTraceUpdates(name) {
-  if (process.env.NODE_ENV === "development" && tracking2.current) {
+  if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && tracking2.current) {
     tracking2.current.traceUpdates = replaceUpdateFn.bind(void 0, name);
   }
 }
@@ -52,13 +51,13 @@ function replaceUpdateFn(name, updateFn) {
 }
 function onChange(name, updateFn, params) {
   const { changes } = params;
-  if (process.env.NODE_ENV === "development") {
+  if (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") {
     changes.forEach(({ path, valueAtPath, prevAtPath }) => {
       console.log(`[legend-state] Rendering ${name ? name + " " : ""}because "${path}" changed:
 from: ${JSON.stringify(prevAtPath)}
 to: ${JSON.stringify(valueAtPath)}`);
     });
-    return updateFn();
+    return updateFn(params);
   }
 }
 var { optimized: optimized2, tracking: tracking3 } = internal;

package/types/reactive-native.d.ts

@@ -0,0 +1,19 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { IReactive } from '@legendapp/state/react';
+
+declare module '@legendapp/state/react' {
+    interface IReactive {
+        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>;
+    }
+}

package/types/reactive-web.d.ts

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { IReactive, FCReactiveObject } from '@legendapp/state/react';
+
+declare module '@legendapp/state/react' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IReactive extends FCReactiveObject<JSX.IntrinsicElements> {}
+}