react-usectx 1.2.0 → 1.2.2

package/README.md

@@ -11,46 +11,46 @@ npm i react-usectx --save
 ## Add it to your project
 
 ```js
-import useCtx from "react-usectx";
+import {useGlobalState} from "react-usectx";
 ```
 
 ## Usage
 
 ```js
 // get both current state and set function
-const [myContext, setMyContext] = useCtx("stateName");
+const [myState, setMyState] = useGlobalState("stateName");
 ```
 
 ## Other methods:
 
-### getCtx
+### getGlobalState
 
 ```js
 // get current state only
 
-import { getCtx } from "react-usectx";
+import { getGlobalState } from "react-usectx";
 
-const myContext = getCtx("stateName");
+const myState = getGlobalState("stateName");
 ```
 
-### updateCtx
+### updateGlobalState
 
 ```js
 // set function  only
 
-import { updateCtx } from "react-usectx";
+import { updateGlobalState } from "react-usectx";
 
-const setMyContext = updateCtx("stateName");
+const setMyState = updateGlobalState("stateName");
 
-setMyContext({ name: "Rick Ross" });
+setMyState({ name: "Rick Ross" });
 ```
 
-### useReducer
+### useGlobalReducer
 
 ```js
-import { useReducer } from "react-usectx";
+import { useGlobalReducer } from "react-usectx";
 
-const fullName = useReducer("stateName", (data) => {
+const fullName = useGlobalReducer("stateName", (data) => {
   return `${data.firstName} ${data.lastName}`;
 });
 ```
@@ -62,28 +62,101 @@ const fullName = useReducer("stateName", (data) => {
 ```js
 const myContextID = "MyUniqueIdentifier";
 
-useCtx(myContextID);
+useGlobalState(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.
+When any of the provided functions—useGlobalState, updateGlobalState, or getGlobalState—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.
+This mechanism enables global state sharing across components. For example, calling getGlobalState("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.
 
 ### initialState
 
 ```js
-useCtx(myContextID, { name: "John" });
+useGlobalState(myContextID, { name: "John" });
 ```
 
 The value you want the state to be initially. It can be a value of any type.
 
+
+### API Methods
+
+```js
+const api = stateApi(myContextID);
+```
+
+Manualy control the flow of the data.
+
+
+### subscribe 
+
+```js
+api.subscribe(data => {
+  console.log(data)
+});
+```
+
+Subscribe for changes
+
+
+### unsubscribe 
+
+```js
+const subscription = data => {
+  console.log(data)
+}
+api.unsubscribe(subscription);
+```
+
+unsubscribe from specific subscription
+
+
+### commit 
+
+```js
+api.commit({
+  my: "data"
+});
+```
+
+Sets data, and triggers all subscriptions and react hooks.
+
+
+### setState 
+
+```js
+api.setState({
+  my: "data"
+});
+```
+
+Sets data 'silently', without triggering anything.
+
+
+### undo 
+
+```js
+api.undo();
+```
+
+Sets state to previous (if any), and triggers all subscriptions and react hooks.
+
+### redo 
+
+```js
+api.redo();
+```
+
+Sets data to next state if undo was called previously, and triggers all subscriptions and react hooks.
+
+
+
 ## Example
 
 ```js
 function Page() {
-  const [title, setTitle] = useCtx("title");
+  const [title, setTitle] = useGlobalState("title");
 
   return (
     <div className="wrapper">
@@ -102,7 +175,7 @@ function Page() {
 }
 
 function Title() {
-  const title: string = getContext("title");
+  const title: string = getGlobalState("title");
   return (
     <h1>
       Component: <br />
@@ -116,7 +189,7 @@ function Title() {
 
 ```js
 function Page() {
-  const [title, setTitle] = useCtx("title");
+  const [title, setTitle] = useGlobalState("title");
 
   return (
     <div className="wrapper">
@@ -135,7 +208,7 @@ function Page() {
 }
 
 function Title() {
-  const reducedTitle: string = useReducer(
+  const reducedTitle: string = useGlobalReducer(
     "title",
     (title) => `Title is: ${title.toUpperCase()}`
   );

package/context.js

@@ -51,3 +51,6 @@ export function useReducer(name, modiFier, useCache = false) {
     };
     return useSyncExternalStore(subscription, getState, getState);
 }
+export function stateApi(name) {
+    return getInstance(name);
+}

package/create-context.js

@@ -1,11 +1,18 @@
 export class CreateContext {
-    constructor(initialState) {
+    constructor(initialState, options = {}) {
+        const defaults = {
+            historySize: 99
+        };
+        this.settings = Object.assign({}, defaults, options);
         if (initialState !== undefined) {
             this.setState(initialState);
         }
     }
+    settings;
     #eventHandlers = [];
     #state = null;
+    #history = [];
+    #activeVersion = -1;
     subscribe(handler) {
         this.#eventHandlers.push(handler);
     }
@@ -19,7 +26,32 @@ export class CreateContext {
         this.setState(state);
         this.#eventHandlers.forEach((callback) => callback.call(undefined, state));
     }
-    setState(state) {
+    undo() {
+        const prev = this.#history[this.#activeVersion - 1];
+        if (prev) {
+            this.setState(prev, this.#history.indexOf(prev));
+        }
+    }
+    redo() {
+        const next = this.#history[this.#activeVersion + 1];
+        if (next) {
+            this.setState(next, this.#history.indexOf(next));
+        }
+    }
+    setState(state, _av) {
+        if (typeof _av === 'undefined') {
+            if ((this.#history.length - 1) > this.#activeVersion) {
+                this.#history.splice(this.#activeVersion + 1, this.#history.length);
+            }
+            this.#activeVersion = this.#history.length - 1;
+        }
+        this.#history.push(state);
+        if (this.#history.length > this.settings.historySize) {
+            this.#history.shift();
+        }
+        if (typeof _av === 'number') {
+            this.#activeVersion = _av;
+        }
         this.#state = state;
     }
     getState() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-usectx",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "main": "index.js",
   "type": "module",
   "repository": {

package/src/context.ts

@@ -75,3 +75,7 @@ export function useReducer<Snapshot>(
   };
   return useSyncExternalStore(subscription, getState, getState);
 }
+
+export function stateApi(name: string): InstanceType<typeof CreateContext> {
+  return getInstance(name)
+} 

package/src/create-context.ts

@@ -1,16 +1,30 @@
 import { eventHandlers, state } from "./types";
 
+
+export interface CreateContextOptions {
+  historySize?: number
+}
+
 export class CreateContext {
-  constructor(initialState?: state) {
+  constructor(initialState?: state, options: CreateContextOptions = {}) {
+    const defaults: CreateContextOptions = {
+      historySize: 999
+    }
+    this.settings = Object.assign({}, defaults, options)
     if (initialState !== undefined) {
       this.setState(initialState);
     }
   }
 
+  settings: CreateContextOptions;
+
   #eventHandlers: eventHandlers = [];
 
   #state: state = null;
 
+  #history: any[] = [];
+  #activeVersion:number = -1;
+
   subscribe(handler: Function): void {
     this.#eventHandlers.push(handler);
   }
@@ -27,7 +41,35 @@ export class CreateContext {
     this.#eventHandlers.forEach((callback) => callback.call(undefined, state));
   }
 
-  setState(state: state): void {
+  undo(){
+    const prev = this.#history[this.#activeVersion - 1];
+    if(prev) {
+      this.setState(prev, this.#history.indexOf(prev))
+    }
+  }
+
+  redo() {
+    const next = this.#history[this.#activeVersion + 1];
+    if(next) {
+      this.setState(next, this.#history.indexOf(next))
+    }
+  }
+
+  setState(state: state, _av?: number): void {
+    if (typeof _av === 'undefined') {
+        if((this.#history.length - 1) > this.#activeVersion) {
+            this.#history.splice(this.#activeVersion + 1, this.#history.length)
+        }
+        this.#activeVersion = this.#history.length - 1;
+    }
+    this.#history.push(state);
+    if (this.#history.length > this.settings.historySize!) {
+        this.#history.shift();
+    }
+    if (typeof _av === 'number') {
+        this.#activeVersion = _av;
+    }
+
     this.#state = state;
   }