Angular Signal Store

.github/workflows/nodejs.yml

@@ -15,7 +15,7 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [16.x]
+                node-version: [18.x]
 
         steps:
             - uses: actions/checkout@v2
@@ -24,8 +24,7 @@ jobs:
               with:
                   node-version: ${{ matrix.node-version }}
             - run: yarn install --frozen-lockfile
-            - run: npm run build:all
-            - run: npm run test:mini-rx-store
-            - run: npm run test:mini-rx-store-ng
+            - run: yarn run build:all
+            - run: yarn run test:all
               env:
                   CI: true

.prettierignore

@@ -4,3 +4,5 @@
 /coverage
 *.md
 /docs
+
+.angular

LICENSE

@@ -63,3 +63,7 @@ See the file for details.
 This repository includes a file "deep-freeze.ts" originally copied from
 https://github.com/jsdf/deep-freeze/blob/v1.1.1/index.js, public domain licensed.
 See the file for details.
+
+This repository includes a file "mini-rx-to-observable.ts" originally copied from
+https://github.com/angular/angular/blob/16.2.10/packages/core/rxjs-interop/src/to_observable.ts, MIT style licensed.
+See the file for details.

apps/mini-rx-angular-demo-e2e/.eslintrc.json

@@ -1,17 +1,17 @@
 {
-  "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
-    },
-    {
-      "files": ["src/plugins/index.js"],
-      "rules": {
-        "@typescript-eslint/no-var-requires": "off",
-        "no-undef": "off"
-      }
-    }
-  ]
+    "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
+    "ignorePatterns": ["!**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+            "rules": {}
+        },
+        {
+            "files": ["src/plugins/index.js"],
+            "rules": {
+                "@typescript-eslint/no-var-requires": "off",
+                "no-undef": "off"
+            }
+        }
+    ]
 }

jest.config.ts

@@ -1,4 +1,4 @@
-const { getJestProjects } = require('@nx/jest');
+import { getJestProjects } from '@nx/jest';
 
 export default {
     projects: getJestProjects(),

libs/common/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+    "extends": ["../../.eslintrc.json"],
+    "ignorePatterns": ["!**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+            "rules": {}
+        },
+        {
+            "files": ["*.ts", "*.tsx"],
+            "rules": {}
+        },
+        {
+            "files": ["*.js", "*.jsx"],
+            "rules": {}
+        }
+    ]
+}

libs/common/README.md

@@ -0,0 +1,11 @@
+# common
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build common` to build the library.
+
+## Running unit tests
+
+Run `nx test common` to execute the unit tests via [Jest](https://jestjs.io).

libs/common/jest.config.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+export default {
+    displayName: 'common',
+    preset: '../../jest.preset.js',
+    globals: {},
+    transform: {
+        '^.+\\.[tj]s$': [
+            'ts-jest',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+            },
+        ],
+    },
+    moduleFileExtensions: ['ts', 'js', 'html'],
+    coverageDirectory: '../../coverage/libs/common',
+    testRunner: 'jest-jasmine2',
+};

libs/common/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "@mini-rx/common",
+    "version": "0.0.8",
+    "peerDependencies": {
+        "rxjs": "^6.4.0 || ^7.0.0"
+    },
+    "sideEffects": false
+}

libs/common/project.json

@@ -0,0 +1,56 @@
+{
+    "name": "common",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/common/src",
+    "projectType": "library",
+    "targets": {
+        "build": {
+            "executor": "@nx/rollup:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/common",
+                "main": "libs/common/src/index.ts",
+                "tsConfig": "libs/common/tsconfig.lib.json",
+                "assets": [],
+                "project": "libs/common/package.json",
+                "format": ["esm", "cjs"],
+                "globals": [
+                    {
+                        "global": "Rx",
+                        "moduleId": "rxjs"
+                    },
+                    {
+                        "global": "Rx",
+                        "moduleId": "rxjs/operators"
+                    }
+                ]
+            }
+        },
+        "publish": {
+            "command": "node tools/scripts/publish.mjs common {args.ver} {args.tag}",
+            "dependsOn": ["build"]
+        },
+        "lint": {
+            "executor": "@nx/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": ["libs/common/**/*.ts"]
+            }
+        },
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/common/jest.config.ts",
+                "passWithNoTests": true
+            },
+            "configurations": {
+                "ci": {
+                    "ci": true,
+                    "codeCoverage": true
+                }
+            }
+        }
+    },
+    "tags": []
+}

libs/common/src/index.ts

@@ -0,0 +1,52 @@
+export { miniRxNameSpace } from './lib/constants';
+export { createSubSink } from './lib/sub-sink';
+export { createMiniRxActionType } from './lib/create-mini-rx-action-type';
+export { combineMetaReducers } from './lib/combine-meta-reducers';
+export { miniRxError } from './lib/mini-rx-error';
+export { sortExtensions } from './lib/sort-extensions';
+export { mapResponse } from './lib/map-response';
+export { tapResponse } from './lib/tap-response';
+export { ofType } from './lib/of-type';
+export { createActionsOnQueue } from './lib/actions-on-queue';
+export { defaultEffectsErrorHandler } from './lib/default-effects-error-handler';
+export {
+    createRxEffect,
+    hasEffectMetaData,
+    HasEffectMetadata,
+    EffectConfig,
+    EFFECT_METADATA_KEY,
+} from './lib/create-rx-effect';
+export { LoggerExtension } from './lib/extensions/logger/logger.extension';
+export { UndoExtension } from './lib/extensions/undo/undo-extension';
+export { undo } from './lib/extensions/undo/undo';
+export { ImmutableStateExtension } from './lib/extensions/immutable-state/immutable-state.extension';
+export {
+    AbstractReduxDevtoolsExtension,
+    ReduxDevtoolsOptions,
+} from './lib/extensions/redux-devtools/abstract-redux-devtools-extension';
+export { createFeatureStoreReducer } from './lib/create-feature-store-reducer';
+export { createComponentStoreReducer } from './lib/create-component-store-reducer';
+export { generateId } from './lib/generate-id';
+export { calculateExtensions } from './lib/calculate-extensions';
+export { createReducerManager, ReducerManager } from './lib/reducer-manager';
+export { componentStoreConfig } from './lib/component-store-config';
+export { ExtensionId } from './lib/enums';
+export {
+    Action,
+    Actions,
+    FeatureStoreConfig,
+    Reducer,
+    StateOrCallback,
+    MiniRxAction,
+    StoreExtension,
+    StoreConfig,
+    FeatureConfig,
+    MetaReducer,
+    ComponentStoreConfig,
+    ComponentStoreExtension,
+    AppState,
+    ReducerDictionary,
+    ReducerState,
+    UpdateStateCallback,
+    OperationType,
+} from './lib/models';

libs/common/src/lib/actions-on-queue.spec.ts

@@ -0,0 +1,34 @@
+import { createActionsOnQueue } from './actions-on-queue';
+import { take } from 'rxjs';
+
+describe('ActionsOnQueue', () => {
+    it('should dispatch actions', () => {
+        const spy = jest.fn();
+
+        const actionsOnQueue = createActionsOnQueue();
+        actionsOnQueue.actions$.subscribe(spy);
+
+        const action = { type: 'someAction' };
+        actionsOnQueue.dispatch(action);
+
+        expect(spy).toHaveBeenCalledWith(action);
+    });
+    it('should queue actions', () => {
+        // Without queueScheduler this test would fail because of stack overflow (Read more here: https://blog.cloudboost.io/so-how-does-rx-js-queuescheduler-actually-work-188c1b46526e)
+
+        const callLimit = 5000;
+
+        const actionsOnQueue = createActionsOnQueue();
+
+        const spy = jest.fn().mockImplementation(() => {
+            // Every received action dispatches another action
+            actionsOnQueue.dispatch({ type: 'someAction' });
+        });
+
+        actionsOnQueue.actions$.pipe(take(callLimit)).subscribe(spy);
+
+        actionsOnQueue.dispatch({ type: 'someInitialAction' }); // Dispatch an action to start the whole thing
+
+        expect(spy).toHaveBeenCalledTimes(callLimit);
+    });
+});

libs/common/src/lib/actions-on-queue.ts

@@ -0,0 +1,16 @@
+import { queueScheduler, Subject, observeOn } from 'rxjs';
+import { Action } from './models';
+
+export function createActionsOnQueue() {
+    const actionsSource = new Subject<Action>();
+
+    return {
+        actions$: actionsSource.asObservable().pipe(
+            observeOn(queueScheduler) // Prevent stack overflow: https://blog.cloudboost.io/so-how-does-rx-js-queuescheduler-actually-work-188c1b46526e
+        ),
+        dispatch: <T extends Action>(action: T): T => {
+            actionsSource.next(action);
+            return action;
+        },
+    };
+}

libs/common/src/lib/beautify-action.spec.ts

@@ -0,0 +1,33 @@
+import { beautifyAction } from './beautify-action';
+import { MiniRxAction, OperationType } from './models';
+import { createMiniRxActionType } from './create-mini-rx-action-type';
+
+describe('beautifyAction', () => {
+    it('should remove extra fields from FeatureStore/ComponentStore Actions', () => {
+        const csAction: MiniRxAction<any> = {
+            type: createMiniRxActionType(OperationType.SET_STATE, 'todos'),
+            stateOrCallback: {},
+        };
+
+        expect(beautifyAction(csAction)).toEqual({
+            type: '@mini-rx/todos/set-state',
+            payload: {},
+        });
+
+        const fsAction: MiniRxAction<any> = {
+            type: createMiniRxActionType(OperationType.SET_STATE, 'todos'),
+            stateOrCallback: {},
+            featureId: 'someFeatureId',
+        };
+
+        expect(beautifyAction(fsAction)).toEqual({
+            type: '@mini-rx/todos/set-state',
+            payload: {},
+        });
+    });
+    it('should not touch other normal Actions', () => {
+        const action = { type: 'someAction' };
+
+        expect(beautifyAction(action)).toBe(action);
+    });
+});

libs/common/src/lib/beautify-action.ts

@@ -0,0 +1,12 @@
+import { Action, MiniRxAction } from '../lib/models';
+import { isMiniRxAction } from './is-mini-rx-action';
+
+// Only display type and payload in the LoggingExtension and Redux DevTools
+export function beautifyAction(action: Action | MiniRxAction<any>): Action {
+    return isMiniRxAction(action)
+        ? {
+              type: action.type,
+              payload: action.stateOrCallback,
+          }
+        : action;
+}

libs/common/src/lib/calc-next-state.spec.ts

@@ -0,0 +1,13 @@
+import { calcNextState } from './calc-next-state';
+
+describe('calcNextState', () => {
+    it('should calculate next state', () => {
+        const currentState = { count: 1 };
+        expect(calcNextState(currentState, { count: 2 })).toEqual({ count: 2 });
+
+        // Witch callback
+        expect(calcNextState(currentState, (state) => ({ count: state.count + 2 }))).toEqual({
+            count: 3,
+        });
+    });
+});

libs/common/src/lib/calc-next-state.ts

@@ -0,0 +1,9 @@
+import { StateOrCallback } from './models';
+import { isFunction } from './is-function';
+
+export function calcNextState<T>(state: T, stateOrCallback: StateOrCallback<T>): T {
+    return {
+        ...state,
+        ...(isFunction(stateOrCallback) ? stateOrCallback(state) : stateOrCallback), // new partial state
+    };
+}