react-usectx 1.2.1 → 1.2.3

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

@@ -6,11 +6,6 @@ const getInstance = (name, initialState) => {
     if (!cache[name]) {
         cache[name] = new CreateContext(initialState);
     }
-    else {
-        if (typeof initialState !== "undefined") {
-            cache[name].commit(initialState);
-        }
-    }
     return cache[name];
 };
 export function updateCtx(name, initialState) {
@@ -26,7 +21,8 @@ export function getCtx(name) {
     return useSyncExternalStore(subscription, context.getState.bind(context), context.getState.bind(context));
 }
 export function useCtx(name, initialState) {
-    return [getCtx(name), updateCtx(name, initialState)];
+    const initializeFirst = updateCtx(name, initialState);
+    return [getCtx(name), initializeFirst];
 }
 const reducerCache = {};
 export function useReducer(name, modiFier, useCache = false) {
@@ -51,3 +47,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,19 @@
 export class CreateContext {
-    constructor(initialState) {
+    constructor(initialState, options = {}) {
+        const defaults = {
+            historySize: 999
+        };
+        this.settings = Object.assign({}, defaults, options);
         if (initialState !== undefined) {
             this.setState(initialState);
         }
     }
+    settings;
     #eventHandlers = [];
     #state = null;
+    #history = [];
+    #activeVersion = -1;
+    #needsReset = false;
     subscribe(handler) {
         this.#eventHandlers.push(handler);
     }
@@ -17,9 +25,43 @@ export class CreateContext {
     }
     commit(state) {
         this.setState(state);
-        this.#eventHandlers.forEach((callback) => callback.call(undefined, state));
+        this.#trigger();
     }
-    setState(state) {
+    #trigger() {
+        this.#eventHandlers.forEach((callback) => callback.call(undefined, this.getState()));
+    }
+    undo() {
+        const prev = this.#history[this.#activeVersion - 1];
+        if (prev) {
+            this.setState(prev, this.#history.indexOf(prev));
+            this.#needsReset = true;
+            this.#trigger();
+        }
+    }
+    redo() {
+        const next = this.#history[this.#activeVersion + 1];
+        if (next) {
+            this.setState(next, this.#history.indexOf(next));
+            this.#needsReset = true;
+            this.#trigger();
+        }
+    }
+    setState(state, _av) {
+        if (typeof _av === 'undefined') {
+            if ((this.#history.length - 1) > this.#activeVersion && this.#needsReset) {
+                this.#history.splice(this.#activeVersion + 1, this.#history.length);
+            }
+        }
+        this.#history.push(state);
+        if (this.#history.length > this.settings.historySize) {
+            this.#history.shift();
+        }
+        if (typeof _av === 'number') {
+            this.#activeVersion = _av;
+        }
+        else {
+            this.#activeVersion = this.#history.length - 1;
+        }
         this.#state = state;
     }
     getState() {

package/package.json

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

package/src/context.ts

@@ -14,10 +14,6 @@ const getInstance = (
 ): InstanceType<typeof CreateContext> => {
   if (!cache[name]) {
     cache[name] = new CreateContext(initialState);
-  } else {
-    if (typeof initialState !== "undefined") {
-      cache[name].commit(initialState);
-    }
   }
   return cache[name];
 };
@@ -44,7 +40,8 @@ export function useCtx(
   name: string,
   initialState?: state
 ): [ReactNode, Function] {
-  return [getCtx(name), updateCtx(name, initialState)];
+  const initializeFirst = updateCtx(name, initialState)
+  return [getCtx(name), initializeFirst];
 }
 
 const reducerCache: { [key: string]: WeakMap<any, any> } = {};
@@ -75,3 +72,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,31 @@
 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;
+  #needsReset: boolean = false;
+
   subscribe(handler: Function): void {
     this.#eventHandlers.push(handler);
   }
@@ -24,10 +39,47 @@ export class CreateContext {
 
   commit(state: state): void {
     this.setState(state);
-    this.#eventHandlers.forEach((callback) => callback.call(undefined, state));
+    this.#trigger();
+  }
+
+  #trigger(): void  {
+      this.#eventHandlers.forEach((callback) => callback.call(undefined, this.getState()));
   }
 
-  setState(state: state): void {
+  undo() {
+      const prev = this.#history[this.#activeVersion - 1];
+      if (prev) {
+          this.setState(prev, this.#history.indexOf(prev));
+          this.#needsReset = true;
+          this.#trigger()
+      }
+      
+  }
+  redo() {
+      const next = this.#history[this.#activeVersion + 1];
+      if (next) {
+          this.setState(next, this.#history.indexOf(next));
+          this.#needsReset = true;
+          this.#trigger()
+      } 
+  }
+
+  setState(state: state, _av?: number): void {
+    if (typeof _av === 'undefined') {
+        if((this.#history.length - 1) > this.#activeVersion && this.#needsReset) {
+            this.#history.splice(this.#activeVersion + 1, this.#history.length)
+        }
+    }
+    this.#history.push(state);
+    if (this.#history.length > this.settings.historySize!) {
+        this.#history.shift();
+    }
+    if (typeof _av === 'number') {
+        this.#activeVersion = _av;
+    } else {
+        this.#activeVersion = this.#history.length - 1;
+    }
+
     this.#state = state;
   }
 

package/types.js

@@ -0,0 +1 @@
+export {};