@thefoxieflow/signalctx 0.0.1 → 0.1.1

package/README.md

@@ -1,4 +1,4 @@
-# signal-ctx
+# signalctx
 
 A tiny, signal-based state utility for React that **solves the `useContext` re-render problem** using
 **`useSyncExternalStore`**.
@@ -10,7 +10,7 @@ If you’ve ever had this issue:
 // updating count re-renders book components 😡
 ```
 
-`signal-ctx` is designed specifically to fix that.
+`signalctx` is designed specifically to fix that.
 
 ---
 
@@ -57,7 +57,7 @@ So only the components that *actually use* the changed data re-render.
 ## 📦 Installation
 
 ```bash
-npm install @thefoxieflow/signal-ctx
+npm install @thefoxieflow/signalctx
 ```
 
 > **Peer dependency:** React 18+
@@ -100,12 +100,12 @@ type Store<T> = {
 
 ### `createStore(()=>{})`
 
-### `useStoreValue(store, selector?)`
+### `useValue(store, selector?)`
 
 Subscribe to a signal.
 
 ```tsx
-const count = useStoreValue(store, s => s.count)
+const count = useValue(store, s => s.count)
 ```
 
 * Uses `useSyncExternalStore`
@@ -114,12 +114,12 @@ const count = useStoreValue(store, s => s.count)
 
 ---
 
-### `useSetStore(store, selector?)`
+### `useSet(store, selector?)`
 
 Returns a setter function.
 
 ```ts
-const set = useSetStore(store)
+const set = useSet(store)
 
 set(prev => ({ ...prev, count: prev.count + 1 }))
 ```
@@ -128,7 +128,7 @@ Scoped update:
 
 ```ts
 // book must be object for selector
-const setBook = useSetSignal(store, s => s.book)
+const setBook = useSet(store, s => s.book)
 
 
 // put: update an object
@@ -219,7 +219,7 @@ function Book() {
 
 ```tsx
 function Increment() {
-  const set = useStore.useSetter()
+  const set = useStore.useSet()
 
   return (
     <button onClick={() =>
@@ -308,7 +308,7 @@ function AppB(){
   const storeABook = useStore(s => s.book,{ storeName :"storeA" })
 
   // same apply to setter
-  const setBookStoreA = useStore.useSetter((s)=>s.book, {storeName : "storeA"})
+  const setBookStoreA = useStore.useSet((s)=>s.book, {storeName : "storeA"})
 
   const handleClick = (text)=>{
     setCountStoreA((s) => {
@@ -327,7 +327,7 @@ Each store is independent.
 
 ## 🌐 Server-Side Rendering (SSR)
 
-`signal-ctx` is SSR-safe.
+`Signal Ctx` is SSR-safe.
 
 * Uses `useSyncExternalStore`
 * Identical snapshot logic on server & client
@@ -368,7 +368,7 @@ MIT
 
 ## ⭐ Philosophy
 
-`signal-ctx` is intentionally small.
+`signalctx` is intentionally small.
 
 It favors:
 
@@ -376,4 +376,4 @@ It favors:
 * Predictable updates
 * Minimal abstraction
 
-If you understand React, you understand `signal-ctx`.
+If you understand React, you understand `signalctx`.

package/dist/index.d.mts

@@ -1,35 +1,36 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { SetStateAction, ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 
-type Store<T = any> = ReturnType<typeof createStore<T>>;
+type SetAction<T> = T | ((prev: T) => void);
 type Subscriber = () => void;
-/**
- * @description: create a signal with subscribe and update methods
- */
-declare function createStore<T = Record<string, any>>(init: () => T): {
+type Signal<T> = {
     (): T;
-    subscribe(subscriber: Subscriber): () => boolean;
-    set(action: SetStateAction<T>): void;
+    on: (sub: Subscriber) => () => void;
+    notify: () => void;
+    reset: () => void;
+    set: (action: SetAction<T>) => void;
+};
+type Store<T> = {
+    (): T;
+    on: (sub: Subscriber) => () => void;
+    reset: () => void;
+    set: (action: SetAction<T>) => void;
+    $: Signal<T>;
 };
-declare const useStoreValue: <T extends object, Dest = T>(store: Store<T>, selector?: (state: T) => Dest) => Dest;
-declare const useSetStore: <T extends object = any, Dest extends object = T>(store: Store<T>, selector?: (state: T) => Dest) => (action: SetStateAction<Dest>) => void;
 type StoreOption = {
     storeName?: string;
 };
+declare const newStore: <T extends Record<string, any>>(init: () => T) => Store<T>;
+declare const useValue: <T extends object, Dest = T>(store: Store<T>, selector?: (state: T) => Dest) => Dest;
+declare const useSet: <T extends object = any, Dest extends object = T>(store: Store<T>, selector?: (state: T) => Dest) => (action: SetAction<Dest>) => void;
 declare function createCtx<T extends object>(init: () => T): {
     <Dest = any>(selector: (state: T) => Dest, opt?: StoreOption): Dest;
-    provide: (opt?: {
+    Provider: ({ children, value, storeName, }: PropsWithChildren<{
         value?: T;
         storeName?: string;
-    }) => ({ children }: {
-        children: ReactNode;
-    }) => react_jsx_runtime.JSX.Element;
-    useSetter: <Dest extends object = T>(selector?: (state: T) => Dest, opt?: StoreOption) => (action: SetStateAction<Dest>) => void;
-    useStore: (opt?: StoreOption) => {
-        (): T;
-        subscribe(subscriber: Subscriber): () => boolean;
-        set(action: SetStateAction<T>): void;
-    };
+    }>) => react_jsx_runtime.JSX.Element;
+    useSet: <Dest extends object = T>(selector?: (state: T) => Dest, opt?: StoreOption) => (action: SetAction<Dest>) => void;
+    useStore: (opt?: StoreOption) => Store<T>;
 };
 
-export { type Store, type StoreOption, type Subscriber, createCtx, useSetStore, useStoreValue };
+export { type SetAction, type Signal, type Store, type Subscriber, createCtx, newStore, useSet, useValue };

package/dist/index.d.ts

@@ -1,35 +1,36 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { SetStateAction, ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 
-type Store<T = any> = ReturnType<typeof createStore<T>>;
+type SetAction<T> = T | ((prev: T) => void);
 type Subscriber = () => void;
-/**
- * @description: create a signal with subscribe and update methods
- */
-declare function createStore<T = Record<string, any>>(init: () => T): {
+type Signal<T> = {
     (): T;
-    subscribe(subscriber: Subscriber): () => boolean;
-    set(action: SetStateAction<T>): void;
+    on: (sub: Subscriber) => () => void;
+    notify: () => void;
+    reset: () => void;
+    set: (action: SetAction<T>) => void;
+};
+type Store<T> = {
+    (): T;
+    on: (sub: Subscriber) => () => void;
+    reset: () => void;
+    set: (action: SetAction<T>) => void;
+    $: Signal<T>;
 };
-declare const useStoreValue: <T extends object, Dest = T>(store: Store<T>, selector?: (state: T) => Dest) => Dest;
-declare const useSetStore: <T extends object = any, Dest extends object = T>(store: Store<T>, selector?: (state: T) => Dest) => (action: SetStateAction<Dest>) => void;
 type StoreOption = {
     storeName?: string;
 };
+declare const newStore: <T extends Record<string, any>>(init: () => T) => Store<T>;
+declare const useValue: <T extends object, Dest = T>(store: Store<T>, selector?: (state: T) => Dest) => Dest;
+declare const useSet: <T extends object = any, Dest extends object = T>(store: Store<T>, selector?: (state: T) => Dest) => (action: SetAction<Dest>) => void;
 declare function createCtx<T extends object>(init: () => T): {
     <Dest = any>(selector: (state: T) => Dest, opt?: StoreOption): Dest;
-    provide: (opt?: {
+    Provider: ({ children, value, storeName, }: PropsWithChildren<{
         value?: T;
         storeName?: string;
-    }) => ({ children }: {
-        children: ReactNode;
-    }) => react_jsx_runtime.JSX.Element;
-    useSetter: <Dest extends object = T>(selector?: (state: T) => Dest, opt?: StoreOption) => (action: SetStateAction<Dest>) => void;
-    useStore: (opt?: StoreOption) => {
-        (): T;
-        subscribe(subscriber: Subscriber): () => boolean;
-        set(action: SetStateAction<T>): void;
-    };
+    }>) => react_jsx_runtime.JSX.Element;
+    useSet: <Dest extends object = T>(selector?: (state: T) => Dest, opt?: StoreOption) => (action: SetAction<Dest>) => void;
+    useStore: (opt?: StoreOption) => Store<T>;
 };
 
-export { type Store, type StoreOption, type Subscriber, createCtx, useSetStore, useStoreValue };
+export { type SetAction, type Signal, type Store, type Subscriber, createCtx, newStore, useSet, useValue };

package/dist/index.js

@@ -21,99 +21,127 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   createCtx: () => createCtx,
-  useSetStore: () => useSetStore,
-  useStoreValue: () => useStoreValue
+  newStore: () => newStore,
+  useSet: () => useSet,
+  useValue: () => useValue
 });
 module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var applyAction = (target, action) => {
-  return typeof action === "function" ? action(target) : action;
-};
-function createStore(init) {
-  let val;
-  let isInit = false;
-  const subscribers = /* @__PURE__ */ new Set();
-  const get = () => {
-    if (!isInit) {
-      val = init();
-      isInit = true;
-    }
-    return val;
+var newSignal = (init) => {
+  let ref;
+  const subs = /* @__PURE__ */ new Set();
+  const store = () => ref || (ref = init());
+  store.set = (action) => {
+    act(store(), action);
   };
-  get.subscribe = (subscriber) => {
-    subscribers.add(subscriber);
-    const unsubscribe = () => subscribers.delete(subscriber);
-    return unsubscribe;
+  store.reset = () => {
+    ref = init();
   };
-  get.set = (action) => {
-    val = applyAction(val, action);
-    subscribers.forEach((subscriber) => subscriber());
+  store.notify = () => {
+    subs.forEach((sub) => sub());
   };
-  return get;
-}
-var useStoreValue = (store, selector) => {
-  const getSnapShot = () => selector ? selector(store()) : store();
-  const use = (0, import_react.useSyncExternalStore)(store.subscribe, getSnapShot, getSnapShot);
-  return use;
+  store.on = (sub) => {
+    subs.add(sub);
+    return () => subs.delete(sub);
+  };
+  return store;
+};
+var replaceIfDiff = (target, newVal) => {
+  if (Object.is(target, newVal)) return;
+  Object.keys(target).forEach((k) => delete target[k]);
+  Object.keys(newVal).forEach((k) => target[k] = newVal[k]);
+};
+var act = (target, action) => {
+  if (typeof action === "function") {
+    action(target);
+  } else {
+    replaceIfDiff(target, action);
+  }
+};
+var newStore = (init) => {
+  const $ = newSignal(init);
+  const store = () => $();
+  store.$ = $;
+  store.on = $.on;
+  store.reset = () => {
+    $.reset();
+    $.notify();
+  };
+  store.set = (action) => {
+    $.set(action);
+    $.notify();
+  };
+  return store;
+};
+var useValue = (store, selector) => {
+  const get = () => selector ? selector(store()) : store();
+  return (0, import_react.useSyncExternalStore)(store.on, get, get);
 };
-var useSetStore = (store, selector) => {
+var useSet = (store, selector) => {
   const setter = (action) => {
-    const current = store();
-    const target = selector ? selector(current) : current;
-    applyAction(target, action);
-    store.set(current);
+    const ref = store.$();
+    const targetRef = selector ? selector(ref) : ref;
+    act(targetRef, action);
+    store.$.notify();
   };
   return setter;
 };
 function createCtx(init) {
-  const ctx = (0, import_react.createContext)(createStore(init));
+  const ctx = (0, import_react.createContext)(null);
   const stores = /* @__PURE__ */ new Map();
-  const initStore = (name, init2) => {
+  const initStore = (init2, name) => {
+    if (!name) return newStore(init2);
     if (!stores.has(name)) {
-      const store = createStore(init2);
-      stores.set(name, store);
+      stores.set(name, newStore(init2));
     }
     return stores.get(name);
   };
   const useStore = (opt) => {
     const store = (0, import_react.useContext)(ctx);
-    if (opt?.storeName && stores.has(opt.storeName)) {
-      return stores.get(opt.storeName);
-    }
+    if (opt?.storeName && stores.has(opt.storeName)) return stores.get(opt.storeName);
     if (!store) throw new Error("useCtx must be used within a Provider");
     return store;
   };
-  const provide = (opt = {}) => {
-    const value = opt.value || init();
-    const storeName = opt.storeName || "ctx__store";
-    const Provider = ({ children }) => {
-      const store = initStore(storeName, () => value);
-      (0, import_react.useEffect)(() => {
-        return () => {
-          stores.delete(storeName);
-        };
-      }, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ctx.Provider, { value: store, children });
-    };
-    return Provider;
+  const Provider = ({
+    children,
+    value,
+    storeName
+  }) => {
+    const [store, name] = (0, import_react.useMemo)(() => {
+      const storeInit = value ? () => value : init;
+      const store2 = initStore(storeInit, storeName);
+      return [store2, storeName];
+    }, [value, storeName]);
+    (0, import_react.useEffect)(
+      () => () => {
+        if (name) stores.delete(name);
+      },
+      [store, name]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ctx.Provider, { value: store, children: [
+      " ",
+      children,
+      " "
+    ] });
   };
-  const use = (selector, opt) => {
+  const useSelect = (selector, opt) => {
     const store = useStore(opt);
-    return useStoreValue(store, selector);
+    return useValue(store, selector);
   };
   const useSetter = (selector, opt) => {
     const store = useStore(opt);
-    return useSetStore(store, selector);
+    return useSet(store, selector);
   };
-  use.provide = provide;
-  use.useSetter = useSetter;
-  use.useStore = useStore;
-  return use;
+  useSelect.Provider = Provider;
+  useSelect.useSet = useSetter;
+  useSelect.useStore = useStore;
+  return useSelect;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createCtx,
-  useSetStore,
-  useStoreValue
+  newStore,
+  useSet,
+  useValue
 });

package/dist/index.mjs

@@ -3,95 +3,123 @@ import {
   createContext,
   useContext,
   useEffect,
+  useMemo,
   useSyncExternalStore
 } from "react";
-import { jsx } from "react/jsx-runtime";
-var applyAction = (target, action) => {
-  return typeof action === "function" ? action(target) : action;
-};
-function createStore(init) {
-  let val;
-  let isInit = false;
-  const subscribers = /* @__PURE__ */ new Set();
-  const get = () => {
-    if (!isInit) {
-      val = init();
-      isInit = true;
-    }
-    return val;
+import { jsxs } from "react/jsx-runtime";
+var newSignal = (init) => {
+  let ref;
+  const subs = /* @__PURE__ */ new Set();
+  const store = () => ref || (ref = init());
+  store.set = (action) => {
+    act(store(), action);
   };
-  get.subscribe = (subscriber) => {
-    subscribers.add(subscriber);
-    const unsubscribe = () => subscribers.delete(subscriber);
-    return unsubscribe;
+  store.reset = () => {
+    ref = init();
   };
-  get.set = (action) => {
-    val = applyAction(val, action);
-    subscribers.forEach((subscriber) => subscriber());
+  store.notify = () => {
+    subs.forEach((sub) => sub());
   };
-  return get;
-}
-var useStoreValue = (store, selector) => {
-  const getSnapShot = () => selector ? selector(store()) : store();
-  const use = useSyncExternalStore(store.subscribe, getSnapShot, getSnapShot);
-  return use;
+  store.on = (sub) => {
+    subs.add(sub);
+    return () => subs.delete(sub);
+  };
+  return store;
+};
+var replaceIfDiff = (target, newVal) => {
+  if (Object.is(target, newVal)) return;
+  Object.keys(target).forEach((k) => delete target[k]);
+  Object.keys(newVal).forEach((k) => target[k] = newVal[k]);
+};
+var act = (target, action) => {
+  if (typeof action === "function") {
+    action(target);
+  } else {
+    replaceIfDiff(target, action);
+  }
 };
-var useSetStore = (store, selector) => {
+var newStore = (init) => {
+  const $ = newSignal(init);
+  const store = () => $();
+  store.$ = $;
+  store.on = $.on;
+  store.reset = () => {
+    $.reset();
+    $.notify();
+  };
+  store.set = (action) => {
+    $.set(action);
+    $.notify();
+  };
+  return store;
+};
+var useValue = (store, selector) => {
+  const get = () => selector ? selector(store()) : store();
+  return useSyncExternalStore(store.on, get, get);
+};
+var useSet = (store, selector) => {
   const setter = (action) => {
-    const current = store();
-    const target = selector ? selector(current) : current;
-    applyAction(target, action);
-    store.set(current);
+    const ref = store.$();
+    const targetRef = selector ? selector(ref) : ref;
+    act(targetRef, action);
+    store.$.notify();
   };
   return setter;
 };
 function createCtx(init) {
-  const ctx = createContext(createStore(init));
+  const ctx = createContext(null);
   const stores = /* @__PURE__ */ new Map();
-  const initStore = (name, init2) => {
+  const initStore = (init2, name) => {
+    if (!name) return newStore(init2);
     if (!stores.has(name)) {
-      const store = createStore(init2);
-      stores.set(name, store);
+      stores.set(name, newStore(init2));
     }
     return stores.get(name);
   };
   const useStore = (opt) => {
     const store = useContext(ctx);
-    if (opt?.storeName && stores.has(opt.storeName)) {
-      return stores.get(opt.storeName);
-    }
+    if (opt?.storeName && stores.has(opt.storeName)) return stores.get(opt.storeName);
     if (!store) throw new Error("useCtx must be used within a Provider");
     return store;
   };
-  const provide = (opt = {}) => {
-    const value = opt.value || init();
-    const storeName = opt.storeName || "ctx__store";
-    const Provider = ({ children }) => {
-      const store = initStore(storeName, () => value);
-      useEffect(() => {
-        return () => {
-          stores.delete(storeName);
-        };
-      }, []);
-      return /* @__PURE__ */ jsx(ctx.Provider, { value: store, children });
-    };
-    return Provider;
+  const Provider = ({
+    children,
+    value,
+    storeName
+  }) => {
+    const [store, name] = useMemo(() => {
+      const storeInit = value ? () => value : init;
+      const store2 = initStore(storeInit, storeName);
+      return [store2, storeName];
+    }, [value, storeName]);
+    useEffect(
+      () => () => {
+        if (name) stores.delete(name);
+      },
+      [store, name]
+    );
+    return /* @__PURE__ */ jsxs(ctx.Provider, { value: store, children: [
+      " ",
+      children,
+      " "
+    ] });
   };
-  const use = (selector, opt) => {
+  const useSelect = (selector, opt) => {
     const store = useStore(opt);
-    return useStoreValue(store, selector);
+    return useValue(store, selector);
   };
   const useSetter = (selector, opt) => {
     const store = useStore(opt);
-    return useSetStore(store, selector);
+    return useSet(store, selector);
   };
-  use.provide = provide;
-  use.useSetter = useSetter;
-  use.useStore = useStore;
-  return use;
+  useSelect.Provider = Provider;
+  useSelect.useSet = useSetter;
+  useSelect.useStore = useStore;
+  return useSelect;
 }
 export {
   createCtx,
-  useSetStore,
-  useStoreValue
+  newStore,
+  useSet,
+  useValue
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thefoxieflow/signalctx",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "Lightweight signal-based React context store",
   "main": "dist/index.cjs",
   "module": "dist/index.js",