@veams/status-quo 1.5.0 → 1.6.0

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

@@ -2,30 +2,30 @@ import { lastValueFrom, Subject, take } from 'rxjs';
 
 import { resetStatusQuoForTests, setupStatusQuo } from '../../config/status-quo-config.js';
 import { ObservableStateHandler } from '../observable-state-handler.js';
-import type { DistinctOptions } from '../../config/status-quo-config.js';
+
+import type { DevToolsOptions, DistinctOptions } from '../../config/status-quo-config.js';
 
 type TestState = { test: string; test2: string };
 type TestActions = { testAction: () => void };
 type TestObservableHandlerOptions = {
-  withDevTools?: boolean;
+  devTools?: DevToolsOptions;
   distinct?: DistinctOptions<TestState>;
   useDistinctUntilChanged?: boolean;
 };
 
 class TestObservableStateHandler extends ObservableStateHandler<TestState, TestActions> {
-  constructor({ withDevTools, distinct, useDistinctUntilChanged }: TestObservableHandlerOptions = {}) {
+  constructor({
+    devTools,
+    distinct,
+    useDistinctUntilChanged,
+  }: TestObservableHandlerOptions = {}) {
     super({
       initialState: {
         test: 'testValue',
         test2: 'testValue2',
       },
       options: {
-        ...(withDevTools && {
-          devTools: {
-            enabled: true,
-            namespace: 'TestObservableStateHandler',
-          },
-        }),
+        ...(devTools && { devTools }),
         ...(distinct && {
           distinct,
         }),
@@ -48,12 +48,26 @@ class TestObservableStateHandler extends ObservableStateHandler<TestState, TestA
 describe('Observable State Handler', () => {
   let stateHandler: TestObservableStateHandler;
 
+  function mockDevToolsExtension() {
+    const devTools = {
+      init: jest.fn(),
+      send: jest.fn(),
+      subscribe: jest.fn(),
+    };
+    const connect = jest.fn(() => devTools);
+
+    window.__REDUX_DEVTOOLS_EXTENSION__ = { connect };
+
+    return { connect, devTools };
+  }
+
   beforeEach(() => {
     resetStatusQuoForTests();
     stateHandler = new TestObservableStateHandler();
   });
 
   afterEach(() => {
+    delete window.__REDUX_DEVTOOLS_EXTENSION__;
     resetStatusQuoForTests();
   });
 
@@ -79,7 +93,7 @@ describe('Observable State Handler', () => {
 
     stateHandler.setState(expected);
 
-    const state = await lastValueFrom(stateHandler.getStateAsObservable().pipe(take(1)));
+    const state = await lastValueFrom(stateHandler.getObservable().pipe(take(1)));
 
     expect(state).toStrictEqual(expected);
     expect(stateHandler.getState()).toStrictEqual(expected);
@@ -102,13 +116,13 @@ describe('Observable State Handler', () => {
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
-  it('should expose state item observable via getObservable', async () => {
-    const observableValue = await lastValueFrom(stateHandler.getObservable('test').pipe(take(1)));
+  it('should expose state item observable via getObservableItem', async () => {
+    const observableValue = await lastValueFrom(stateHandler.getObservableItem('test').pipe(take(1)));
 
     expect(observableValue).toBe('testValue');
   });
 
-  it('should only call subscriber when object state has changed', async () => {
+  it('should only call subscriber when object state has changed', () => {
     const spy = jest.fn();
 
     const unsubscribe = stateHandler.subscribe(spy);
@@ -192,4 +206,69 @@ describe('Observable State Handler', () => {
 
     expect(spy).toHaveBeenCalledTimes(2);
   });
+
+  it('should enable devtools from global setup and fall back to the class name as namespace', () => {
+    const { connect, devTools } = mockDevToolsExtension();
+
+    setupStatusQuo({
+      devTools: {
+        enabled: true,
+      },
+    });
+
+    new TestObservableStateHandler();
+
+    expect(connect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        instanceId: 'testobservablestatehandler',
+        name: 'TestObservableStateHandler',
+      })
+    );
+    expect(devTools.init).toHaveBeenCalledWith({
+      test: 'testValue',
+      test2: 'testValue2',
+    });
+    expect(devTools.subscribe).toHaveBeenCalledTimes(1);
+  });
+
+  it('should prefer per-handler devtools options over global setup', () => {
+    const { connect } = mockDevToolsExtension();
+
+    setupStatusQuo({
+      devTools: {
+        enabled: true,
+      },
+    });
+
+    new TestObservableStateHandler({
+      devTools: {
+        namespace: 'LocalHandler',
+      },
+    });
+
+    expect(connect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        instanceId: 'localhandler',
+        name: 'LocalHandler',
+      })
+    );
+  });
+
+  it('should allow per-handler devtools settings to disable a global devtools setup', () => {
+    const { connect } = mockDevToolsExtension();
+
+    setupStatusQuo({
+      devTools: {
+        enabled: true,
+      },
+    });
+
+    new TestObservableStateHandler({
+      devTools: {
+        enabled: false,
+      },
+    });
+
+    expect(connect).not.toHaveBeenCalled();
+  });
 });

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

@@ -1,6 +1,7 @@
 import { resetStatusQuoForTests, setupStatusQuo } from '../../config/status-quo-config.js';
 import { SignalStateHandler } from '../signal-state-handler.js';
 import { makeStateSingleton } from '../state-singleton.js';
+
 import type { DistinctOptions } from '../../config/status-quo-config.js';
 
 type TestState = { test: string; test2: string };
@@ -67,7 +68,10 @@ class CounterSignalStateHandler extends SignalStateHandler<CounterState, Counter
   }
 }
 
-class CounterSignalBridgeStateHandler extends SignalStateHandler<CounterState, { noop: () => void }> {
+class CounterSignalBridgeStateHandler extends SignalStateHandler<
+  CounterState,
+  { noop: () => void }
+> {
   constructor(
     counterSingleton: ReturnType<typeof makeStateSingleton<CounterState, CounterActions>>,
     onCounterSync: (counterState: CounterState) => void

package/src/store/base-state-handler.ts

@@ -1,22 +1,17 @@
-import { withDevTools } from './dev-tools.js';
+import { resolveDevToolsOptions } from '../config/status-quo-config.js';
 import { createSelectorCache, selectWithCache } from '../utils/selector-cache.js';
+import { withDevTools } from './dev-tools.js';
 
 import type { StateSubscriptionHandler } from '../types/types.js';
-import type { DevTools, MessagePayload } from './dev-tools.js';
 import type { EqualityFn, Selector } from '../utils/selector-cache.js';
-
-type DevToolsOptions = {
-  enabled?: boolean;
-  namespace: string;
-};
+import type { DevTools, MessagePayload } from './dev-tools.js';
+import type { DevToolsOptions } from '../config/status-quo-config.js';
 
 type Subscribable<T> = {
   subscribe: (listener: (value: T) => void) => () => void;
   getSnapshot?: () => T;
 };
 
-const defaultDevToolsOptions = { enabled: false, namespace: 'Store' };
-
 const devToolsFeatures = {
   pause: true,
   lock: true,
@@ -41,19 +36,18 @@ export abstract class BaseStateHandler<S, A> implements StateSubscriptionHandler
   }
 
   protected initDevTools(devToolsOptions?: DevToolsOptions) {
-    const mergedOptions = {
-      ...defaultDevToolsOptions,
-      ...devToolsOptions,
-    };
+    const resolvedOptions = resolveDevToolsOptions(devToolsOptions);
 
-    if (!mergedOptions.enabled) {
+    if (!resolvedOptions.enabled) {
       this.devTools = null;
       return;
     }
 
+    const namespace = devToolsOptions?.namespace ?? this.getDevToolsNamespace();
+
     this.devTools = withDevTools(this.initialState, {
-      name: mergedOptions.namespace,
-      instanceId: mergedOptions.namespace.toLowerCase().replaceAll(' ', '-'),
+      name: namespace,
+      instanceId: namespace.toLowerCase().replaceAll(' ', '-'),
       actionCreators: this.getActions(),
       features: devToolsFeatures,
     });
@@ -86,25 +80,24 @@ export abstract class BaseStateHandler<S, A> implements StateSubscriptionHandler
   protected abstract getStateValue(): S;
   protected abstract setStateValue(nextState: S): void;
 
-  protected bindSubscribable<T>(
-    service: Subscribable<T>,
-    onChange: (value: T) => void,
-    selector?: Selector<T, T>,
-    isEqual?: EqualityFn<T>
-  ): void;
+  protected getDevToolsNamespace() {
+    return this.constructor.name || 'Store';
+  }
+
   protected bindSubscribable<T, Sel>(
     service: Subscribable<T>,
     onChange: (value: Sel) => void,
     selector: Selector<T, Sel>,
     isEqual?: EqualityFn<Sel>
   ): void;
+  protected bindSubscribable<T>(service: Subscribable<T>, onChange: (value: T) => void): void;
   protected bindSubscribable<T, Sel = T>(
     service: Subscribable<T>,
     onChange: (value: Sel) => void,
     selector?: Selector<T, Sel>,
     isEqual: EqualityFn<Sel> = Object.is
   ) {
-    const selectorFn = (selector ?? ((value: T) => value as unknown as Sel)) as Selector<T, Sel>;
+    const selectorFn = (selector ?? ((value: T) => value as unknown as Sel));
     const selectorCache = createSelectorCache<Sel>();
     let receivedSyncValue = false;
 
@@ -152,7 +145,7 @@ export abstract class BaseStateHandler<S, A> implements StateSubscriptionHandler
 
       case 'JUMP_TO_STATE':
       case 'JUMP_TO_ACTION':
-        this.setStateValue(JSON.parse(message.state));
+        this.setStateValue(JSON.parse(message.state) as S);
         break;
 
       default:

package/src/store/dev-tools.ts

@@ -28,17 +28,17 @@ export function withDevTools<S>(initialState: S, options = {}): DevTools | null
     return null;
   }
 
-  // eslint-disable-next-line no-underscore-dangle
+   
   if (!window.__REDUX_DEVTOOLS_EXTENSION__) {
     console.error('Status Quo :: Devtools Extension is not installed!');
     return null;
   }
 
-  // eslint-disable-next-line no-underscore-dangle
+   
   const devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect(options);
 
   devTools.init(initialState);
 
-  // eslint-disable-next-line consistent-return
+   
   return devTools;
 }

package/src/store/observable-state-handler.ts

@@ -1,18 +1,15 @@
 import { BehaviorSubject, distinctUntilChanged, distinctUntilKeyChanged, map } from 'rxjs';
 
-import { BaseStateHandler } from './base-state-handler.js';
 import { resolveDistinctOptions } from '../config/status-quo-config.js';
+import { BaseStateHandler } from './base-state-handler.js';
 
+import type { DevToolsOptions, DistinctOptions } from '../config/status-quo-config.js';
 import type { Observable } from 'rxjs';
-import type { DistinctOptions } from '../config/status-quo-config.js';
 
 type ObservableStateHandlerProps<S> = {
   initialState: S;
   options?: {
-    devTools?: {
-      enabled?: boolean;
-      namespace: string;
-    };
+    devTools?: DevToolsOptions;
     distinct?: DistinctOptions<S>;
     useDistinctUntilChanged?: boolean;
   };
@@ -27,7 +24,10 @@ export abstract class ObservableStateHandler<S, A> extends BaseStateHandler<S, A
   protected constructor({ initialState, options }: ObservableStateHandlerProps<S>) {
     super(initialState);
     this.state$ = new BehaviorSubject<S>(initialState);
-    this.distinctOptions = resolveDistinctOptions(options?.distinct, options?.useDistinctUntilChanged);
+    this.distinctOptions = resolveDistinctOptions(
+      options?.distinct,
+      options?.useDistinctUntilChanged
+    );
     this.initDevTools(options?.devTools);
   }
 
@@ -39,16 +39,15 @@ export abstract class ObservableStateHandler<S, A> extends BaseStateHandler<S, A
     this.state$.next(nextState);
   }
 
-  getStateItemAsObservable(key: keyof S) {
+  getObservableItem<K extends keyof S>(key: K): Observable<S[K]> {
     return this.state$.pipe(
       distinctUntilKeyChanged(key),
       map((state) => state[key])
     );
   }
 
-  getStateAsObservable(options: StateObservableOptions = {}) {
-    const useDistinctUntilChanged =
-      options.useDistinctUntilChanged ?? this.distinctOptions.enabled;
+  getObservable(options: StateObservableOptions = {}): Observable<S> {
+    const useDistinctUntilChanged = options.useDistinctUntilChanged ?? this.distinctOptions.enabled;
 
     if (!useDistinctUntilChanged) {
       return this.state$;
@@ -58,22 +57,13 @@ export abstract class ObservableStateHandler<S, A> extends BaseStateHandler<S, A
       distinctUntilChanged((previous, next) => {
         return this.distinctOptions.comparator(previous, next);
       })
-    ) as Observable<S>;
-  }
-
-  getObservable(key: keyof S) {
-    return this.getStateItemAsObservable(key);
-  }
-
-  /** @deprecated Use getObservable instead. */
-  getObservableItem(key: keyof S) {
-    return this.getObservable(key);
+    );
   }
 
   subscribe(listener: () => void): () => void;
   subscribe(listener: (value: S) => void): () => void;
   subscribe(listener: (value: S) => void) {
-    const subscription = this.getStateAsObservable().subscribe((nextState) => {
+    const subscription = this.getObservable().subscribe((nextState) => {
       listener(nextState);
     });
     return () => subscription.unsubscribe();

package/src/store/signal-state-handler.ts

@@ -1,18 +1,15 @@
 import { signal } from '@preact/signals-core';
 
-import { BaseStateHandler } from './base-state-handler.js';
 import { resolveDistinctOptions } from '../config/status-quo-config.js';
+import { BaseStateHandler } from './base-state-handler.js';
 
+import type { DevToolsOptions, DistinctOptions } from '../config/status-quo-config.js';
 import type { Signal } from '@preact/signals-core';
-import type { DistinctOptions } from '../config/status-quo-config.js';
 
 type SignalStateHandlerProps<S> = {
   initialState: S;
   options?: {
-    devTools?: {
-      enabled?: boolean;
-      namespace: string;
-    };
+    devTools?: DevToolsOptions;
     distinct?: DistinctOptions<S>;
     useDistinctUntilChanged?: boolean;
   };
@@ -26,7 +23,10 @@ export abstract class SignalStateHandler<S, A> extends BaseStateHandler<S, A> {
     super(initialState);
 
     this.state = signal<S>(initialState);
-    this.distinctOptions = resolveDistinctOptions(options?.distinct, options?.useDistinctUntilChanged);
+    this.distinctOptions = resolveDistinctOptions(
+      options?.distinct,
+      options?.useDistinctUntilChanged
+    );
     this.initDevTools(options?.devTools);
   }
 
@@ -48,7 +48,10 @@ export abstract class SignalStateHandler<S, A> extends BaseStateHandler<S, A> {
         return;
       }
 
-      if (this.distinctOptions.enabled && this.distinctOptions.comparator(previousSnapshot, nextState)) {
+      if (
+        this.distinctOptions.enabled &&
+        this.distinctOptions.comparator(previousSnapshot, nextState)
+      ) {
         previousSnapshot = nextState;
         return;
       }

package/src/store/state-singleton.ts

@@ -10,7 +10,7 @@ export interface StateSingletonOptions {
 
 export function makeStateSingleton<S, A>(
   stateHandlerFactory: () => StateSubscriptionHandler<S, A>,
-  { destroyOnNoConsumers = true }: StateSingletonOptions = {}
+  { destroyOnNoConsumers = false }: StateSingletonOptions = {}
 ): StateSingleton<S, A> {
   let instance: StateSubscriptionHandler<S, A> | null = null;
   const singleton: StateSingleton<S, A> & {

package/tsconfig.json

@@ -24,9 +24,8 @@
     "declarationDir": "dist",
     "outDir": "dist",
     "typeRoots": [
-      "node",
-      "node_modules/@types",
-      "node_modules/@redux-devtools/extension"
+      "../../node_modules/@types",
+      "../../node_modules/@redux-devtools/extension"
     ],
     "jsx": "react"
   },

package/.eslintrc.cjs

@@ -1,132 +0,0 @@
-module.exports = {
-    root: true,
-    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
-    plugins: ['react', '@typescript-eslint', 'simple-import-sort'],
-    ignorePatterns: [
-        '.eslintrc.js',
-        '*.config.js',
-        'setupTests.js',
-        'setupTests.ts',
-        'env.js',
-        'env.local.js',
-    ],
-    extends: [
-        'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
-        'airbnb-base',
-        'airbnb-typescript/base',
-        'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-        'plugin:react/recommended',
-        'airbnb',
-        'airbnb/hooks',
-        'airbnb-typescript',
-        // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors.
-        // Make sure this is always the last configuration in the extends array.
-        'plugin:prettier/recommended',
-    ],
-    parserOptions: {
-        project: './tsconfig.json',
-        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
-        sourceType: 'module', // Allows for the use of imports
-        ecmaFeatures: {
-            jsx: true, // Allows for the parsing of JSX
-        },
-    },
-    settings: {
-        react: {
-            version: 'detect', // React version. "detect" automatically picks the version you have installed.
-        },
-    },
-    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
-    rules: {
-        'max-classes-per-file': ['error', 2],
-        'no-console': 'off',
-        '@typescript-eslint/consistent-type-imports': 'error',
-        'no-param-reassign': ['error', {props: false}], // for reducer and simple reference changes
-        'import/order': 'off', // Is handled by simple-import-sort
-        'import/prefer-default-export': 'off', // This is not really useful, because named exports are easier to import (IDE)
-        'import/no-default-export': 'error', // Prefer named exports over default exports since they are easier to find and refactor
-        'import/extensions': [
-            'error',
-            'always',
-            {
-                ignorePackages: true,
-                js: 'always',
-            },
-        ],
-        'simple-import-sort/exports': 'error',
-        'simple-import-sort/imports': [
-            'error',
-            {
-                /**
-                 * The default grouping, but with type imports last as a separate group.
-                 * From https://github.com/lydell/eslint-plugin-simple-import-sort/blob/37f9448cdfed85dacf27e34c515653ff96f0377a/examples/.eslintrc.js.
-                 */
-                groups: [['^\\u0000'], ['^@?\\w'], ['^'], ['^\\.'], ['^.+\\u0000$']],
-            },
-        ],
-        '@typescript-eslint/no-use-before-define': ['error', {functions: false}], // function declarations are always
-        // hoisted so it's safe
-        '@typescript-eslint/lines-between-class-members': [
-            'error',
-            'always',
-            {exceptAfterSingleLine: true},
-        ], // Avoid blowing up classes
-
-        // Forbid the use of extraneous packages
-        // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md
-        // paths are treated both as absolute paths, and relative to process.cwd()
-        'import/no-extraneous-dependencies': [
-            'error',
-            {
-                devDependencies: [
-                    '**/setupTests.{js,ts}', // test setup files
-                    'test/**', // tape, common npm pattern
-                    'tests/**', // also common npm pattern
-                    'spec/**', // mocha, rspec-like pattern
-                    '**/__tests__/**', // jest pattern
-                    '**/__mocks__/**', // jest pattern
-                    'test.{js,jsx}', // repos with a single test file
-                    'test-*.{js,jsx}', // repos with multiple top-level test files
-                    '**/*{.,_}{test,spec}.{js,jsx}', // tests where the extension or filename suffix denotes that it is a test
-                    '**/jest.config.js', // jest config
-                    '**/jest.setup.js', // jest setup
-                    '**/vue.config.js', // vue-cli config
-                    '**/webpack.config.js', // webpack config
-                    '**/webpack.config.*.js', // webpack config
-                    '**/rollup.config.js', // rollup config
-                    '**/rollup.config.*.js', // rollup config
-                    '**/gulpfile.js', // gulp config
-                    '**/gulpfile.*.js', // gulp config
-                    '**/Gruntfile{,.js}', // grunt config
-                    '**/protractor.conf.js', // protractor config
-                    '**/protractor.conf.*.js', // protractor config
-                    '**/karma.conf.js', // karma config
-                    '**/.eslintrc.js', // eslint config
-                ],
-                optionalDependencies: false,
-            },
-        ],
-        'react/prop-types': 'off', // Since we do not use prop-types
-        'react/require-default-props': 'off', // Since we do not use prop-types
-        // Many of our loops are server side rendered, so we can rely on the index in general
-        'react/no-array-index-key': 0,
-        // To support hydration of components, a string is necessary so that the minification of bundles
-        // do not affect our markup generation on the server.
-        'react/display-name': [2, {ignoreTranspilerName: true}],
-        // aria roles ignored (0) instead of warning (1) / errors (2).
-        'jsx-a11y/role-supports-aria-props': 0,
-        'react/function-component-definition': [2, {namedComponents: 'arrow-function'}],
-        // Conditional spreads are easier to do so we can deactivate this rule
-        'react/jsx-props-no-spreading': 0,
-        // Enforce the definition of Fragment instead of shorthand syntax.
-        // The thing is, that keys can only be applied to the long version. So we should stick to one version.
-        'react/jsx-fragments': [2, 'element'],
-        // We need to use setDangerouslyInnerHtml for article and server side rendered markup prepared by external helpers.
-        // So it makes no sense to have this rule in place.
-        'react/no-danger': 0,
-        // strict null-checking is not necessary.
-        // The syntax itself should be avoided for sure but in some cases where we know we get the data,
-        // we can use this functionality
-        '@typescript-eslint/no-non-null-assertion': 0,
-    },
-};

package/.github/workflows/pages.yml

@@ -1,46 +0,0 @@
-name: Deploy Docs
-
-on:
-  push:
-    branches: [master]
-  workflow_dispatch:
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-concurrency:
-  group: pages
-  cancel-in-progress: true
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: npm
-      - name: Install dependencies
-        run: npm ci
-      - name: Build docs
-        run: npm run docs:build
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: ./docs
-
-  deploy:
-    runs-on: ubuntu-latest
-    needs: build
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    steps:
-      - name: Deploy
-        id: deployment
-        uses: actions/deploy-pages@v4

package/.github/workflows/release.yml

@@ -1,33 +0,0 @@
-name: Release
-
-on:
-  push:
-    tags:
-      - 'v*'
-
-permissions:
-  contents: write
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: npm
-      - name: Install dependencies
-        run: npm ci
-      - name: Build dist
-        run: npm run build
-      - name: Package dist
-        run: |
-          zip -r "dist-${{ github.ref_name }}.zip" dist
-      - name: Create GitHub release
-        uses: softprops/action-gh-release@v2
-        with:
-          files: dist-${{ github.ref_name }}.zip
-          generate_release_notes: true

package/.nvmrc

@@ -1 +0,0 @@
-v22

package/.prettierrc

@@ -1,7 +0,0 @@
-{
-  "useTabs": false,
-  "printWidth": 100,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "semi": true
-}