@legendapp/state 3.0.0-beta.2 → 3.0.0-beta.20

package/index.mjs

@@ -179,7 +179,7 @@ function setNodeValue(node, newValue) {
       parentNode.isSetting--;
     }
   }
-  return { prevValue, newValue };
+  return { prevValue, newValue, parentValue };
 }
 var arrNodeKeys = [];
 function getNodeValue(node) {
@@ -274,16 +274,19 @@ var ObservableHint = {
   },
   plain: function plainObject(value) {
     return addSymbol(value, symbolPlain);
+  },
+  function: function plainObject2(value) {
+    return addSymbol(value, symbolPlain);
   }
 };
 
 // src/helpers.ts
-function computeSelector(selector, e, retainObservable) {
+function computeSelector(selector, getOptions, e, retainObservable) {
   let c = selector;
   if (!isObservable(c) && isFunction(c)) {
     c = e ? c(e) : c();
   }
-  return isObservable(c) && !retainObservable ? c.get() : c;
+  return isObservable(c) && !retainObservable ? c.get(getOptions) : c;
 }
 function getObservableIndex(value$) {
   const node = getNode(value$);
@@ -382,7 +385,7 @@ function _mergeIntoObservable(target, source, levelsDeep) {
   const isSourceSet = isSet(source);
   if (isSourceSet && isSet(targetValue)) {
     target.set(/* @__PURE__ */ new Set([...source, ...targetValue]));
-  } else if (isTargetObj && isObject(source) && !isEmpty(targetValue) || isTargetArr && targetValue.length > 0) {
+  } else if (isTargetObj && isObject(source) || isTargetArr && targetValue.length > 0) {
     const keys = isSourceMap || isSourceSet ? Array.from(source.keys()) : Object.keys(source);
     for (let i = 0; i < keys.length; i++) {
       const key = keys[i];
@@ -967,13 +970,13 @@ function updateTracking(node, track) {
 }
 
 // src/trackSelector.ts
-function trackSelector(selector, update, observeEvent, observeOptions, createResubscribe) {
+function trackSelector(selector, update, getOptions, observeEvent, observeOptions, createResubscribe) {
   var _a;
   let dispose;
   let resubscribe;
   let updateFn = update;
   beginTracking();
-  const value = selector ? computeSelector(selector, observeEvent, observeOptions == null ? void 0 : observeOptions.fromComputed) : selector;
+  const value = selector ? computeSelector(selector, getOptions, observeEvent, observeOptions == null ? void 0 : observeOptions.fromComputed) : selector;
   const tracker = tracking.current;
   const nodes = tracker.nodes;
   endTracking();
@@ -1021,7 +1024,11 @@ function observe(selectorOrRun, reactionOrOptions, options) {
     beginBatch();
     delete e.value;
     dispose == null ? void 0 : dispose();
-    const { dispose: _dispose, value, nodes } = trackSelector(selectorOrRun, update, e, options);
+    const {
+      dispose: _dispose,
+      value,
+      nodes
+    } = trackSelector(selectorOrRun, update, void 0, e, options);
     dispose = _dispose;
     e.value = value;
     e.nodes = nodes;
@@ -1066,10 +1073,13 @@ function _when(predicate, effect, checkReady) {
       let isOk = true;
       if (isArray(ret)) {
         for (let i = 0; i < ret.length; i++) {
-          if (isObservable(ret[i])) {
-            ret[i] = computeSelector(ret[i]);
+          let item = ret[i];
+          if (isObservable(item)) {
+            item = computeSelector(item);
+          } else if (isFunction(item)) {
+            item = item();
           }
-          isOk = isOk && !!(checkReady ? isObservableValueReady(ret[i]) : ret[i]);
+          isOk = isOk && !!(checkReady ? isObservableValueReady(item) : item);
         }
       } else {
         isOk = checkReady ? isObservableValueReady(ret) : ret;
@@ -1168,8 +1178,8 @@ function collectionSetter(node, target, prop, ...args) {
     return ret;
   }
 }
-function getKeys(obj, isArr, isMap2) {
-  return isArr ? void 0 : obj ? isMap2 ? Array.from(obj.keys()) : Object.keys(obj) : [];
+function getKeys(obj, isArr, isMap2, isSet2) {
+  return isArr ? void 0 : obj ? isSet2 ? Array.from(obj) : isMap2 ? Array.from(obj.keys()) : Object.keys(obj) : [];
 }
 function updateNodes(parent, obj, prevValue) {
   var _a, _b, _c;
@@ -1199,9 +1209,11 @@ function updateNodes(parent, obj, prevValue) {
   let prevChildrenById;
   let moved;
   const isCurMap = isMap(obj);
+  const isCurSet = isSet(obj);
   const isPrevMap = isMap(prevValue);
-  const keys = getKeys(obj, isArr, isCurMap);
-  const keysPrev = getKeys(prevValue, isArr, isPrevMap);
+  const isPrevSet = isSet(prevValue);
+  const keys = getKeys(obj, isArr, isCurMap, isCurSet);
+  const keysPrev = getKeys(prevValue, isArr, isPrevMap, isPrevSet);
   const length = ((_a = keys || obj) == null ? void 0 : _a.length) || 0;
   const lengthPrev = ((_b = keysPrev || prevValue) == null ? void 0 : _b.length) || 0;
   let idField;
@@ -1551,7 +1563,9 @@ var proxyHandler = {
     if (isObservable(thisArg)) {
       thisArg = thisArg.peek();
     }
-    return Reflect.apply(target.lazyFn || target, thisArg, argArray);
+    const fnRaw = getNodeValue(target);
+    const fn = isFunction(fnRaw) ? fnRaw : target.lazyFn || target;
+    return Reflect.apply(fn, thisArg, argArray);
   }
 };
 function set(node, newValue) {
@@ -1583,7 +1597,7 @@ function setKey(node, key, newValue, level) {
   if (isObservable(newValue)) {
     setToObservable(childNode, newValue);
   } else {
-    const { newValue: savedValue, prevValue } = setNodeValue(childNode, newValue);
+    const { newValue: savedValue, prevValue, parentValue } = setNodeValue(childNode, newValue);
     const isPrim = isPrimitive(savedValue) || savedValue instanceof Date;
     if (!isPrim) {
       let parent = childNode;
@@ -1595,7 +1609,17 @@ function setKey(node, key, newValue, level) {
     const notify2 = !equals(savedValue, prevValue);
     const forceNotify = !notify2 && childNode.isComputing && !isPrim;
     if (notify2 || forceNotify) {
-      updateNodesAndNotify(node, savedValue, prevValue, childNode, isPrim, isRoot, level, forceNotify);
+      updateNodesAndNotify(
+        node,
+        savedValue,
+        prevValue,
+        childNode,
+        parentValue,
+        isPrim,
+        isRoot,
+        level,
+        forceNotify
+      );
     }
     extractFunctionOrComputed(node, key, savedValue);
   }
@@ -1702,7 +1726,7 @@ function handlerMapSet(node, p, value) {
     };
   }
 }
-function updateNodesAndNotify(node, newValue, prevValue, childNode, isPrim, isRoot, level, forceNotify) {
+function updateNodesAndNotify(node, newValue, prevValue, childNode, parentValue, isPrim, isRoot, level, forceNotify) {
   if (!childNode)
     childNode = node;
   beginBatch();
@@ -1711,15 +1735,29 @@ function updateNodesAndNotify(node, newValue, prevValue, childNode, isPrim, isRo
   }
   let hasADiff = forceNotify || isPrim;
   let whenOptimizedOnlyIf = false;
+  let valueAsArr;
+  let valueAsMap;
   if (!isPrim || prevValue && !isPrimitive(prevValue)) {
     if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && typeof __devUpdateNodes !== "undefined") {
       __devUpdateNodes.clear();
     }
     hasADiff = hasADiff || updateNodes(childNode, newValue, prevValue);
     if (isArray(newValue)) {
-      whenOptimizedOnlyIf = (newValue == null ? void 0 : newValue.length) !== (prevValue == null ? void 0 : prevValue.length);
+      valueAsArr = newValue;
+    } else if (isMap(newValue) || isSet(newValue)) {
+      valueAsMap = newValue;
     }
   }
+  if (isArray(parentValue)) {
+    valueAsArr = parentValue;
+  } else if (isMap(parentValue) || isSet(parentValue)) {
+    valueAsMap = parentValue;
+  }
+  if (valueAsArr) {
+    whenOptimizedOnlyIf = (valueAsArr == null ? void 0 : valueAsArr.length) !== (prevValue == null ? void 0 : prevValue.length);
+  } else if (valueAsMap) {
+    whenOptimizedOnlyIf = (valueAsMap == null ? void 0 : valueAsMap.size) !== (prevValue == null ? void 0 : prevValue.size);
+  }
   if (isPrim || !newValue || isEmpty(newValue) && !isEmpty(prevValue) ? newValue !== prevValue : hasADiff) {
     notify(
       isPrim && isRoot ? node : childNode,
@@ -1786,7 +1824,7 @@ function peek(node) {
 }
 var isFlushing = false;
 function peekInternal(node, activateRecursive) {
-  var _a;
+  var _a, _b;
   isFlushing = true;
   if (activateRecursive && ((_a = node.dirtyChildren) == null ? void 0 : _a.size)) {
     const dirty = Array.from(node.dirtyChildren);
@@ -1801,7 +1839,10 @@ function peekInternal(node, activateRecursive) {
   }
   isFlushing = false;
   let value = getNodeValue(node);
-  if (!globalState.isLoadingLocal) {
+  if (((_b = node.parent) == null ? void 0 : _b.isPlain) || isHintPlain(value)) {
+    node.isPlain = true;
+  }
+  if (!node.root.isLoadingLocal && !node.isPlain) {
     value = checkLazy(node, value, !!activateRecursive);
   }
   return value;
@@ -2272,7 +2313,14 @@ function syncState(obs) {
         syncCount: 0,
         resetPersistence: void 0,
         reset: () => Promise.resolve(),
-        sync: () => Promise.resolve(),
+        sync: () => {
+          var _a;
+          obs.peek();
+          if ((_a = node.state) == null ? void 0 : _a.isGetting.peek()) {
+            return when(node.state.isLoaded);
+          }
+          return Promise.resolve();
+        },
         getPendingChanges: () => ({}),
         // TODOV3 remove
         clearPersist: void 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/state",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.20",
   "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",
@@ -63,6 +69,16 @@
       "require": "./react.js",
       "types": "./react.d.ts"
     },
+    "./react-native": {
+      "import": "./react-native.mjs",
+      "require": "./react-native.js",
+      "types": "./react-native.d.ts"
+    },
+    "./react-web": {
+      "import": "./react-web.mjs",
+      "require": "./react-web.js",
+      "types": "./react-web.d.ts"
+    },
     "./trace": {
       "import": "./trace.mjs",
       "require": "./trace.js",
@@ -73,6 +89,11 @@
       "require": "./react-reactive/enableReactive.js",
       "types": "./react-reactive/enableReactive.d.ts"
     },
+    "./react-reactive/Components": {
+      "import": "./react-reactive/Components.mjs",
+      "require": "./react-reactive/Components.js",
+      "types": "./react-reactive/Components.d.ts"
+    },
     "./react-reactive/enableReactComponents": {
       "import": "./react-reactive/enableReactComponents.mjs",
       "require": "./react-reactive/enableReactComponents.js",

package/persist-plugins/async-storage.js

@@ -21,7 +21,10 @@ var ObservablePersistAsyncStorage = class {
         if (preload === true) {
           tables = await AsyncStorage.getAllKeys();
         } else if (state.isArray(preload)) {
-          tables = preload;
+          const metadataTables = preload.map(
+            (table) => table.endsWith(MetadataSuffix) ? void 0 : table + MetadataSuffix
+          );
+          tables = [...preload, ...metadataTables.filter(Boolean)];
         }
         if (tables) {
           const values = await AsyncStorage.multiGet(tables);
@@ -38,14 +41,19 @@ var ObservablePersistAsyncStorage = class {
   }
   loadTable(table) {
     if (this.data[table] === void 0) {
-      try {
-        return (async () => {
-          const value = await AsyncStorage.getItem(table);
-          this.data[table] = value ? safeParse(value) : void 0;
-        })();
-      } catch (e) {
-        console.error("[legend-state] ObservablePersistLocalAsyncStorage failed to parse", table);
-      }
+      return AsyncStorage.multiGet([table, table + MetadataSuffix]).then((values) => {
+        try {
+          values.forEach(([table2, value]) => {
+            this.data[table2] = value ? safeParse(value) : void 0;
+          });
+        } catch (err) {
+          console.error("[legend-state] ObservablePersistLocalAsyncStorage failed to parse", table, err);
+        }
+      }).catch((err) => {
+        if ((err == null ? void 0 : err.message) !== "window is not defined") {
+          console.error("[legend-state] AsyncStorage.multiGet failed", table, err);
+        }
+      });
     }
   }
   // Gets

package/persist-plugins/async-storage.mjs

@@ -19,7 +19,10 @@ var ObservablePersistAsyncStorage = class {
         if (preload === true) {
           tables = await AsyncStorage.getAllKeys();
         } else if (isArray(preload)) {
-          tables = preload;
+          const metadataTables = preload.map(
+            (table) => table.endsWith(MetadataSuffix) ? void 0 : table + MetadataSuffix
+          );
+          tables = [...preload, ...metadataTables.filter(Boolean)];
         }
         if (tables) {
           const values = await AsyncStorage.multiGet(tables);
@@ -36,14 +39,19 @@ var ObservablePersistAsyncStorage = class {
   }
   loadTable(table) {
     if (this.data[table] === void 0) {
-      try {
-        return (async () => {
-          const value = await AsyncStorage.getItem(table);
-          this.data[table] = value ? safeParse(value) : void 0;
-        })();
-      } catch (e) {
-        console.error("[legend-state] ObservablePersistLocalAsyncStorage failed to parse", table);
-      }
+      return AsyncStorage.multiGet([table, table + MetadataSuffix]).then((values) => {
+        try {
+          values.forEach(([table2, value]) => {
+            this.data[table2] = value ? safeParse(value) : void 0;
+          });
+        } catch (err) {
+          console.error("[legend-state] ObservablePersistLocalAsyncStorage failed to parse", table, err);
+        }
+      }).catch((err) => {
+        if ((err == null ? void 0 : err.message) !== "window is not defined") {
+          console.error("[legend-state] AsyncStorage.multiGet failed", table, err);
+        }
+      });
     }
   }
   // Gets

package/react-native.d.mts

@@ -0,0 +1,4 @@
+export { $ActivityIndicator, $Button, $FlatList, $Image, $Pressable, $ScrollView, $SectionList, $Switch, $Text, $TextInput, $TouchableWithoutFeedback, $View } from './react-reactive/Components.mjs';
+import 'react';
+import '@legendapp/state/react';
+import 'react-native';

package/react-native.d.ts

@@ -0,0 +1,4 @@
+export { $ActivityIndicator, $Button, $FlatList, $Image, $Pressable, $ScrollView, $SectionList, $Switch, $Text, $TextInput, $TouchableWithoutFeedback, $View } from './react-reactive/Components.js';
+import 'react';
+import '@legendapp/state/react';
+import 'react-native';

package/react-native.js

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

package/react-native.mjs

@@ -0,0 +1,40 @@
+import { reactive, use$ } 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/Components.ts
+var $ActivityIndicator = reactive(ActivityIndicator);
+var $Button = reactive(Button);
+var $FlatList = reactive(FlatList, void 0, {
+  data: {
+    selector: (propsOut, p) => {
+      const state = useRef(0);
+      const [renderNum, value] = use$(() => [state.current++, p.get(true)]);
+      propsOut.extraData = renderNum;
+      return value;
+    }
+  }
+});
+var $Image = reactive(Image);
+var $Pressable = reactive(Pressable);
+var $ScrollView = reactive(ScrollView);
+var $SectionList = reactive(SectionList);
+var $Switch = reactive(Switch, void 0, {
+  value: {
+    handler: "onValueChange",
+    getValue: (e) => e,
+    defaultValue: false
+  }
+});
+var $Text = reactive(Text);
+var $TextInput = reactive(TextInput, void 0, {
+  value: {
+    handler: "onChange",
+    getValue: (e) => e.nativeEvent.text,
+    defaultValue: ""
+  }
+});
+var $TouchableWithoutFeedback = reactive(TouchableWithoutFeedback);
+var $View = reactive(View);
+
+export { $ActivityIndicator, $Button, $FlatList, $Image, $Pressable, $ScrollView, $SectionList, $Switch, $Text, $TextInput, $TouchableWithoutFeedback, $View };

package/react-reactive/Components.d.mts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as _legendapp_state_react from '@legendapp/state/react';
+import * as react_native from 'react-native';
+import { View } from 'react-native';
+
+declare const $ActivityIndicator: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ActivityIndicatorProps>, any>;
+declare const $Button: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ButtonProps>, any>;
+declare const $FlatList: React.FC<_legendapp_state_react.ShapeWith$<react_native.FlatListProps<unknown>>>;
+declare const $Image: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ImageProps>, any>;
+declare const $Pressable: React.ForwardRefExoticComponent<_legendapp_state_react.ShapeWith$<react_native.PressableProps & React.RefAttributes<View>>>;
+declare const $ScrollView: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ScrollViewProps>, any>;
+declare const $SectionList: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.SectionListProps<unknown, unknown>>, any>;
+declare const $Switch: React.FC<_legendapp_state_react.ShapeWith$<react_native.SwitchProps>>;
+declare const $Text: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.TextProps>, any>;
+declare const $TextInput: React.FC<_legendapp_state_react.ShapeWith$<react_native.TextInputProps>>;
+declare const $TouchableWithoutFeedback: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.TouchableWithoutFeedbackProps>, any>;
+declare const $View: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ViewProps>, any>;
+
+export { $ActivityIndicator, $Button, $FlatList, $Image, $Pressable, $ScrollView, $SectionList, $Switch, $Text, $TextInput, $TouchableWithoutFeedback, $View };

package/react-reactive/Components.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as _legendapp_state_react from '@legendapp/state/react';
+import * as react_native from 'react-native';
+import { View } from 'react-native';
+
+declare const $ActivityIndicator: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ActivityIndicatorProps>, any>;
+declare const $Button: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ButtonProps>, any>;
+declare const $FlatList: React.FC<_legendapp_state_react.ShapeWith$<react_native.FlatListProps<unknown>>>;
+declare const $Image: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ImageProps>, any>;
+declare const $Pressable: React.ForwardRefExoticComponent<_legendapp_state_react.ShapeWith$<react_native.PressableProps & React.RefAttributes<View>>>;
+declare const $ScrollView: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ScrollViewProps>, any>;
+declare const $SectionList: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.SectionListProps<unknown, unknown>>, any>;
+declare const $Switch: React.FC<_legendapp_state_react.ShapeWith$<react_native.SwitchProps>>;
+declare const $Text: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.TextProps>, any>;
+declare const $TextInput: React.FC<_legendapp_state_react.ShapeWith$<react_native.TextInputProps>>;
+declare const $TouchableWithoutFeedback: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.TouchableWithoutFeedbackProps>, any>;
+declare const $View: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ViewProps>, any>;
+
+export { $ActivityIndicator, $Button, $FlatList, $Image, $Pressable, $ScrollView, $SectionList, $Switch, $Text, $TextInput, $TouchableWithoutFeedback, $View };

package/react-reactive/Components.js

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

package/react-reactive/Components.mjs

@@ -0,0 +1,40 @@
+import { reactive, use$ } 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/Components.ts
+var $ActivityIndicator = reactive(ActivityIndicator);
+var $Button = reactive(Button);
+var $FlatList = reactive(FlatList, void 0, {
+  data: {
+    selector: (propsOut, p) => {
+      const state = useRef(0);
+      const [renderNum, value] = use$(() => [state.current++, p.get(true)]);
+      propsOut.extraData = renderNum;
+      return value;
+    }
+  }
+});
+var $Image = reactive(Image);
+var $Pressable = reactive(Pressable);
+var $ScrollView = reactive(ScrollView);
+var $SectionList = reactive(SectionList);
+var $Switch = reactive(Switch, void 0, {
+  value: {
+    handler: "onValueChange",
+    getValue: (e) => e,
+    defaultValue: false
+  }
+});
+var $Text = reactive(Text);
+var $TextInput = reactive(TextInput, void 0, {
+  value: {
+    handler: "onChange",
+    getValue: (e) => e.nativeEvent.text,
+    defaultValue: ""
+  }
+});
+var $TouchableWithoutFeedback = reactive(TouchableWithoutFeedback);
+var $View = reactive(View);
+
+export { $ActivityIndicator, $Button, $FlatList, $Image, $Pressable, $ScrollView, $SectionList, $Switch, $Text, $TextInput, $TouchableWithoutFeedback, $View };

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,8 +1,15 @@
 'use strict';
 
 // src/react-reactive/enableReactComponents.ts
-function enableReactComponents(config) {
-  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+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 } },
     bindInfo
@@ -16,4 +23,4 @@ function enableReactComponents(config) {
   });
 }
 
-exports.enableReactComponents = enableReactComponents;
+exports.enableReactComponents_ = enableReactComponents_;