react-usectx 1.0.0

package/README.md

@@ -0,0 +1,2 @@
+# React-Context
+Custom React globally accessible context hook

package/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-typescript',
+  ],
+};

package/intex.ts

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

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "react-usectx",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest"
+  },
+  "author": "https://jsf7.dev",
+  "license": "MIT",
+  "description": "Custom React globally accessible context hook",
+  "dependencies": {
+    "react": "^19.1.0"
+  },
+  "devDependencies": {
+    "@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"
+  }
+}

package/src/context.ts

@@ -0,0 +1,37 @@
+'use client'
+
+import { ReactNode, useSyncExternalStore } from 'react'
+import { CreateContext } from './create-context'
+
+type cache = { [key: string]: InstanceType<typeof CreateContext> }
+
+const cache: cache = {}
+
+const getInstance = (name: string): InstanceType<typeof CreateContext> => {
+    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)
+}
+
+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)
+    )
+}
+
+export function useCtx(name: string): [ReactNode, Function] {
+    return [getCtx(name), updateCtx(name)]
+}

package/src/create-context.test.ts

@@ -0,0 +1,61 @@
+import { CreateContext } from "./create-context";
+
+describe("CreateContext", () => {
+  let context: CreateContext;
+
+  beforeEach(() => {
+    context = new CreateContext();
+  });
+
+  test("should set and get state correctly", () => {
+    context.setState("hello");
+    expect(context.getState()).toBe("hello");
+
+    context.setState(123);
+    expect(context.getState()).toBe(123);
+
+    context.setState({ a: 1 });
+    expect(context.getState()).toEqual({ a: 1 });
+
+    context.setState(null);
+    expect(context.getState()).toBeNull();
+  });
+
+  test("should subscribe and notify event handlers on commit", () => {
+    const handler1 = jest.fn();
+    const handler2 = jest.fn();
+
+    context.subscribe(handler1);
+    context.subscribe(handler2);
+
+    context.commit("new state");
+
+    expect(handler1).toHaveBeenCalledWith("new state");
+    expect(handler2).toHaveBeenCalledWith("new state");
+  });
+
+  test("should not notify unsubscribed handlers", () => {
+    const handler = jest.fn();
+
+    context.subscribe(handler);
+    context.unsubscribe(handler);
+    context.commit("test");
+
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  test("unsubscribe should not fail for non-existent handler", () => {
+    const handler = jest.fn();
+    expect(() => context.unsubscribe(handler)).not.toThrow();
+  });
+
+  test("commit should update state and call handlers", () => {
+    const handler = jest.fn();
+    context.subscribe(handler);
+
+    context.commit({ key: "value" });
+
+    expect(context.getState()).toEqual({ key: "value" });
+    expect(handler).toHaveBeenCalledWith({ key: "value" });
+  });
+});

package/src/create-context.ts

@@ -0,0 +1,39 @@
+type eventHandlers = Array<Function>;
+
+type state =
+  | { [key: string]: any }
+  | Array<any>
+  | string
+  | number
+  | boolean
+  | null;
+
+export class CreateContext {
+  #eventHandlers: eventHandlers = [];
+
+  #state: state = null;
+
+  subscribe(handler: Function): void {
+    this.#eventHandlers.push(handler);
+  }
+
+  unsubscribe(handler: Function): void {
+    const index = this.#eventHandlers.indexOf(handler);
+    if (index !== -1) {
+      this.#eventHandlers.splice(index, 1);
+    }
+  }
+
+  commit(state: state): void {
+    this.setState(state);
+    this.#eventHandlers.forEach((callback) => callback.call(undefined, state));
+  }
+
+  setState(state: state): void {
+    this.#state = state;
+  }
+
+  getState(): state {
+    return this.#state;
+  }
+}