react-usectx 1.0.7 → 1.0.8

package/README.md

@@ -45,6 +45,32 @@ const setMyContext = updateCtx("stateName");
 setMyContext({ name: "Rick Ross" });
 ```
 
+### useReducer
+
+```js
+import { useReducer } from "react-usectx";
+
+const fullName = useReducer("stateName", (data) => {
+  return `${data.firstName} ${data.lastName}`;
+});
+```
+
+## Params
+
+### stateName
+
+```js
+const myContextID = "MyUniqueIdentifier";
+
+useCtx(myContextID);
+```
+
+The stateName serves as a unique identifier for a shared state object. Internally, the state manager maintains a list of state entries, each associated with a distinct stateName.
+
+When any of the provided functions—useCtx, updateCtx, or getCtx—are invoked, the state manager checks whether a state object with the specified stateName already exists. If it does not, a new state entry is automatically created and initialized.
+
+This mechanism enables global state sharing across components. For example, calling getCtx("example-1") in one component will return the same state reference when called with "example-1" in any other component within the same document. This allows for seamless state synchronization across different parts of your application without the need for explicit context providers.
+
 ## Example
 
 ```js
@@ -77,3 +103,38 @@ function Title() {
   );
 }
 ```
+
+## Example with reducer
+
+```js
+function Page() {
+  const [title, setTitle] = useCtx("title");
+
+  return (
+    <div className="wrapper">
+      <form>
+        <label htmlFor="text">Enter text</label>
+        <input
+          type="text"
+          id="text"
+          onChange={(e) => setTitle(e.target.value)}
+        />
+      </form>
+      <Title></Title>
+      <p>{title}</p>
+    </div>
+  );
+}
+
+function Title() {
+  const reducedTitle: string = useReducer(
+    "title",
+    (title) => `Title is: ${title.toUpperCase()}`
+  );
+  return (
+    <h1>
+      <strong>{reducedTitle}</strong>
+    </h1>
+  );
+}
+```

package/context.js

@@ -0,0 +1,48 @@
+"use client";
+import { useSyncExternalStore } from "react";
+import { CreateContext } from "./create-context";
+const cache = {};
+const getInstance = (name) => {
+    if (!cache[name]) {
+        cache[name] = new CreateContext();
+    }
+    return cache[name];
+};
+export function updateCtx(name) {
+    const ctx = getInstance(name);
+    return ctx.commit.bind(ctx);
+}
+export function getCtx(name) {
+    const context = getInstance(name);
+    const subscription = (callback) => {
+        context.subscribe(callback);
+        return () => context.unsubscribe(callback);
+    };
+    return useSyncExternalStore(subscription, context.getState.bind(context), context.getState.bind(context));
+}
+export function useCtx(name) {
+    return [getCtx(name), updateCtx(name)];
+}
+const reducerCache = {};
+export function useReducer(name, modiFier, useCache = true) {
+    if (!reducerCache[name]) {
+        reducerCache[name] = new WeakMap();
+    }
+    const context = getInstance(name);
+    const _getState = context.getState.bind(context);
+    const getState = () => {
+        const state = _getState();
+        const cache = reducerCache[name].get(state);
+        if (cache && useCache) {
+            return cache;
+        }
+        const res = modiFier(state);
+        reducerCache[name].set(state, res);
+        return res;
+    };
+    const subscription = (callback) => {
+        context.subscribe(callback);
+        return () => context.unsubscribe(callback);
+    };
+    return useSyncExternalStore(subscription, getState, getState);
+}

package/create-context.js

@@ -0,0 +1,23 @@
+export class CreateContext {
+    #eventHandlers = [];
+    #state = null;
+    subscribe(handler) {
+        this.#eventHandlers.push(handler);
+    }
+    unsubscribe(handler) {
+        const index = this.#eventHandlers.indexOf(handler);
+        if (index !== -1) {
+            this.#eventHandlers.splice(index, 1);
+        }
+    }
+    commit(state) {
+        this.setState(state);
+        this.#eventHandlers.forEach((callback) => callback.call(undefined, state));
+    }
+    setState(state) {
+        this.#state = state;
+    }
+    getState() {
+        return this.#state;
+    }
+}

package/index.js

@@ -1,3 +1,2 @@
-export { useCtx as default } from "./src/context";
-export { getCtx } from "./src/context";
-export { updateCtx } from "./src/context";
+export { useCtx as default } from "./context";
+export { getCtx, useReducer, updateCtx } from "./context";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-usectx",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "main": "index.js",
   "type": "module",
   "repository": {
@@ -17,7 +17,7 @@
   ],
   "scripts": {
     "test": "jest",
-    "build": "npx tsc index.ts --target es2017"
+    "build": "npx tsc ./src/index.ts --target es2022 --outDir ./"
   },
   "author": "",
   "homepage": "https://jsf7.dev/react-usectx",

package/src/context.ts

@@ -1,37 +1,66 @@
-'use client'
+"use client";
 
-import { ReactNode, useSyncExternalStore } from 'react'
-import { CreateContext } from './create-context'
+import { ReactNode, useSyncExternalStore } from "react";
+import { CreateContext } from "./create-context";
 
-type cache = { [key: string]: InstanceType<typeof CreateContext> }
+type cache = { [key: string]: InstanceType<typeof CreateContext> };
 
-const cache: cache = {}
+const cache: cache = {};
 
 const getInstance = (name: string): InstanceType<typeof CreateContext> => {
-    if (!cache[name]) {
-        cache[name] = new CreateContext()
-    }
-    return cache[name]
-}
+  if (!cache[name]) {
+    cache[name] = new CreateContext();
+  }
+  return cache[name];
+};
 
 export function updateCtx(name: string): Function {
-    const ctx = getInstance(name)
-    return ctx.commit.bind(ctx)
+  const ctx = getInstance(name);
+  return ctx.commit.bind(ctx);
 }
 
 export function getCtx<Snapshot>(name: string): Snapshot {
-    const context = getInstance(name)
-    const subscription = (callback: Function) => {
-        context.subscribe(callback)
-        return () => context.unsubscribe(callback)
-    }
-    return useSyncExternalStore(
-        subscription,
-        context.getState.bind(context),
-        context.getState.bind(context)
-    )
+  const context = getInstance(name);
+  const subscription = (callback: Function) => {
+    context.subscribe(callback);
+    return () => context.unsubscribe(callback);
+  };
+  return useSyncExternalStore(
+    subscription,
+    context.getState.bind(context),
+    context.getState.bind(context)
+  );
 }
 
 export function useCtx(name: string): [ReactNode, Function] {
-    return [getCtx(name), updateCtx(name)]
+  return [getCtx(name), updateCtx(name)];
+}
+
+const reducerCache: { [key: string]: WeakMap<any, any> } = {};
+
+export function useReducer<Snapshot>(
+  name: string,
+  modiFier: (data: any) => Snapshot,
+  useCache: boolean = true
+): Snapshot {
+  if (!reducerCache[name]) {
+    reducerCache[name] = new WeakMap();
+  }
+  const context = getInstance(name);
+  const _getState = context.getState.bind(context);
+  const getState = () => {
+    const state = _getState();
+    const cache = reducerCache[name].get(state);
+    if (cache && useCache) {
+      return cache;
+    }
+    const res = modiFier(state);
+    reducerCache[name].set(state, res);
+    return res;
+  };
+  const subscription = (callback: Function) => {
+    context.subscribe(callback);
+    return () => context.unsubscribe(callback);
+  };
+  return useSyncExternalStore(subscription, getState, getState);
 }

package/src/index.ts

@@ -0,0 +1,2 @@
+export { useCtx as default } from "./context";
+export { getCtx, useReducer, updateCtx } from "./context";

package/index.ts

@@ -1,3 +0,0 @@
-export { useCtx as default } from "./src/context";
-export { getCtx } from "./src/context";
-export { updateCtx } from "./src/context";

package/intex.ts

@@ -1,3 +0,0 @@
-export { useCtx as default } from "./src/context";
-export { getCtx } from "./src/context";
-export { updateCtx } from "./src/context";

package/src/context.js

@@ -1,25 +0,0 @@
-'use client';
-import { useSyncExternalStore } from 'react';
-import { CreateContext } from './create-context';
-const cache = {};
-const getInstance = (name) => {
-    if (!cache[name]) {
-        cache[name] = new CreateContext();
-    }
-    return cache[name];
-};
-export function updateCtx(name) {
-    const ctx = getInstance(name);
-    return ctx.commit.bind(ctx);
-}
-export function getCtx(name) {
-    const context = getInstance(name);
-    const subscription = (callback) => {
-        context.subscribe(callback);
-        return () => context.unsubscribe(callback);
-    };
-    return useSyncExternalStore(subscription, context.getState.bind(context), context.getState.bind(context));
-}
-export function useCtx(name) {
-    return [getCtx(name), updateCtx(name)];
-}

package/src/create-context.js

@@ -1,38 +0,0 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _CreateContext_eventHandlers, _CreateContext_state;
-export class CreateContext {
-    constructor() {
-        _CreateContext_eventHandlers.set(this, []);
-        _CreateContext_state.set(this, null);
-    }
-    subscribe(handler) {
-        __classPrivateFieldGet(this, _CreateContext_eventHandlers, "f").push(handler);
-    }
-    unsubscribe(handler) {
-        const index = __classPrivateFieldGet(this, _CreateContext_eventHandlers, "f").indexOf(handler);
-        if (index !== -1) {
-            __classPrivateFieldGet(this, _CreateContext_eventHandlers, "f").splice(index, 1);
-        }
-    }
-    commit(state) {
-        this.setState(state);
-        __classPrivateFieldGet(this, _CreateContext_eventHandlers, "f").forEach((callback) => callback.call(undefined, state));
-    }
-    setState(state) {
-        __classPrivateFieldSet(this, _CreateContext_state, state, "f");
-    }
-    getState() {
-        return __classPrivateFieldGet(this, _CreateContext_state, "f");
-    }
-}
-_CreateContext_eventHandlers = new WeakMap(), _CreateContext_state = new WeakMap();