react-usectx 1.0.0 → 1.0.4

package/README.md

@@ -1,2 +1,79 @@
 # React-Context
+
 Custom React globally accessible context hook
+
+## Installation
+
+```
+npm i react-usectx --save
+```
+
+## Add it to your project
+
+```js
+import useCtx from "react-usectx";
+```
+
+## Usage
+
+```js
+// get both current state and set function
+const [myContext, setMyContext] = useCtx("stateName");
+```
+
+## Other methods:
+
+### getCtx
+
+```js
+// get current state only
+
+import { getCtx } from "react-usectx";
+
+const myContext = getCtx("stateName");
+```
+
+### updateCtx
+
+```js
+// set function  only
+
+import { updateCtx } from "react-usectx";
+
+const setMyContext = updateCtx("stateName");
+
+setMyContext({ name: "Rick Ross" });
+```
+
+## Example
+
+```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 title: string = getContext("title");
+  return (
+    <h1>
+      Component: <br />
+      <strong>{title}</strong>
+    </h1>
+  );
+}
+```

package/index.js

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

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "react-usectx",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "main": "index.js",
+  "type": "module",
   "scripts": {
-    "test": "jest"
+    "test": "jest",
+    "build": "npx tsc index.ts --target es2017"
   },
   "author": "https://jsf7.dev",
   "license": "MIT",
@@ -12,10 +14,14 @@
     "react": "^19.1.0"
   },
   "devDependencies": {
+    "@babel/parser": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-typescript": "^7.27.1",
     "@types/react": "^19.1.8",
     "jest": "^30.0.4",
-    "typescript": "^5.8.3"
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3",
+    "undici": "^7.11.0",
+    "undici-types": "^7.11.0"
   }
 }

package/src/context.js

@@ -0,0 +1,25 @@
+'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

@@ -0,0 +1,38 @@
+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();

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+     "paths": {
+      // This is solely to stop a bug with @types/node as of 12/15/2023
+      "undici-types": [
+        "./node_modules/undici-types/index.d.ts"
+      ],
+    }
+  },
+  "display": "Recommended",
+  "$schema": "https://json.schemastore.org/tsconfig"
+}