@mmstack/router-core 19.0.0 → 19.0.1

package/fesm2022/mmstack-router-core.mjs

@@ -1,7 +1,8 @@
 import { inject, computed, isSignal, untracked } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, EventType } from '@angular/router';
 import { toWritable } from '@mmstack/primitives';
+import { filter, map } from 'rxjs/operators';
 
 /**
  * Creates a WritableSignal that synchronizes with a specific URL query parameter,
@@ -114,9 +115,53 @@ function queryParam(key) {
     return toWritable(queryParam, set);
 }
 
+/**
+ * Type guard to check if a Router Event is a NavigationEnd event.
+ * @internal
+ */
+function isNavigationEnd(e) {
+    return 'type' in e && e.type === EventType.NavigationEnd;
+}
+/**
+ * Creates a Signal that tracks the current router URL.
+ *
+ * The signal emits the URL string reflecting the router state *after* redirects
+ * have completed for each successful navigation. It initializes with the router's
+ * current URL state.
+ *
+ * @returns {Signal<string>} A Signal emitting the `urlAfterRedirects` upon successful navigation.
+ *
+ * @example
+ * ```ts
+ * import { Component, effect } from '@angular/core';
+ * import { url } from '@mmstack/router-core'; // Adjust import path
+ *
+ * @Component({
+ * selector: 'app-root',
+ * template: `Current URL: {{ currentUrl() }}`
+ * })
+ * export class AppComponent {
+ * currentUrl = url();
+ *
+ * constructor() {
+ * effect(() => {
+ * console.log('Navigation ended. New URL:', this.currentUrl());
+ * // e.g., track page view with analytics
+ * });
+ * }
+ * }
+ * ```
+ */
+function url() {
+    const router = inject(Router);
+    return toSignal(router.events.pipe(filter(isNavigationEnd), map((e) => e.urlAfterRedirects)), {
+        initialValue: router.url,
+    });
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { queryParam };
+export { queryParam, url };
 //# sourceMappingURL=mmstack-router-core.mjs.map

package/fesm2022/mmstack-router-core.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mmstack-router-core.mjs","sources":["../../../../../packages/router/core/src/lib/query-param.ts","../../../../../packages/router/core/src/mmstack-router-core.ts"],"sourcesContent":["import {\n  computed,\n  inject,\n  isSignal,\n  untracked,\n  type WritableSignal,\n} from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { toWritable } from '@mmstack/primitives';\n\n/**\n * Creates a WritableSignal that synchronizes with a specific URL query parameter,\n * enabling two-way binding between the signal's state and the URL.\n *\n * Reading the signal provides the current value of the query parameter (or null if absent).\n * Setting the signal updates the URL query parameter using `Router.navigate`, triggering\n * navigation and causing the signal to update reactively if the navigation is successful.\n *\n * @param key The key of the query parameter to synchronize with.\n * Can be a static string (e.g., `'search'`) or a function/signal returning a string\n * for dynamic keys (e.g., `() => this.userId() + '_filter'` or `computed(() => this.category() + '_sort')`).\n * The signal will reactively update if the key returned by the function/signal changes.\n * @returns {WritableSignal<string | null>} A signal representing the query parameter's value.\n * - Reading returns the current value string, or `null` if the parameter is absent in the URL.\n * - Setting the signal to a string updates the query parameter in the URL (e.g., `signal.set('value')` results in `?key=value`).\n * - Setting the signal to `null` removes the query parameter from the URL (e.g., `signal.set(null)` results in `?otherParam=...`).\n * - Automatically reflects changes if the query parameters update due to external navigation.\n * @remarks\n * - Requires Angular's `ActivatedRoute` and `Router` to be available in the injection context.\n * - Uses `Router.navigate` with `queryParamsHandling: 'merge'` to preserve other existing query parameters during updates.\n * - Handles dynamic keys reactively. If the result of the `key` function/signal changes, the signal will start reflecting the value of the *new* query parameter key.\n * - During Server-Side Rendering (SSR), it reads the initial value from the route snapshot. Write operations (`set`) might have limited or no effect on the server depending on the platform configuration.\n *\n * @example\n * ```ts\n * import { Component, computed, effect, signal } from '@angular/core';\n * import { queryParam } from '@mmstack/router-core'; // Adjust import path as needed\n * // import { FormsModule } from '@angular/forms'; // If using ngModel\n *\n * @Component({\n * selector: 'app-product-list',\n * standalone: true,\n * // imports: [FormsModule], // If using ngModel\n * template: `\n * <div>\n * Sort By:\n * <select [value]=\"sortSignal() ?? ''\" (change)=\"sortSignal.set($any($event.target).value || null)\">\n * <option value=\"\">Default</option>\n * <option value=\"price_asc\">Price Asc</option>\n * <option value=\"price_desc\">Price Desc</option>\n * <option value=\"name\">Name</option>\n * </select>\n * <button (click)=\"sortSignal.set(null)\" [disabled]=\"!sortSignal()\">Clear Sort</button>\n * </div>\n * <div>\n * Page:\n * <input type=\"number\" min=\"1\" [value]=\"pageSignal() ?? '1'\" #p (input)=\"setPage(p.value)\"/>\n * </div>\n * * `\n * })\n * export class ProductListComponent {\n * // Two-way bind the 'sort' query parameter (?sort=...)\n * // Defaults to null if param is missing\n * sortSignal = queryParam('sort');\n *\n * // Example with a different type (needs serialization or separate logic)\n * // For simplicity, we treat page as string | null here\n * pageSignal = queryParam('page');\n *\n * constructor() {\n * effect(() => {\n * const currentSort = this.sortSignal();\n * const currentPage = this.pageSignal(); // Read as string | null\n * console.log('Sort/Page changed, reloading products for:', { sort: currentSort, page: currentPage });\n * // --- Fetch data based on currentSort and currentPage ---\n * });\n * }\n *\n * setPage(value: string): void {\n * const pageNum = parseInt(value, 10);\n * // Set to null if page is 1 (to remove param), otherwise set string value\n * this.pageSignal.set(isNaN(pageNum) || pageNum <= 1 ? null : pageNum.toString());\n * }\n * }\n * ```\n */\nexport function queryParam(\n  key: string | (() => string),\n): WritableSignal<string | null> {\n  const route = inject(ActivatedRoute);\n  const router = inject(Router);\n\n  const keySignal =\n    typeof key === 'string'\n      ? computed(() => key)\n      : isSignal(key)\n        ? key\n        : computed(key);\n\n  const queryParamMap = toSignal(route.queryParamMap, {\n    initialValue: route.snapshot.queryParamMap,\n  });\n\n  const queryParams = toSignal(route.queryParams, {\n    initialValue: route.snapshot.queryParams,\n  });\n\n  const queryParam = computed(() => queryParamMap().get(keySignal()));\n\n  const set = (newValue: string | null) => {\n    const next = {\n      ...untracked(queryParams),\n    };\n    const key = untracked(keySignal);\n\n    if (newValue === null) {\n      delete next[key];\n    } else {\n      next[key] = newValue;\n    }\n\n    router.navigate([], {\n      relativeTo: route,\n      queryParams: next,\n      queryParamsHandling: 'merge',\n    });\n  };\n\n  return toWritable(queryParam, set);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EG;AACG,SAAU,UAAU,CACxB,GAA4B,EAAA;AAE5B,IAAA,MAAM,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC;AACpC,IAAA,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AAE7B,IAAA,MAAM,SAAS,GACb,OAAO,GAAG,KAAK;AACb,UAAE,QAAQ,CAAC,MAAM,GAAG;AACpB,UAAE,QAAQ,CAAC,GAAG;AACZ,cAAE;AACF,cAAE,QAAQ,CAAC,GAAG,CAAC;AAErB,IAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,aAAa,EAAE;AAClD,QAAA,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,aAAa;AAC3C,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE;AAC9C,QAAA,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW;AACzC,KAAA,CAAC;AAEF,IAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,aAAa,EAAE,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC;AAEnE,IAAA,MAAM,GAAG,GAAG,CAAC,QAAuB,KAAI;AACtC,QAAA,MAAM,IAAI,GAAG;YACX,GAAG,SAAS,CAAC,WAAW,CAAC;SAC1B;AACD,QAAA,MAAM,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC;AAEhC,QAAA,IAAI,QAAQ,KAAK,IAAI,EAAE;AACrB,YAAA,OAAO,IAAI,CAAC,GAAG,CAAC;;aACX;AACL,YAAA,IAAI,CAAC,GAAG,CAAC,GAAG,QAAQ;;AAGtB,QAAA,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE;AAClB,YAAA,UAAU,EAAE,KAAK;AACjB,YAAA,WAAW,EAAE,IAAI;AACjB,YAAA,mBAAmB,EAAE,OAAO;AAC7B,SAAA,CAAC;AACJ,KAAC;AAED,IAAA,OAAO,UAAU,CAAC,UAAU,EAAE,GAAG,CAAC;AACpC;;AClIA;;AAEG;;;;"}
+{"version":3,"file":"mmstack-router-core.mjs","sources":["../../../../../packages/router/core/src/lib/query-param.ts","../../../../../packages/router/core/src/lib/url.ts","../../../../../packages/router/core/src/mmstack-router-core.ts"],"sourcesContent":["import {\n  computed,\n  inject,\n  isSignal,\n  untracked,\n  type WritableSignal,\n} from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { toWritable } from '@mmstack/primitives';\n\n/**\n * Creates a WritableSignal that synchronizes with a specific URL query parameter,\n * enabling two-way binding between the signal's state and the URL.\n *\n * Reading the signal provides the current value of the query parameter (or null if absent).\n * Setting the signal updates the URL query parameter using `Router.navigate`, triggering\n * navigation and causing the signal to update reactively if the navigation is successful.\n *\n * @param key The key of the query parameter to synchronize with.\n * Can be a static string (e.g., `'search'`) or a function/signal returning a string\n * for dynamic keys (e.g., `() => this.userId() + '_filter'` or `computed(() => this.category() + '_sort')`).\n * The signal will reactively update if the key returned by the function/signal changes.\n * @returns {WritableSignal<string | null>} A signal representing the query parameter's value.\n * - Reading returns the current value string, or `null` if the parameter is absent in the URL.\n * - Setting the signal to a string updates the query parameter in the URL (e.g., `signal.set('value')` results in `?key=value`).\n * - Setting the signal to `null` removes the query parameter from the URL (e.g., `signal.set(null)` results in `?otherParam=...`).\n * - Automatically reflects changes if the query parameters update due to external navigation.\n * @remarks\n * - Requires Angular's `ActivatedRoute` and `Router` to be available in the injection context.\n * - Uses `Router.navigate` with `queryParamsHandling: 'merge'` to preserve other existing query parameters during updates.\n * - Handles dynamic keys reactively. If the result of the `key` function/signal changes, the signal will start reflecting the value of the *new* query parameter key.\n * - During Server-Side Rendering (SSR), it reads the initial value from the route snapshot. Write operations (`set`) might have limited or no effect on the server depending on the platform configuration.\n *\n * @example\n * ```ts\n * import { Component, computed, effect, signal } from '@angular/core';\n * import { queryParam } from '@mmstack/router-core'; // Adjust import path as needed\n * // import { FormsModule } from '@angular/forms'; // If using ngModel\n *\n * @Component({\n * selector: 'app-product-list',\n * standalone: true,\n * // imports: [FormsModule], // If using ngModel\n * template: `\n * <div>\n * Sort By:\n * <select [value]=\"sortSignal() ?? ''\" (change)=\"sortSignal.set($any($event.target).value || null)\">\n * <option value=\"\">Default</option>\n * <option value=\"price_asc\">Price Asc</option>\n * <option value=\"price_desc\">Price Desc</option>\n * <option value=\"name\">Name</option>\n * </select>\n * <button (click)=\"sortSignal.set(null)\" [disabled]=\"!sortSignal()\">Clear Sort</button>\n * </div>\n * <div>\n * Page:\n * <input type=\"number\" min=\"1\" [value]=\"pageSignal() ?? '1'\" #p (input)=\"setPage(p.value)\"/>\n * </div>\n * * `\n * })\n * export class ProductListComponent {\n * // Two-way bind the 'sort' query parameter (?sort=...)\n * // Defaults to null if param is missing\n * sortSignal = queryParam('sort');\n *\n * // Example with a different type (needs serialization or separate logic)\n * // For simplicity, we treat page as string | null here\n * pageSignal = queryParam('page');\n *\n * constructor() {\n * effect(() => {\n * const currentSort = this.sortSignal();\n * const currentPage = this.pageSignal(); // Read as string | null\n * console.log('Sort/Page changed, reloading products for:', { sort: currentSort, page: currentPage });\n * // --- Fetch data based on currentSort and currentPage ---\n * });\n * }\n *\n * setPage(value: string): void {\n * const pageNum = parseInt(value, 10);\n * // Set to null if page is 1 (to remove param), otherwise set string value\n * this.pageSignal.set(isNaN(pageNum) || pageNum <= 1 ? null : pageNum.toString());\n * }\n * }\n * ```\n */\nexport function queryParam(\n  key: string | (() => string),\n): WritableSignal<string | null> {\n  const route = inject(ActivatedRoute);\n  const router = inject(Router);\n\n  const keySignal =\n    typeof key === 'string'\n      ? computed(() => key)\n      : isSignal(key)\n        ? key\n        : computed(key);\n\n  const queryParamMap = toSignal(route.queryParamMap, {\n    initialValue: route.snapshot.queryParamMap,\n  });\n\n  const queryParams = toSignal(route.queryParams, {\n    initialValue: route.snapshot.queryParams,\n  });\n\n  const queryParam = computed(() => queryParamMap().get(keySignal()));\n\n  const set = (newValue: string | null) => {\n    const next = {\n      ...untracked(queryParams),\n    };\n    const key = untracked(keySignal);\n\n    if (newValue === null) {\n      delete next[key];\n    } else {\n      next[key] = newValue;\n    }\n\n    router.navigate([], {\n      relativeTo: route,\n      queryParams: next,\n      queryParamsHandling: 'merge',\n    });\n  };\n\n  return toWritable(queryParam, set);\n}\n","import { inject, type Signal } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport {\n  type Event,\n  EventType,\n  type NavigationEnd,\n  Router,\n} from '@angular/router';\nimport { filter, map } from 'rxjs/operators';\n\n/**\n * Type guard to check if a Router Event is a NavigationEnd event.\n * @internal\n */\nfunction isNavigationEnd(e: Event): e is NavigationEnd {\n  return 'type' in e && e.type === EventType.NavigationEnd;\n}\n\n/**\n * Creates a Signal that tracks the current router URL.\n *\n * The signal emits the URL string reflecting the router state *after* redirects\n * have completed for each successful navigation. It initializes with the router's\n * current URL state.\n *\n * @returns {Signal<string>} A Signal emitting the `urlAfterRedirects` upon successful navigation.\n *\n * @example\n * ```ts\n * import { Component, effect } from '@angular/core';\n * import { url } from '@mmstack/router-core'; // Adjust import path\n *\n * @Component({\n * selector: 'app-root',\n * template: `Current URL: {{ currentUrl() }}`\n * })\n * export class AppComponent {\n * currentUrl = url();\n *\n * constructor() {\n * effect(() => {\n * console.log('Navigation ended. New URL:', this.currentUrl());\n * // e.g., track page view with analytics\n * });\n * }\n * }\n * ```\n */\nexport function url(): Signal<string> {\n  const router = inject(Router);\n\n  return toSignal(\n    router.events.pipe(\n      filter(isNavigationEnd),\n      map((e) => e.urlAfterRedirects),\n    ),\n    {\n      initialValue: router.url,\n    },\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EG;AACG,SAAU,UAAU,CACxB,GAA4B,EAAA;AAE5B,IAAA,MAAM,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC;AACpC,IAAA,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AAE7B,IAAA,MAAM,SAAS,GACb,OAAO,GAAG,KAAK;AACb,UAAE,QAAQ,CAAC,MAAM,GAAG;AACpB,UAAE,QAAQ,CAAC,GAAG;AACZ,cAAE;AACF,cAAE,QAAQ,CAAC,GAAG,CAAC;AAErB,IAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,aAAa,EAAE;AAClD,QAAA,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,aAAa;AAC3C,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE;AAC9C,QAAA,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW;AACzC,KAAA,CAAC;AAEF,IAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,aAAa,EAAE,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC;AAEnE,IAAA,MAAM,GAAG,GAAG,CAAC,QAAuB,KAAI;AACtC,QAAA,MAAM,IAAI,GAAG;YACX,GAAG,SAAS,CAAC,WAAW,CAAC;SAC1B;AACD,QAAA,MAAM,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC;AAEhC,QAAA,IAAI,QAAQ,KAAK,IAAI,EAAE;AACrB,YAAA,OAAO,IAAI,CAAC,GAAG,CAAC;;aACX;AACL,YAAA,IAAI,CAAC,GAAG,CAAC,GAAG,QAAQ;;AAGtB,QAAA,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE;AAClB,YAAA,UAAU,EAAE,KAAK;AACjB,YAAA,WAAW,EAAE,IAAI;AACjB,YAAA,mBAAmB,EAAE,OAAO;AAC7B,SAAA,CAAC;AACJ,KAAC;AAED,IAAA,OAAO,UAAU,CAAC,UAAU,EAAE,GAAG,CAAC;AACpC;;ACxHA;;;AAGG;AACH,SAAS,eAAe,CAAC,CAAQ,EAAA;IAC/B,OAAO,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,aAAa;AAC1D;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BG;SACa,GAAG,GAAA;AACjB,IAAA,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAE7B,OAAO,QAAQ,CACb,MAAM,CAAC,MAAM,CAAC,IAAI,CAChB,MAAM,CAAC,eAAe,CAAC,EACvB,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAChC,EACD;QACE,YAAY,EAAE,MAAM,CAAC,GAAG;AACzB,KAAA,CACF;AACH;;AC5DA;;AAEG;;;;"}

package/index.d.ts

@@ -1 +1,2 @@
 export * from './lib/query-param';
+export * from './lib/url';

package/lib/url.d.ts

@@ -0,0 +1,32 @@
+import { type Signal } from '@angular/core';
+/**
+ * Creates a Signal that tracks the current router URL.
+ *
+ * The signal emits the URL string reflecting the router state *after* redirects
+ * have completed for each successful navigation. It initializes with the router's
+ * current URL state.
+ *
+ * @returns {Signal<string>} A Signal emitting the `urlAfterRedirects` upon successful navigation.
+ *
+ * @example
+ * ```ts
+ * import { Component, effect } from '@angular/core';
+ * import { url } from '@mmstack/router-core'; // Adjust import path
+ *
+ * @Component({
+ * selector: 'app-root',
+ * template: `Current URL: {{ currentUrl() }}`
+ * })
+ * export class AppComponent {
+ * currentUrl = url();
+ *
+ * constructor() {
+ * effect(() => {
+ * console.log('Navigation ended. New URL:', this.currentUrl());
+ * // e.g., track page view with analytics
+ * });
+ * }
+ * }
+ * ```
+ */
+export declare function url(): Signal<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmstack/router-core",
-  "version": "19.0.0",
+  "version": "19.0.1",
   "keywords": [
     "angular",
     "signals",