zustand-kit 0.1.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -9,14 +9,14 @@
9
9
  - 🚀 **简单易用** - 最小化的 API 设计,易于上手
10
10
  - 🎯 **类型安全** - 完整的 TypeScript 支持
11
11
  - 💾 **持久化** - 内置 localStorage/sessionStorage 支持
12
+ - 🔍 **开发者工具** - 开发环境自动集成 Redux DevTools
12
13
  - ⚡ **高性能** - 基于 Zustand,性能卓越
13
14
  - 🔄 **灵活更新** - 支持对象部分更新和函数式更新
14
- - 🎨 **选择器支持** - 细粒度订阅,避免不必要的重渲染
15
+ - 🎨 **智能选择器** - 细粒度订阅,自动检测返回值类型并优化性能
15
16
  - 🌐 **非 React 环境支持** - 提供独立的 API 用于非组件场景
16
17
 
17
18
  ## 📦 安装
18
19
 
19
- yarn add zustand-x zustand
20
20
  ```bash
21
21
  npm install zustand-kit zustand
22
22
  # 或
@@ -49,7 +49,7 @@ function Counter() {
49
49
  ### 对象状态(支持部分更新)
50
50
 
51
51
  ```tsx
52
- import { useGlobalState } from 'zustand-x';
52
+ import { useGlobalState } from 'zustand-kit';
53
53
 
54
54
  function UserProfile() {
55
55
  const [user, setUser, resetUser] = useGlobalState('user', {
@@ -75,10 +75,10 @@ function UserProfile() {
75
75
  ### 持久化状态
76
76
 
77
77
  ```tsx
78
- import { useGlobalState } from 'zustand-x';
78
+ import { useGlobalState } from 'zustand-kit';
79
79
 
80
80
  function Settings() {
81
- // 使用 localStorage 持久化
81
+ // 使用 localStorage 持久化(开发环境自动启用 DevTools)
82
82
  const [settings, setSettings] = useGlobalState(
83
83
  'settings',
84
84
  { theme: 'dark', lang: 'zh-CN' },
@@ -106,13 +106,37 @@ function Settings() {
106
106
  }
107
107
  ```
108
108
 
109
+ ### Redux DevTools 集成
110
+
111
+ 在开发环境下,所有全局状态会自动集成 Redux DevTools,便于调试:
112
+
113
+ ```tsx
114
+ import { useGlobalState } from 'zustand-kit';
115
+
116
+ // 开发环境自动启用 DevTools(默认行为)
117
+ const [data, setData] = useGlobalState('data', { count: 0 });
118
+
119
+ // 禁用 DevTools(即使在开发环境)
120
+ const [privateData, setPrivateData] = useGlobalState('private', {}, {
121
+ enableDevtools: false
122
+ });
123
+
124
+ // 强制启用 DevTools(生产环境,不推荐)
125
+ const [debugData, setDebugData] = useGlobalState('debug', {}, {
126
+ enableDevtools: true
127
+ });
128
+ ```
129
+
130
+ 在 Redux DevTools 中,每个状态会以 `GlobalState:{key}` 命名显示。
131
+
109
132
  ### 选择器模式(性能优化)
110
133
 
111
134
  ```tsx
112
- import { useGlobalSelector } from 'zustand-x';
135
+ import { useGlobalSelector } from 'zustand-kit';
113
136
 
114
137
  function UserName() {
115
138
  // 仅订阅 user.name,其他字段变化不会触发重渲染
139
+ // 自动检测:基本类型使用 Object.is
116
140
  const userName = useGlobalSelector('user', (state) => state.name);
117
141
 
118
142
  return <p>用户名: {userName}</p>;
@@ -124,12 +148,44 @@ function UserEmail() {
124
148
 
125
149
  return <p>邮箱: {userEmail}</p>;
126
150
  }
151
+
152
+ // 自动检测:对象返回值自动使用浅比较
153
+ function UserInfo() {
154
+ const userInfo = useGlobalSelector(
155
+ 'user',
156
+ (state) => ({ name: state.name, email: state.email })
157
+ // 无需指定 'shallow',自动检测对象类型并使用浅比较
158
+ );
159
+
160
+ return (
161
+ <div>
162
+ <p>姓名: {userInfo.name}</p>
163
+ <p>邮箱: {userInfo.email}</p>
164
+ </div>
165
+ );
166
+ }
167
+
168
+ // 显式指定 'shallow' 模式
169
+ function UserInfoExplicit() {
170
+ const userInfo = useGlobalSelector(
171
+ 'user',
172
+ (state) => ({ name: state.name, email: state.email }),
173
+ 'shallow' // 显式指定浅比较
174
+ );
175
+
176
+ return (
177
+ <div>
178
+ <p>姓名: {userInfo.name}</p>
179
+ <p>邮箱: {userInfo.email}</p>
180
+ </div>
181
+ );
182
+ }
127
183
  ```
128
184
 
129
185
  ### 仅获取 Setter(不订阅状态)
130
186
 
131
187
  ```tsx
132
- import { useGlobalSetter } from 'zustand-x';
188
+ import { useGlobalSetter } from 'zustand-kit';
133
189
 
134
190
  function IncrementButton() {
135
191
  // 只获取 setter,不订阅状态变化(不会重渲染)
@@ -145,7 +201,7 @@ function IncrementButton() {
145
201
 
146
202
  ## 🔧 非 React 环境使用
147
203
 
148
- zustand-x 提供了独立的 API,可以在非 React 组件中使用:
204
+ zustand-kit 提供了独立的 API,可以在非 React 组件中使用:
149
205
 
150
206
  ```typescript
151
207
  import {
@@ -153,7 +209,7 @@ import {
153
209
  setGlobalState,
154
210
  subscribeGlobalState,
155
211
  resetGlobalState
156
- } from 'zustand-x';
212
+ } from 'zustand-kit';
157
213
 
158
214
  // 获取状态
159
215
  const count = getGlobalState<number>('counter');
@@ -189,13 +245,18 @@ resetGlobalState('counter');
189
245
 
190
246
  **返回:** `[state, setState, resetState]`
191
247
 
192
- ### `useGlobalSelector<T, R>(key, selector)`
248
+ ### `useGlobalSelector<T, R>(key, selector, equalityMode?)`
193
249
 
194
- 使用选择器订阅状态的特定部分。
250
+ 使用选择器订阅状态的特定部分。支持自动检测返回值类型并选择合适的比较模式。
195
251
 
196
252
  **参数:**
197
253
  - `key: string` - 状态键
198
254
  - `selector: (state: T) => R` - 选择器函数
255
+ - `equalityMode?: 'shallow'` - 可选的比较模式
256
+ - `undefined` (默认):自动检测返回值类型
257
+ - 基本类型:使用 `Object.is`
258
+ - 对象/数组:使用浅比较
259
+ - `'shallow'`:强制使用浅比较
199
260
 
200
261
  **返回:** 选择的值
201
262
 
@@ -226,7 +287,7 @@ resetGlobalState('counter');
226
287
 
227
288
  ## 🎨 TypeScript 支持
228
289
 
229
- zustand-x 使用 TypeScript 编写,提供完整的类型推断:
290
+ zustand-kit 使用 TypeScript 编写,提供完整的类型推断:
230
291
 
231
292
  ```typescript
232
293
  // 自动推断类型
@@ -255,7 +316,7 @@ const [user, setUser] = useGlobalState<User>('user', {
255
316
 
256
317
  ## 🤝 对比其他方案
257
318
 
258
- | 特性 | zustand-x | Zustand | Redux | Context API |
319
+ | 特性 | zustand-kit | Zustand | Redux | Context API |
259
320
  |------|-----------|---------|-------|-------------|
260
321
  | 学习曲线 | ⭐️ 简单 | ⭐️⭐️ 较简单 | ⭐️⭐️⭐️ 复杂 | ⭐️⭐️ 中等 |
261
322
  | 包体积 | 极小 | 小 | 大 | 无 |
@@ -286,8 +347,8 @@ MIT
286
347
 
287
348
  ## 🔗 链接
288
349
 
289
- - [GitHub](https://github.com/leonwgc/zustand-x)
290
- - [Issues](https://github.com/leonwgc/zustand-x/issues)
350
+ - [GitHub](https://github.com/leonwgc/zustand-kit)
351
+ - [Issues](https://github.com/leonwgc/zustand-kit/issues)
291
352
  - [Zustand](https://github.com/pmndrs/zustand)
292
353
 
293
354
  ## 👨‍💻 作者
package/dist/index.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true});var V=Object.defineProperty;var d=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var g=(t,e,o)=>e in t?V(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,T=(t,e)=>{for(var o in e||(e={}))x.call(e,o)&&g(t,o,e[o]);if(d)for(var o of d(e))A.call(e,o)&&g(t,o,e[o]);return t};var _zustand = require('zustand');var _middleware = require('zustand/middleware');var _react = require('react');var r=new Map;function _(){r.clear()}function B(t,e,o){let{storage:a="none",storageKey:i="global-state"}=o||{};if(!r.has(t)){let u=typeof e=="object"&&e!==null&&!Array.isArray(e),v=s=>({value:e,setValue:l=>{s(typeof l=="function"?p=>({value:l(p.value)}):u&&typeof l=="object"&&l!==null?p=>({value:T(T({},p.value),l)}):{value:l})},reset:()=>s({value:e})}),S;if(a!=="none"){let s=a==="localStorage"?localStorage:sessionStorage;S=_zustand.create.call(void 0, )(_middleware.persist.call(void 0, v,{name:`${i}-${t}`,storage:_middleware.createJSONStorage.call(void 0, ()=>s)}))}else S=_zustand.create.call(void 0, v);r.set(t,S)}let n=r.get(t),w=n(u=>u.value),b=_react.useMemo.call(void 0, ()=>n.getState().setValue,[n]),G=_react.useMemo.call(void 0, ()=>n.getState().reset,[n]);return[w,b,G]}function $(t,e){let o=r.get(t);if(!o)throw new Error(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return o(a=>e(a.value))}function I(t){let e=r.get(t);if(!e)throw new Error(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return _react.useMemo.call(void 0, ()=>e.getState().setValue,[e])}function z(t){let e=r.get(t);return e==null?void 0:e.getState().value}function P(t,e){let o=r.get(t);if(!o){process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return}o.getState().setValue(e)}function j(t,e){let o=r.get(t);if(!o)return process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`),()=>{};let a=o.getState().value;return o.subscribe(i=>{let n=i.value;n!==a&&(e(n,a),a=n)})}function C(t){let e=r.get(t);if(!e){process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return}e.getState().reset()}var D=B;exports.__clearAllStates__ = _; exports.default = D; exports.getGlobalState = z; exports.resetGlobalState = C; exports.setGlobalState = P; exports.subscribeGlobalState = j; exports.useGlobalSelector = $; exports.useGlobalSetter = I; exports.useGlobalState = B;
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }var E=Object.defineProperty;var v=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var w=(t,e,o)=>e in t?E(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,g=(t,e)=>{for(var o in e||(e={}))B.call(e,o)&&w(t,o,e[o]);if(v)for(var o of v(e))$.call(e,o)&&w(t,o,e[o]);return t};var _react = require('react'); var U = _interopRequireWildcard(_react);var _zustand = require('zustand');var _middleware = require('zustand/middleware');var _shallow = require('zustand/react/shallow');var n=new Map;function J(){n.clear()}function _(t,e,o){let{storage:r="none",storageKey:i="global-state",enableDevtools:a=process.env.NODE_ENV!=="production"}=o||{};if(!n.has(t)){let u=typeof e=="object"&&e!==null&&!Array.isArray(e),p=l=>({value:e,setValue:S=>{l(typeof S=="function"?T=>({value:S(T.value)}):u&&typeof S=="object"&&S!==null?T=>({value:g(g({},T.value),S)}):{value:S})},reset:()=>l({value:e})}),c;if(r!=="none"&&a){let l=r==="localStorage"?localStorage:sessionStorage;c=_zustand.create.call(void 0, )(_middleware.devtools.call(void 0, _middleware.persist.call(void 0, p,{name:`${i}-${t}`,storage:_middleware.createJSONStorage.call(void 0, ()=>l)}),{name:`GlobalState:${t}`}))}else if(r!=="none"){let l=r==="localStorage"?localStorage:sessionStorage;c=_zustand.create.call(void 0, )(_middleware.persist.call(void 0, p,{name:`${i}-${t}`,storage:_middleware.createJSONStorage.call(void 0, ()=>l)}))}else a?c=_zustand.create.call(void 0, )(_middleware.devtools.call(void 0, p,{name:`GlobalState:${t}`})):c=_zustand.create.call(void 0, p);n.set(t,c)}let s=n.get(t),b=s(u=>u.value),A=_react.useMemo.call(void 0, ()=>u=>s.getState().setValue(u),[s]),x=_react.useMemo.call(void 0, ()=>()=>s.getState().reset(),[s]);return[b,A,x]}function M(t,e,o){let r=n.get(t);if(!r)throw new Error(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);let i=_react.useRef.call(void 0, e);_react.useEffect.call(void 0, ()=>{i.current=e});let a=_react.useCallback.call(void 0, s=>i.current(s.value),[]);if(o===void 0){let s=a(r.getState());return s!==null&&typeof s=="object"&&!U.isValidElement(s)?r(_shallow.useShallow.call(void 0, a)):r(a)}return r(o==="shallow"?_shallow.useShallow.call(void 0, a):a)}function k(t){let e=n.get(t);if(!e)throw new Error(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return _react.useMemo.call(void 0, ()=>o=>e.getState().setValue(o),[e])}function F(t){let e=n.get(t);return e==null?void 0:e.getState().value}function H(t,e){let o=n.get(t);if(!o){process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return}o.getState().setValue(e)}function L(t,e){let o=n.get(t);if(!o)return process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`),()=>{};let r=o.getState().value;return o.subscribe(i=>{let a=i.value;Object.is(a,r)||(e(a,r),r=a)})}function Q(t){let e=n.get(t);if(!e){process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return}e.getState().reset()}var W=_;exports.__clearAllStates__ = J; exports.default = W; exports.getGlobalState = F; exports.resetGlobalState = Q; exports.setGlobalState = H; exports.subscribeGlobalState = L; exports.useGlobalSelector = M; exports.useGlobalSetter = k; exports.useGlobalState = _;
package/dist/index.esm.js CHANGED
@@ -1 +1 @@
1
- var V=Object.defineProperty;var d=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var g=(t,e,o)=>e in t?V(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,T=(t,e)=>{for(var o in e||(e={}))x.call(e,o)&&g(t,o,e[o]);if(d)for(var o of d(e))A.call(e,o)&&g(t,o,e[o]);return t};import{create as f}from"zustand";import{persist as h,createJSONStorage as U}from"zustand/middleware";import{useMemo as c}from"react";var r=new Map;function _(){r.clear()}function B(t,e,o){let{storage:a="none",storageKey:i="global-state"}=o||{};if(!r.has(t)){let u=typeof e=="object"&&e!==null&&!Array.isArray(e),v=s=>({value:e,setValue:l=>{s(typeof l=="function"?p=>({value:l(p.value)}):u&&typeof l=="object"&&l!==null?p=>({value:T(T({},p.value),l)}):{value:l})},reset:()=>s({value:e})}),S;if(a!=="none"){let s=a==="localStorage"?localStorage:sessionStorage;S=f()(h(v,{name:`${i}-${t}`,storage:U(()=>s)}))}else S=f(v);r.set(t,S)}let n=r.get(t),w=n(u=>u.value),b=c(()=>n.getState().setValue,[n]),G=c(()=>n.getState().reset,[n]);return[w,b,G]}function $(t,e){let o=r.get(t);if(!o)throw new Error(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return o(a=>e(a.value))}function I(t){let e=r.get(t);if(!e)throw new Error(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return c(()=>e.getState().setValue,[e])}function z(t){let e=r.get(t);return e==null?void 0:e.getState().value}function P(t,e){let o=r.get(t);if(!o){process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return}o.getState().setValue(e)}function j(t,e){let o=r.get(t);if(!o)return process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`),()=>{};let a=o.getState().value;return o.subscribe(i=>{let n=i.value;n!==a&&(e(n,a),a=n)})}function C(t){let e=r.get(t);if(!e){process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return}e.getState().reset()}var D=B;export{_ as __clearAllStates__,D as default,z as getGlobalState,C as resetGlobalState,P as setGlobalState,j as subscribeGlobalState,$ as useGlobalSelector,I as useGlobalSetter,B as useGlobalState};
1
+ var E=Object.defineProperty;var v=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var w=(t,e,o)=>e in t?E(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,g=(t,e)=>{for(var o in e||(e={}))B.call(e,o)&&w(t,o,e[o]);if(v)for(var o of v(e))$.call(e,o)&&w(t,o,e[o]);return t};import*as U from"react";import{create as f}from"zustand";import{persist as V,createJSONStorage as G,devtools as h}from"zustand/middleware";import{useMemo as d,useRef as R,useCallback as N,useEffect as O}from"react";import{useShallow as m}from"zustand/react/shallow";var n=new Map;function J(){n.clear()}function _(t,e,o){let{storage:r="none",storageKey:i="global-state",enableDevtools:a=process.env.NODE_ENV!=="production"}=o||{};if(!n.has(t)){let u=typeof e=="object"&&e!==null&&!Array.isArray(e),p=l=>({value:e,setValue:S=>{l(typeof S=="function"?T=>({value:S(T.value)}):u&&typeof S=="object"&&S!==null?T=>({value:g(g({},T.value),S)}):{value:S})},reset:()=>l({value:e})}),c;if(r!=="none"&&a){let l=r==="localStorage"?localStorage:sessionStorage;c=f()(h(V(p,{name:`${i}-${t}`,storage:G(()=>l)}),{name:`GlobalState:${t}`}))}else if(r!=="none"){let l=r==="localStorage"?localStorage:sessionStorage;c=f()(V(p,{name:`${i}-${t}`,storage:G(()=>l)}))}else a?c=f()(h(p,{name:`GlobalState:${t}`})):c=f(p);n.set(t,c)}let s=n.get(t),b=s(u=>u.value),A=d(()=>u=>s.getState().setValue(u),[s]),x=d(()=>()=>s.getState().reset(),[s]);return[b,A,x]}function M(t,e,o){let r=n.get(t);if(!r)throw new Error(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);let i=R(e);O(()=>{i.current=e});let a=N(s=>i.current(s.value),[]);if(o===void 0){let s=a(r.getState());return s!==null&&typeof s=="object"&&!U.isValidElement(s)?r(m(a)):r(a)}return r(o==="shallow"?m(a):a)}function k(t){let e=n.get(t);if(!e)throw new Error(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return d(()=>o=>e.getState().setValue(o),[e])}function F(t){let e=n.get(t);return e==null?void 0:e.getState().value}function H(t,e){let o=n.get(t);if(!o){process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return}o.getState().setValue(e)}function L(t,e){let o=n.get(t);if(!o)return process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`),()=>{};let r=o.getState().value;return o.subscribe(i=>{let a=i.value;Object.is(a,r)||(e(a,r),r=a)})}function Q(t){let e=n.get(t);if(!e){process.env.NODE_ENV!=="production"&&console.warn(`Global state with key "${t}" not found. Initialize it with useGlobalState first.`);return}e.getState().reset()}var W=_;export{J as __clearAllStates__,W as default,F as getGlobalState,Q as resetGlobalState,H as setGlobalState,L as subscribeGlobalState,M as useGlobalSelector,k as useGlobalSetter,_ as useGlobalState};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zustand-kit",
3
- "version": "0.1.0",
3
+ "version": "1.0.1",
4
4
  "description": "⚡️ A minimalist React global state management library based on Zustand with persistence, TypeScript and fine-grained subscriptions",
5
5
  "keywords": [
6
6
  "zustand",
package/types/index.d.ts CHANGED
@@ -1,7 +1,3 @@
1
- /**
2
- * @file src/index.tsx
3
- * @author leon.wang
4
- */
5
1
  /**
6
2
  * Clear all global states (for testing purposes)
7
3
  * @internal
@@ -11,6 +7,10 @@ export declare function __clearAllStates__(): void;
11
7
  * Storage type for persistence
12
8
  */
13
9
  export type StorageType = 'localStorage' | 'sessionStorage' | 'none';
10
+ /**
11
+ * Helper type for setter value - supports partial updates for objects
12
+ */
13
+ type SetterValue<T> = T extends Record<string, unknown> ? Partial<T> | ((prev: T) => T) : T | ((prev: T) => T);
14
14
  /**
15
15
  * Options for useGlobalState
16
16
  */
@@ -25,14 +25,19 @@ export interface UseGlobalStateOptions {
25
25
  * @default 'global-state'
26
26
  */
27
27
  storageKey?: string;
28
+ /**
29
+ * Enable Redux DevTools integration
30
+ * @default true in development, false in production
31
+ */
32
+ enableDevtools?: boolean;
28
33
  }
29
34
  /**
30
35
  * Universal global state hook - supports both simple values and objects
31
- * Performance optimized with selector pattern
36
+ * Performance optimized with selector pattern and automatic Redux DevTools integration
32
37
  *
33
38
  * @param key - Unique key for the state
34
39
  * @param initialState - Initial state (any type)
35
- * @param options - Configuration options including persistence
40
+ * @param options - Configuration options including persistence and devtools
36
41
  * @returns [state, setState, resetState]
37
42
  *
38
43
  * @example
@@ -45,42 +50,72 @@ export interface UseGlobalStateOptions {
45
50
  * const [user, setUser, resetUser] = useGlobalState('user', {
46
51
  * name: 'John',
47
52
  * email: 'john@example.com',
53
+ * age: 30
48
54
  * });
49
- * setUser({ name: 'Jane' }); // Partial update
55
+ * setUser({ name: 'Jane' }); // Partial update - only updates name field
56
+ * setUser(prev => ({ ...prev, age: prev.age + 1 })); // Functional update
50
57
  *
51
- * // With localStorage persistence
58
+ * // With localStorage persistence (DevTools enabled by default in development)
52
59
  * const [settings, setSettings] = useGlobalState('settings', { theme: 'dark' }, {
53
60
  * storage: 'localStorage'
54
61
  * });
55
62
  *
56
- * // With sessionStorage persistence
63
+ * // With sessionStorage persistence and custom storage key
57
64
  * const [tempData, setTempData] = useGlobalState('temp', { foo: 'bar' }, {
58
65
  * storage: 'sessionStorage',
59
66
  * storageKey: 'my-app'
60
67
  * });
61
68
  *
69
+ * // Disable DevTools in development
70
+ * const [privateData, setPrivateData] = useGlobalState('private', {}, {
71
+ * enableDevtools: false
72
+ * });
73
+ *
74
+ * // Force enable DevTools in production (not recommended)
75
+ * const [debugData, setDebugData] = useGlobalState('debug', {}, {
76
+ * enableDevtools: true
77
+ * });
78
+ *
62
79
  * // For non-React usage, see: getGlobalState, setGlobalState, subscribeGlobalState, resetGlobalState
63
80
  */
64
- export declare function useGlobalState<T>(key: string, initialState: T, options?: UseGlobalStateOptions): [
65
- T,
66
- (value: T extends Record<string, unknown> ? Partial<T> | ((prev: T) => T) : T | ((prev: T) => T)) => void,
67
- () => void
68
- ];
81
+ export declare function useGlobalState<T>(key: string, initialState: T, options?: UseGlobalStateOptions): [T, (value: SetterValue<T>) => void, () => void];
69
82
  /**
70
83
  * Advanced hook with custom selector for fine-grained subscriptions
71
84
  * Only re-renders when selected value changes
85
+ * Automatically detects return type and uses appropriate comparison mode
86
+ *
87
+ * @param key - Global state key
88
+ * @param selector - Function to select part of the state
89
+ * @param equalityMode - Optional comparison mode:
90
+ * - undefined (default): Auto-detect based on return type (shallow for objects/arrays, Object.is for primitives)
91
+ * - 'shallow': Force shallow comparison
92
+ * - false: Force Object.is comparison
72
93
  *
73
94
  * @example
74
- * // Only subscribe to user name, not the whole user object
95
+ * // Auto mode: uses Object.is for primitive
75
96
  * const userName = useGlobalSelector('user', (state) => state.name);
76
97
  *
77
- * // Multiple values
78
- * const { name, email } = useGlobalSelector(
98
+ * // Auto mode: uses shallow for object
99
+ * const userInfo = useGlobalSelector(
79
100
  * 'user',
80
101
  * (state) => ({ name: state.name, email: state.email })
81
102
  * );
103
+ *
104
+ * // Force shallow comparison
105
+ * const userInfo = useGlobalSelector(
106
+ * 'user',
107
+ * (state) => ({ name: state.name, email: state.email }),
108
+ * 'shallow'
109
+ * );
110
+ *
111
+ * // Force Object.is comparison (even for objects)
112
+ * const userInfo = useGlobalSelector(
113
+ * 'user',
114
+ * (state) => ({ name: state.name, email: state.email }),
115
+ * false
116
+ * );
82
117
  */
83
- export declare function useGlobalSelector<T, R>(key: string, selector: (state: T) => R): R;
118
+ export declare function useGlobalSelector<T, R>(key: string, selector: (state: T) => R, equalityMode?: 'shallow' | false): R;
84
119
  /**
85
120
  * Hook to get setter function only (doesn't subscribe to state changes)
86
121
  * Useful when you only need to update state without reading it
@@ -90,7 +125,7 @@ export declare function useGlobalSelector<T, R>(key: string, selector: (state: T
90
125
  * setCount(5);
91
126
  * setCount(prev => prev + 1);
92
127
  */
93
- export declare function useGlobalSetter<T>(key: string): (value: T extends Record<string, unknown> ? Partial<T> | ((prev: T) => T) : T | ((prev: T) => T)) => void;
128
+ export declare function useGlobalSetter<T>(key: string): (value: SetterValue<T>) => void;
94
129
  /**
95
130
  * Get global state value (for non-React usage)
96
131
  * @example
@@ -104,7 +139,7 @@ export declare function getGlobalState<T>(key: string): T | undefined;
104
139
  * setGlobalState('counter', prev => prev + 1);
105
140
  * setGlobalState('user', { name: 'Jane' }); // Partial update for objects
106
141
  */
107
- export declare function setGlobalState<T>(key: string, value: T extends Record<string, unknown> ? Partial<T> | ((prev: T) => T) : T | ((prev: T) => T)): void;
142
+ export declare function setGlobalState<T>(key: string, value: SetterValue<T>): void;
108
143
  /**
109
144
  * Subscribe to global state changes (for non-React usage)
110
145
  * Returns unsubscribe function