@thefoxieflow/signalctx 0.1.0 → 0.1.1

package/README.md

@@ -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)
 
-`signalctx` is SSR-safe.
+`Signal Ctx` is SSR-safe.
 
 * Uses `useSyncExternalStore`
 * Identical snapshot logic on server & client

package/dist/index.d.mts

@@ -1,49 +1,36 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 
-type SetStateAction<T> = T | ((prev: T) => T);
+type SetAction<T> = T | ((prev: T) => void);
 type Subscriber = () => void;
-/** for controlling store internal state without notifying subscribers
- * @function calling the store internal state reference
- * @method on subscribe to state changes
- * @method set update the state without notifying subscribers
- * @method reset reset the state to initial value without notifying subscribers
- * @method notify manually notify all subscribers
- */
-type InnerStore<T> = {
+type Signal<T> = {
     (): T;
     on: (sub: Subscriber) => () => void;
     notify: () => void;
     reset: () => void;
-    set: (action: SetStateAction<T>) => void;
+    set: (action: SetAction<T>) => void;
 };
-/**
- * @function calling the store returns a copy of the internal state
- * @method on subscribe to state changes
- * @method set update the state with notifying subscribers
- * @method reset reset the state to initial value with notifying subscribers
- * @property $ access to non-notifying methods
- */
 type Store<T> = {
     (): T;
     on: (sub: Subscriber) => () => void;
     reset: () => void;
-    set: (action: SetStateAction<T>) => void;
-    $: InnerStore<T>;
+    set: (action: SetAction<T>) => void;
+    $: Signal<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: SetStateAction<Dest>) => Dest;
 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 }: PropsWithChildren) => react_jsx_runtime.JSX.Element;
-    useSet: <Dest extends object = T>(selector?: (state: T) => Dest, opt?: StoreOption) => (action: SetStateAction<Dest>) => Dest;
+    }>) => 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 InnerStore, type SetStateAction, type Store, type Subscriber, createCtx, useSet, useValue };
+export { type SetAction, type Signal, type Store, type Subscriber, createCtx, newStore, useSet, useValue };

package/dist/index.d.ts

@@ -1,49 +1,36 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 
-type SetStateAction<T> = T | ((prev: T) => T);
+type SetAction<T> = T | ((prev: T) => void);
 type Subscriber = () => void;
-/** for controlling store internal state without notifying subscribers
- * @function calling the store internal state reference
- * @method on subscribe to state changes
- * @method set update the state without notifying subscribers
- * @method reset reset the state to initial value without notifying subscribers
- * @method notify manually notify all subscribers
- */
-type InnerStore<T> = {
+type Signal<T> = {
     (): T;
     on: (sub: Subscriber) => () => void;
     notify: () => void;
     reset: () => void;
-    set: (action: SetStateAction<T>) => void;
+    set: (action: SetAction<T>) => void;
 };
-/**
- * @function calling the store returns a copy of the internal state
- * @method on subscribe to state changes
- * @method set update the state with notifying subscribers
- * @method reset reset the state to initial value with notifying subscribers
- * @property $ access to non-notifying methods
- */
 type Store<T> = {
     (): T;
     on: (sub: Subscriber) => () => void;
     reset: () => void;
-    set: (action: SetStateAction<T>) => void;
-    $: InnerStore<T>;
+    set: (action: SetAction<T>) => void;
+    $: Signal<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: SetStateAction<Dest>) => Dest;
 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 }: PropsWithChildren) => react_jsx_runtime.JSX.Element;
-    useSet: <Dest extends object = T>(selector?: (state: T) => Dest, opt?: StoreOption) => (action: SetStateAction<Dest>) => Dest;
+    }>) => 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 InnerStore, type SetStateAction, type Store, type Subscriber, createCtx, useSet, useValue };
+export { type SetAction, type Signal, type Store, type Subscriber, createCtx, newStore, useSet, useValue };

package/dist/index.js

@@ -21,18 +21,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   createCtx: () => createCtx,
+  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 createInnerStore = (init) => {
+var newSignal = (init) => {
   let ref;
   const subs = /* @__PURE__ */ new Set();
   const store = () => ref || (ref = init());
   store.set = (action) => {
-    apply(store(), action);
+    act(store(), action);
   };
   store.reset = () => {
     ref = init();
@@ -46,23 +47,23 @@ var createInnerStore = (init) => {
   };
   return store;
 };
-var isFunction = (val) => typeof val === "function";
-var setTargetValue = (target, newVal) => {
-  if (Object.is(target, newVal)) return target;
+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]);
-  return target;
 };
-var apply = (target, action) => {
-  const val = isFunction(action) ? action(target) : action;
-  return setTargetValue(target, val);
+var act = (target, action) => {
+  if (typeof action === "function") {
+    action(target);
+  } else {
+    replaceIfDiff(target, action);
+  }
 };
-function createStore(init) {
-  const $ = createInnerStore(init);
-  const store = () => {
-    const ref = $();
-    return { ...ref };
-  };
+var newStore = (init) => {
+  const $ = newSignal(init);
+  const store = () => $();
+  store.$ = $;
+  store.on = $.on;
   store.reset = () => {
     $.reset();
     $.notify();
@@ -71,29 +72,29 @@ function createStore(init) {
     $.set(action);
     $.notify();
   };
-  store.on = $.on;
-  store.$ = $;
   return store;
-}
+};
 var useValue = (store, selector) => {
   const get = () => selector ? selector(store()) : store();
   return (0, import_react.useSyncExternalStore)(store.on, get, get);
 };
 var useSet = (store, selector) => {
   const setter = (action) => {
-    const current = store();
-    const target = selector ? selector(current) : current;
-    apply(target, action);
-    store.set(current);
-    return target;
+    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) => {
-    if (!stores.has(name)) stores.set(name, createStore(init2));
+  const initStore = (init2, name) => {
+    if (!name) return newStore(init2);
+    if (!stores.has(name)) {
+      stores.set(name, newStore(init2));
+    }
     return stores.get(name);
   };
   const useStore = (opt) => {
@@ -102,19 +103,29 @@ function createCtx(init) {
     if (!store) throw new Error("useCtx must be used within a Provider");
     return store;
   };
-  const provide = (opt = {}) => {
-    const storeInit = opt.value ? () => opt.value : init;
-    const storeName = opt.storeName || "ctx__store";
-    const Provider = ({ children }) => {
-      const store = initStore(storeName, storeInit);
-      (0, import_react.useEffect)(() => () => {
-        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 useValue(store, selector);
   };
@@ -122,14 +133,15 @@ function createCtx(init) {
     const store = useStore(opt);
     return useSet(store, selector);
   };
-  use.provide = provide;
-  use.useSet = 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,
+  newStore,
   useSet,
   useValue
 });

package/dist/index.mjs

@@ -3,15 +3,16 @@ import {
   createContext,
   useContext,
   useEffect,
+  useMemo,
   useSyncExternalStore
 } from "react";
-import { jsx } from "react/jsx-runtime";
-var createInnerStore = (init) => {
+import { jsxs } from "react/jsx-runtime";
+var newSignal = (init) => {
   let ref;
   const subs = /* @__PURE__ */ new Set();
   const store = () => ref || (ref = init());
   store.set = (action) => {
-    apply(store(), action);
+    act(store(), action);
   };
   store.reset = () => {
     ref = init();
@@ -25,23 +26,23 @@ var createInnerStore = (init) => {
   };
   return store;
 };
-var isFunction = (val) => typeof val === "function";
-var setTargetValue = (target, newVal) => {
-  if (Object.is(target, newVal)) return target;
+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]);
-  return target;
 };
-var apply = (target, action) => {
-  const val = isFunction(action) ? action(target) : action;
-  return setTargetValue(target, val);
+var act = (target, action) => {
+  if (typeof action === "function") {
+    action(target);
+  } else {
+    replaceIfDiff(target, action);
+  }
 };
-function createStore(init) {
-  const $ = createInnerStore(init);
-  const store = () => {
-    const ref = $();
-    return { ...ref };
-  };
+var newStore = (init) => {
+  const $ = newSignal(init);
+  const store = () => $();
+  store.$ = $;
+  store.on = $.on;
   store.reset = () => {
     $.reset();
     $.notify();
@@ -50,29 +51,29 @@ function createStore(init) {
     $.set(action);
     $.notify();
   };
-  store.on = $.on;
-  store.$ = $;
   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;
-    apply(target, action);
-    store.set(current);
-    return target;
+    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) => {
-    if (!stores.has(name)) stores.set(name, createStore(init2));
+  const initStore = (init2, name) => {
+    if (!name) return newStore(init2);
+    if (!stores.has(name)) {
+      stores.set(name, newStore(init2));
+    }
     return stores.get(name);
   };
   const useStore = (opt) => {
@@ -81,19 +82,29 @@ function createCtx(init) {
     if (!store) throw new Error("useCtx must be used within a Provider");
     return store;
   };
-  const provide = (opt = {}) => {
-    const storeInit = opt.value ? () => opt.value : init;
-    const storeName = opt.storeName || "ctx__store";
-    const Provider = ({ children }) => {
-      const store = initStore(storeName, storeInit);
-      useEffect(() => () => {
-        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 useValue(store, selector);
   };
@@ -101,13 +112,14 @@ function createCtx(init) {
     const store = useStore(opt);
     return useSet(store, selector);
   };
-  use.provide = provide;
-  use.useSet = useSetter;
-  use.useStore = useStore;
-  return use;
+  useSelect.Provider = Provider;
+  useSelect.useSet = useSetter;
+  useSelect.useStore = useStore;
+  return useSelect;
 }
 export {
   createCtx,
+  newStore,
   useSet,
   useValue
 };

package/package.json

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