@veams/status-quo 0.0.2 → 0.1.0

package/.nvmrc

@@ -1 +1 @@
-v20
+v22

package/README.md

@@ -26,7 +26,7 @@ _Please keep in mind that dependencies for the hook needs to be flattened and ca
 ## Example
 
 Let's start with a simple state example. 
-You should start with the abstract class `BaseState`:
+You should start with the abstract class `StateHandler`:
 
 ```ts
 import { useStateFactory, StateHandler } from '@veams/status-quo';
@@ -126,5 +126,51 @@ const GlobalCounterDisplay = () => {
 }
 ```
 
+### What about debugging? 
 
+You know redux-devtools? You like it? We covered you (at least a bit)!
+You can enable the devtools in an easy way: 
 
+```ts
+
+class CounterStateHandler extends StateHandler<CounterState, CounterActions> {
+  constructor([startCount = 0]) {
+    super({
+      initialState: { count: startCount },
+      devTools: { enabled: true, namespace: 'Counter' },
+    });
+  }
+
+  getActions() {
+    return {
+      increase() {
+        this.setState(
+          {
+            count: this.getState() + 1,
+          },
+          'increase'
+        );
+      },
+      decrease() {
+        const currentState = this.getState();
+
+        if (currentState.count > 0) {
+          this.setState(
+            {
+              count: currentState - 1,
+            },
+            'decrease'
+          );
+        }
+      },
+    };
+  }
+}
+
+export function CounterStateFactory(...args) {
+  return new CounterStateHandler(...args);
+}
+```
+
+We just added the `devTools` option and also updated the `setState()` function by passing a second argument into it which is the actions name.
+Now you can open up the the browser extension and you are able to take a look at your actions and state(s).

package/dist/hooks/state-factory.js

@@ -4,6 +4,6 @@ export function useStateFactory(stateFactoryFunction, params = []) {
     const stateHandler = useRef(stateFactoryFunction(...params));
     const actions = useRef(stateHandler.current.getActions());
     const state = useStateSubscription(stateHandler.current);
-    return [state, actions];
+    return [state, actions.current];
 }
 //# sourceMappingURL=state-factory.js.map

package/dist/hooks/state-factory.js.map

@@ -1 +1 @@
-{"version":3,"file":"state-factory.js","sourceRoot":"","sources":["../../src/hooks/state-factory.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAI/D,MAAM,UAAU,eAAe,CAC7B,oBAAoE,EACpE,SAAY,EAAkB;IAE9B,MAAM,YAAY,GAAG,MAAM,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;IAC7D,MAAM,OAAO,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;IAC1D,MAAM,KAAK,GAAG,oBAAoB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAEzD,OAAO,CAAC,KAAK,EAAE,OAAO,CAAW,CAAC;AACpC,CAAC"}
+{"version":3,"file":"state-factory.js","sourceRoot":"","sources":["../../src/hooks/state-factory.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAI/D,MAAM,UAAU,eAAe,CAC7B,oBAAoE,EACpE,SAAY,EAAkB;IAE9B,MAAM,YAAY,GAAG,MAAM,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;IAC7D,MAAM,OAAO,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;IAC1D,MAAM,KAAK,GAAG,oBAAoB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAEzD,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,OAAO,CAAW,CAAC;AAC5C,CAAC"}

package/dist/store/__tests__/state-handler.spec.js

@@ -62,7 +62,7 @@ describe('State Handler', () => {
         stateHandler.destroy();
         customSubject.next(2);
         customSubject.next(3);
-        expect(spy).toBeCalledTimes(1);
+        expect(spy).toHaveBeenCalledTimes(1);
     });
     it('should only call subscriber when object state has changed', async () => {
         const spy = jest.fn();
@@ -79,7 +79,7 @@ describe('State Handler', () => {
         stateHandler.setState({
             test: 'test2',
         });
-        expect(spy).toBeCalledTimes(3); // 1. testValue (Initial value), 2. test (first setter), 3. test2 (second setter)
+        expect(spy).toHaveBeenCalledTimes(3); // 1. testValue (Initial value), 2. test (first setter), 3. test2 (second setter)
     });
 });
 //# sourceMappingURL=state-handler.spec.js.map

package/dist/store/__tests__/state-handler.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"state-handler.spec.js","sourceRoot":"","sources":["../../../src/store/__tests__/state-handler.spec.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"state-handler.spec.js","sourceRoot":"","sources":["../../../src/store/__tests__/state-handler.spec.ts"],"names":[],"mappings":"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"}

package/dist/types/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useStateFactory } from './state-factory.js';
+export { useStateSingleton } from './state-singleton.js';

package/dist/types/hooks/state-factory.d.ts

@@ -0,0 +1,2 @@
+import type { StateSubscriptionHandler } from '../types/types.js';
+export declare function useStateFactory<V, A, P extends unknown[]>(stateFactoryFunction: (...args: P) => StateSubscriptionHandler<V, A>, params?: P): [V, A];

package/dist/types/hooks/state-singleton.d.ts

@@ -0,0 +1,2 @@
+import type { StateSingleton } from '../store/state-singleton.js';
+export declare function useStateSingleton<V, A>(stateSingleton: StateSingleton<V, A>): [V, A];

package/dist/types/hooks/state-subscription.d.ts

@@ -0,0 +1,3 @@
+import type { StateSubscriptionHandler } from '../types/types.js';
+import type { SetStateAction } from 'react';
+export declare function useStateSubscription<V, A>(stateSubscriptionHandler: StateSubscriptionHandler<V, A>): SetStateAction<V>;

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+import { useStateFactory, useStateSingleton } from './hooks/index.js';
+import { makeStateSingleton, StateHandler } from './store/index.js';
+import type { StateSingleton } from './store/index.js';
+import type { StateSubscriptionHandler } from './types/types.js';
+export { makeStateSingleton, StateHandler, useStateFactory, useStateSingleton };
+export type { StateSingleton, StateSubscriptionHandler };

package/dist/types/store/__tests__/state-handler.spec.d.ts

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

package/dist/types/store/dev-tools.d.ts

@@ -0,0 +1,23 @@
+declare global {
+    interface Window {
+        __REDUX_DEVTOOLS_EXTENSION__?: {
+            connect: (opts: Record<string, unknown>) => DevTools;
+        };
+    }
+}
+export type MessagePayload = {
+    type: string;
+    payload: {
+        type: string;
+        actionId: number;
+    };
+    state: string;
+    id: string;
+    source: '@devtools-extension';
+};
+export type DevTools = {
+    init: (state: unknown) => void;
+    send: (action: string, state: unknown) => void;
+    subscribe: (cb: (message: MessagePayload) => void) => void;
+};
+export declare function withDevTools<S>(initialState: S, options?: {}): DevTools | null;

package/dist/types/store/index.d.ts

@@ -0,0 +1,3 @@
+export { StateHandler } from './state-handler.js';
+export type { StateSingleton } from './state-singleton.js';
+export { makeStateSingleton } from './state-singleton.js';

package/dist/types/store/state-handler.d.ts

@@ -0,0 +1,36 @@
+import { BehaviorSubject } from 'rxjs';
+import type { StateSubscriptionHandler } from '../types/types.js';
+import type { Observable, Subscription } from 'rxjs';
+type Subscriptions = Subscription[];
+type StateHandlerProps<S> = {
+    initialState: S;
+    options?: {
+        devTools: {
+            enabled?: boolean;
+            namespace: string;
+        };
+    };
+};
+type StateObservableOptions = {
+    useDistinctUntilChanged?: boolean;
+};
+export declare abstract class StateHandler<S, A> implements StateSubscriptionHandler<S, A> {
+    private readonly updates$;
+    private readonly state$;
+    private readonly initialState;
+    private devTools;
+    subscriptions: Subscriptions;
+    protected constructor({ initialState, options }: StateHandlerProps<S>);
+    getInitialState(): S;
+    getState(): S;
+    setState(newState: Partial<S>, actionName?: string): void;
+    destroy(): void;
+    getStateItemAsObservable(key: keyof S): Observable<S[keyof S]>;
+    getStateAsObservable(options?: StateObservableOptions): BehaviorSubject<S>;
+    getObservableItem(key: keyof S): Observable<S[keyof S]>;
+    private bindUpdatesAndEvents;
+    private handleDevToolsEvents;
+    getObservable(): Observable<S>;
+    abstract getActions(): A;
+}
+export {};

package/dist/types/store/state-singleton.d.ts

@@ -0,0 +1,5 @@
+import type { StateSubscriptionHandler } from '../types/types.js';
+export interface StateSingleton<V, A> {
+    getInstance: () => StateSubscriptionHandler<V, A>;
+}
+export declare function makeStateSingleton<S, A>(stateHandlerFactory: () => StateSubscriptionHandler<S, A>): StateSingleton<S, A>;

package/dist/types/types/types.d.ts

@@ -0,0 +1,7 @@
+import type { Observable } from 'rxjs';
+export interface StateSubscriptionHandler<V, A> {
+    getObservable: () => Observable<V>;
+    destroy: () => void;
+    getInitialState: () => V;
+    getActions: () => A;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veams/status-quo",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "The manager to rule states in frontend.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,33 +40,33 @@
     "lint": "pnpm run lint:ts",
     "lint:ts": "eslint --fix \"src/**/*.{tsx,ts}\" --config ./.eslintrc.cjs",
     "start": "npm-run-all --parallel watch:**",
-    "watch:bundle:ts": "npm run bundle:ts -w",
-    "watch:generate:types": "npm run generate:types --watch",
+    "watch:bundle:ts": "npm run bundle:ts -- -w",
+    "watch:generate:types": "npm run generate:types -- --watch",
     "test": "cross-env NODE_ENV=test jest --config jest.config.cjs",
     "test:ci": "cross-env NODE_ENV=test jest --ci --silent --no-cache --config jest.config.ci.cjs",
     "release": "npm run build && release-it"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "rxjs": "^7.5.4"
+    "react": ">=18.0.0",
+    "rxjs": ">=7.5.4"
   },
   "devDependencies": {
-    "@types/jest": "29.5.10",
-    "@types/node": "20.10.3",
-    "@types/react": "18.2.41",
+    "@types/jest": "30.0.0",
+    "@types/node": "24.0.13",
+    "@types/react": "19.1.8",
     "cross-env": "7.0.3",
     "eslint": "8.55.0",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
+    "jest": "30.0.4",
+    "jest-environment-jsdom": "30.0.4",
     "npm-run-all": "4.1.5",
-    "prettier": "3.1.0",
-    "react": "18.2.0",
-    "rxjs": "7.8.1",
-    "tslib": "2.6.2",
-    "typescript": "5.3.2",
-    "@swc/jest": "0.2.29",
-    "@swc/core": "1.3.100",
-    "release-it": "17.0.0"
+    "prettier": "3.6.2",
+    "react": "19.1.0",
+    "rxjs": "7.8.2",
+    "tslib": "2.8.1",
+    "typescript": "5.8.3",
+    "@swc/jest": "0.2.39",
+    "@swc/core": "1.12.11",
+    "release-it": "19.0.3"
   },
   "keywords": [
     "State Management"

package/src/hooks/state-factory.tsx

@@ -12,5 +12,5 @@ export function useStateFactory<V, A, P extends unknown[]>(
   const actions = useRef(stateHandler.current.getActions());
   const state = useStateSubscription(stateHandler.current);
 
-  return [state, actions] as [V, A];
+  return [state, actions.current] as [V, A];
 }

package/src/store/__tests__/state-handler.spec.ts

@@ -83,7 +83,7 @@ describe('State Handler', () => {
     customSubject.next(2);
     customSubject.next(3);
 
-    expect(spy).toBeCalledTimes(1);
+    expect(spy).toHaveBeenCalledTimes(1);
   });
 
   it('should only call subscriber when object state has changed', async () => {
@@ -103,6 +103,6 @@ describe('State Handler', () => {
       test: 'test2',
     });
 
-    expect(spy).toBeCalledTimes(3); // 1. testValue (Initial value), 2. test (first setter), 3. test2 (second setter)
+    expect(spy).toHaveBeenCalledTimes(3); // 1. testValue (Initial value), 2. test (first setter), 3. test2 (second setter)
   });
 });