@thefoxieflow/signal-ctx 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SetStateAction, ReactNode } from 'react';
+
+type Store<T = any> = ReturnType<typeof createStore<T>>;
+type Subscriber = () => void;
+/**
+ * @description: create a signal with subscribe and update methods
+ */
+declare function createStore<T = Record<string, any>>(init: () => T): {
+    (): T;
+    subscribe(subscriber: Subscriber): () => boolean;
+    set(action: SetStateAction<T>): void;
+};
+declare const useSignal: <T extends object, Dest = T>(store: Store<T>, selector?: (state: T) => Dest) => Dest;
+declare const useSetSignal: <T extends object = any, Dest extends object = T>(store: Store<T>, selector?: (state: T) => Dest) => (action: SetStateAction<Dest>) => void;
+type StoreOption = {
+    storeName?: string;
+};
+declare function createCtx<T extends object>(init: () => T): {
+    <Dest = any>(selector: (state: T) => Dest, opt?: StoreOption): Dest;
+    provide: (opt?: {
+        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;
+    };
+};
+
+export { type Store, type StoreOption, type Subscriber, createCtx, useSetSignal, useSignal };

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SetStateAction, ReactNode } from 'react';
+
+type Store<T = any> = ReturnType<typeof createStore<T>>;
+type Subscriber = () => void;
+/**
+ * @description: create a signal with subscribe and update methods
+ */
+declare function createStore<T = Record<string, any>>(init: () => T): {
+    (): T;
+    subscribe(subscriber: Subscriber): () => boolean;
+    set(action: SetStateAction<T>): void;
+};
+declare const useSignal: <T extends object, Dest = T>(store: Store<T>, selector?: (state: T) => Dest) => Dest;
+declare const useSetSignal: <T extends object = any, Dest extends object = T>(store: Store<T>, selector?: (state: T) => Dest) => (action: SetStateAction<Dest>) => void;
+type StoreOption = {
+    storeName?: string;
+};
+declare function createCtx<T extends object>(init: () => T): {
+    <Dest = any>(selector: (state: T) => Dest, opt?: StoreOption): Dest;
+    provide: (opt?: {
+        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;
+    };
+};
+
+export { type Store, type StoreOption, type Subscriber, createCtx, useSetSignal, useSignal };

package/dist/index.js

@@ -0,0 +1,120 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  createCtx: () => createCtx,
+  useSetSignal: () => useSetSignal,
+  useSignal: () => useSignal
+});
+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;
+  };
+  get.subscribe = (subscriber) => {
+    subscribers.add(subscriber);
+    const unsubscribe = () => subscribers.delete(subscriber);
+    return unsubscribe;
+  };
+  get.set = (action) => {
+    val = applyAction(val, action);
+    subscribers.forEach((subscriber) => subscriber());
+  };
+  return get;
+}
+var useSignal = (store, selector) => {
+  const getSnapShot = () => selector ? selector(store()) : store();
+  const use = (0, import_react.useSyncExternalStore)(store.subscribe, getSnapShot, getSnapShot);
+  return use;
+};
+var useSetSignal = (store, selector) => {
+  const setter = (action) => {
+    const current = store();
+    const target = selector ? selector(current) : current;
+    applyAction(target, action);
+    store.set(current);
+  };
+  return setter;
+};
+function createCtx(init) {
+  const ctx = (0, import_react.createContext)(createStore(init));
+  const stores = /* @__PURE__ */ new Map();
+  const initStore = (name, init2) => {
+    if (!stores.has(name)) {
+      const store = createStore(init2);
+      stores.set(name, store);
+    }
+    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 (!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 use = (selector, opt) => {
+    const store = useStore(opt);
+    return useSignal(store, selector);
+  };
+  const useSetter = (selector, opt) => {
+    const store = useStore(opt);
+    return useSetSignal(store, selector);
+  };
+  use.provide = provide;
+  use.useSetter = useSetter;
+  use.useStore = useStore;
+  return use;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createCtx,
+  useSetSignal,
+  useSignal
+});

package/dist/index.mjs

@@ -0,0 +1,99 @@
+"use client";
+
+// src/index.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  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;
+  };
+  get.subscribe = (subscriber) => {
+    subscribers.add(subscriber);
+    const unsubscribe = () => subscribers.delete(subscriber);
+    return unsubscribe;
+  };
+  get.set = (action) => {
+    val = applyAction(val, action);
+    subscribers.forEach((subscriber) => subscriber());
+  };
+  return get;
+}
+var useSignal = (store, selector) => {
+  const getSnapShot = () => selector ? selector(store()) : store();
+  const use = useSyncExternalStore(store.subscribe, getSnapShot, getSnapShot);
+  return use;
+};
+var useSetSignal = (store, selector) => {
+  const setter = (action) => {
+    const current = store();
+    const target = selector ? selector(current) : current;
+    applyAction(target, action);
+    store.set(current);
+  };
+  return setter;
+};
+function createCtx(init) {
+  const ctx = createContext(createStore(init));
+  const stores = /* @__PURE__ */ new Map();
+  const initStore = (name, init2) => {
+    if (!stores.has(name)) {
+      const store = createStore(init2);
+      stores.set(name, store);
+    }
+    return stores.get(name);
+  };
+  const useStore = (opt) => {
+    const store = useContext(ctx);
+    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 use = (selector, opt) => {
+    const store = useStore(opt);
+    return useSignal(store, selector);
+  };
+  const useSetter = (selector, opt) => {
+    const store = useStore(opt);
+    return useSetSignal(store, selector);
+  };
+  use.provide = provide;
+  use.useSetter = useSetter;
+  use.useStore = useStore;
+  return use;
+}
+export {
+  createCtx,
+  useSetSignal,
+  useSignal
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@thefoxieflow/signal-ctx",
+  "version": "0.1.0",
+  "description": "Lightweight signal-based React context store",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --out-dir dist",
+    "prepublishOnly": "npm run build",
+    "publish": "npm publish"
+  },
+  "repository": {
+    "url": "https://github.com/foxie-io/thefoxieflow/tree/main/signal-ctx"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.8",
+    "react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "react",
+    "state",
+    "store",
+    "context",
+    "signal"
+  ]
+}