snap-store 0.1.0 → 0.1.2

package/README.md

@@ -1,22 +1,34 @@
 # snap-store
 
-## Introduction
-
-This is an easy-to-use global state management library for React.
+Easy-to-use global state management library for React.
 
 ## Installation
 ```sh
 npm install snap-store
 ```
 
-## Motivation
+## Overview
+
+**snap-store** simplifies global state management in React. 
+
+In apps like graphical editors or tools with editing functionality, it's often desirable to maintain state in a global store accessible throughout the application.
+
+This library is designed to let you place app state to a central store while keeping your existing component implementations mostly intact. 
+
+It minimizes boilerplate code and complex hook calls, making it easy to create a central store that can be shared across multiple components.
+
+
+### Key Features
 
-I like [valtio](https://github.com/pmndrs/valtio). But sometimes I'm confused by its proxy based design.
-So I wanted to have a non-proxy version of this.
+**snap-store** is designed with the following principles:
 
-I researched some signal based libraries and how to make them work on React.
-I found some hooks (`useSyncExternalStore`) could be used to implement it.
-After struggling for a while, finally I got my own store library working!
+1. **Easy to Migrate from Local State**: Store state is subscribed as plain values and updated with methods like `setValue(newValue)`, making it easy to migrate from local `useState` to a global store with minimal component changes.
+
+2. **Consistent Access Pattern**: Both in-component and out-of-component store access use a similar API, making it easy to extract complex state update logic outside of components.
+
+3. **Convenient Update Methods**: In addition to basic setters, the library provides useful update methods like `patch*` for partial updates and `produce*` for immer-based updates.
+
+## Basic Usage
 
 ```ts
 import {createStore} from "snap-store"
@@ -24,9 +36,8 @@ import {createStore} from "snap-store"
 const store = createStore({ count: 0});
 
 const Counter = () => {
-  const { count } = store.snapshot;
-  const { setCount } = store.mutations;
-  return <button onClick={() => setCount(prev => prev + 1)}>
+  const { count } = store.useSnapshot();
+  return <button onClick={() => store.setCount(prev => prev + 1)}>
     {count}
   </button>
 }
@@ -37,43 +48,43 @@ const Counter = () => {
 const store = createStore({ count: 0});
 ```
 `createStore` takes an initial state object and returns a store.
-The store holds wrapper signals for each field of the state object.
 ```ts
-const { count } = store.snapshot;
+const { count } = store.useSnapshot();
 ```
-In a component, `snapshot` getter is used to refer to the states and make them reactive.
+In a component, `useSnapshot()` hook is used to refer to the states and make them reactive.
 For this line, `count` is actually a getter and it registers a listener to track the value change.
 
-## Usage Examples
+## Examples
 ```ts
 const store = createStore({ count: 0});
 
 function handleButton(){
   const { count } = store.state;    //read store state
-  store.mutations.setCount(currentCount + 1); //mutate by value
-  store.mutations.setCount(prev => prev + 1); //mutate by function
+  store.setCount(count + 1); //mutate by value
+  store.setCount(prev => prev + 1); //mutate by function
 }
 
 const Component = () => {
-  const { count } = store.snapshot;		//refer store state as reactive
+  const { count } = store.useSnapshot();		//refer store state as reactive
   return <button onClick={handleButton}>push me {count}</button>
 }
 ```
-In the component, `store.snapshot` is used to refer to the store state as a reactive value.
+In the component, `store.useSnapshot()` is used to refer to the store state as a reactive value.
 
 Since this is a global state library, you can also read and write store states outside components.
 `store.state` is used to read the value in non-component functions.
 
-`store.mutations` has no difference in component or non-component context.
+Mutation methods have no difference in component or non-component context.
 
 ```ts
 const store = createStore({ user: {name: "John", age: 20 }});
-store.mutations.setUser({ name: "Mike", age: 20});       //value
-store.mutations.setUser(prev => ({...prev, age: 21}));     //by function
-store.mutations.patchUser({ age: 22});		//partial update (merged)
-store.mutations.produceUser(draft => { draft.age = 23 })    //update with immer
+store.setUser({ name: "Mike", age: 20});       //value
+store.setUser(prev => ({...prev, age: 21}));     //by function
+store.patchUser({ age: 22});		//partial update (merged)
+store.produceUser(draft => { draft.age = 23 })    //update with immer
 ```
-It comes with various update methods for each field.
+
+`store` object has a set of update methods for each field.
 
 `set*` methods are similar to the setter function of `useState`. It takes a value or a function.
 
@@ -87,32 +98,31 @@ const store = createStore({
   penColor: 'black', 
   penStyle: 'normal'
 });
-store.mutations.assigns({ penWidth: 1, penStyle: 'dashed' });
+store.assigns({ penWidth: 1, penStyle: 'dashed' });
 //is equivalent to
-store.mutations.setPenWidth(1);
-store.mutations.setPenStyle('dashed');
+store.setPenWidth(1);
+store.setPenStyle('dashed');
 ```
-In mutations, there is `assigns` method to set multiple fields at a time.
+In store, there is `assigns` method to set multiple fields at a time.
 It is useful if you want to update multiple values.
 
-There is no performance difference since reactive effects (i.e. rendering) are batched and executed in the next frame.
+There is no performance difference since reactive effects (i.e. rendering) are batched by React and executed in the next frame.
 
 ```ts
 const store = createStore<{theme: "light" | "dark"}>({theme: "light" })
 
 const ThemeSelector = () => {
-  const { theme } = store.snapshot;
-  const { setTheme } = store.mutations;
+  const { theme } = store.useSnapshot();
   return <div>
     <IconButton
       icon="☀️"
       active={theme === 'light'}
-      onClick={() => setTheme("light")}
+      onClick={() => store.setTheme("light")}
     />
     <IconButton
       icon="🌙"
       active={theme === 'dark'}
-      onClick={() => setTheme("dark")}
+      onClick={() => store.setTheme("dark")}
     />
   </div>
 }
@@ -126,18 +136,17 @@ const store = createStore<{textSize: number, bgColor: string}>({
 })
 
 const BookReaderSettings = () => {
-  const snap = store.snapshot;
-  const mut = store.mutations;
+  const snap = store.useSnapshot();;
   return <div>
     <Slider
       value={snap.textSize}
-      onChange={mut.setTextSize}
+      onChange={store.setTextSize}
       min={10}
       max={20}
     />
     <ColorInput
       value={snap.bgColor}
-      onChange={mut.setBgColor}
+      onChange={store.setBgColor}
     />
   </div>
 }
@@ -151,60 +160,27 @@ const store = createStore({ name: "Mike", age: 20 });
 
 //wrong code
 const Component = () => {
-  const snap = store.snapshot;
+  const snap = store.useSnapshot();;
   if(snap.age < 20) return; //bad early return
   return <div>Hello Gentleman, {snap.name}</div>
 }
 
 //working code
 const Component = () => {
-  const { age, name }  = store.snapshot;
+  const { age, name }  = store.useSnapshot();;
   if(age < 20) return;  //no problem
   return <div>Hello Gentleman, {name}</div>
 }
 ```
-Each member of the snapshot object is a getter and it calls a hooks (`useSyncExternalStore`) internally.
+Each member of the snapshot object is a getter and it calls a hooks internally.
 
 Since a component must have the same hooks count for each render, non-destructive assign and early return are a bad combination.
 
-The snapshot should be destructured if you have an early return.
-
-## Other Signal functionalities
-```ts
-const store = createStore({ count: 0 });
-
-effect(() => {
-  const count = store.state.count;
-  console.log("Effect:", count);
-});
-
-store.mutations.setCount((prev) => prev + 1);
-
-const doubled = computed(() => {
-  const cnt = store.state.count;
-  console.log("computing for:", cnt);
-  return cnt * 2;
-});
-console.log("Doubled:", doubled.value);
-```
-There are two `effect()` and `computed()` helper functions intended to be used in non-component context.
-
-`effect()` tracks the referred state changes in the callback and is automatically re-evaluated when the tracked values change.
-
-`computed()` is used for caching the computation result, returning a derived signal. It is re-evaluated when tracked values change.
-
-## References
-- [valtio](https://github.com/pmndrs/valtio)
-- [@preact/signals-react](https://github.com/preactjs/signals)
-
-`snap-store` is highly influenced by these libraries.
-
-Compared to `valtio`, this library provides a similar design of global store but it doesn't use proxies. Also the mutations are applied by the methods not by assignment.
-
-Compared to `@preact/signals-react`, although the mechanism of the signal is similar, this library is aimed to supply an opinionated store system whereas `@preact/signals` provides the basic primitive signal functions.
+The snapshot object should be destructured if you have an early return.
 
 ## License
 
 MIT License
 
 
+

package/dist/esm/helper.d.ts

@@ -0,0 +1,2 @@
+export declare function capitalizeFirstLetter(text: string): string;
+//# sourceMappingURL=helper.d.ts.map

package/dist/esm/helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../src/helper.ts"],"names":[],"mappings":"AAAA,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,UAEjD"}

package/dist/esm/helper.js

@@ -0,0 +1,4 @@
+export function capitalizeFirstLetter(text) {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}
+//# sourceMappingURL=helper.js.map

package/dist/esm/helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","sourceRoot":"","sources":["../../src/helper.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,qBAAqB,CAAC,IAAY;IAChD,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACtD,CAAC"}

package/dist/esm/index.d.ts

@@ -1,5 +1,3 @@
-export * from "./effects";
-export * from "./signal";
 export * from "./store";
 export * from "./types";
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/esm/index.js

@@ -1,5 +1,3 @@
-export * from "./effects";
-export * from "./signal";
 export * from "./store";
 export * from "./types";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/esm/store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../src/store.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,YAAY,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAmDvE"}
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../src/store.ts"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,YAAY,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAwFvE"}

package/dist/esm/store.js

@@ -1,48 +1,78 @@
 import { produce } from "immer";
-import { capitalizeFirstLetter } from "./helpers";
-import { createSignal } from "./signal";
+import { useEffect, useId, useMemo, useState } from "react";
+import { capitalizeFirstLetter } from "./helper";
 export function createStore(initialState) {
-    const stateGetters = {};
-    const snapshotGetters = {};
+    const hub = {};
+    const state = initialState;
     const mutations = {};
-    const signals = {};
-    for (const key in initialState) {
-        const initialValue = initialState[key];
-        const signal = createSignal(initialValue);
-        Object.defineProperty(stateGetters, key, {
-            get() {
-                return signal.value;
-            },
-        });
-        Object.defineProperty(snapshotGetters, key, {
-            get() {
-                return signal.use();
-            },
-        });
-        mutations[`set${capitalizeFirstLetter(key)}`] = signal.setValue;
-        mutations[`produce${capitalizeFirstLetter(key)}`] = (fn) => {
-            signal.setValue((draft) => produce(draft, fn));
+    const _mutations = mutations;
+    for (const _key in initialState) {
+        const key = _key;
+        const setValue = (arg) => {
+            let value;
+            if (typeof arg === "function") {
+                value = arg(state[key]);
+            }
+            else {
+                value = arg;
+            }
+            state[key] = value;
+            for (const hubKey in hub) {
+                const entry = hub[hubKey];
+                if (entry.dependentFieldKeys.has(key)) {
+                    entry.refreshView();
+                }
+            }
         };
-        mutations[`patch${capitalizeFirstLetter(key)}`] = (attrs) => {
-            signal.setValue((prev) => ({ ...prev, ...attrs }));
+        const suffix = capitalizeFirstLetter(key);
+        _mutations[`set${suffix}`] = setValue;
+        _mutations[`produce${suffix}`] = (fn) => {
+            setValue((draft) => produce(draft, fn));
+        };
+        _mutations[`patch${suffix}`] = (attrs) => {
+            setValue((prev) => ({ ...prev, ...attrs }));
         };
-        signals[key] = signal;
     }
-    Object.assign(mutations, {
-        assigns: (attrs) => {
-            for (const key in attrs) {
-                const value = attrs[key];
-                const setValue = mutations[`set${capitalizeFirstLetter(key)}`];
-                setValue?.(value);
-            }
-        },
-    });
+    mutations.assigns = (attrs) => {
+        for (const key in attrs) {
+            const suffix = capitalizeFirstLetter(key);
+            const value = attrs[key];
+            const setValue = _mutations[`set${suffix}`];
+            setValue?.(value);
+        }
+    };
+    const createHookEntry = (hookId, refreshView) => {
+        hub[hookId] = { dependentFieldKeys: new Set(), refreshView };
+        const getterObject = {};
+        for (const key in initialState) {
+            Object.defineProperty(getterObject, key, {
+                get() {
+                    hub[hookId].dependentFieldKeys.add(key);
+                    return state[key];
+                },
+            });
+        }
+        const cleanup = () => {
+            delete hub[hookId];
+        };
+        return { getterObject, cleanup };
+    };
+    const useSnapshot = () => {
+        const hookId = useId();
+        const [, setRenderObject] = useState({});
+        const hookEntry = useMemo(() => createHookEntry(hookId, () => setRenderObject({})), [hookId]);
+        useEffect(() => {
+            return hookEntry.cleanup;
+        }, [hookEntry]);
+        return hookEntry.getterObject;
+    };
     return {
-        state: stateGetters,
-        snapshot: snapshotGetters,
-        useSnapshot: () => snapshotGetters,
-        mutations,
-        signals,
+        state,
+        useSnapshot,
+        get snapshot() {
+            return useSnapshot();
+        },
+        ...mutations,
     };
 }
 //# sourceMappingURL=store.js.map

package/dist/esm/store.js.map

@@ -1 +1 @@
-{"version":3,"file":"store.js","sourceRoot":"","sources":["../../src/store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,MAAM,UAAU,WAAW,CAAmB,YAAe;IAE3D,MAAM,YAAY,GAAQ,EAAE,CAAC;IAC7B,MAAM,eAAe,GAAQ,EAAE,CAAC;IAChC,MAAM,SAAS,GAAQ,EAAE,CAAC;IAC1B,MAAM,OAAO,GAAQ,EAAE,CAAC;IAExB,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE,CAAC;QAC/B,MAAM,YAAY,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QACvC,MAAM,MAAM,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;QAE1C,MAAM,CAAC,cAAc,CAAC,YAAY,EAAE,GAAG,EAAE;YACvC,GAAG;gBACD,OAAO,MAAM,CAAC,KAAK,CAAC;YACtB,CAAC;SACF,CAAC,CAAC;QACH,MAAM,CAAC,cAAc,CAAC,eAAe,EAAE,GAAG,EAAE;YAC1C,GAAG;gBACD,OAAO,MAAM,CAAC,GAAG,EAAE,CAAC;YACtB,CAAC;SACF,CAAC,CAAC;QACH,SAAS,CAAC,MAAM,qBAAqB,CAAC,GAAa,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC;QAC1E,SAAS,CAAC,UAAU,qBAAqB,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAClD,EAAyB,EACzB,EAAE;YACF,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;QACjD,CAAC,CAAC;QACF,SAAS,CAAC,QAAQ,qBAAqB,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAChD,KAAoB,EACpB,EAAE;YACF,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC;QACrD,CAAC,CAAC;QACF,OAAO,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IACxB,CAAC;IACD,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;QACvB,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;YAC7B,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE,CAAC;gBACxB,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;gBACzB,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,qBAAqB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBAC/D,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;QACH,CAAC;KACF,CAAC,CAAC;IAEH,OAAO;QACL,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,eAAe;QACzB,WAAW,EAAE,GAAG,EAAE,CAAC,eAAe;QAClC,SAAS;QACT,OAAO;KACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../../src/store.ts"],"names":[],"mappings":"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"}

package/dist/esm/types.d.ts

@@ -1,34 +1,15 @@
-export type SignalListener = () => void;
-export type SetterPayload<T> = T | ((prev: T) => T);
-export type Signal<T> = {
-    readonly value: T;
-    setValue(arg: SetterPayload<T>): void;
-    subscribe(listener: SignalListener): () => void;
-    use(): T;
-};
-export type ComputedSignal<T> = {
-    readonly value: T;
-    subscribe(listener: SignalListener): () => void;
-    readonly snapshotValue: T;
-    use(): T;
-    cleanup(): void;
-};
 export type Mutations<T> = {
     [K in keyof T as `set${Capitalize<K & string>}`]: (value: T[K] | ((prev: T[K]) => T[K])) => void;
 } & {
     [K in keyof T as `produce${Capitalize<K & string>}`]: (fn: (draft: T[K]) => void) => void;
 } & {
-    [K in keyof T as `patch${Capitalize<K & string>}`]: (attrs: Partial<T[K]>) => void;
+    [K in keyof T as `patch${Capitalize<K & string>}`]: (attrs: Partial<Extract<T[K], object>>) => void;
 } & {
     assigns: (attrs: Partial<T>) => void;
 };
 export type Store<T extends object> = {
     state: T;
-    snapshot: T;
     useSnapshot(): T;
-    mutations: Mutations<T>;
-    signals: {
-        [K in keyof T]: Signal<T[K]>;
-    };
-};
+    snapshot: T;
+} & Mutations<T>;
 //# sourceMappingURL=types.d.ts.map

package/dist/esm/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC;AAExC,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AAGpD,MAAM,MAAM,MAAM,CAAC,CAAC,IAAI;IACtB,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;IAClB,QAAQ,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACtC,SAAS,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,IAAI,CAAC;IAChD,GAAG,IAAI,CAAC,CAAC;CACV,CAAC;AAGF,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;IAClB,SAAS,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,IAAI,CAAC;IAChD,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;IAC1B,GAAG,IAAI,CAAC,CAAC;IACT,OAAO,IAAI,IAAI,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,IAAI,MAAM,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,CAChD,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KACjC,IAAI;CACV,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,IAAI,UAAU,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,CACpD,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,KACtB,IAAI;CACV,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,IAAI,QAAQ,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,CAClD,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KACjB,IAAI;CACV,GAAG;IACF,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI;IACpC,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,CAAC;IACZ,WAAW,IAAI,CAAC,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACxB,OAAO,EAAE;SAAG,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KAAE,CAAC;CAC3C,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,IAAI,MAAM,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,CAChD,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KACjC,IAAI;CACV,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,IAAI,UAAU,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,CACpD,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,KACtB,IAAI;CACV,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,IAAI,QAAQ,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,CAClD,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,KAClC,IAAI;CACV,GAAG;IACF,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI;IACpC,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,IAAI,CAAC,CAAC;IACjB,QAAQ,EAAE,CAAC,CAAC;CACb,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snap-store",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "An easy-to-use global state management library for React.",
   "author": "yahiro",
   "license": "MIT",
@@ -53,4 +53,4 @@
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}