feat: Add @ngworker/router-store package with pure Angular Signals

.gitignore

@@ -25,7 +25,7 @@ node_modules/
 !.vscode/extensions.json
 
 # misc
-.angular/
+.angular
 .nx/cache/
 .nx/workspace-data/
 /.sass-cache

packages/router-store/.eslintrc.json

@@ -0,0 +1,46 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["packages/router-store/tsconfig.*?.json"]
+      },
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "ngw",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "ngw",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

packages/router-store/README.md

@@ -0,0 +1,7 @@
+# router-store
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test router-store` to execute the unit tests.

packages/router-store/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'router-store',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../coverage/packages/router-store',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

packages/router-store/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/packages/router-store",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

packages/router-store/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@ngworker/router-store",
+  "version": "17.0.0",
+  "description": "A strictly typed lightweight alternative to NgRx Router Store and ActivatedRoute using Angular Signals",
+  "license": "MIT",
+  "sideEffects": false,
+  "peerDependencies": {
+    "@angular/core": "^17.0.0",
+    "@angular/router": "^17.0.0"
+  },
+  "dependencies": {},
+  "keywords": [
+    "angular",
+    "router",
+    "signals",
+    "ngworker"
+  ],
+  "author": {
+    "name": "Lars Gyrup Brink Nielsen",
+    "email": "[email protected]",
+    "url": "https://github.com/LayZeeDK"
+  },
+  "contributors": [],
+  "funding": [
+    {
+      "type": "individual",
+      "url": "https://github.com/sponsors/LayZeeDK"
+    }
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "tag": "unknown"
+  },
+  "bugs": {
+    "url": "https://github.com/ngworker/router-component-store/issue"
+  },
+  "homepage": "https://github.com/ngworker/router-component-store#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ngworker/router-component-store"
+  }
+}

packages/router-store/project.json

@@ -0,0 +1,37 @@
+{
+  "name": "router-store",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/router-store/src",
+  "prefix": "ngworker",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "packages/router-store/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "packages/router-store/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "packages/router-store/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/router-store/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    }
+  }
+}

packages/router-store/src/index.ts

@@ -0,0 +1,11 @@
+// GlobalRouterStore
+export * from './lib/global-router-store/provide-global-router-store';
+// Serializable route state
+export * from './lib/@ngrx/router-store/minimal-activated-route-state-snapshot';
+// LocalRouterStore
+export * from './lib/local-router-store/provide-local-router-store';
+// RouterStore
+export * from './lib/router-store';
+export * from './lib/strict-query-params';
+export * from './lib/strict-route-data';
+export * from './lib/strict-route-params';

packages/router-store/src/lib/@ngrx/router-store/minimal-activated-route-state-snapshot.ts

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2017 Brandon Roberts, Mike Ryan, Victor Savkin, Rob Wormald
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { ActivatedRouteSnapshot } from '@angular/router';
+import { StrictQueryParams } from '../../strict-query-params';
+import { StrictRouteData } from '../../strict-route-data';
+import { StrictRouteParams } from '../../strict-route-params';
+
+/**
+ * Contains the information about a route associated with a component loaded in
+ * an outlet at a particular moment in time. MinimalActivatedRouteSnapshot can
+ * also be used to traverse the router state tree.
+ */
+export interface MinimalActivatedRouteSnapshot {
+  /**
+   * The configuration used to match this route.
+   */
+  readonly routeConfig: ActivatedRouteSnapshot['routeConfig'];
+  /**
+   * The URL segments matched by this route.
+   */
+  readonly url: ActivatedRouteSnapshot['url'];
+  /**
+   * The matrix parameters scoped to this route.
+   */
+  readonly params: StrictRouteParams;
+  /**
+   * The query parameters shared by all the routes.
+   */
+  readonly queryParams: StrictQueryParams;
+  /**
+   * The URL fragment shared by all the routes.
+   */
+  readonly fragment: ActivatedRouteSnapshot['fragment'];
+  /**
+   * The static and resolved data of this route.
+   *
+   * @remarks
+   * Contains serializable route `Data` without its symbol index, in particular
+   * without the `Symbol.for(RouteTitle)` key as this is an internal value for
+   * the Angular `Router`. Instead, we access the resolved route title through
+   * `MinimalActivatedRouteSnapshot['title']`.
+   */
+  readonly data: StrictRouteData;
+  /**
+   * The outlet name of the route.
+   */
+  readonly outlet: ActivatedRouteSnapshot['outlet'];
+  /**
+   * The resolved route title.
+   */
+  readonly title: ActivatedRouteSnapshot['title'];
+  /**
+   * The first child of this route in the router state tree
+   */
+  readonly firstChild?: MinimalActivatedRouteSnapshot;
+  /**
+   * The children of this route in the router state tree.
+   */
+  readonly children: MinimalActivatedRouteSnapshot[];
+}

packages/router-store/src/lib/@ngrx/router-store/minimal-router-state-snapshot.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2017 Brandon Roberts, Mike Ryan, Victor Savkin, Rob Wormald
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { MinimalActivatedRouteSnapshot } from './minimal-activated-route-state-snapshot';
+
+export interface MinimalRouterStateSnapshot {
+  readonly root: MinimalActivatedRouteSnapshot;
+  readonly url: string;
+}

packages/router-store/src/lib/@ngrx/router-store/minimal_serializer.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2017 Brandon Roberts, Mike Ryan, Victor Savkin, Rob Wormald
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { Injectable } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  Data,
+  RouterStateSnapshot,
+} from '@angular/router';
+import { InternalStrictRouteData } from '../../internal-strict-route-data';
+import { InternalStrictRouteParams } from '../../internal-strict-route-params';
+import { MinimalActivatedRouteSnapshot } from './minimal-activated-route-state-snapshot';
+import { MinimalRouterStateSnapshot } from './minimal-router-state-snapshot';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MinimalRouterStateSerializer {
+  serialize(routerState: RouterStateSnapshot): MinimalRouterStateSnapshot {
+    return {
+      root: this.#serializeRouteSnapshot(routerState.root),
+      url: routerState.url,
+    };
+  }
+
+  #serializeRouteData(routeData: Data): InternalStrictRouteData {
+    return Object.fromEntries(Object.entries(routeData));
+  }
+
+  #serializeRouteSnapshot(
+    routeSnapshot: ActivatedRouteSnapshot
+  ): MinimalActivatedRouteSnapshot {
+    const children = routeSnapshot.children.map((childRouteSnapshot) =>
+      this.#serializeRouteSnapshot(childRouteSnapshot)
+    );
+    return {
+      params: routeSnapshot.params as InternalStrictRouteParams,
+      data: this.#serializeRouteData(
+        routeSnapshot.data
+      ) as InternalStrictRouteData,
+      url: routeSnapshot.url,
+      outlet: routeSnapshot.outlet,
+      title: routeSnapshot.title,
+      routeConfig: routeSnapshot.routeConfig
+        ? {
+            path: routeSnapshot.routeConfig.path,
+            pathMatch: routeSnapshot.routeConfig.pathMatch,
+            redirectTo: routeSnapshot.routeConfig.redirectTo,
+            outlet: routeSnapshot.routeConfig.outlet,
+            title:
+              typeof routeSnapshot.routeConfig.title === 'string'
+                ? routeSnapshot.routeConfig.title
+                : undefined,
+          }
+        : null,
+      queryParams: routeSnapshot.queryParams as InternalStrictRouteParams,
+      fragment: routeSnapshot.fragment,
+      firstChild: children[0],
+      children,
+    };
+  }
+}