react-native-hox 0.0.1-beta

package/README.en.md

@@ -0,0 +1,36 @@
+# react-native-hox
+
+#### Description
+{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

package/README.md

@@ -0,0 +1,139 @@
+# react-native-hox
+
+**为复杂业务场景而生的状态管理解决方案**。
+
+我们把 API 收敛到一个：`createModel`。组件内像 Hook 一样用，组件外（如网络请求拦截器）也能直接读取/订阅最新状态。
+
+---
+
+## 核心特性
+
+*   **一个 API**：`createModel` 创建全局模型。
+*   **组件内/外都能用**：组件内 `model()` / `model(selector)` 订阅更新；组件外用 `model.data / model.getState()` 获取最新快照（不触发渲染）。
+*   **内置优化**：对象更新自动合并、无变化不更新（减少无意义重渲染）。
+*   **生产力优先**：可选持久化（Persist）、可选 Web 多窗口同步（BroadcastChannel）。
+
+---
+
+## 快速上手（推荐）
+
+### 安装
+
+```bash
+npm install react-native-hox
+# or
+yarn add react-native-hox
+```
+
+### 创建一个全局模型
+
+适用于用户信息、全局配置、表单草稿、token 等场景。
+**完全不需要 Provider，也不需要修改入口文件。**
+
+```tsx
+// store.ts
+import { createModel } from 'react-native-hox';
+
+// 定义一个支持持久化的用户状态
+// createModel(initialState, options?)
+export const userModel = createModel({
+  name: 'Guest',
+  token: '',
+  theme: 'light'
+}, {
+  persist: 'user_store', // 开启持久化，自动写入 Storage
+});
+
+// 推荐：在组件内使用 useXxxModel 作为 Hook 别名（同一个对象）
+// 这样更符合 Hook 心智模型，也能被 eslint-plugin-react-hooks 正确识别
+export const useUserModel = userModel;
+```
+
+**组件中使用：**
+
+```tsx
+import { useUserModel } from './store';
+
+function UserProfile() {
+  // 直接调用 model() 获取响应式 state
+  const user = useUserModel.useState();
+
+  const login = () => {
+    // 自动合并更新：只更新 token 和 name，theme 保持不变
+    useUserModel.setState({ 
+      token: 'xyz', 
+      name: 'User' 
+    });
+  };
+
+  return (
+    <View>
+      <Text>{user.name}</Text>
+      <Button onPress={login}>Login</Button>
+    </View>
+  );
+}
+```
+
+> 说明：组件渲染是否更新，取决于你是否用 `useUserModel.useState()` / `useUserModel.useState(selector)`（或直接 `useUserModel()`）订阅了状态；`userModel.data` / `useUserModel.data` 是快照不会触发渲染。`setState` 如果没有真正改变值会被自动忽略（减少无意义重渲染）。
+
+**什么时候用 `useXxxModel()` / `getState()` / `data`？**
+
+- 组件渲染里：用 `useUserModel.useState()`（或 `useUserModel.useState(s => s.token)`），它会订阅更新，状态变了组件会跟着重渲染
+- 组件外（网络请求拦截器、工具函数、非 React 环境）：用 `userModel.getState()` / `userModel.data` 读取最新快照，或 `userModel.subscribe(...)` 订阅
+- 不建议在组件渲染里用 `useUserModel.getState()` / `useUserModel.data`：它们是“快照读取”，不会触发组件更新，容易出现 UI 不刷新
+
+**组件外使用：**
+
+```ts
+import { userModel } from './store';
+
+// 在 Axios 拦截器中读取 Token
+axios.interceptors.request.use(config => {
+  const { token } = userModel.data; // 直接获取最新快照（非 Hook）
+  if (token) config.headers.Authorization = token;
+  return config;
+});
+
+// 在任意函数中更新状态
+export function logout() {
+  userModel.setState({ token: '', name: 'Guest' });
+}
+```
+
+---
+
+## 全局配置（可选）
+
+`persist` 默认会使用 **Web 端的 `localStorage`（零配置）**。在 React Native 环境没有默认持久化存储，需要你通过 `setup` 注入（也可以用 `setup` 覆盖 Web 默认实现）。
+
+```ts
+import { setup } from 'react-native-hox';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { MMKV } from 'react-native-mmkv';
+
+// 适配 AsyncStorage
+setup({ storage: AsyncStorage });
+
+// 或者适配 MMKV
+const storage = new MMKV();
+setup({
+  storage: {
+    getItem: (key) => storage.getString(key),
+    setItem: (key, val) => storage.set(key, val),
+    removeItem: (key) => storage.delete(key),
+  }
+});
+```
+
+## 高级特性
+
+### Web 端多窗口同步
+
+如果你在使用 `react-native-web`，或者在 WebView 场景下需要多 Tab 状态同步，可以开启 `sync` 选项。
+
+```ts
+const userModel = createModel({ ... }, {
+  persist: 'user',
+});
+```

package/dist/index.d.mts

@@ -0,0 +1,65 @@
+type Listener<T> = (state: T, prevState: T) => void;
+type EqualityFn<T> = (a: T, b: T) => boolean;
+
+type Selector<T, U> = (state: T) => U;
+type ModelHook<T> = {
+    (): T;
+    <U>(selector: Selector<T, U>, equalityFn?: EqualityFn<U>): U;
+};
+interface PersistOptions<T> {
+    key: string;
+    debounce?: number;
+    beforePersist?: (state: T) => any;
+    beforeRecover?: (value: any) => T;
+}
+interface CreateModelOptions<T> {
+    /**
+     * 开启持久化。建议直接传 key：persist: 'user_store'
+     */
+    persist?: string | PersistOptions<T>;
+    /**
+     * Web 多窗口同步（BroadcastChannel）。需要 persist key 才能工作。
+     */
+    sync?: boolean;
+}
+interface SubscribeWithSelectorOptions<U> {
+    equalityFn?: EqualityFn<U>;
+    fireImmediately?: boolean;
+}
+interface Model<T> {
+    (): T;
+    <U>(selector: Selector<T, U>, equalityFn?: EqualityFn<U>): U;
+    /**
+     * 更显式的 Hook 入口（等价于直接调用 model()）
+     * 推荐在组件内写：const state = useUserModel.useState()
+     */
+    useState: ModelHook<T>;
+    /**
+     * useState 的别名（更短），保留给喜欢 `useXxx.use()` 风格的团队
+     */
+    use: ModelHook<T>;
+    getState: () => T;
+    setState: (partial: T | Partial<T> | ((state: T) => T | Partial<T>), replace?: boolean) => void;
+    subscribe: {
+        (listener: Listener<T>): () => void;
+        <U>(selector: Selector<T, U>, listener: (selected: U, prevSelected: U) => void, options?: SubscribeWithSelectorOptions<U>): () => void;
+    };
+    destroy: () => void;
+    reset: () => void;
+    data: T;
+}
+declare function createModel<T>(initialState: T | (() => T), options?: CreateModelOptions<T>): Model<T>;
+
+interface StorageEngine {
+    getItem: (key: string) => string | null | Promise<string | null>;
+    setItem: (key: string, value: string) => void | Promise<void>;
+    removeItem: (key: string) => void | Promise<void>;
+}
+interface Config {
+    storage?: StorageEngine;
+}
+declare const setup: (options: Config) => void;
+
+declare const shallow: EqualityFn<any>;
+
+export { type CreateModelOptions, type Model, type PersistOptions, type StorageEngine, type SubscribeWithSelectorOptions, createModel, setup, shallow };

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+type Listener<T> = (state: T, prevState: T) => void;
+type EqualityFn<T> = (a: T, b: T) => boolean;
+
+type Selector<T, U> = (state: T) => U;
+type ModelHook<T> = {
+    (): T;
+    <U>(selector: Selector<T, U>, equalityFn?: EqualityFn<U>): U;
+};
+interface PersistOptions<T> {
+    key: string;
+    debounce?: number;
+    beforePersist?: (state: T) => any;
+    beforeRecover?: (value: any) => T;
+}
+interface CreateModelOptions<T> {
+    /**
+     * 开启持久化。建议直接传 key：persist: 'user_store'
+     */
+    persist?: string | PersistOptions<T>;
+    /**
+     * Web 多窗口同步（BroadcastChannel）。需要 persist key 才能工作。
+     */
+    sync?: boolean;
+}
+interface SubscribeWithSelectorOptions<U> {
+    equalityFn?: EqualityFn<U>;
+    fireImmediately?: boolean;
+}
+interface Model<T> {
+    (): T;
+    <U>(selector: Selector<T, U>, equalityFn?: EqualityFn<U>): U;
+    /**
+     * 更显式的 Hook 入口（等价于直接调用 model()）
+     * 推荐在组件内写：const state = useUserModel.useState()
+     */
+    useState: ModelHook<T>;
+    /**
+     * useState 的别名（更短），保留给喜欢 `useXxx.use()` 风格的团队
+     */
+    use: ModelHook<T>;
+    getState: () => T;
+    setState: (partial: T | Partial<T> | ((state: T) => T | Partial<T>), replace?: boolean) => void;
+    subscribe: {
+        (listener: Listener<T>): () => void;
+        <U>(selector: Selector<T, U>, listener: (selected: U, prevSelected: U) => void, options?: SubscribeWithSelectorOptions<U>): () => void;
+    };
+    destroy: () => void;
+    reset: () => void;
+    data: T;
+}
+declare function createModel<T>(initialState: T | (() => T), options?: CreateModelOptions<T>): Model<T>;
+
+interface StorageEngine {
+    getItem: (key: string) => string | null | Promise<string | null>;
+    setItem: (key: string, value: string) => void | Promise<void>;
+    removeItem: (key: string) => void | Promise<void>;
+}
+interface Config {
+    storage?: StorageEngine;
+}
+declare const setup: (options: Config) => void;
+
+declare const shallow: EqualityFn<any>;
+
+export { type CreateModelOptions, type Model, type PersistOptions, type StorageEngine, type SubscribeWithSelectorOptions, createModel, setup, shallow };

package/dist/index.js

@@ -0,0 +1,277 @@
+'use strict';
+
+var react = require('react');
+
+// src/createModel.ts
+
+// src/config.ts
+function getDefaultWebStorage() {
+  try {
+    const anyGlobal = globalThis;
+    const storage = anyGlobal == null ? void 0 : anyGlobal.localStorage;
+    if (!storage) {
+      return void 0;
+    }
+    const testKey = "__react_native_hox_test__";
+    storage.setItem(testKey, "1");
+    storage.removeItem(testKey);
+    return {
+      getItem: (key) => storage.getItem(key),
+      setItem: (key, value) => storage.setItem(key, value),
+      removeItem: (key) => storage.removeItem(key)
+    };
+  } catch {
+    return void 0;
+  }
+}
+var config = {
+  storage: getDefaultWebStorage()
+};
+var setup = (options) => {
+  Object.assign(config, options);
+};
+var getConfig = () => config;
+
+// src/vanilla.ts
+var createStore = (initialState) => {
+  let state = initialState;
+  const listeners = /* @__PURE__ */ new Set();
+  const getState = () => state;
+  const setState = (partial, replace = false) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (Object.is(nextState, state)) {
+      return;
+    }
+    const previousState = state;
+    const isNextObject = typeof nextState === "object" && nextState !== null;
+    const isPrevObject = typeof previousState === "object" && previousState !== null;
+    const shouldReplace = replace || !isNextObject || !isPrevObject;
+    if (shouldReplace) {
+      state = nextState;
+    } else {
+      const patch = nextState;
+      const prevObj = previousState;
+      let changed = false;
+      for (const [key, value] of Object.entries(patch)) {
+        if (!Object.is(prevObj[key], value)) {
+          changed = true;
+          break;
+        }
+      }
+      if (!changed) {
+        return;
+      }
+      state = Object.assign({}, previousState, nextState);
+    }
+    const currentListeners = new Set(listeners);
+    currentListeners.forEach((listener) => listener(state, previousState));
+  };
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const destroy = () => {
+    listeners.clear();
+  };
+  return { getState, setState, subscribe, destroy };
+};
+
+// src/utils.ts
+var shallow = (objA, objB) => {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+};
+function debounce(func, wait) {
+  let timeout;
+  let lastArgs;
+  let context;
+  const debounced = function(...args) {
+    context = this;
+    lastArgs = args;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      func.apply(context, args);
+      lastArgs = void 0;
+    }, wait);
+  };
+  debounced.flush = () => {
+    if (timeout && lastArgs) {
+      clearTimeout(timeout);
+      func.apply(context, lastArgs);
+      lastArgs = void 0;
+    }
+  };
+  debounced.cancel = () => {
+    clearTimeout(timeout);
+    lastArgs = void 0;
+  };
+  return debounced;
+}
+
+// src/createModel.ts
+function createModel(initialState, options) {
+  const initialValue = typeof initialState === "function" ? initialState() : initialState;
+  const store = createStore(initialValue);
+  setupModelSideEffects(store, options);
+  const model = bindStore(store);
+  model.setState = store.setState;
+  model.getState = store.getState;
+  model.destroy = store.destroy;
+  model.reset = () => store.setState(initialValue, true);
+  return model;
+}
+function bindStore(store) {
+  const subscribe = (onStoreChange) => store.subscribe(() => onStoreChange());
+  const useModel = ((selector, equalityFn = shallow) => {
+    const selectorRef = react.useRef(selector);
+    selectorRef.current = selector;
+    const equalityRef = react.useRef(equalityFn);
+    equalityRef.current = equalityFn;
+    const hasSelectionRef = react.useRef(false);
+    const lastStateRef = react.useRef(null);
+    const lastSelectionRef = react.useRef(null);
+    const getSelection = () => {
+      const state = store.getState();
+      const selectorFn = selectorRef.current;
+      const nextSelection = selectorFn ? selectorFn(state) : state;
+      if (hasSelectionRef.current) {
+        if (Object.is(state, lastStateRef.current)) {
+          return lastSelectionRef.current;
+        }
+        if (equalityRef.current(lastSelectionRef.current, nextSelection)) {
+          lastStateRef.current = state;
+          return lastSelectionRef.current;
+        }
+      }
+      hasSelectionRef.current = true;
+      lastStateRef.current = state;
+      lastSelectionRef.current = nextSelection;
+      return nextSelection;
+    };
+    return react.useSyncExternalStore(subscribe, getSelection, getSelection);
+  });
+  Object.defineProperty(useModel, "data", {
+    get: () => store.getState()
+  });
+  useModel.getState = store.getState;
+  useModel.setState = store.setState;
+  useModel.destroy = store.destroy;
+  useModel.reset = () => {
+  };
+  useModel.useState = useModel;
+  useModel.use = useModel;
+  const baseSubscribe = store.subscribe;
+  useModel.subscribe = (arg1, arg2, arg3) => {
+    var _a;
+    if (typeof arg1 === "function" && typeof arg2 !== "function") {
+      return baseSubscribe(arg1);
+    }
+    const selector = arg1;
+    const listener = arg2;
+    const options = arg3 != null ? arg3 : {};
+    const equalityFn = (_a = options.equalityFn) != null ? _a : Object.is;
+    let prevSelected = selector(store.getState());
+    if (options.fireImmediately) {
+      listener(prevSelected, prevSelected);
+    }
+    return baseSubscribe((nextState, prevState) => {
+      const nextSelected = selector(nextState);
+      const prevSelectedFromPrevState = selector(prevState);
+      if (equalityFn(prevSelectedFromPrevState, nextSelected)) {
+        return;
+      }
+      prevSelected = nextSelected;
+      listener(nextSelected, prevSelectedFromPrevState);
+    });
+  };
+  return useModel;
+}
+function setupModelSideEffects(store, options) {
+  var _a, _b, _c;
+  const { storage } = getConfig();
+  const persist = typeof (options == null ? void 0 : options.persist) === "string" ? { key: options.persist } : options == null ? void 0 : options.persist;
+  const persistKey = persist == null ? void 0 : persist.key;
+  const syncEnabled = !!(options == null ? void 0 : options.sync);
+  if (!persistKey) {
+    if (syncEnabled) {
+      console.warn(
+        "[react-native-hox] `sync` \u9700\u8981 `persist` \u63D0\u4F9B key \u624D\u80FD\u5EFA\u7ACB\u901A\u9053"
+      );
+    }
+    return;
+  }
+  const beforePersist = (_a = persist == null ? void 0 : persist.beforePersist) != null ? _a : ((s) => s);
+  const beforeRecover = (_b = persist == null ? void 0 : persist.beforeRecover) != null ? _b : ((v) => v);
+  const debounceMs = (_c = persist == null ? void 0 : persist.debounce) != null ? _c : 100;
+  if (!storage) {
+    console.warn(
+      "[react-native-hox] \u672A\u914D\u7F6E storage\uFF0Cpersist \u5C06\u4E0D\u4F1A\u751F\u6548\uFF1B\u8BF7\u5148\u8C03\u7528 setup({ storage })"
+    );
+  }
+  let channel;
+  const instanceId = Math.random().toString(36).slice(2);
+  let suppressBroadcast = false;
+  if (storage) {
+    Promise.resolve(storage.getItem(persistKey)).then((val) => {
+      if (!val) return;
+      try {
+        const parsed = JSON.parse(val);
+        const recovered = beforeRecover(parsed);
+        suppressBroadcast = true;
+        store.setState(recovered, true);
+      } catch (e) {
+        console.error("[react-native-hox] Failed to parse stored value:", e);
+      } finally {
+        suppressBroadcast = false;
+      }
+    });
+  }
+  if (syncEnabled && typeof BroadcastChannel !== "undefined") {
+    channel = new BroadcastChannel(`hox-sync-${persistKey}`);
+    channel.onmessage = (event) => {
+      const payload = event.data;
+      const nextState = (payload == null ? void 0 : payload.__hox) ? payload.state : payload;
+      const source = (payload == null ? void 0 : payload.__hox) ? payload.source : void 0;
+      if (source && source === instanceId) {
+        return;
+      }
+      suppressBroadcast = true;
+      store.setState(nextState, true);
+      suppressBroadcast = false;
+    };
+  }
+  const save = debounce((state, s) => {
+    if (!s) return;
+    try {
+      const prepared = beforePersist(state);
+      s.setItem(persistKey, JSON.stringify(prepared));
+    } catch (e) {
+      console.error("[react-native-hox] Save failed:", e);
+    }
+  }, debounceMs);
+  store.subscribe((state) => {
+    save(state, storage);
+    if (channel && !suppressBroadcast) {
+      channel.postMessage({ __hox: true, source: instanceId, state });
+    }
+  });
+}
+
+exports.createModel = createModel;
+exports.setup = setup;
+exports.shallow = shallow;

package/dist/index.mjs

@@ -0,0 +1,273 @@
+import { useRef, useSyncExternalStore } from 'react';
+
+// src/createModel.ts
+
+// src/config.ts
+function getDefaultWebStorage() {
+  try {
+    const anyGlobal = globalThis;
+    const storage = anyGlobal == null ? void 0 : anyGlobal.localStorage;
+    if (!storage) {
+      return void 0;
+    }
+    const testKey = "__react_native_hox_test__";
+    storage.setItem(testKey, "1");
+    storage.removeItem(testKey);
+    return {
+      getItem: (key) => storage.getItem(key),
+      setItem: (key, value) => storage.setItem(key, value),
+      removeItem: (key) => storage.removeItem(key)
+    };
+  } catch {
+    return void 0;
+  }
+}
+var config = {
+  storage: getDefaultWebStorage()
+};
+var setup = (options) => {
+  Object.assign(config, options);
+};
+var getConfig = () => config;
+
+// src/vanilla.ts
+var createStore = (initialState) => {
+  let state = initialState;
+  const listeners = /* @__PURE__ */ new Set();
+  const getState = () => state;
+  const setState = (partial, replace = false) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (Object.is(nextState, state)) {
+      return;
+    }
+    const previousState = state;
+    const isNextObject = typeof nextState === "object" && nextState !== null;
+    const isPrevObject = typeof previousState === "object" && previousState !== null;
+    const shouldReplace = replace || !isNextObject || !isPrevObject;
+    if (shouldReplace) {
+      state = nextState;
+    } else {
+      const patch = nextState;
+      const prevObj = previousState;
+      let changed = false;
+      for (const [key, value] of Object.entries(patch)) {
+        if (!Object.is(prevObj[key], value)) {
+          changed = true;
+          break;
+        }
+      }
+      if (!changed) {
+        return;
+      }
+      state = Object.assign({}, previousState, nextState);
+    }
+    const currentListeners = new Set(listeners);
+    currentListeners.forEach((listener) => listener(state, previousState));
+  };
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const destroy = () => {
+    listeners.clear();
+  };
+  return { getState, setState, subscribe, destroy };
+};
+
+// src/utils.ts
+var shallow = (objA, objB) => {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+};
+function debounce(func, wait) {
+  let timeout;
+  let lastArgs;
+  let context;
+  const debounced = function(...args) {
+    context = this;
+    lastArgs = args;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      func.apply(context, args);
+      lastArgs = void 0;
+    }, wait);
+  };
+  debounced.flush = () => {
+    if (timeout && lastArgs) {
+      clearTimeout(timeout);
+      func.apply(context, lastArgs);
+      lastArgs = void 0;
+    }
+  };
+  debounced.cancel = () => {
+    clearTimeout(timeout);
+    lastArgs = void 0;
+  };
+  return debounced;
+}
+
+// src/createModel.ts
+function createModel(initialState, options) {
+  const initialValue = typeof initialState === "function" ? initialState() : initialState;
+  const store = createStore(initialValue);
+  setupModelSideEffects(store, options);
+  const model = bindStore(store);
+  model.setState = store.setState;
+  model.getState = store.getState;
+  model.destroy = store.destroy;
+  model.reset = () => store.setState(initialValue, true);
+  return model;
+}
+function bindStore(store) {
+  const subscribe = (onStoreChange) => store.subscribe(() => onStoreChange());
+  const useModel = ((selector, equalityFn = shallow) => {
+    const selectorRef = useRef(selector);
+    selectorRef.current = selector;
+    const equalityRef = useRef(equalityFn);
+    equalityRef.current = equalityFn;
+    const hasSelectionRef = useRef(false);
+    const lastStateRef = useRef(null);
+    const lastSelectionRef = useRef(null);
+    const getSelection = () => {
+      const state = store.getState();
+      const selectorFn = selectorRef.current;
+      const nextSelection = selectorFn ? selectorFn(state) : state;
+      if (hasSelectionRef.current) {
+        if (Object.is(state, lastStateRef.current)) {
+          return lastSelectionRef.current;
+        }
+        if (equalityRef.current(lastSelectionRef.current, nextSelection)) {
+          lastStateRef.current = state;
+          return lastSelectionRef.current;
+        }
+      }
+      hasSelectionRef.current = true;
+      lastStateRef.current = state;
+      lastSelectionRef.current = nextSelection;
+      return nextSelection;
+    };
+    return useSyncExternalStore(subscribe, getSelection, getSelection);
+  });
+  Object.defineProperty(useModel, "data", {
+    get: () => store.getState()
+  });
+  useModel.getState = store.getState;
+  useModel.setState = store.setState;
+  useModel.destroy = store.destroy;
+  useModel.reset = () => {
+  };
+  useModel.useState = useModel;
+  useModel.use = useModel;
+  const baseSubscribe = store.subscribe;
+  useModel.subscribe = (arg1, arg2, arg3) => {
+    var _a;
+    if (typeof arg1 === "function" && typeof arg2 !== "function") {
+      return baseSubscribe(arg1);
+    }
+    const selector = arg1;
+    const listener = arg2;
+    const options = arg3 != null ? arg3 : {};
+    const equalityFn = (_a = options.equalityFn) != null ? _a : Object.is;
+    let prevSelected = selector(store.getState());
+    if (options.fireImmediately) {
+      listener(prevSelected, prevSelected);
+    }
+    return baseSubscribe((nextState, prevState) => {
+      const nextSelected = selector(nextState);
+      const prevSelectedFromPrevState = selector(prevState);
+      if (equalityFn(prevSelectedFromPrevState, nextSelected)) {
+        return;
+      }
+      prevSelected = nextSelected;
+      listener(nextSelected, prevSelectedFromPrevState);
+    });
+  };
+  return useModel;
+}
+function setupModelSideEffects(store, options) {
+  var _a, _b, _c;
+  const { storage } = getConfig();
+  const persist = typeof (options == null ? void 0 : options.persist) === "string" ? { key: options.persist } : options == null ? void 0 : options.persist;
+  const persistKey = persist == null ? void 0 : persist.key;
+  const syncEnabled = !!(options == null ? void 0 : options.sync);
+  if (!persistKey) {
+    if (syncEnabled) {
+      console.warn(
+        "[react-native-hox] `sync` \u9700\u8981 `persist` \u63D0\u4F9B key \u624D\u80FD\u5EFA\u7ACB\u901A\u9053"
+      );
+    }
+    return;
+  }
+  const beforePersist = (_a = persist == null ? void 0 : persist.beforePersist) != null ? _a : ((s) => s);
+  const beforeRecover = (_b = persist == null ? void 0 : persist.beforeRecover) != null ? _b : ((v) => v);
+  const debounceMs = (_c = persist == null ? void 0 : persist.debounce) != null ? _c : 100;
+  if (!storage) {
+    console.warn(
+      "[react-native-hox] \u672A\u914D\u7F6E storage\uFF0Cpersist \u5C06\u4E0D\u4F1A\u751F\u6548\uFF1B\u8BF7\u5148\u8C03\u7528 setup({ storage })"
+    );
+  }
+  let channel;
+  const instanceId = Math.random().toString(36).slice(2);
+  let suppressBroadcast = false;
+  if (storage) {
+    Promise.resolve(storage.getItem(persistKey)).then((val) => {
+      if (!val) return;
+      try {
+        const parsed = JSON.parse(val);
+        const recovered = beforeRecover(parsed);
+        suppressBroadcast = true;
+        store.setState(recovered, true);
+      } catch (e) {
+        console.error("[react-native-hox] Failed to parse stored value:", e);
+      } finally {
+        suppressBroadcast = false;
+      }
+    });
+  }
+  if (syncEnabled && typeof BroadcastChannel !== "undefined") {
+    channel = new BroadcastChannel(`hox-sync-${persistKey}`);
+    channel.onmessage = (event) => {
+      const payload = event.data;
+      const nextState = (payload == null ? void 0 : payload.__hox) ? payload.state : payload;
+      const source = (payload == null ? void 0 : payload.__hox) ? payload.source : void 0;
+      if (source && source === instanceId) {
+        return;
+      }
+      suppressBroadcast = true;
+      store.setState(nextState, true);
+      suppressBroadcast = false;
+    };
+  }
+  const save = debounce((state, s) => {
+    if (!s) return;
+    try {
+      const prepared = beforePersist(state);
+      s.setItem(persistKey, JSON.stringify(prepared));
+    } catch (e) {
+      console.error("[react-native-hox] Save failed:", e);
+    }
+  }, debounceMs);
+  store.subscribe((state) => {
+    save(state, storage);
+    if (channel && !suppressBroadcast) {
+      channel.postMessage({ __hox: true, source: instanceId, state });
+    }
+  });
+}
+
+export { createModel, setup, shallow };

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "react-native-hox",
+  "version": "0.0.1-beta",
+  "description": "一个轻量级、类型安全、零心智负担的 React Native 状态管理解决方案。",
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/ws18250840411/react-native-hox.git"
+  },
+  "license": "ISC",
+  "author": "wangws",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "react-native": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "tag": "beta"
+  },
+  "scripts": {
+    "test": "jest",
+    "build": "tsup",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-native": ">=0.64"
+  },
+  "devDependencies": {
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.8",
+    "@types/react-native": "^0.72.8",
+    "@types/react-test-renderer": "^19.1.0",
+    "jest": "^30.2.0",
+    "react": "^19.2.0",
+    "react-test-renderer": "^19.2.3",
+    "ts-jest": "^29.4.6",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  }
+}