zenbox - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/hooks/useBox.cjs

+'use strict';var chunkBCUBYE76_cjs=require('../chunk-BCUBYE76.cjs'),react=require('react'),core_js=require('../core.js'),useStore_js=require('./useStore.js');function s(r,o){const e=react.useRef(core_js.createStore(r));return useStore_js.useStore(e.current,o),e.current}chunkBCUBYE76_cjs.a(s,"useBox");exports.useBox=s;

dist/hooks/useBox.d.cts

+import { State, ZenBox } from '../core.cjs';
+
+/**
+ * Create a local store for unified state management.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useBox
+ *
+ * @example
+ *
+ * ```tsx
+ * function App() {
+ *   const store = useBox({ count: 0 });
+ *   return <div>count: {store.value.count}</div>;
+ * }
+ * ```
+ */
+declare function useBox<S extends State>(initialState: S, options?: {
+    deep?: boolean;
+}): ZenBox<S>;
+
+export { useBox };

dist/hooks/useBox.d.ts

+import { State, ZenBox } from '../core.js';
+
+/**
+ * Create a local store for unified state management.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useBox
+ *
+ * @example
+ *
+ * ```tsx
+ * function App() {
+ *   const store = useBox({ count: 0 });
+ *   return <div>count: {store.value.count}</div>;
+ * }
+ * ```
+ */
+declare function useBox<S extends State>(initialState: S, options?: {
+    deep?: boolean;
+}): ZenBox<S>;
+
+export { useBox };

dist/hooks/useBox.js

+import {a}from'../chunk-EI7MMDWY.js';import {useRef}from'react';import {createStore}from'../core.js';import {useStore}from'./useStore.js';function c(r,o){const e=useRef(createStore(r));return useStore(e.current,o),e.current}a(c,"useBox");export{c as useBox};

dist/hooks/useProvide.cjs

+'use strict';var chunkBCUBYE76_cjs=require('../chunk-BCUBYE76.cjs'),useCleanup_js=require('./useCleanup.js');const t=new Map;function a(n,e){t.set(n,e),useCleanup_js.useCleanup(()=>t.delete(n));}chunkBCUBYE76_cjs.a(a,"useProvide");function u(n){if(!t.has(n))throw Error(`useInject: ${n} is not provided`);return t.get(n)}chunkBCUBYE76_cjs.a(u,"useInject");exports.useInject=u;exports.useProvide=a;

dist/hooks/useProvide.d.cts

+/**
+ * Provide a value to the global scope.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useProvide
+ *
+ * @example
+ *
+ * ```tsx
+ * function Parent() {
+ *   useProvide("count", 0); // Provide state to child components
+ *   return <Child />;
+ * }
+ *
+ * function Child() {
+ *   const count = useInject<number>("count"); // Inject state
+ *   return <div>Count: {count}</div>;
+ * }
+ * ```
+ */
+declare function useProvide(key: string, value: any): void;
+/**
+ * Inject a value from the global scope.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useInject
+ *
+ * @example
+ *
+ * ```tsx
+ * function Parent() {
+ *   useProvide("count", 0); // Provide state to child components
+ *   return <Child />;
+ * }
+ *
+ * function Child() {
+ *   const count = useInject<number>("count"); // Inject state
+ *   return <div>Count: {count}</div>;
+ * }
+ * ```
+ */
+declare function useInject<T = any>(key: string): T;
+
+export { useInject, useProvide };

dist/hooks/useProvide.d.ts

+/**
+ * Provide a value to the global scope.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useProvide
+ *
+ * @example
+ *
+ * ```tsx
+ * function Parent() {
+ *   useProvide("count", 0); // Provide state to child components
+ *   return <Child />;
+ * }
+ *
+ * function Child() {
+ *   const count = useInject<number>("count"); // Inject state
+ *   return <div>Count: {count}</div>;
+ * }
+ * ```
+ */
+declare function useProvide(key: string, value: any): void;
+/**
+ * Inject a value from the global scope.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useInject
+ *
+ * @example
+ *
+ * ```tsx
+ * function Parent() {
+ *   useProvide("count", 0); // Provide state to child components
+ *   return <Child />;
+ * }
+ *
+ * function Child() {
+ *   const count = useInject<number>("count"); // Inject state
+ *   return <div>Count: {count}</div>;
+ * }
+ * ```
+ */
+declare function useInject<T = any>(key: string): T;
+
+export { useInject, useProvide };

dist/hooks/useProvide.js

+import {a as a$1}from'../chunk-EI7MMDWY.js';import {useCleanup}from'./useCleanup.js';const t=new Map;function i(n,e){t.set(n,e),useCleanup(()=>t.delete(n));}a$1(i,"useProvide");function a(n){if(!t.has(n))throw Error(`useInject: ${n} is not provided`);return t.get(n)}a$1(a,"useInject");export{a as useInject,i as useProvide};

dist/hooks/useStore.cjs

+'use strict';var chunkBCUBYE76_cjs=require('../chunk-BCUBYE76.cjs'),useComputed_js=require('./useComputed.js');function l(e,o,s){if(typeof o=="function"){const t=o;return useComputed_js.useComputed(()=>t(e.value),s)}const{pick:r,deep:p}=o||{};return useComputed_js.useComputed(()=>r?.reduce((t,n)=>({...t,[n]:e.value[n]}),{})??e.value,{deep:p})}chunkBCUBYE76_cjs.a(l,"useStore");const S=l;exports.useStore=l;exports.useStoreValue=S;

dist/hooks/useStore.d.cts

+import { ZenBox } from '../core.cjs';
+import { Prettify } from '../utils.cjs';
+import '@del-wang/equals';
+
+/** biome-ignore-all lint/correctness/useHookAtTopLevel: just do it */
+
+/**
+ * Use a store's state with a selector.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useStore
+ *
+ * @example
+ *
+ * ```tsx
+ * const counterStore = createStore({ count: 0 });
+ *
+ * function App() {
+ *   const { count } = useStore(
+ *     counterStore, // store
+ *     (state) => state.count, // selector
+ *   );
+ *   return <div>count: {count}</div>;
+ * }
+ * ```
+ */
+declare function useStore<S extends ZenBox<any>, D>(store: S, selector: (state: S['value']) => D, options?: {
+    deep?: boolean;
+}): D;
+/**
+ * Use a store's state with `pick`.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useStore
+ *
+ * @example
+ *
+ * ```tsx
+ * const userStore = createStore({ name: 'Alice', age: 20 });
+ *
+ * function App() {
+ *   const { name } = useStore(userStore, { pick: ['name'] }); // Only re-renders when the name changes
+ *   return <div>name: {name}</div>;
+ * }
+ * ```
+ */
+declare function useStore<S extends ZenBox<any>, const K extends (keyof S['value'])[] | undefined = undefined>(store: S, options?: {
+    pick?: K;
+    deep?: boolean;
+}): K extends (keyof S['value'])[] ? Prettify<Pick<S['value'], K[number]>> : S['value'];
+/**
+ * @deprecated Please use `useStore` instead, will be removed in v2.0
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useStore
+ */
+declare const useStoreValue: typeof useStore;
+
+export { useStore, useStoreValue };

dist/hooks/useStore.d.ts

+import { ZenBox } from '../core.js';
+import { Prettify } from '../utils.js';
+import '@del-wang/equals';
+
+/** biome-ignore-all lint/correctness/useHookAtTopLevel: just do it */
+
+/**
+ * Use a store's state with a selector.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useStore
+ *
+ * @example
+ *
+ * ```tsx
+ * const counterStore = createStore({ count: 0 });
+ *
+ * function App() {
+ *   const { count } = useStore(
+ *     counterStore, // store
+ *     (state) => state.count, // selector
+ *   );
+ *   return <div>count: {count}</div>;
+ * }
+ * ```
+ */
+declare function useStore<S extends ZenBox<any>, D>(store: S, selector: (state: S['value']) => D, options?: {
+    deep?: boolean;
+}): D;
+/**
+ * Use a store's state with `pick`.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useStore
+ *
+ * @example
+ *
+ * ```tsx
+ * const userStore = createStore({ name: 'Alice', age: 20 });
+ *
+ * function App() {
+ *   const { name } = useStore(userStore, { pick: ['name'] }); // Only re-renders when the name changes
+ *   return <div>name: {name}</div>;
+ * }
+ * ```
+ */
+declare function useStore<S extends ZenBox<any>, const K extends (keyof S['value'])[] | undefined = undefined>(store: S, options?: {
+    pick?: K;
+    deep?: boolean;
+}): K extends (keyof S['value'])[] ? Prettify<Pick<S['value'], K[number]>> : S['value'];
+/**
+ * @deprecated Please use `useStore` instead, will be removed in v2.0
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useStore
+ */
+declare const useStoreValue: typeof useStore;
+
+export { useStore, useStoreValue };

dist/hooks/useStore.js

+import {a}from'../chunk-EI7MMDWY.js';import {useComputed}from'./useComputed.js';function l(e,o,s){if(typeof o=="function"){const t=o;return useComputed(()=>t(e.value),s)}const{pick:r,deep:p}=o||{};return useComputed(()=>r?.reduce((t,n)=>({...t,[n]:e.value[n]}),{})??e.value,{deep:p})}a(l,"useStore");const d=l;export{l as useStore,d as useStoreValue};

dist/components/Memo.d.cts

@@ -6,2 +6,23 @@ import { ReactNode } from 'react';
 
+/**
+ * Memoize a component.
+ *
+ * Only re-renders when watched dependencies change.
+ *
+ * @link https://zenbox.del.wang/en/docs/components/Memo
+ *
+ * @example
+ *
+ * ```tsx
+ * const counterStore = createStore({ count: 0 });
+ *
+ * function App() {
+ *   return (
+ *     <Memo watch={() => counterStore.value.count}>
+ *       {(count) => <div>count: {count}</div>}
+ *     </Memo>
+ *   );
+ * }
+ * ```
+ */
 declare function Memo<T>(props: {
@@ -8,0 +29,0 @@ children: (state: ResolveZenBox<T>) => ReactNode;

dist/components/Memo.d.ts

@@ -6,2 +6,23 @@ import { ReactNode } from 'react';
 
+/**
+ * Memoize a component.
+ *
+ * Only re-renders when watched dependencies change.
+ *
+ * @link https://zenbox.del.wang/en/docs/components/Memo
+ *
+ * @example
+ *
+ * ```tsx
+ * const counterStore = createStore({ count: 0 });
+ *
+ * function App() {
+ *   return (
+ *     <Memo watch={() => counterStore.value.count}>
+ *       {(count) => <div>count: {count}</div>}
+ *     </Memo>
+ *   );
+ * }
+ * ```
+ */
 declare function Memo<T>(props: {
@@ -8,0 +29,0 @@ children: (state: ResolveZenBox<T>) => ReactNode;

dist/components/Provider.d.cts

@@ -5,2 +5,39 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
+/**
+ * Create isolated, component-scoped stores with React Context integration.
+ *
+ * @link https://zenbox.del.wang/en/docs/core/createProvider
+ *
+ * @example
+ *
+ * ```tsx
+ * const [SessionProvider, useFindSessionStore, actions] = createProvider({
+ *  sessionId: null,
+ *  isAuthenticated: false,
+ *  logout: () => {
+ *    actions.setState({ sessionId: null, isAuthenticated: false });
+ *  },
+ * });
+ *
+ * function UserProfile() {
+ *   const store = useFindSessionStore(); // First, find the store
+ *
+ *   const { sessionId, isAuthenticated } = useStore(store); // Then, use the store
+ *
+ *   if (!isAuthenticated) {
+ *     return <div>Please log in</div>;
+ *   }
+ *
+ *   return <h1>Welcome, {sessionId}!</h1>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SessionProvider initialState={{ sessionId: "abc123" }}>
+ *       <UserProfile />
+ *     </SessionProvider>
+ *   );
+ * }
+ * ```
+ */
 declare function createProvider<T extends State>(initialState: T): readonly [(props: PropsWithChildren<{
@@ -7,0 +44,0 @@ initialState?: Partial<T>;

dist/components/Provider.d.ts

@@ -5,2 +5,39 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
+/**
+ * Create isolated, component-scoped stores with React Context integration.
+ *
+ * @link https://zenbox.del.wang/en/docs/core/createProvider
+ *
+ * @example
+ *
+ * ```tsx
+ * const [SessionProvider, useFindSessionStore, actions] = createProvider({
+ *  sessionId: null,
+ *  isAuthenticated: false,
+ *  logout: () => {
+ *    actions.setState({ sessionId: null, isAuthenticated: false });
+ *  },
+ * });
+ *
+ * function UserProfile() {
+ *   const store = useFindSessionStore(); // First, find the store
+ *
+ *   const { sessionId, isAuthenticated } = useStore(store); // Then, use the store
+ *
+ *   if (!isAuthenticated) {
+ *     return <div>Please log in</div>;
+ *   }
+ *
+ *   return <h1>Welcome, {sessionId}!</h1>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SessionProvider initialState={{ sessionId: "abc123" }}>
+ *       <UserProfile />
+ *     </SessionProvider>
+ *   );
+ * }
+ * ```
+ */
 declare function createProvider<T extends State>(initialState: T): readonly [(props: PropsWithChildren<{
@@ -7,0 +44,0 @@ initialState?: Partial<T>;

dist/components/Watch.d.cts

@@ -6,2 +6,21 @@ import * as react from 'react';
 
+/**
+ * Component that watches a value and re-renders when it changes.
+ *
+ * @link https://zenbox.del.wang/en/docs/components/Watch
+ *
+ * @example
+ *
+ * ```tsx
+ * const counterStore = createStore({ count: 0 });
+ *
+ * function App() {
+ *   return (
+ *     <Watch watch={() => counterStore.value.count}>
+ *       {(count) => <div>count: {count}</div>}
+ *     </Watch>
+ *   );
+ * }
+ * ```
+ */
 declare function Watch<T>(props: {
@@ -8,0 +27,0 @@ children: (state: ResolveZenBox<T>) => React.ReactNode;

dist/components/Watch.d.ts

@@ -6,2 +6,21 @@ import * as react from 'react';
 
+/**
+ * Component that watches a value and re-renders when it changes.
+ *
+ * @link https://zenbox.del.wang/en/docs/components/Watch
+ *
+ * @example
+ *
+ * ```tsx
+ * const counterStore = createStore({ count: 0 });
+ *
+ * function App() {
+ *   return (
+ *     <Watch watch={() => counterStore.value.count}>
+ *       {(count) => <div>count: {count}</div>}
+ *     </Watch>
+ *   );
+ * }
+ * ```
+ */
 declare function Watch<T>(props: {
@@ -8,0 +27,0 @@ children: (state: ResolveZenBox<T>) => React.ReactNode;

dist/core.d.cts

@@ -22,4 +22,32 @@ type State = Record<string, any>;
 }
+/**
+ * Create a new ZenBox store.
+ *
+ * @link https://zenbox.del.wang/en/docs/core/createStore
+ *
+ * @example
+ *
+ * ```tsx
+ * const counterStore = createStore({
+ *   count: 0,
+ *   increment: () => {
+ *     counterStore.setState((state) => {
+ *       state.count++;
+ *     });
+ *   },
+ * });
+ *
+ * function App() {
+ *   const { count, increment } = useStore(counterStore);
+ *   return (
+ *     <div>
+ *       <div>count: {count}</div>
+ *       <button onClick={increment}>Increment</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
 declare function createStore<S extends State>(initialState: S): ZenBox<S>;
 
 export { type ReadListener, type State, type StateSetter, ZenBox, createStore };

dist/core.d.ts

@@ -22,4 +22,32 @@ type State = Record<string, any>;
 }
+/**
+ * Create a new ZenBox store.
+ *
+ * @link https://zenbox.del.wang/en/docs/core/createStore
+ *
+ * @example
+ *
+ * ```tsx
+ * const counterStore = createStore({
+ *   count: 0,
+ *   increment: () => {
+ *     counterStore.setState((state) => {
+ *       state.count++;
+ *     });
+ *   },
+ * });
+ *
+ * function App() {
+ *   const { count, increment } = useStore(counterStore);
+ *   return (
+ *     <div>
+ *       <div>count: {count}</div>
+ *       <button onClick={increment}>Increment</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
 declare function createStore<S extends State>(initialState: S): ZenBox<S>;
 
 export { type ReadListener, type State, type StateSetter, ZenBox, createStore };

dist/hooks/index.cjs

@@ -1,1 +0,1 @@
-'use strict';var useComputed_js=require('./useComputed.js'),usePick_js=require('./usePick.js'),useStoreValue_js=require('./useStoreValue.js'),useWatch_js=require('./useWatch.js'),useWatchEffect_js=require('./useWatchEffect.js');Object.keys(useComputed_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return useComputed_js[k]}})});Object.keys(usePick_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return usePick_js[k]}})});Object.keys(useStoreValue_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return useStoreValue_js[k]}})});Object.keys(useWatch_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return useWatch_js[k]}})});Object.keys(useWatchEffect_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return useWatchEffect_js[k]}})});
+'use strict';var useBox_js=require('./useBox.js'),useComputed_js=require('./useComputed.js'),usePick_js=require('./usePick.js'),useProvide_js=require('./useProvide.js'),useStore_js=require('./useStore.js'),useWatch_js=require('./useWatch.js'),useWatchEffect_js=require('./useWatchEffect.js');Object.keys(useBox_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return useBox_js[k]}})});Object.keys(useComputed_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return useComputed_js[k]}})});Object.keys(usePick_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return usePick_js[k]}})});Object.keys(useProvide_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return useProvide_js[k]}})});Object.keys(useStore_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return useStore_js[k]}})});Object.keys(useWatch_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return useWatch_js[k]}})});Object.keys(useWatchEffect_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return useWatchEffect_js[k]}})});

dist/hooks/index.d.cts

@@ -0,8 +1,10 @@
+export { useBox } from './useBox.cjs';
 export { useComputed } from './useComputed.cjs';
 export { usePick, usePickDeeply } from './usePick.cjs';
-export { useStoreValue } from './useStoreValue.cjs';
+export { useInject, useProvide } from './useProvide.cjs';
+export { useStore, useStoreValue } from './useStore.cjs';
 export { useWatch } from './useWatch.cjs';
 export { useWatchEffect } from './useWatchEffect.cjs';
+import '../core.cjs';
 import '../utils.cjs';
-import '../core.cjs';
 import '@del-wang/equals';

dist/hooks/index.d.ts

@@ -0,8 +1,10 @@
+export { useBox } from './useBox.js';
 export { useComputed } from './useComputed.js';
 export { usePick, usePickDeeply } from './usePick.js';
-export { useStoreValue } from './useStoreValue.js';
+export { useInject, useProvide } from './useProvide.js';
+export { useStore, useStoreValue } from './useStore.js';
 export { useWatch } from './useWatch.js';
 export { useWatchEffect } from './useWatchEffect.js';
+import '../core.js';
 import '../utils.js';
-import '../core.js';
 import '@del-wang/equals';

dist/hooks/index.js

@@ -1,1 +0,1 @@
-export*from'./useComputed.js';export*from'./usePick.js';export*from'./useStoreValue.js';export*from'./useWatch.js';export*from'./useWatchEffect.js';
+export*from'./useBox.js';export*from'./useComputed.js';export*from'./usePick.js';export*from'./useProvide.js';export*from'./useStore.js';export*from'./useWatch.js';export*from'./useWatchEffect.js';

dist/hooks/useComputed.d.cts

@@ -5,2 +5,20 @@ import { ResolveZenBox } from '../utils.cjs';
 
+/**
+ * Create a computed value that automatically updates when the dependencies change.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useComputed
+ *
+ * @example
+ *
+ * ```tsx
+ * const counterStore = createStore({ count: 0 });
+ *
+ * function App() {
+ *   const doubleCount = useComputed(() => {
+ *     return counterStore.state.count * 2;
+ *   });
+ *   return <div>doubleCount: {doubleCount}</div>;
+ * }
+ * ```
+ */
 declare function useComputed<T>(compute: T | (() => T), options?: {
@@ -7,0 +25,0 @@ deep?: boolean;

dist/hooks/useComputed.d.ts

@@ -5,2 +5,20 @@ import { ResolveZenBox } from '../utils.js';
 
+/**
+ * Create a computed value that automatically updates when the dependencies change.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useComputed
+ *
+ * @example
+ *
+ * ```tsx
+ * const counterStore = createStore({ count: 0 });
+ *
+ * function App() {
+ *   const doubleCount = useComputed(() => {
+ *     return counterStore.state.count * 2;
+ *   });
+ *   return <div>doubleCount: {doubleCount}</div>;
+ * }
+ * ```
+ */
 declare function useComputed<T>(compute: T | (() => T), options?: {
@@ -7,0 +25,0 @@ deep?: boolean;

dist/hooks/usePick.cjs

@@ -1,1 +0,1 @@
-'use strict';var chunkBCUBYE76_cjs=require('../chunk-BCUBYE76.cjs'),useStoreValue_js=require('./useStoreValue.js');function s(n,...e){return useStoreValue_js.useStoreValue(n,{deep:false,pick:e.length===0?void 0:e})}chunkBCUBYE76_cjs.a(s,"usePick");function i(n,...e){return useStoreValue_js.useStoreValue(n,{deep:true,pick:e.length===0?void 0:e})}chunkBCUBYE76_cjs.a(i,"usePickDeeply");exports.usePick=s;exports.usePickDeeply=i;
+'use strict';var chunkBCUBYE76_cjs=require('../chunk-BCUBYE76.cjs'),useStore_js=require('./useStore.js');function s(n,...e){return useStore_js.useStore(n,{deep:false,pick:e.length===0?void 0:e})}chunkBCUBYE76_cjs.a(s,"usePick");function i(n,...e){return useStore_js.useStore(n,{deep:true,pick:e.length===0?void 0:e})}chunkBCUBYE76_cjs.a(i,"usePickDeeply");exports.usePick=s;exports.usePickDeeply=i;

dist/hooks/usePick.d.cts

@@ -5,5 +5,37 @@ import { ZenBox } from '../core.cjs';
 
+/**
+ * Pick a subset of the state with shallowEqual.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/usePick
+ *
+ * @example
+ *
+ * ```tsx
+ * const userStore = createStore({ name: 'Alice', age: 20 });
+ *
+ * function App() {
+ *   const { name } = usePick(userStore, 'name'); // Only re-renders when the name changes
+ *   return <div>name: {name}</div>;
+ * }
+ * ```
+ */
 declare function usePick<S extends ZenBox<any>, const K extends (keyof S['value'])[]>(store: S, ...picks: K): K extends [] ? S["value"] : Prettify<Pick<S["value"], K[number]>>;
+/**
+ * Pick a subset of the state with deepEqual.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/usePick
+ *
+ * @example
+ *
+ * ```tsx
+ * const userStore = createStore({ name: 'Alice', age: 20 });
+ *
+ * function App() {
+ *   const { name } = usePick(userStore, 'name'); // Only re-renders when the name changes
+ *   return <div>name: {name}</div>;
+ * }
+ * ```
+ */
 declare function usePickDeeply<S extends ZenBox<any>, const K extends (keyof S['value'])[]>(store: S, ...picks: K): K extends [] ? S["value"] : Prettify<Pick<S["value"], K[number]>>;
 
 export { usePick, usePickDeeply };

dist/hooks/usePick.d.ts

@@ -5,5 +5,37 @@ import { ZenBox } from '../core.js';
 
+/**
+ * Pick a subset of the state with shallowEqual.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/usePick
+ *
+ * @example
+ *
+ * ```tsx
+ * const userStore = createStore({ name: 'Alice', age: 20 });
+ *
+ * function App() {
+ *   const { name } = usePick(userStore, 'name'); // Only re-renders when the name changes
+ *   return <div>name: {name}</div>;
+ * }
+ * ```
+ */
 declare function usePick<S extends ZenBox<any>, const K extends (keyof S['value'])[]>(store: S, ...picks: K): K extends [] ? S["value"] : Prettify<Pick<S["value"], K[number]>>;
+/**
+ * Pick a subset of the state with deepEqual.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/usePick
+ *
+ * @example
+ *
+ * ```tsx
+ * const userStore = createStore({ name: 'Alice', age: 20 });
+ *
+ * function App() {
+ *   const { name } = usePick(userStore, 'name'); // Only re-renders when the name changes
+ *   return <div>name: {name}</div>;
+ * }
+ * ```
+ */
 declare function usePickDeeply<S extends ZenBox<any>, const K extends (keyof S['value'])[]>(store: S, ...picks: K): K extends [] ? S["value"] : Prettify<Pick<S["value"], K[number]>>;
 
 export { usePick, usePickDeeply };

dist/hooks/usePick.js

@@ -1,1 +0,1 @@
-import {a}from'../chunk-EI7MMDWY.js';import {useStoreValue}from'./useStoreValue.js';function r(n,...e){return useStoreValue(n,{deep:false,pick:e.length===0?void 0:e})}a(r,"usePick");function s(n,...e){return useStoreValue(n,{deep:true,pick:e.length===0?void 0:e})}a(s,"usePickDeeply");export{r as usePick,s as usePickDeeply};
+import {a}from'../chunk-EI7MMDWY.js';import {useStore}from'./useStore.js';function r(n,...e){return useStore(n,{deep:false,pick:e.length===0?void 0:e})}a(r,"usePick");function s(n,...e){return useStore(n,{deep:true,pick:e.length===0?void 0:e})}a(s,"usePickDeeply");export{r as usePick,s as usePickDeeply};

dist/hooks/useWatch.d.cts

@@ -10,4 +10,22 @@ import { ResolveZenBox } from '../utils.cjs';
 }
+/**
+ * Watch a value and call a callback when it changes.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useWatch
+ *
+ * @example
+ *
+ * ```tsx
+ * const counterStore = createStore({ count: 0 });
+ *
+ * function App() {
+ *   useWatch(counterStore, (state) => {
+ *     console.log(state.count); // 0, 1, 2, ...
+ *   });
+ *   return <div>count: {counterStore.value.count}</div>;
+ * }
+ * ```
+ */
 declare function useWatch<T>(_watch: T | (() => T), onChange: (current: ResolveZenBox<T>, prev: ResolveZenBox<T>) => void | VoidFunction, options?: WatchOptions): ResolveZenBox<T>;
 
 export { useWatch };

dist/hooks/useWatch.d.ts

@@ -10,4 +10,22 @@ import { ResolveZenBox } from '../utils.js';
 }
+/**
+ * Watch a value and call a callback when it changes.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useWatch
+ *
+ * @example
+ *
+ * ```tsx
+ * const counterStore = createStore({ count: 0 });
+ *
+ * function App() {
+ *   useWatch(counterStore, (state) => {
+ *     console.log(state.count); // 0, 1, 2, ...
+ *   });
+ *   return <div>count: {counterStore.value.count}</div>;
+ * }
+ * ```
+ */
 declare function useWatch<T>(_watch: T | (() => T), onChange: (current: ResolveZenBox<T>, prev: ResolveZenBox<T>) => void | VoidFunction, options?: WatchOptions): ResolveZenBox<T>;
 
 export { useWatch };

dist/hooks/useWatchEffect.d.cts

@@ -0,3 +1,21 @@
+/**
+ * Watch a value and call a callback when it changes.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useWatchEffect
+ *
+ * @example
+ *
+ * ```tsx
+ * const counterStore = createStore({ count: 0 });
+ *
+ * function App() {
+ *   useWatchEffect(() => {
+ *     console.log(counterStore.value.count); // 0, 1, 2, ...
+ *   });
+ *   return <div>count: {counterStore.value.count}</div>;
+ * }
+ * ```
+ */
 declare function useWatchEffect(watch: () => void | VoidFunction): void;
 
 export { useWatchEffect };

dist/hooks/useWatchEffect.d.ts

@@ -0,3 +1,21 @@
+/**
+ * Watch a value and call a callback when it changes.
+ *
+ * @link https://zenbox.del.wang/en/docs/hooks/useWatchEffect
+ *
+ * @example
+ *
+ * ```tsx
+ * const counterStore = createStore({ count: 0 });
+ *
+ * function App() {
+ *   useWatchEffect(() => {
+ *     console.log(counterStore.value.count); // 0, 1, 2, ...
+ *   });
+ *   return <div>count: {counterStore.value.count}</div>;
+ * }
+ * ```
+ */
 declare function useWatchEffect(watch: () => void | VoidFunction): void;
 
 export { useWatchEffect };

dist/index.d.cts

@@ -5,5 +5,7 @@ export { Memo } from './components/Memo.cjs';
 export { ReadListener, State, StateSetter, ZenBox, createStore } from './core.cjs';
+export { useBox } from './hooks/useBox.cjs';
 export { useComputed } from './hooks/useComputed.cjs';
 export { usePick, usePickDeeply } from './hooks/usePick.cjs';
-export { useStoreValue } from './hooks/useStoreValue.cjs';
+export { useInject, useProvide } from './hooks/useProvide.cjs';
+export { useStore, useStoreValue } from './hooks/useStore.cjs';
 export { useWatch } from './hooks/useWatch.cjs';
@@ -10,0 +12,0 @@ export { useWatchEffect } from './hooks/useWatchEffect.cjs';

dist/index.d.ts

@@ -5,5 +5,7 @@ export { Memo } from './components/Memo.js';
 export { ReadListener, State, StateSetter, ZenBox, createStore } from './core.js';
+export { useBox } from './hooks/useBox.js';
 export { useComputed } from './hooks/useComputed.js';
 export { usePick, usePickDeeply } from './hooks/usePick.js';
-export { useStoreValue } from './hooks/useStoreValue.js';
+export { useInject, useProvide } from './hooks/useProvide.js';
+export { useStore, useStoreValue } from './hooks/useStore.js';
 export { useWatch } from './hooks/useWatch.js';
@@ -10,0 +12,0 @@ export { useWatchEffect } from './hooks/useWatchEffect.js';

package.json

 {
   "name": "zenbox",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
@@ -19,2 +19,8 @@ "description": "Code React like Vue 💚, manage state like Zustand 🐻.",
   ],
+  "scripts": {
+    "prepublish": "npm run build",
+    "build": "del build",
+    "test": "vitest run",
+    "lint": "biome check --write --no-errors-on-unmatched --diagnostic-level=error ."
+  },
   "files": [
@@ -73,2 +79,3 @@ "dist",
   },
+  "packageManager": "pnpm@10.12.4",
   "homepage": "https://github.com/idootop/ZenBox",
@@ -81,9 +88,3 @@ "bugs": {
     "url": "git+https://github.com/idootop/ZenBox.git"
-  },
-  "scripts": {
-    "prepublish": "npm run build",
-    "build": "del build",
-    "test": "vitest run",
-    "lint": "biome check --write --no-errors-on-unmatched --diagnostic-level=error ."
   }
-}
+}

README.md

@@ -5,3 +5,3 @@ ![ZenBox](/website/public/banners/top.png)
 
-ZenBox is a modern React state management library that combines the simplicity of Zustand with the reactive patterns of Vue. It provides an intuitive API that feels natural to developers familiar with either framework.
+ZenBox is a modern React state management library that combines the simplicity of Zustand with the reactive patterns of Vue.
 
@@ -37,3 +37,3 @@ Love Zustand & Vue? Meet ZenBox ❤️
 
-We believe ZenBox will transform how you think about React state management.
+👉 Visit [https://zenbox.del.wang](https://zenbox.del.wang) to view the full documentation.
 
@@ -44,10 +44,7 @@ ```shell
 
-**Ready to experience state management that feels like magic?** ✨
-
 ## Community & Support
 
-- 📚 **Documentation**: [https://zenbox.del.wang](https://zenbox.del.wang)
 - 🐙 **GitHub**: [idootop/ZenBox](https://github.com/idootop/ZenBox)
+- 🐛 **Issues**: [GitHub Issues](https://github.com/idootop/ZenBox/issues)
 - 💬 **Discussions**: [GitHub Discussions](https://github.com/idootop/ZenBox/discussions)
-- 🐛 **Issues**: [GitHub Issues](https://github.com/idootop/ZenBox/issues)
 
@@ -54,0 +51,0 @@ ## ZenBox vs Zustand

dist/hooks/useStoreValue.cjs

-'use strict';var chunkBCUBYE76_cjs=require('../chunk-BCUBYE76.cjs'),useComputed_js=require('./useComputed.js');function f(e,n={}){const{pick:u,deep:r}=n;return useComputed_js.useComputed(()=>u?.reduce((i,t)=>({...i,[t]:e.value[t]}),{})??e.value,{deep:r})}chunkBCUBYE76_cjs.a(f,"useStoreValue");exports.useStoreValue=f;

dist/hooks/useStoreValue.d.cts

-import { ZenBox } from '../core.cjs';
-import { Prettify } from '../utils.cjs';
-import '@del-wang/equals';
-
-declare function useStoreValue<S extends ZenBox<any>, const K extends (keyof S['value'])[] | undefined = undefined>(store: S, options?: {
-    pick?: K;
-    deep?: boolean;
-}): K extends (keyof S["value"])[] ? Prettify<Pick<S["value"], K[number]>> : S["value"];
-
-export { useStoreValue };

dist/hooks/useStoreValue.d.ts

-import { ZenBox } from '../core.js';
-import { Prettify } from '../utils.js';
-import '@del-wang/equals';
-
-declare function useStoreValue<S extends ZenBox<any>, const K extends (keyof S['value'])[] | undefined = undefined>(store: S, options?: {
-    pick?: K;
-    deep?: boolean;
-}): K extends (keyof S["value"])[] ? Prettify<Pick<S["value"], K[number]>> : S["value"];
-
-export { useStoreValue };

dist/hooks/useStoreValue.js

-import {a as a$1}from'../chunk-EI7MMDWY.js';import {useComputed}from'./useComputed.js';function a(e,n={}){const{pick:u,deep:r}=n;return useComputed(()=>u?.reduce((i,t)=>({...i,[t]:e.value[t]}),{})??e.value,{deep:r})}a$1(a,"useStoreValue");export{a as useStoreValue};

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 3 instances in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

50771

44.07%

Number of package files

69

13.11%

Lines of code

431

229.01%

Worsened metrics

Number of low quality alerts

28

16.67%

Number of lines in readme file

64

-4.48%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes