zenbox - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

dist/chunk-BCUBYE76.cjs

+'use strict';var c=Object.defineProperty;var d=(a,b)=>c(a,"name",{value:b,configurable:true});exports.a=d;

dist/chunk-EI7MMDWY.js

+var c=Object.defineProperty;var d=(a,b)=>c(a,"name",{value:b,configurable:true});export{d as a};

dist/components/index.cjs

+'use strict';var Memo_js=require('./Memo.js'),Provider_js=require('./Provider.js'),Watch_js=require('./Watch.js');Object.keys(Memo_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return Memo_js[k]}})});Object.keys(Provider_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return Provider_js[k]}})});Object.keys(Watch_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return Watch_js[k]}})});

dist/components/index.d.cts

+export { Memo } from './Memo.cjs';
+export { createProvider } from './Provider.cjs';
+export { Watch } from './Watch.cjs';
+import 'react';
+import '../utils.cjs';
+import '../core.cjs';
+import '@del-wang/equals';
+import 'react/jsx-runtime';

dist/components/index.d.ts

+export { Memo } from './Memo.js';
+export { createProvider } from './Provider.js';
+export { Watch } from './Watch.js';
+import 'react';
+import '../utils.js';
+import '../core.js';
+import '@del-wang/equals';
+import 'react/jsx-runtime';

dist/components/index.js

+export*from'./Memo.js';export*from'./Provider.js';export*from'./Watch.js';

dist/components/Memo.cjs

+'use strict';var chunkBCUBYE76_cjs=require('../chunk-BCUBYE76.cjs'),react=require('react'),useWatch_js=require('../hooks/useWatch.js'),utils_js=require('../utils.js');function N(c){const{children:e,watch:n,deep:r}=c,[t,s]=react.useState(utils_js.NULL),p=useWatch_js.useWatch(n,d=>{s(e(d));},{deep:r});return t===utils_js.NULL?e(p):t}chunkBCUBYE76_cjs.a(N,"Memo");exports.Memo=N;

dist/components/Memo.d.cts

+import { ReactNode } from 'react';
+import { ResolveZenBox } from '../utils.cjs';
+import '../core.cjs';
+import '@del-wang/equals';
+
+declare function Memo<T>(props: {
+    children: (state: ResolveZenBox<T>) => ReactNode;
+    watch: T | (() => T);
+    deep?: boolean;
+}): ReactNode;
+
+export { Memo };

dist/components/Memo.d.ts

+import { ReactNode } from 'react';
+import { ResolveZenBox } from '../utils.js';
+import '../core.js';
+import '@del-wang/equals';
+
+declare function Memo<T>(props: {
+    children: (state: ResolveZenBox<T>) => ReactNode;
+    watch: T | (() => T);
+    deep?: boolean;
+}): ReactNode;
+
+export { Memo };

dist/components/Memo.js

+import {a}from'../chunk-EI7MMDWY.js';import {useState}from'react';import {useWatch}from'../hooks/useWatch.js';import {NULL}from'../utils.js';function h(c){const{children:e,watch:n,deep:r}=c,[t,s]=useState(NULL),p=useWatch(n,d=>{s(e(d));},{deep:r});return t===NULL?e(p):t}a(h,"Memo");export{h as Memo};

dist/components/Provider.cjs

+'use strict';var chunkBCUBYE76_cjs=require('../chunk-BCUBYE76.cjs'),jsxRuntime=require('react/jsx-runtime'),reactUnstrict=require('@del-wang/react-unstrict'),react=require('react'),core_js=require('../core.js'),utils_js=require('../utils.js');function B(i){let n=null;const s=chunkBCUBYE76_cjs.a(()=>n,"getStore"),c=chunkBCUBYE76_cjs.a(()=>n?.value,"getState"),S=chunkBCUBYE76_cjs.a((t,e)=>{n?.setState(t,e);},"setState"),o=react.createContext(null);function a(t){const e=react.useRef({unsubscribe:null,store:core_js.createStore(utils_js.mergeState(i,t.initialState))});return reactUnstrict.useUnStrictRun(()=>{e.current.unsubscribe||(e.current.unsubscribe=core_js.ZenBox.subscribeRead(u=>{u===e.current.store&&(n=u);}));}),react.useEffect(()=>()=>{e.current.unsubscribe?.();},[]),jsxRuntime.jsx(o.Provider,{value:e.current.store,children:t.children})}chunkBCUBYE76_cjs.a(a,"StoreProvider");function l(){const t=react.useContext(o);if(!t)throw new Error("useFindStore must be used within StoreProvider");return t}return chunkBCUBYE76_cjs.a(l,"useFindStore"),[a,l,{getStore:s,getState:c,setState:S}]}chunkBCUBYE76_cjs.a(B,"createProvider");exports.createProvider=B;

dist/components/Provider.d.cts

+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { State, ZenBox, StateSetter } from '../core.cjs';
+
+declare function createProvider<T extends State>(initialState: T): readonly [(props: PropsWithChildren<{
+    initialState?: Partial<T>;
+}>) => react_jsx_runtime.JSX.Element, () => ZenBox<T>, {
+    readonly getStore: () => ZenBox<T>;
+    readonly getState: () => Readonly<T>;
+    readonly setState: StateSetter<T>;
+}];
+
+export { createProvider };

dist/components/Provider.d.ts

+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { State, ZenBox, StateSetter } from '../core.js';
+
+declare function createProvider<T extends State>(initialState: T): readonly [(props: PropsWithChildren<{
+    initialState?: Partial<T>;
+}>) => react_jsx_runtime.JSX.Element, () => ZenBox<T>, {
+    readonly getStore: () => ZenBox<T>;
+    readonly getState: () => Readonly<T>;
+    readonly setState: StateSetter<T>;
+}];
+
+export { createProvider };

dist/components/Provider.js

+import {a}from'../chunk-EI7MMDWY.js';import {jsx}from'react/jsx-runtime';import {useUnStrictRun}from'@del-wang/react-unstrict';import {createContext,useRef,useEffect,useContext}from'react';import {createStore,ZenBox}from'../core.js';import {mergeState}from'../utils.js';function y(i){let n=null;const s=a(()=>n,"getStore"),c=a(()=>n?.value,"getState"),S=a((t,e)=>{n?.setState(t,e);},"setState"),o=createContext(null);function a$1(t){const e=useRef({unsubscribe:null,store:createStore(mergeState(i,t.initialState))});return useUnStrictRun(()=>{e.current.unsubscribe||(e.current.unsubscribe=ZenBox.subscribeRead(u=>{u===e.current.store&&(n=u);}));}),useEffect(()=>()=>{e.current.unsubscribe?.();},[]),jsx(o.Provider,{value:e.current.store,children:t.children})}a(a$1,"StoreProvider");function l(){const t=useContext(o);if(!t)throw new Error("useFindStore must be used within StoreProvider");return t}return a(l,"useFindStore"),[a$1,l,{getStore:s,getState:c,setState:S}]}a(y,"createProvider");export{y as createProvider};

dist/components/Watch.cjs

+'use strict';var chunkBCUBYE76_cjs=require('../chunk-BCUBYE76.cjs'),useComputed_js=require('../hooks/useComputed.js');function d(t){const{children:o,watch:c,deep:n}=t,r=useComputed_js.useComputed(c,{deep:n});return o(r)}chunkBCUBYE76_cjs.a(d,"Watch");exports.Watch=d;

dist/components/Watch.d.cts

+import * as react from 'react';
+import { ResolveZenBox } from '../utils.cjs';
+import '../core.cjs';
+import '@del-wang/equals';
+
+declare function Watch<T>(props: {
+    children: (state: ResolveZenBox<T>) => React.ReactNode;
+    watch: T | (() => T);
+    deep?: boolean;
+}): react.ReactNode;
+
+export { Watch };

dist/components/Watch.d.ts

+import * as react from 'react';
+import { ResolveZenBox } from '../utils.js';
+import '../core.js';
+import '@del-wang/equals';
+
+declare function Watch<T>(props: {
+    children: (state: ResolveZenBox<T>) => React.ReactNode;
+    watch: T | (() => T);
+    deep?: boolean;
+}): react.ReactNode;
+
+export { Watch };

dist/components/Watch.js

+import {a}from'../chunk-EI7MMDWY.js';import {useComputed}from'../hooks/useComputed.js';function p(t){const{children:o,watch:c,deep:n}=t,r=useComputed(c,{deep:n});return o(r)}a(p,"Watch");export{p as Watch};

dist/core.cjs

+'use strict';var chunkBCUBYE76_cjs=require('./chunk-BCUBYE76.cjs'),equals=require('@del-wang/equals'),immer=require('immer'),utils_js=require('./utils.js');class n{constructor(e){this._state=e;immer.enableMapSet();}static{chunkBCUBYE76_cjs.a(this,"ZenBox");}static _readListeners=new Set;_writeListeners=new Set;get value(){return n._readListeners.forEach(e=>e(this)),this._state}set value(e){this.setState(e);}setState=chunkBCUBYE76_cjs.a((e,r)=>{if(this._state=typeof e=="function"?immer.produce(this._state,e):utils_js.mergeState(this._state,e),!r?.silent)for(const t of this._writeListeners){const{select:i,equal:s,onChange:o,prev:S}=t,c=i(this._state);s(S,c)||(o(c,S),t.prev=c);}},"setState");subscribe=chunkBCUBYE76_cjs.a(e=>{const{onChange:r,select:t=chunkBCUBYE76_cjs.a(o=>o,"select"),equal:i=equals.shallowEqual}=e,s={onChange:r,select:t,equal:i,prev:t(this._state)};return this._writeListeners.add(s),()=>this._writeListeners.delete(s)},"subscribe");static subscribeRead(e){return n._readListeners.add(e),()=>n._readListeners.delete(e)}static track(e){const r=new Set,t=n.subscribeRead(s=>r.add(s)),i=e();return t(),[r,i]}}function f(d){return new n(d)}chunkBCUBYE76_cjs.a(f,"createStore");exports.ZenBox=n;exports.createStore=f;

dist/core.d.cts

+type State = Record<string, any>;
+type StateSetter<S extends State> = (newState: Partial<S> | ((prev: S) => S | void), options?: {
+    silent?: boolean;
+}) => void;
+type ReadListener = (store: ZenBox<any>) => void;
+declare class ZenBox<S extends State> {
+    private _state;
+    constructor(_state: S);
+    private static _readListeners;
+    private _writeListeners;
+    get value(): Readonly<S>;
+    set value(newState: Partial<S>);
+    setState: StateSetter<S>;
+    subscribe: <V = S>(options: {
+        onChange: (current: V, prev: V) => void;
+        select?: (state: S) => V;
+        equal?: (a: V, b: V) => boolean;
+    }) => () => boolean;
+    static subscribeRead(listener: ReadListener): () => boolean;
+    static track<T>(scope: () => T): readonly [Set<ZenBox<any>>, T];
+}
+declare function createStore<S extends State>(initialState: S): ZenBox<S>;
+
+export { type ReadListener, type State, type StateSetter, ZenBox, createStore };

dist/core.d.ts

+type State = Record<string, any>;
+type StateSetter<S extends State> = (newState: Partial<S> | ((prev: S) => S | void), options?: {
+    silent?: boolean;
+}) => void;
+type ReadListener = (store: ZenBox<any>) => void;
+declare class ZenBox<S extends State> {
+    private _state;
+    constructor(_state: S);
+    private static _readListeners;
+    private _writeListeners;
+    get value(): Readonly<S>;
+    set value(newState: Partial<S>);
+    setState: StateSetter<S>;
+    subscribe: <V = S>(options: {
+        onChange: (current: V, prev: V) => void;
+        select?: (state: S) => V;
+        equal?: (a: V, b: V) => boolean;
+    }) => () => boolean;
+    static subscribeRead(listener: ReadListener): () => boolean;
+    static track<T>(scope: () => T): readonly [Set<ZenBox<any>>, T];
+}
+declare function createStore<S extends State>(initialState: S): ZenBox<S>;
+
+export { type ReadListener, type State, type StateSetter, ZenBox, createStore };

dist/core.js

+import {a}from'./chunk-EI7MMDWY.js';import {shallowEqual}from'@del-wang/equals';import {enableMapSet,produce}from'immer';import {mergeState}from'./utils.js';class n{constructor(e){this._state=e;enableMapSet();}static{a(this,"ZenBox");}static _readListeners=new Set;_writeListeners=new Set;get value(){return n._readListeners.forEach(e=>e(this)),this._state}set value(e){this.setState(e);}setState=a((e,r)=>{if(this._state=typeof e=="function"?produce(this._state,e):mergeState(this._state,e),!r?.silent)for(const t of this._writeListeners){const{select:i,equal:s,onChange:o,prev:S}=t,c=i(this._state);s(S,c)||(o(c,S),t.prev=c);}},"setState");subscribe=a(e=>{const{onChange:r,select:t=a(o=>o,"select"),equal:i=shallowEqual}=e,s={onChange:r,select:t,equal:i,prev:t(this._state)};return this._writeListeners.add(s),()=>this._writeListeners.delete(s)},"subscribe");static subscribeRead(e){return n._readListeners.add(e),()=>n._readListeners.delete(e)}static track(e){const r=new Set,t=n.subscribeRead(s=>r.add(s)),i=e();return t(),[r,i]}}function V(d){return new n(d)}a(V,"createStore");export{n as ZenBox,V as createStore};

dist/hooks/index.cjs

+'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]}})});

dist/hooks/index.d.cts

+export { useComputed } from './useComputed.cjs';
+export { usePick, usePickDeeply } from './usePick.cjs';
+export { useStoreValue } from './useStoreValue.cjs';
+export { useWatch } from './useWatch.cjs';
+export { useWatchEffect } from './useWatchEffect.cjs';
+import '../utils.cjs';
+import '../core.cjs';
+import '@del-wang/equals';

dist/hooks/index.d.ts

+export { useComputed } from './useComputed.js';
+export { usePick, usePickDeeply } from './usePick.js';
+export { useStoreValue } from './useStoreValue.js';
+export { useWatch } from './useWatch.js';
+export { useWatchEffect } from './useWatchEffect.js';
+import '../utils.js';
+import '../core.js';
+import '@del-wang/equals';

dist/hooks/index.js

+export*from'./useComputed.js';export*from'./usePick.js';export*from'./useStoreValue.js';export*from'./useWatch.js';export*from'./useWatchEffect.js';

dist/hooks/useComputed.cjs

+'use strict';var chunkBCUBYE76_cjs=require('../chunk-BCUBYE76.cjs'),react=require('react'),useWatch_js=require('./useWatch.js');function c(o,t={}){const[m,s]=react.useState({}),r=react.useCallback(()=>s({}),[]);return useWatch_js.useWatch(o,()=>r(),t)}chunkBCUBYE76_cjs.a(c,"useComputed");exports.useComputed=c;

dist/hooks/useComputed.d.cts

+import { ResolveZenBox } from '../utils.cjs';
+import '../core.cjs';
+import '@del-wang/equals';
+
+declare function useComputed<T>(compute: T | (() => T), options?: {
+    deep?: boolean;
+}): ResolveZenBox<T>;
+
+export { useComputed };

dist/hooks/useComputed.d.ts

+import { ResolveZenBox } from '../utils.js';
+import '../core.js';
+import '@del-wang/equals';
+
+declare function useComputed<T>(compute: T | (() => T), options?: {
+    deep?: boolean;
+}): ResolveZenBox<T>;
+
+export { useComputed };

dist/hooks/useComputed.js

+import {a}from'../chunk-EI7MMDWY.js';import {useState,useCallback}from'react';import {useWatch}from'./useWatch.js';function i(o,t={}){const[m,s]=useState({}),r=useCallback(()=>s({}),[]);return useWatch(o,()=>r(),t)}a(i,"useComputed");export{i as useComputed};

dist/hooks/usePick.cjs

+'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;

dist/hooks/usePick.d.cts

+import { ZenBox } from '../core.cjs';
+import { Prettify } from '../utils.cjs';
+import '@del-wang/equals';
+
+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]>>;
+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

+import { ZenBox } from '../core.js';
+import { Prettify } from '../utils.js';
+import '@del-wang/equals';
+
+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]>>;
+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

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

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

dist/hooks/useWatch.cjs

+'use strict';var chunkBCUBYE76_cjs=require('../chunk-BCUBYE76.cjs'),equals=require('@del-wang/equals'),reactUnstrict=require('@del-wang/react-unstrict'),react=require('react'),core_js=require('../core.js'),utils_js=require('../utils.js');function U(n,u,o){const a=typeof n=="function"?n:()=>n,e=react.useRef({initialized:false,triggered:false,prev:utils_js.NULL,cleanupDeps:null,cleanupWatchEffect:null,watch:a,onChange:u,...o});e.current={...e.current,watch:a,onChange:u,...o};const l=react.useCallback(()=>{const{initialized:i,watch:d,deep:m,once:s,immediate:v}=e.current;if(s&&e.current.triggered)return;e.current.cleanupDeps?.();const[h,r]=core_js.ZenBox.track(()=>utils_js.resolveValue(d())),E=Array.from(h).map(t=>t.subscribe({onChange:chunkBCUBYE76_cjs.a(()=>l(),"onChange")}));e.current.cleanupDeps=()=>{E.forEach(t=>t());};const W=m?equals.deepEqual:equals.shallowEqual,p=e.current.prev===utils_js.NULL?r:e.current.prev;(!i&&v||i&&!W(p,r))&&(e.current.triggered=true,e.current.cleanupWatchEffect?.(),e.current.cleanupWatchEffect=e.current.onChange(r,p),s&&(e.current.cleanupDeps?.(),e.current.cleanupDeps=null,e.current.cleanupWatchEffect?.(),e.current.cleanupWatchEffect=null)),e.current.prev=r,e.current.initialized=true;},[]);return reactUnstrict.useUnStrictRun(l),reactUnstrict.useUnStrictEffect(()=>()=>{e.current.cleanupDeps?.(),e.current.cleanupWatchEffect?.(),e.current=null;},[]),e.current.prev}chunkBCUBYE76_cjs.a(U,"useWatch");exports.useWatch=U;

dist/hooks/useWatch.d.cts

+import { ResolveZenBox } from '../utils.cjs';
+import '../core.cjs';
+import '@del-wang/equals';
+
+interface WatchOptions {
+    deep?: boolean;
+    once?: boolean;
+    immediate?: boolean;
+}
+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

+import { ResolveZenBox } from '../utils.js';
+import '../core.js';
+import '@del-wang/equals';
+
+interface WatchOptions {
+    deep?: boolean;
+    once?: boolean;
+    immediate?: boolean;
+}
+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.js

+import {a}from'../chunk-EI7MMDWY.js';import {deepEqual,shallowEqual}from'@del-wang/equals';import {useUnStrictRun,useUnStrictEffect}from'@del-wang/react-unstrict';import {useRef,useCallback}from'react';import {ZenBox}from'../core.js';import {NULL,resolveValue}from'../utils.js';function F(n,u,o){const a$1=typeof n=="function"?n:()=>n,e=useRef({initialized:false,triggered:false,prev:NULL,cleanupDeps:null,cleanupWatchEffect:null,watch:a$1,onChange:u,...o});e.current={...e.current,watch:a$1,onChange:u,...o};const l=useCallback(()=>{const{initialized:i,watch:d,deep:m,once:s,immediate:v}=e.current;if(s&&e.current.triggered)return;e.current.cleanupDeps?.();const[h,r]=ZenBox.track(()=>resolveValue(d())),E=Array.from(h).map(t=>t.subscribe({onChange:a(()=>l(),"onChange")}));e.current.cleanupDeps=()=>{E.forEach(t=>t());};const W=m?deepEqual:shallowEqual,p=e.current.prev===NULL?r:e.current.prev;(!i&&v||i&&!W(p,r))&&(e.current.triggered=true,e.current.cleanupWatchEffect?.(),e.current.cleanupWatchEffect=e.current.onChange(r,p),s&&(e.current.cleanupDeps?.(),e.current.cleanupDeps=null,e.current.cleanupWatchEffect?.(),e.current.cleanupWatchEffect=null)),e.current.prev=r,e.current.initialized=true;},[]);return useUnStrictRun(l),useUnStrictEffect(()=>()=>{e.current.cleanupDeps?.(),e.current.cleanupWatchEffect?.(),e.current=null;},[]),e.current.prev}a(F,"useWatch");export{F as useWatch};

dist/hooks/useWatchEffect.cjs

+'use strict';var chunkBCUBYE76_cjs=require('../chunk-BCUBYE76.cjs'),reactUnstrict=require('@del-wang/react-unstrict'),react=require('react'),core_js=require('../core.js');function k(t){const c=react.useRef({watch:t,cleanupDeps:null,cleanupWatchEffect:null});c.current={...c.current,watch:t};const r=react.useCallback(()=>{const{watch:u,cleanupDeps:o,cleanupWatchEffect:a}=c.current;a?.(),o?.();const[s,d]=core_js.ZenBox.track(()=>{c.current.cleanupWatchEffect=u();}),f=Array.from(s).map(n=>n.subscribe({onChange:chunkBCUBYE76_cjs.a(()=>r(),"onChange")}));c.current.cleanupDeps=()=>{f.forEach(n=>n());};},[]);reactUnstrict.useUnStrictRun(r),reactUnstrict.useUnStrictEffect(()=>()=>{c.current.cleanupDeps?.(),c.current.cleanupWatchEffect?.(),c.current=null;},[]);}chunkBCUBYE76_cjs.a(k,"useWatchEffect");exports.useWatchEffect=k;

dist/hooks/useWatchEffect.d.cts

+declare function useWatchEffect(watch: () => void | VoidFunction): void;
+
+export { useWatchEffect };

dist/hooks/useWatchEffect.d.ts

+declare function useWatchEffect(watch: () => void | VoidFunction): void;
+
+export { useWatchEffect };

dist/hooks/useWatchEffect.js

+import {a}from'../chunk-EI7MMDWY.js';import {useUnStrictRun,useUnStrictEffect}from'@del-wang/react-unstrict';import {useRef,useCallback}from'react';import {ZenBox}from'../core.js';function D(t){const c=useRef({watch:t,cleanupDeps:null,cleanupWatchEffect:null});c.current={...c.current,watch:t};const r=useCallback(()=>{const{watch:u,cleanupDeps:o,cleanupWatchEffect:a$1}=c.current;a$1?.(),o?.();const[s,d]=ZenBox.track(()=>{c.current.cleanupWatchEffect=u();}),f=Array.from(s).map(n=>n.subscribe({onChange:a(()=>r(),"onChange")}));c.current.cleanupDeps=()=>{f.forEach(n=>n());};},[]);useUnStrictRun(r),useUnStrictEffect(()=>()=>{c.current.cleanupDeps?.(),c.current.cleanupWatchEffect?.(),c.current=null;},[]);}a(D,"useWatchEffect");export{D as useWatchEffect};

dist/index.cjs

+'use strict';var index_js=require('./components/index.js'),core_js=require('./core.js'),index_js$1=require('./hooks/index.js'),utils_js=require('./utils.js');Object.keys(index_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return index_js[k]}})});Object.keys(core_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return core_js[k]}})});Object.keys(index_js$1).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return index_js$1[k]}})});Object.keys(utils_js).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return utils_js[k]}})});

dist/index.d.cts

+export { Memo } from './components/Memo.cjs';
+export { createProvider } from './components/Provider.cjs';
+export { Watch } from './components/Watch.cjs';
+export { ReadListener, State, StateSetter, ZenBox, createStore } from './core.cjs';
+export { useComputed } from './hooks/useComputed.cjs';
+export { usePick, usePickDeeply } from './hooks/usePick.cjs';
+export { useStoreValue } from './hooks/useStoreValue.cjs';
+export { useWatch } from './hooks/useWatch.cjs';
+export { useWatchEffect } from './hooks/useWatchEffect.cjs';
+export { NULL, Prettify, ResolveZenBox, mergeState, resolveValue } from './utils.cjs';
+export { deepEqual, shallowEqual } from '@del-wang/equals';
+import 'react';
+import 'react/jsx-runtime';

dist/index.d.ts

+export { Memo } from './components/Memo.js';
+export { createProvider } from './components/Provider.js';
+export { Watch } from './components/Watch.js';
+export { ReadListener, State, StateSetter, ZenBox, createStore } from './core.js';
+export { useComputed } from './hooks/useComputed.js';
+export { usePick, usePickDeeply } from './hooks/usePick.js';
+export { useStoreValue } from './hooks/useStoreValue.js';
+export { useWatch } from './hooks/useWatch.js';
+export { useWatchEffect } from './hooks/useWatchEffect.js';
+export { NULL, Prettify, ResolveZenBox, mergeState, resolveValue } from './utils.js';
+export { deepEqual, shallowEqual } from '@del-wang/equals';
+import 'react';
+import 'react/jsx-runtime';

dist/index.js

+export*from'./components/index.js';export*from'./core.js';export*from'./hooks/index.js';export*from'./utils.js';

dist/utils.cjs

+'use strict';var chunkBCUBYE76_cjs=require('./chunk-BCUBYE76.cjs'),core_js=require('./core.js'),equals=require('@del-wang/equals');const T=Symbol("NULL");function l(e,n={}){const t={...e};for(const o in n)Object.hasOwn(e,o)&&(t[o]=n[o]);return t}chunkBCUBYE76_cjs.a(l,"mergeState");function i(e){return e instanceof core_js.ZenBox?e.value:Array.isArray(e)&&e.length>0?e.map(n=>n instanceof core_js.ZenBox?n.value:n):e}chunkBCUBYE76_cjs.a(i,"resolveValue");Object.defineProperty(exports,"deepEqual",{enumerable:true,get:function(){return equals.deepEqual}});Object.defineProperty(exports,"shallowEqual",{enumerable:true,get:function(){return equals.shallowEqual}});exports.NULL=T;exports.mergeState=l;exports.resolveValue=i;

dist/utils.d.cts

+import { ZenBox, State } from './core.cjs';
+export { deepEqual, shallowEqual } from '@del-wang/equals';
+
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type ResolveZenBox<T> = T extends ZenBox<infer U> ? U : T extends readonly [infer A, ...infer Rest] ? readonly [ResolveZenBox<A>, ...ResolveZenBox<Rest>] : T extends readonly (infer U)[] ? readonly ResolveZenBox<U>[] : T extends [infer A, ...infer Rest] ? [ResolveZenBox<A>, ...ResolveZenBox<Rest>] : T extends (infer U)[] ? ResolveZenBox<U>[] : T;
+declare const NULL: unique symbol;
+declare function mergeState<T extends State>(initialState: T, partialState?: Partial<T>): T;
+declare function resolveValue<T>(value: T): T;
+
+export { NULL, type Prettify, type ResolveZenBox, mergeState, resolveValue };

dist/utils.d.ts

+import { ZenBox, State } from './core.js';
+export { deepEqual, shallowEqual } from '@del-wang/equals';
+
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type ResolveZenBox<T> = T extends ZenBox<infer U> ? U : T extends readonly [infer A, ...infer Rest] ? readonly [ResolveZenBox<A>, ...ResolveZenBox<Rest>] : T extends readonly (infer U)[] ? readonly ResolveZenBox<U>[] : T extends [infer A, ...infer Rest] ? [ResolveZenBox<A>, ...ResolveZenBox<Rest>] : T extends (infer U)[] ? ResolveZenBox<U>[] : T;
+declare const NULL: unique symbol;
+declare function mergeState<T extends State>(initialState: T, partialState?: Partial<T>): T;
+declare function resolveValue<T>(value: T): T;
+
+export { NULL, type Prettify, type ResolveZenBox, mergeState, resolveValue };

dist/utils.js

+import {a}from'./chunk-EI7MMDWY.js';import {ZenBox}from'./core.js';export{deepEqual,shallowEqual}from'@del-wang/equals';const f=Symbol("NULL");function T(e,n={}){const t={...e};for(const o in n)Object.hasOwn(e,o)&&(t[o]=n[o]);return t}a(T,"mergeState");function l(e){return e instanceof ZenBox?e.value:Array.isArray(e)&&e.length>0?e.map(n=>n instanceof ZenBox?n.value:n):e}a(l,"resolveValue");export{f as NULL,T as mergeState,l as resolveValue};

package.json

 {
   "name": "zenbox",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
@@ -21,4 +21,10 @@ "description": "Code React like Vue 💚, manage state like Zustand 🐻.",
     "prepublish": "npm run build",
-    "build": "echo 'Code React like Vue 💚, manage state like Zustand 🐻.'"
+    "build": "del build",
+    "test": "vitest run"
   },
+  "files": [
+    "dist",
+    "README.md",
+    "package.json"
+  ],
   "sideEffects": false,
@@ -29,12 +35,45 @@ "main": "dist/index.cjs",
   "exports": {
-    "import": "./dist/index.js",
-    "require": "./dist/index.cjs",
-    "default": "./dist/index.js"
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./*": {
+      "import": {
+        "types": "./dist/*.d.ts",
+        "default": "./dist/*.js"
+      },
+      "require": {
+        "types": "./dist/*.d.cts",
+        "default": "./dist/*.cjs"
+      }
+    }
   },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "dependencies": {
+    "@del-wang/equals": "^1.1.0",
+    "@del-wang/react-unstrict": "^1.1.0",
+    "immer": "^10.1.1"
+  },
   "devDependencies": {
-    "typescript": "^5"
+    "@biomejs/biome": "^2.0.5",
+    "@del-wang/config": "^1.2.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.8",
+    "jsdom": "^26.1.0",
+    "lefthook": "^1.11.14",
+    "tsup": "^8.5.0",
+    "typescript": "^5",
+    "vitest": "^3.2.4"
   },
-  "peerDependencies": {
-    "@types/react": ">=16.8",
-    "react": ">=16.8"
+  "engines": {
+    "node": ">=18"
   },
@@ -41,0 +80,0 @@ "packageManager": "pnpm@10.0.0",

README.md

@@ -1,12 +0,8 @@
-# ZenBox 📦​​
 
-**Code React like Vue 💚, manage state like Zustand 🐻.**
 
-> ✨ Launching soon - stay tuned!
+<img alt="ZenBox" src="./assets/zenbox.webp" height='256' />
 
-```shell
-npm install zenbox
-```
+## What's ZenBox?
 
-## Why ZenBox?
+A lightweight, intuitive state management library that combines the reactivity of Vue with the simplicity of Zustand for React applications.
 
@@ -16,3 +12,3 @@ ### 🐻 Zustand's Simplicity
 ```ts
-const counter = ZenBox({ count: 0 }); // Full TypeScript inference
+const counter = createStore({ count: 0 }); // Full TypeScript inference
 ```
@@ -27,20 +23,34 @@
   () => counter.value.count,
-  (newV, oldV) => console.log("Changed!", newV, oldV)
+  (current, prev) => console.log("Changed!", current, prev)
 );
 ```
 
-### 🚀 Key Benefits
+## Getting Started
 
-- **Minimal learning curve** - If you know Vue or Zustand, you know ZenBox
-- **React optimized** - Built specifically for React's rendering model
-- **TypeScript first​​​​**​​ – Fully inferred types , zero manual interfaces
-- **​​Immer built-in**​​ – Mutate state naturally, no spread operators
-- **Tiny Bundle**​​ – Core library under 100 lines, < 3KB gzipped
+> [!TIP]
+> ✨ Launching soon - stay tuned!
 
-## Getting Started
+```shell
+npm install zenbox
+```
 
-Coming soon...
+## Documentation
 
-## ZenBox vs Zustand
+- [Core](./docs/core/) - Core API documentation
+- [Hooks](./docs/hooks/) - Detailed hook documentation
+- [Components](./docs/components/) - Component documentation
 
+## Why Choose ZenBox?
+
+**The state management library that feels like magic** ✨
+
+- 🎯 **Simple API** - Love Zustand & Vue? You’ll ❤️ ZenBox! Combines the best of both worlds in an API that feels natural and intuitive
+- ⚡ **Lightning Fast** - Smart selective subscriptions + efficient change detection = blazing performance with minimal re-renders
+- 🔮 **Vue-like Magic in React** - Get `useComputed` and `useWatch` reactivity that just works, no manual dependency tracking needed
+- 📦 **TypeScript Superpowers** - Full auto-inference out of the box. No interfaces, no generics, no headaches - just pure type safety
+- 🏗️ **Mutate Like a Human** - Write `state.count++` instead of `setState(prev => ({...prev, count: prev.count + 1}))`. Immer built-in!
+- 🪶 **Featherweight** - Under 100 lines of core code, < 10KB gzipped. Big power, tiny footprint
+
+### ZenBox vs Zustand
+
 | Feature                | ZenBox                               | Zustand                      |
@@ -54,3 +64,3 @@ | ---------------------- | ------------------------------------ | ---------------------------- |
 | **Store Scoping**      | ✅ Built-in Provider for local store | ❌ Global default            |
-| **Immer Support**      | ✅ Out of the box                    | ⚠️ Plugin required           |
+| **Immer Support**      | ✅ Out of the box                    | ⚠️ Middleware required       |
 | **Learning Curve**     | ✅ Minimal (Vue-friendly)            | ✅ Low                       |
@@ -57,0 +67,0 @@

New 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 7 instances in 1 package

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33806

706.83%

Number of package files

57

1800%

Lines of code

127

Infinity%

Number of lines in readme file

68

17.24%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dependency count

4

100%

Dev dependency count

10

900%

Number of low quality alerts

23

2200%

Dependency changes

• + Added

  @del-wang/equals@^1.1.0

• + Added

  @del-wang/react-unstrict@^1.1.0

• + Added

  immer@^10.1.1

• + Added

  @del-wang/equals@1.3.0
  (transitive)

• + Added

  @del-wang/react-unstrict@1.3.0
  (transitive)

• + Added

  immer@10.2.0
  (transitive)

• - Removed

  @types/react@19.2.17
  (transitive)

• - Removed

  csstype@3.2.3
  (transitive)