react-usectx 1.2.1 → 1.2.2

package/README.md

@@ -79,6 +79,79 @@ 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
@@ -102,7 +175,7 @@ function Page() {
 }
 
 function Title() {
-  const title: string = getContext("title");
+  const title: string = getGlobalState("title");
   return (
     <h1>
       Component: <br />

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.1",
+  "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;
   }