pocket-state 0.0.3 → 0.0.5

package/README

@@ -0,0 +1,126 @@
+# Pocket State
+
+A lightweight state management library for React, built on top of `useSyncExternalStore`.  
+Designed to be **tiny, fast, and predictable**
+
+---
+
+## Installation
+
+Install with your favorite package manager:
+
+```bash
+# npm
+npm install pocket-state
+
+# yarn
+yarn add pocket-state
+
+```
+
+---
+
+## API
+
+### `createStore<T>(initialState: T, middlewares?: Middleware<T>[])`
+
+Create a new store.
+
+```ts
+import {createStore} from 'pocket-state';
+
+type Counter = {count: number};
+
+const counterStore = createStore<Counter>({count: 0});
+```
+
+---
+
+### `useStore(store, selector?, equalityFn?)`
+
+Subscribe to store state inside a React component.  
+It only re-renders when the selected slice changes.
+
+```tsx
+import {useStore} from 'pocket-state';
+import {counterStore} from './counterStore';
+
+function CounterDisplay() {
+  const count = useStore(counterStore, s => s.count);
+  return <Text>Count: {count}</Text>;
+}
+```
+
+---
+
+### `useShallowStore(store, selector)`
+
+Like `useStore` but uses shallow equality. Useful when selecting an object.
+
+```tsx
+import {useShallowStore} from 'pocket-state';
+
+function Info() {
+  const {count, active} = useShallowStore(counterStore, s => ({
+    count: s.count,
+    active: s.active,
+  }));
+  return (
+    <Text>
+      {count} {active ? 'ON' : 'OFF'}
+    </Text>
+  );
+}
+```
+
+---
+
+### Store API
+
+Each store exposes:
+
+- `getValue()` → current state
+- `setValue(updater)` → update state (`updater` can be partial or producer)
+- `reset(nextState?)` → reset to initial or custom state
+- `subscribe(listener)` → subscribe to all changes
+- `getNumberOfSubscriber()` → count active subscribers
+
+Example:
+
+```ts
+counterStore.setValue(s => ({count: s.count + 1}));
+const state = counterStore.getValue();
+console.log(state.count); // → 1
+```
+
+---
+
+## Example
+
+```tsx
+import React from 'react';
+import {Text, Button, View} from 'react-native';
+import {createStore, useStore} from 'pocket-state';
+
+// Create store
+const counterStore = createStore({count: 0});
+
+export default function App() {
+  const count = useStore(counterStore, s => s.count);
+
+  return (
+    <View>
+      <Text>Count: {count}</Text>
+      <Button
+        title="Increment"
+        onPress={() => counterStore.setValue(s => ({count: s.count + 1}))}
+      />
+      <Button title="Reset" onPress={() => counterStore.reset()} />
+    </View>
+  );
+}
+```
+
+---
+
+🔥 That’s it — no boilerplate, no context providers.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pocket-state",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "tiny global store",
   "main": "src/index",
   "codegenConfig": {
@@ -10,5 +10,5 @@
   },
   "author": " <@kayda69> (nhh.tcp@gmail.com)",
   "license": "ISC",
-  "homepage": "#readme"
+  "homepage": "README"
 }

package/src/globalState/event.ts

@@ -78,4 +78,13 @@ export class EventEmitter implements IEventEmitter {
     this.events.clear();
     this.onceWrappers.clear();
   }
+
+  getNumberOfSubscriber(event?: string): number {
+    if (event) {
+      return this.events.get(event)?.size ?? 0;
+    }
+    let total = 0;
+    this.events.forEach(set => (total += set.size));
+    return total;
+  }
 }

package/src/globalState/hooks.ts

@@ -1,58 +1,30 @@
-// useStore.ts
-import {useCallback, useRef} from 'react';
-import {useSyncExternalStore} from 'react';
+import {useCallback, useRef, useSyncExternalStore} from 'react';
 import type {Store} from './type';
-import {shallow} from './shallowEqual';
-
-export function useStore<T>(store: Store<T>): T;
-export function useStore<T, S>(store: Store<T>, selector: (state: T) => S): S;
 
 export function useStore<T, S = T>(
   store: Store<T>,
   selector?: (state: T) => S,
-): T | S {
-  const subscribe = useCallback(
-    (onChange: () => void) =>
-      selector
-        ? store.subscribe(selector, () => onChange())
-        : store.subscribe(() => onChange()),
-    [store, selector],
-  );
-  const getSnapshot = useCallback(() => {
-    const s = store.getValue();
-    return selector ? selector(s) : (s as T);
-  }, [store, selector]);
-
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot) as T | S;
-}
-
-//shallow
-export function useShallowStore<T, S>(
-  store: Store<T>,
-  selector: (state: T) => S,
 ): S {
-  const selectorRef = useRef(selector);
-  selectorRef.current = selector;
-
-  const lastSliceRef = useRef<S>(selector(store.getValue()));
+  const sliceRef = useRef<S>(
+    selector ? selector(store.getValue()) : (store.getValue() as unknown as S),
+  );
 
-  const subscribe = (onChange: () => void) => {
-    return store.subscribe((nextState: T) => {
-      const nextSlice = selectorRef.current(nextState);
-      if (!shallow(lastSliceRef.current as any, nextSlice as any)) {
-        lastSliceRef.current = nextSlice;
-        onChange();
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      if (selector) {
+        return store.subscribe(selector, (nextSlice: S) => {
+          sliceRef.current = nextSlice;
+          onChange();
+        });
       }
-    });
-  };
-
-  const getSnapshot = () => {
-    const current = selectorRef.current(store.getValue());
-    if (!shallow(lastSliceRef.current as any, current as any)) {
-      lastSliceRef.current = current;
-    }
-    return lastSliceRef.current;
-  };
+      return store.subscribe((next: T) => {
+        sliceRef.current = next as unknown as S;
+        onChange();
+      });
+    },
+    [store, selector],
+  );
+  const getSnapshot = useCallback(() => sliceRef.current, []);
 
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }

package/src/globalState/store.ts

@@ -1,18 +1,19 @@
 // store.ts
-// import deepEqual from 'fast-deep-equal';
 import {IEventEmitter, Listener, Middleware, Store, UseStoreGet} from './type';
 import {EventEmitter} from './event';
 import {Draft, produce} from 'immer';
-// import {shallow} from './shallowEqual';
-import deepEqual from 'fast-deep-equal';
+import {shallow} from './shallowEqual';
+
 export function createStore<T>(
   initialState: T,
   middlewares: Middleware<T>[] = [],
+  equalityFn?: (a: any, b: any) => boolean,
 ): Store<T> {
   const emitter: IEventEmitter = new EventEmitter();
   let state = initialState;
 
-  // Coalesce emits trong cùng 1 microtask
+  const areEqual = equalityFn ?? shallow;
+
   let emitScheduled = false;
   const emitState = () => {
     if (emitScheduled) return;
@@ -25,13 +26,12 @@ export function createStore<T>(
 
   function baseSet(delta: Partial<T>) {
     const nextState = Array.isArray(state)
-      ? (delta as unknown as T) // với array: replace
-      : {...state, ...delta}; // với object: shallow merge
+      ? (delta as unknown as T)
+      : {...state, ...delta};
 
-    if (!deepEqual(state, nextState)) {
+    if (!areEqual(state, nextState)) {
       state = nextState;
 
-      // Dev guard: phát hiện mutate ngoài store
       if (process.env.NODE_ENV !== 'production') {
         try {
           Object.freeze(state as any);
@@ -61,22 +61,20 @@ export function createStore<T>(
     let wrapped: Listener<any>;
 
     if (typeof maybeListener === 'function') {
-      // subscribe(selector, listener)
       const selector: (s: T) => any = selectorOrListener;
       let prevSlice = selector(state);
       wrapped = (next: T) => {
         const slice = selector(next);
-        if (!deepEqual(slice, prevSlice)) {
+        if (!areEqual(slice, prevSlice)) {
           prevSlice = slice;
           maybeListener(slice);
         }
       };
     } else {
-      // subscribe(listener)
       const listener: Listener<T> = selectorOrListener;
       let prev = state;
       wrapped = (next: T) => {
-        if (!deepEqual(next, prev)) {
+        if (!areEqual(next, prev)) {
           prev = next;
           listener(next);
         }
@@ -84,10 +82,6 @@ export function createStore<T>(
     }
 
     emitter.on('state', wrapped);
-
-    // Lưu ý: KHÔNG gọi listener ngay khi subscribe
-    // (để tương thích useSyncExternalStore: initial snapshot lấy qua getSnapshot)
-
     return () => emitter.off('state', wrapped);
   }
 
@@ -111,7 +105,7 @@ export function createStore<T>(
   function setImmer(updater: (draft: Draft<T>) => void): void {
     try {
       const nextState = produce(state, updater);
-      if (deepEqual(state, nextState)) return;
+      if (areEqual(state, nextState)) return;
 
       if (Array.isArray(state)) {
         setFn(nextState as unknown as Partial<T>);
@@ -168,7 +162,7 @@ export function createStore<T>(
       }
     }
     const current = getValue();
-    if (!deepEqual(current, next)) {
+    if (!areEqual(current, next)) {
       setFn(next as unknown as Partial<T>);
     }
   }
@@ -184,7 +178,11 @@ export function createStore<T>(
   }
 
   function isDirty() {
-    return !deepEqual(state, initialState);
+    return !areEqual(state, initialState);
+  }
+
+  function getNumberOfSubscriber() {
+    return emitter.getNumberOfSubscriber();
   }
   return {
     getValue,
@@ -194,5 +192,6 @@ export function createStore<T>(
     reset,
     subscribe,
     isDirty,
+    getNumberOfSubscriber,
   };
 }

package/src/globalState/type.d.ts

@@ -97,6 +97,9 @@ export interface IEventEmitter {
 
   /** Remove all listeners for all events. */
   clear(): void;
+
+  /** Get number of subscribe */
+  getNumberOfSubscriber(event?: string): number;
 }
 
 /**
@@ -194,6 +197,9 @@ export interface Store<T> {
    * ```
    */
   isDirty(): boolean;
+
+  /** Get number of subscriber for current store */
+  getNumberOfSubscriber(): number;
 }
 
 /**