@legendapp/state 3.0.0-alpha.9 → 3.0.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/state",
-  "version": "3.0.0-alpha.9",
+  "version": "3.0.0-beta.0",
   "description": "legend-state",
   "sideEffects": false,
   "private": false,
@@ -68,6 +68,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",
@@ -153,6 +178,11 @@
       "require": "./config/enableReactTracking.js",
       "types": "./config/enableReactTracking.d.ts"
     },
+    "./config/configureLegendState": {
+      "import": "./config/configureLegendState.mjs",
+      "require": "./config/configureLegendState.js",
+      "types": "./config/configureLegendState.d.ts"
+    },
     "./config/enable$GetSet": {
       "import": "./config/enable$GetSet.mjs",
       "require": "./config/enable$GetSet.js",
@@ -208,6 +238,11 @@
       "require": "./sync-plugins/crud.js",
       "types": "./sync-plugins/crud.d.ts"
     },
+    "./sync-plugins/firebase": {
+      "import": "./sync-plugins/firebase.mjs",
+      "require": "./sync-plugins/firebase.js",
+      "types": "./sync-plugins/firebase.d.ts"
+    },
     "./sync-plugins/tanstack-react-query": {
       "import": "./sync-plugins/tanstack-react-query.mjs",
       "require": "./sync-plugins/tanstack-react-query.js",

package/persist-plugins/async-storage.d.mts

@@ -1,9 +1,11 @@
 import { Change } from '@legendapp/state';
-import { ObservablePersistPlugin, ObservablePersistenceConfigLocalGlobalOptions, PersistMetadata } from '@legendapp/state/sync';
+import { ObservablePersistPlugin, ObservablePersistAsyncStoragePluginOptions, ObservablePersistPluginOptions, PersistMetadata } from '@legendapp/state/sync';
 
 declare class ObservablePersistAsyncStorage implements ObservablePersistPlugin {
     private data;
-    initialize(config: ObservablePersistenceConfigLocalGlobalOptions): Promise<void>;
+    private configuration;
+    constructor(configuration: ObservablePersistAsyncStoragePluginOptions);
+    initialize(configOptions: ObservablePersistPluginOptions): Promise<void>;
     loadTable(table: string): void | Promise<void>;
     getTable(table: string, init: object): any;
     getMetadata(table: string): PersistMetadata;
@@ -14,5 +16,6 @@ declare class ObservablePersistAsyncStorage implements ObservablePersistPlugin {
     private setValue;
     private save;
 }
+declare function observablePersistAsyncStorage(configuration: ObservablePersistAsyncStoragePluginOptions): ObservablePersistAsyncStorage;
 
-export { ObservablePersistAsyncStorage };
+export { ObservablePersistAsyncStorage, observablePersistAsyncStorage };

package/persist-plugins/async-storage.d.ts

@@ -1,9 +1,11 @@
 import { Change } from '@legendapp/state';
-import { ObservablePersistPlugin, ObservablePersistenceConfigLocalGlobalOptions, PersistMetadata } from '@legendapp/state/sync';
+import { ObservablePersistPlugin, ObservablePersistAsyncStoragePluginOptions, ObservablePersistPluginOptions, PersistMetadata } from '@legendapp/state/sync';
 
 declare class ObservablePersistAsyncStorage implements ObservablePersistPlugin {
     private data;
-    initialize(config: ObservablePersistenceConfigLocalGlobalOptions): Promise<void>;
+    private configuration;
+    constructor(configuration: ObservablePersistAsyncStoragePluginOptions);
+    initialize(configOptions: ObservablePersistPluginOptions): Promise<void>;
     loadTable(table: string): void | Promise<void>;
     getTable(table: string, init: object): any;
     getMetadata(table: string): PersistMetadata;
@@ -14,5 +16,6 @@ declare class ObservablePersistAsyncStorage implements ObservablePersistPlugin {
     private setValue;
     private save;
 }
+declare function observablePersistAsyncStorage(configuration: ObservablePersistAsyncStoragePluginOptions): ObservablePersistAsyncStorage;
 
-export { ObservablePersistAsyncStorage };
+export { ObservablePersistAsyncStorage, observablePersistAsyncStorage };

package/persist-plugins/async-storage.js

@@ -7,13 +7,13 @@ var MetadataSuffix = "__m";
 var AsyncStorage;
 var { safeParse, safeStringify } = state.internal;
 var ObservablePersistAsyncStorage = class {
-  constructor() {
+  constructor(configuration) {
     this.data = {};
+    this.configuration = configuration;
   }
-  // Init
-  async initialize(config) {
+  async initialize(configOptions) {
+    const storageConfig = this.configuration || configOptions.asyncStorage;
     let tables = [];
-    const storageConfig = config.asyncStorage;
     if (storageConfig) {
       AsyncStorage = storageConfig.AsyncStorage;
       const { preload } = storageConfig;
@@ -87,5 +87,9 @@ var ObservablePersistAsyncStorage = class {
     }
   }
 };
+function observablePersistAsyncStorage(configuration) {
+  return new ObservablePersistAsyncStorage(configuration);
+}
 
 exports.ObservablePersistAsyncStorage = ObservablePersistAsyncStorage;
+exports.observablePersistAsyncStorage = observablePersistAsyncStorage;

package/persist-plugins/async-storage.mjs

@@ -5,13 +5,13 @@ var MetadataSuffix = "__m";
 var AsyncStorage;
 var { safeParse, safeStringify } = internal;
 var ObservablePersistAsyncStorage = class {
-  constructor() {
+  constructor(configuration) {
     this.data = {};
+    this.configuration = configuration;
   }
-  // Init
-  async initialize(config) {
+  async initialize(configOptions) {
+    const storageConfig = this.configuration || configOptions.asyncStorage;
     let tables = [];
-    const storageConfig = config.asyncStorage;
     if (storageConfig) {
       AsyncStorage = storageConfig.AsyncStorage;
       const { preload } = storageConfig;
@@ -85,5 +85,8 @@ var ObservablePersistAsyncStorage = class {
     }
   }
 };
+function observablePersistAsyncStorage(configuration) {
+  return new ObservablePersistAsyncStorage(configuration);
+}
 
-export { ObservablePersistAsyncStorage };
+export { ObservablePersistAsyncStorage, observablePersistAsyncStorage };

package/persist-plugins/indexeddb.d.mts

@@ -1,5 +1,5 @@
 import { Change } from '@legendapp/state';
-import { ObservablePersistPlugin, ObservablePersistPluginOptions, PersistOptions, PersistMetadata } from '@legendapp/state/sync';
+import { ObservablePersistPlugin, ObservablePersistIndexedDBPluginOptions, ObservablePersistPluginOptions, PersistOptions, PersistMetadata } from '@legendapp/state/sync';
 
 declare class ObservablePersistIndexedDB implements ObservablePersistPlugin {
     private tableData;
@@ -9,8 +9,9 @@ declare class ObservablePersistIndexedDB implements ObservablePersistPlugin {
     private isSaveTaskQueued;
     private pendingSaves;
     private promisesQueued;
-    constructor();
-    initialize(config: ObservablePersistPluginOptions): Promise<void>;
+    private configuration;
+    constructor(configuration: ObservablePersistIndexedDBPluginOptions);
+    initialize(configOptions: ObservablePersistPluginOptions): Promise<void>;
     loadTable(table: string, config: PersistOptions): void | Promise<void>;
     getTable(table: string, init: object, config: PersistOptions): any;
     getMetadata(table: string, config: PersistOptions): any;
@@ -25,5 +26,6 @@ declare class ObservablePersistIndexedDB implements ObservablePersistPlugin {
     private _setItem;
     private _setTable;
 }
+declare function observablePersistIndexedDB(configuration: ObservablePersistIndexedDBPluginOptions): ObservablePersistIndexedDB;
 
-export { ObservablePersistIndexedDB };
+export { ObservablePersistIndexedDB, observablePersistIndexedDB };

package/persist-plugins/indexeddb.d.ts

@@ -1,5 +1,5 @@
 import { Change } from '@legendapp/state';
-import { ObservablePersistPlugin, ObservablePersistPluginOptions, PersistOptions, PersistMetadata } from '@legendapp/state/sync';
+import { ObservablePersistPlugin, ObservablePersistIndexedDBPluginOptions, ObservablePersistPluginOptions, PersistOptions, PersistMetadata } from '@legendapp/state/sync';
 
 declare class ObservablePersistIndexedDB implements ObservablePersistPlugin {
     private tableData;
@@ -9,8 +9,9 @@ declare class ObservablePersistIndexedDB implements ObservablePersistPlugin {
     private isSaveTaskQueued;
     private pendingSaves;
     private promisesQueued;
-    constructor();
-    initialize(config: ObservablePersistPluginOptions): Promise<void>;
+    private configuration;
+    constructor(configuration: ObservablePersistIndexedDBPluginOptions);
+    initialize(configOptions: ObservablePersistPluginOptions): Promise<void>;
     loadTable(table: string, config: PersistOptions): void | Promise<void>;
     getTable(table: string, init: object, config: PersistOptions): any;
     getMetadata(table: string, config: PersistOptions): any;
@@ -25,5 +26,6 @@ declare class ObservablePersistIndexedDB implements ObservablePersistPlugin {
     private _setItem;
     private _setTable;
 }
+declare function observablePersistIndexedDB(configuration: ObservablePersistIndexedDBPluginOptions): ObservablePersistIndexedDB;
 
-export { ObservablePersistIndexedDB };
+export { ObservablePersistIndexedDB, observablePersistIndexedDB };

package/persist-plugins/indexeddb.js

@@ -9,36 +9,47 @@ function requestToPromise(request) {
   return new Promise((resolve) => request.onsuccess = () => resolve());
 }
 var ObservablePersistIndexedDB = class {
-  constructor() {
+  constructor(configuration) {
     this.tableData = {};
     this.tableMetadata = {};
     this.tablesAdjusted = /* @__PURE__ */ new Map();
     this.isSaveTaskQueued = false;
     this.pendingSaves = /* @__PURE__ */ new Map();
     this.promisesQueued = [];
+    this.configuration = configuration;
     this.doSave = this.doSave.bind(this);
   }
-  async initialize(config) {
+  async initialize(configOptions) {
+    const config = this.configuration || configOptions.indexedDB;
     if (typeof indexedDB === "undefined")
       return;
-    if (process.env.NODE_ENV === "development" && !(config == null ? void 0 : config.indexedDB)) {
+    if (process.env.NODE_ENV === "development" && !config) {
       console.error("[legend-state] Must configure ObservablePersistIndexedDB");
     }
-    const { databaseName, version, tableNames } = config.indexedDB;
+    const { databaseName, version, tableNames } = config;
     const openRequest = indexedDB.open(databaseName, version);
     openRequest.onerror = () => {
-      console.error("Error", openRequest.error);
+      console.error("[legend-state] ObservablePersistIndexedDB load error", openRequest.error);
     };
-    openRequest.onupgradeneeded = () => {
+    openRequest.onupgradeneeded = (event) => {
       const db = openRequest.result;
-      const { tableNames: tableNames2 } = config.indexedDB;
-      tableNames2.forEach((table) => {
-        if (!db.objectStoreNames.contains(table)) {
-          db.createObjectStore(table, {
-            keyPath: "id"
-          });
-        }
-      });
+      const { tableNames: tableNames2, deleteTableNames, onUpgradeNeeded } = config;
+      if (onUpgradeNeeded) {
+        onUpgradeNeeded(event);
+      } else {
+        deleteTableNames == null ? void 0 : deleteTableNames.forEach((table) => {
+          if (db.objectStoreNames.contains(table)) {
+            db.deleteObjectStore(table);
+          }
+        });
+        tableNames2.forEach((table) => {
+          if (!db.objectStoreNames.contains(table)) {
+            db.createObjectStore(table, {
+              keyPath: "id"
+            });
+          }
+        });
+      }
     };
     return new Promise((resolve) => {
       openRequest.onsuccess = async () => {
@@ -57,6 +68,11 @@ var ObservablePersistIndexedDB = class {
   }
   loadTable(table, config) {
     var _a;
+    if (!this.db) {
+      throw new Error(
+        "[legend-state] ObservablePersistIndexedDB loading without being initialized. This may happen when running outside of a browser."
+      );
+    }
     if (!this.tableData[table]) {
       const transaction = this.db.transaction(table, "readonly");
       return this.initTable(table, transaction).then(() => this.loadTable(table, config));
@@ -163,7 +179,7 @@ var ObservablePersistIndexedDB = class {
         pendingTable.items.add(key);
       } else {
         this.tableData[table] = valueAtPath;
-        pendingTable.tablePrev = prev;
+        pendingTable.tablePrev = prev || {};
         break;
       }
     }
@@ -363,5 +379,9 @@ var ObservablePersistIndexedDB = class {
     return lastSet;
   }
 };
+function observablePersistIndexedDB(configuration) {
+  return new ObservablePersistIndexedDB(configuration);
+}
 
 exports.ObservablePersistIndexedDB = ObservablePersistIndexedDB;
+exports.observablePersistIndexedDB = observablePersistIndexedDB;

package/persist-plugins/indexeddb.mjs

@@ -7,36 +7,47 @@ function requestToPromise(request) {
   return new Promise((resolve) => request.onsuccess = () => resolve());
 }
 var ObservablePersistIndexedDB = class {
-  constructor() {
+  constructor(configuration) {
     this.tableData = {};
     this.tableMetadata = {};
     this.tablesAdjusted = /* @__PURE__ */ new Map();
     this.isSaveTaskQueued = false;
     this.pendingSaves = /* @__PURE__ */ new Map();
     this.promisesQueued = [];
+    this.configuration = configuration;
     this.doSave = this.doSave.bind(this);
   }
-  async initialize(config) {
+  async initialize(configOptions) {
+    const config = this.configuration || configOptions.indexedDB;
     if (typeof indexedDB === "undefined")
       return;
-    if (process.env.NODE_ENV === "development" && !(config == null ? void 0 : config.indexedDB)) {
+    if (process.env.NODE_ENV === "development" && !config) {
       console.error("[legend-state] Must configure ObservablePersistIndexedDB");
     }
-    const { databaseName, version, tableNames } = config.indexedDB;
+    const { databaseName, version, tableNames } = config;
     const openRequest = indexedDB.open(databaseName, version);
     openRequest.onerror = () => {
-      console.error("Error", openRequest.error);
+      console.error("[legend-state] ObservablePersistIndexedDB load error", openRequest.error);
     };
-    openRequest.onupgradeneeded = () => {
+    openRequest.onupgradeneeded = (event) => {
       const db = openRequest.result;
-      const { tableNames: tableNames2 } = config.indexedDB;
-      tableNames2.forEach((table) => {
-        if (!db.objectStoreNames.contains(table)) {
-          db.createObjectStore(table, {
-            keyPath: "id"
-          });
-        }
-      });
+      const { tableNames: tableNames2, deleteTableNames, onUpgradeNeeded } = config;
+      if (onUpgradeNeeded) {
+        onUpgradeNeeded(event);
+      } else {
+        deleteTableNames == null ? void 0 : deleteTableNames.forEach((table) => {
+          if (db.objectStoreNames.contains(table)) {
+            db.deleteObjectStore(table);
+          }
+        });
+        tableNames2.forEach((table) => {
+          if (!db.objectStoreNames.contains(table)) {
+            db.createObjectStore(table, {
+              keyPath: "id"
+            });
+          }
+        });
+      }
     };
     return new Promise((resolve) => {
       openRequest.onsuccess = async () => {
@@ -55,6 +66,11 @@ var ObservablePersistIndexedDB = class {
   }
   loadTable(table, config) {
     var _a;
+    if (!this.db) {
+      throw new Error(
+        "[legend-state] ObservablePersistIndexedDB loading without being initialized. This may happen when running outside of a browser."
+      );
+    }
     if (!this.tableData[table]) {
       const transaction = this.db.transaction(table, "readonly");
       return this.initTable(table, transaction).then(() => this.loadTable(table, config));
@@ -161,7 +177,7 @@ var ObservablePersistIndexedDB = class {
         pendingTable.items.add(key);
       } else {
         this.tableData[table] = valueAtPath;
-        pendingTable.tablePrev = prev;
+        pendingTable.tablePrev = prev || {};
         break;
       }
     }
@@ -361,5 +377,8 @@ var ObservablePersistIndexedDB = class {
     return lastSet;
   }
 };
+function observablePersistIndexedDB(configuration) {
+  return new ObservablePersistIndexedDB(configuration);
+}
 
-export { ObservablePersistIndexedDB };
+export { ObservablePersistIndexedDB, observablePersistIndexedDB };

package/persist-plugins/mmkv.d.mts

@@ -1,9 +1,12 @@
 import { Change } from '@legendapp/state';
 import { ObservablePersistPlugin, PersistOptions, PersistMetadata } from '@legendapp/state/sync';
+import { MMKVConfiguration } from 'react-native-mmkv';
 
 declare class ObservablePersistMMKV implements ObservablePersistPlugin {
     private data;
     private storages;
+    private configuration;
+    constructor(configuration: MMKVConfiguration);
     getTable<T = any>(table: string, init: object, config: PersistOptions): T;
     getMetadata(table: string, config: PersistOptions): PersistMetadata;
     set(table: string, changes: Change[], config: PersistOptions): void;
@@ -14,5 +17,6 @@ declare class ObservablePersistMMKV implements ObservablePersistPlugin {
     private setValue;
     private save;
 }
+declare function observablePersistMMKV(configuration: MMKVConfiguration): ObservablePersistMMKV;
 
-export { ObservablePersistMMKV };
+export { ObservablePersistMMKV, observablePersistMMKV };

package/persist-plugins/mmkv.d.ts

@@ -1,9 +1,12 @@
 import { Change } from '@legendapp/state';
 import { ObservablePersistPlugin, PersistOptions, PersistMetadata } from '@legendapp/state/sync';
+import { MMKVConfiguration } from 'react-native-mmkv';
 
 declare class ObservablePersistMMKV implements ObservablePersistPlugin {
     private data;
     private storages;
+    private configuration;
+    constructor(configuration: MMKVConfiguration);
     getTable<T = any>(table: string, init: object, config: PersistOptions): T;
     getMetadata(table: string, config: PersistOptions): PersistMetadata;
     set(table: string, changes: Change[], config: PersistOptions): void;
@@ -14,5 +17,6 @@ declare class ObservablePersistMMKV implements ObservablePersistPlugin {
     private setValue;
     private save;
 }
+declare function observablePersistMMKV(configuration: MMKVConfiguration): ObservablePersistMMKV;
 
-export { ObservablePersistMMKV };
+export { ObservablePersistMMKV, observablePersistMMKV };

package/persist-plugins/mmkv.js

@@ -8,7 +8,7 @@ var symbolDefault = Symbol();
 var MetadataSuffix = "__m";
 var { safeParse, safeStringify } = state.internal;
 var ObservablePersistMMKV = class {
-  constructor() {
+  constructor(configuration) {
     this.data = {};
     this.storages = /* @__PURE__ */ new Map([
       [
@@ -18,6 +18,7 @@ var ObservablePersistMMKV = class {
         })
       ]
     ]);
+    this.configuration = configuration;
   }
   // Gets
   getTable(table, init, config) {
@@ -59,12 +60,12 @@ var ObservablePersistMMKV = class {
   }
   // Private
   getStorage(config) {
-    const { mmkv } = config;
-    if (mmkv) {
-      const key = JSON.stringify(mmkv);
+    const configuration = config.mmkv || this.configuration;
+    if (configuration) {
+      const key = JSON.stringify(configuration);
       let storage = this.storages.get(key);
       if (!storage) {
-        storage = new reactNativeMmkv.MMKV(mmkv);
+        storage = new reactNativeMmkv.MMKV(configuration);
         this.storages.set(key, storage);
       }
       return storage;
@@ -90,5 +91,9 @@ var ObservablePersistMMKV = class {
     }
   }
 };
+function observablePersistMMKV(configuration) {
+  return new ObservablePersistMMKV(configuration);
+}
 
 exports.ObservablePersistMMKV = ObservablePersistMMKV;
+exports.observablePersistMMKV = observablePersistMMKV;

package/persist-plugins/mmkv.mjs

@@ -6,7 +6,7 @@ var symbolDefault = Symbol();
 var MetadataSuffix = "__m";
 var { safeParse, safeStringify } = internal;
 var ObservablePersistMMKV = class {
-  constructor() {
+  constructor(configuration) {
     this.data = {};
     this.storages = /* @__PURE__ */ new Map([
       [
@@ -16,6 +16,7 @@ var ObservablePersistMMKV = class {
         })
       ]
     ]);
+    this.configuration = configuration;
   }
   // Gets
   getTable(table, init, config) {
@@ -57,12 +58,12 @@ var ObservablePersistMMKV = class {
   }
   // Private
   getStorage(config) {
-    const { mmkv } = config;
-    if (mmkv) {
-      const key = JSON.stringify(mmkv);
+    const configuration = config.mmkv || this.configuration;
+    if (configuration) {
+      const key = JSON.stringify(configuration);
       let storage = this.storages.get(key);
       if (!storage) {
-        storage = new MMKV(mmkv);
+        storage = new MMKV(configuration);
         this.storages.set(key, storage);
       }
       return storage;
@@ -88,5 +89,8 @@ var ObservablePersistMMKV = class {
     }
   }
 };
+function observablePersistMMKV(configuration) {
+  return new ObservablePersistMMKV(configuration);
+}
 
-export { ObservablePersistMMKV };
+export { ObservablePersistMMKV, observablePersistMMKV };

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 };