@rxdi/router 0.7.220 → 0.7.222

package/README.md

@@ -236,4 +236,105 @@ export class AboutComponent extends LitElement implements OnBeforeEnter, OnAfter
 
 }
 
+```
+
+#### Snapshot changes
+
+You can subscribe to route changes using `onSnapshotChange`. This is useful for reactive updates based on the current route state.
+
+```typescript
+import { Component, html, LitElement, OnUpdateFirst } from '@rxdi/lit-html';
+import { OnDestroy } from '@rxdi/lit-html';
+import { Router } from '@rxdi/router';
+import { Subject, takeUntil } from 'rxjs';
+
+/**
+ * @customElement app-component
+ */
+@Component({
+  selector: 'app-component',
+  template(this: AboutComponent) {
+    return html``;
+  },
+})
+export class AboutComponent extends LitElement implements OnUpdateFirst, OnDestroy {
+  @Router()
+  private router: Router;
+
+  destroy$ = new Subject();
+
+  OnUpdateFirst() {
+    this.router
+      .onSnapshotChange()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((e) => {
+        console.log(e);
+      });
+  }
+
+  OnDestroy() {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+}
+```
+
+#### Child Routing with Slots
+
+The router supports advanced child routing where the parent component acts as a layout container. By using the standard Web Component `<slot></slot>` mechanism, the parent component can wrap child routes with common UI elements (headers, sidebars, etc.).
+
+**Define the Module with Child Routes:**
+
+```typescript
+import { Module } from '@rxdi/core';
+import { RouterModule } from '@rxdi/router';
+import { ProjectContainerComponent } from './project-container.component';
+import { DetailsComponent } from './details.component';
+import { SettingsComponent } from './settings.component';
+
+@Module({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '/:projectId',
+        component: ProjectContainerComponent, // This component contains the <slot>
+        children: [
+          {
+            path: '/',
+            component: DetailsComponent, // Rendered inside ProjectContainerComponent's slot
+          },
+          {
+            path: '/settings',
+            component: SettingsComponent, // Rendered inside ProjectContainerComponent's slot
+          }
+        ],
+      },
+    ]),
+  ],
+})
+export class ProjectsModule {}
+```
+
+**Parent Component Implementation (`ProjectContainerComponent`):**
+
+The parent component simply includes a `<slot>` elements in its template. The router will automatically inject the matched child component into this slot.
+
+```typescript
+import { Component } from '@rhtml/component';
+import { html, LitElement } from '@rxdi/lit-html';
+
+@Component({
+  selector: 'project-container-component',
+  template: () => html`
+    <div style="height: 100%; display: flex; flex-direction: column;">
+      <header>Project Header (Visible on all child routes)</header>
+      
+      <!-- The active child route component will be rendered here -->
+      <slot></slot>
+      
+      <footer>Project Footer</footer>
+    </div>
+  `,
+})
+export class ProjectContainerComponent extends LitElement {}
 ```

package/dist/decorators.d.ts

@@ -1,7 +1,6 @@
 /**
  * Define getter to `this.location.params` from component `this` and assign params to decorated property
  *
- * Info can be found at @vaadin-router https://vaadin.github.io/vaadin-router/vaadin-router/demo/#vaadin-router-route-parameters-demos
  * @param target: LitElement | HTMLElement
  * @returns this.location.params as getter (lazy evaluated)
  * Usage:
@@ -24,4 +23,4 @@ export class UserProfile extends LitElement {
 }
 ```
    */
-export declare function RouteParams(): (target: Object, propertyKey: string) => void;
+export declare function RouteParams(): (target: HTMLElement, propertyKey: string) => void;

package/dist/decorators.js

@@ -1,10 +1,10 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-explicit-any */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RouteParams = RouteParams;
 /**
  * Define getter to `this.location.params` from component `this` and assign params to decorated property
  *
- * Info can be found at @vaadin-router https://vaadin.github.io/vaadin-router/vaadin-router/demo/#vaadin-router-route-parameters-demos
  * @param target: LitElement | HTMLElement
  * @returns this.location.params as getter (lazy evaluated)
  * Usage:

package/dist/helpers.d.ts

@@ -1,5 +1,5 @@
 import { BehaviorSubject } from 'rxjs';
 import { Route } from './injection.tokens';
-export declare const ChildRoutesObservable: BehaviorSubject<Route<any>[]>;
+export declare const ChildRoutesObservable: BehaviorSubject<Route[]>;
 export declare function loadRoutes(routes: Route[]): Route<any>[];
 export declare function getQueryParams<T>(params: string[]): T;

package/dist/helpers.js

@@ -12,9 +12,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChildRoutesObservable = void 0;
 exports.loadRoutes = loadRoutes;
 exports.getQueryParams = getQueryParams;
+const core_1 = require("@rxdi/core");
 const rxjs_1 = require("rxjs");
 const injection_tokens_1 = require("./injection.tokens");
-const core_1 = require("@rxdi/core");
 const RouteCache = new Map();
 exports.ChildRoutesObservable = new rxjs_1.BehaviorSubject(null);
 function assignChildren(route) {
@@ -22,8 +22,12 @@ function assignChildren(route) {
         const lazyModule = route.children;
         route.children = function (context, commands) {
             return __awaiter(this, void 0, void 0, function* () {
-                yield lazyModule(context, commands);
-                let params = [...exports.ChildRoutesObservable.getValue().map((r) => Object.assign({}, r))];
+                const loadedModule = yield lazyModule(context, commands);
+                let routes = exports.ChildRoutesObservable.getValue();
+                if (loadedModule && Array.isArray(loadedModule.ROUTES)) {
+                    routes = loadedModule.ROUTES;
+                }
+                const params = [...(routes || []).map((r) => Object.assign({}, r))];
                 if (!RouteCache.has(route.path)) {
                     RouteCache.set(route.path, params);
                 }
@@ -87,6 +91,9 @@ function assignStaticIs(route) {
     if (typeof route.component === 'function') {
         route.component = route.component.is();
     }
+    if (Array.isArray(route.children)) {
+        route.children = route.children.map((child) => assignStaticIs(assignAction(assignChildren(child))));
+    }
     return route;
 }
 function loadRoutes(routes) {

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import { ModuleWithServices } from '@rxdi/core';
-import { RouterComponent } from './router.component';
-import { RouterOptions, Route } from './injection.tokens';
+import { Route, RouterOptions } from './injection.tokens';
 import { NotFoundComponent } from './not-found.component';
+import { RouterComponent } from './router.component';
 export declare class RouterModule {
     static forRoot<C>(routes: Route<C>[], options?: RouterOptions): ModuleWithServices;
-    static forChild(routes: Route<any>[]): typeof RouterModule;
+    static forChild(routes: Route[]): typeof RouterModule;
 }
 export * from './injection.tokens';
 export * from './outlet';

package/dist/index.js

@@ -23,9 +23,9 @@ var RouterModule_1;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RouterModule = void 0;
 const core_1 = require("@rxdi/core");
-const router_component_1 = require("./router.component");
-const injection_tokens_1 = require("./injection.tokens");
 const helpers_1 = require("./helpers");
+const injection_tokens_1 = require("./injection.tokens");
+const router_component_1 = require("./router.component");
 let RouterModule = RouterModule_1 = class RouterModule {
     static forRoot(routes, options) {
         return {

package/dist/injection.tokens.d.ts

@@ -1,14 +1,16 @@
+import { InjectionToken } from '@rxdi/core';
 import { Observable } from 'rxjs';
 import { Outlet } from './outlet';
-export interface NavigationTrigger {
-}
 export declare function Router(): (target: Object, propertyKey: string) => void;
 export type LazyChildren = (context?: CanActivateContext, commands?: CanActivateCommands) => Promise<any>;
 export type Router = Outlet;
 export interface Route<C = any> {
-    path: string;
+    path?: string | string[];
     component?: C | Function | string;
-    animate?: boolean;
+    animate?: boolean | {
+        leave?: string;
+        enter?: string;
+    };
     children?: Route<C>[] | LazyChildren;
     redirect?: string;
     freeze?: boolean;
@@ -25,35 +27,40 @@ export interface CanActivateContextKeys {
     repeat: boolean;
 }
 export interface RouteContext extends Route {
-    parent: {
-        parent: any;
-        path: string;
-    };
+    parent?: {
+        parent?: any;
+        path?: string | string[];
+    } | null;
 }
 export interface CanActivateResolver {
     canActivate(context: CanActivateContext, commands: CanActivateCommands): CanActivateRedirectResult | Promise<CanActivateRedirectResult> | boolean | Promise<boolean> | Observable<boolean> | void;
 }
 export interface CanActivateRedirectResult {
-    from: string;
-    params: any;
-    pathname: string;
+    redirect: {
+        from: string;
+        params: any;
+        pathname: string;
+    };
 }
 export interface CanActivateContext {
-    chain: {
+    pathname: string;
+    params: any;
+    route: RouteContext;
+    chain?: {
         route: RouteContext;
         path: string;
-        element: HTMLUnknownElement;
+        element?: HTMLElement;
     }[];
     keys: any[];
-    next: (resume?: any, parent?: any, prevResult?: any) => any;
+    next?: (resume?: any, parent?: any, prevResult?: any) => any;
 }
 export interface CanActivateCommands {
-    component: () => HTMLUnknownElement;
+    component: (component: string) => HTMLElement;
     redirect: (path: string) => CanActivateRedirectResult;
 }
 export declare const RouterRoutlet = "router-outlet";
 export declare const Routes = "router-routes";
-export declare const RouterOptions = "router-options";
+export declare const RouterOptions: InjectionToken<RouterOptions>;
 export interface RouterOptions {
     baseUrl?: string;
     log?: boolean;

package/dist/injection.tokens.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RouterOptions = exports.Routes = exports.RouterRoutlet = void 0;
 exports.Router = Router;
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const core_1 = require("@rxdi/core");
 function Router() {
     return (target, propertyKey) => {
@@ -12,4 +14,4 @@ function Router() {
 }
 exports.RouterRoutlet = 'router-outlet';
 exports.Routes = 'router-routes';
-exports.RouterOptions = 'router-options';
+exports.RouterOptions = new core_1.InjectionToken('router-options');

package/dist/lib/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const MODULE = "module";
+export declare const NOMODULE = "nomodule";
+export declare const bundleKeys: readonly ["module", "nomodule"];

package/dist/lib/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bundleKeys = exports.NOMODULE = exports.MODULE = void 0;
+exports.MODULE = 'module';
+exports.NOMODULE = 'nomodule';
+exports.bundleKeys = [exports.MODULE, exports.NOMODULE];

package/dist/lib/index.d.ts

@@ -0,0 +1,4 @@
+import { Resolver } from './resolver';
+import { Router } from './router';
+export * from './types';
+export { Resolver, Router };

package/dist/{slot → lib}/index.js

@@ -14,7 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RouterSlot = void 0;
-var router_slot_1 = require("router-slot");
-Object.defineProperty(exports, "RouterSlot", { enumerable: true, get: function () { return router_slot_1.RouterSlot; } });
-__exportStar(require("./slot"), exports);
+exports.Router = exports.Resolver = void 0;
+const resolver_1 = require("./resolver");
+Object.defineProperty(exports, "Resolver", { enumerable: true, get: function () { return resolver_1.Resolver; } });
+const router_1 = require("./router");
+Object.defineProperty(exports, "Router", { enumerable: true, get: function () { return router_1.Router; } });
+__exportStar(require("./types"), exports);

package/dist/lib/path-to-regexp.d.ts

@@ -0,0 +1,6 @@
+import { CompileOptions, PathToken, PathToRegexpOptions, RouteParams } from './types';
+export declare function parse(str: string, options?: PathToRegexpOptions): (string | PathToken)[];
+export declare function compile(str: string, options?: PathToRegexpOptions): (data?: RouteParams, options?: CompileOptions) => string;
+export declare function tokensToFunction(tokens: (string | PathToken)[]): (data?: RouteParams, options?: CompileOptions) => string;
+export declare function tokensToRegExp(tokens: (string | PathToken)[], keys?: PathToken[], options?: PathToRegexpOptions): RegExp;
+export declare function pathToRegexp(path: string | RegExp | (string | RegExp)[], keys?: PathToken[], options?: PathToRegexpOptions): RegExp;

package/dist/lib/path-to-regexp.js

@@ -0,0 +1,228 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parse = parse;
+exports.compile = compile;
+exports.tokensToFunction = tokensToFunction;
+exports.tokensToRegExp = tokensToRegExp;
+exports.pathToRegexp = pathToRegexp;
+const DEFAULT_DELIMITER = '/';
+const DEFAULT_DELIMITERS = './';
+const PATH_REGEXP = new RegExp(['(\\\\.)', '(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?'].join('|'), 'g');
+function parse(str, options) {
+    const tokens = [];
+    let key = 0;
+    let index = 0;
+    let path = '';
+    const defaultDelimiter = (options && options.delimiter) || DEFAULT_DELIMITER;
+    const delimiters = (options && options.delimiters) || DEFAULT_DELIMITERS;
+    let pathEscaped = false;
+    let res;
+    while ((res = PATH_REGEXP.exec(str)) !== null) {
+        const m = res[0];
+        const escaped = res[1];
+        const offset = res.index;
+        path += str.slice(index, offset);
+        index = offset + m.length;
+        if (escaped) {
+            path += escaped[1];
+            pathEscaped = true;
+            continue;
+        }
+        let prev = '';
+        const next = str[index];
+        const name = res[2];
+        const capture = res[3];
+        const group = res[4];
+        const modifier = res[5];
+        if (!pathEscaped && path.length) {
+            const k = path.length - 1;
+            if (delimiters.indexOf(path[k]) > -1) {
+                prev = path[k];
+                path = path.slice(0, k);
+            }
+        }
+        if (path) {
+            tokens.push(path);
+            path = '';
+            pathEscaped = false;
+        }
+        const partial = prev !== '' && next !== undefined && next !== prev;
+        const repeat = modifier === '+' || modifier === '*';
+        const optional = modifier === '?' || modifier === '*';
+        const delimiter = prev || defaultDelimiter;
+        const pattern = capture || group;
+        tokens.push({
+            name: name || key++,
+            prefix: prev,
+            delimiter: delimiter,
+            optional: optional,
+            repeat: repeat,
+            partial: partial,
+            pattern: pattern ? escapeGroup(pattern) : '[^' + escapeString(delimiter) + ']+?',
+        });
+    }
+    if (path || index < str.length) {
+        tokens.push(path + str.substr(index));
+    }
+    return tokens;
+}
+function compile(str, options) {
+    return tokensToFunction(parse(str, options));
+}
+function tokensToFunction(tokens) {
+    const matches = new Array(tokens.length);
+    for (let i = 0; i < tokens.length; i++) {
+        if (typeof tokens[i] === 'object') {
+            matches[i] = new RegExp('^(?:' + tokens[i].pattern + ')$');
+        }
+    }
+    return function (data, options) {
+        let path = '';
+        const encode = (options && options.encode) || encodeURIComponent;
+        for (let i = 0; i < tokens.length; i++) {
+            const token = tokens[i];
+            if (typeof token === 'string') {
+                path += token;
+                continue;
+            }
+            const value = data ? data[token.name] : undefined;
+            let segment;
+            if (Array.isArray(value)) {
+                if (!token.repeat) {
+                    throw new TypeError('Expected "' + token.name + '" to not repeat, but got array');
+                }
+                if (value.length === 0) {
+                    if (token.optional)
+                        continue;
+                    throw new TypeError('Expected "' + token.name + '" to not be empty');
+                }
+                for (let j = 0; j < value.length; j++) {
+                    segment = encode(value[j], token);
+                    if (!matches[i].test(segment)) {
+                        throw new TypeError('Expected all "' + token.name + '" to match "' + token.pattern + '"');
+                    }
+                    path += (j === 0 ? token.prefix : token.delimiter) + segment;
+                }
+                continue;
+            }
+            if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+                segment = encode(String(value), token);
+                if (!matches[i].test(segment)) {
+                    throw new TypeError('Expected "' + token.name + '" to match "' + token.pattern + '", but got "' + segment + '"');
+                }
+                path += token.prefix + segment;
+                continue;
+            }
+            if (token.optional) {
+                if (token.partial)
+                    path += token.prefix;
+                continue;
+            }
+            throw new TypeError('Expected "' + token.name + '" to be ' + (token.repeat ? 'an array' : 'a string'));
+        }
+        return path;
+    };
+}
+function escapeString(str) {
+    return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, '\\$1');
+}
+function escapeGroup(group) {
+    return group.replace(/([=!:$/()])/g, '\\$1');
+}
+function flags(options) {
+    return options && options.sensitive ? '' : 'i';
+}
+function regexpToRegexp(path, keys) {
+    if (!keys)
+        return path;
+    const groups = path.source.match(/\((?!\?)/g);
+    if (groups) {
+        for (let i = 0; i < groups.length; i++) {
+            keys.push({
+                name: i,
+                prefix: '',
+                delimiter: '',
+                optional: false,
+                repeat: false,
+                partial: false,
+                pattern: '',
+            });
+        }
+    }
+    return path;
+}
+function arrayToRegexp(path, keys, options) {
+    const parts = [];
+    for (let i = 0; i < path.length; i++) {
+        parts.push(pathToRegexp(path[i], keys, options).source);
+    }
+    return new RegExp('(?:' + parts.join('|') + ')', flags(options));
+}
+function stringToRegexp(path, keys, options) {
+    return tokensToRegExp(parse(path, options), keys, options);
+}
+function tokensToRegExp(tokens, keys, options) {
+    options = options || {};
+    const strict = options.strict;
+    const start = options.start !== false;
+    const end = options.end !== false;
+    const delimiter = escapeString(options.delimiter || DEFAULT_DELIMITER);
+    const delimiters = options.delimiters || DEFAULT_DELIMITERS;
+    const endsWith = []
+        .concat(options.endsWith || [])
+        .map(escapeString)
+        .concat('$')
+        .join('|');
+    let route = start ? '^' : '';
+    let isEndDelimited = tokens.length === 0;
+    for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+        if (typeof token === 'string') {
+            route += escapeString(token);
+            isEndDelimited = i === tokens.length - 1 && delimiters.indexOf(token[token.length - 1]) > -1;
+        }
+        else {
+            const capture = token.repeat
+                ? '(?:' + token.pattern + ')(?:' + escapeString(token.delimiter) + '(?:' + token.pattern + '))*'
+                : token.pattern;
+            if (keys)
+                keys.push(token);
+            if (token.optional) {
+                if (token.partial) {
+                    route += escapeString(token.prefix) + '(' + capture + ')?';
+                }
+                else {
+                    route += '(?:' + escapeString(token.prefix) + '(' + capture + '))?';
+                }
+            }
+            else {
+                route += escapeString(token.prefix) + '(' + capture + ')';
+            }
+        }
+    }
+    if (end) {
+        if (!strict)
+            route += '(?:' + delimiter + ')?';
+        route += endsWith === '$' ? '$' : '(?=' + endsWith + ')';
+    }
+    else {
+        if (!strict)
+            route += '(?:' + delimiter + '(?=' + endsWith + '))?';
+        if (!isEndDelimited)
+            route += '(?=' + delimiter + '|' + endsWith + ')';
+    }
+    return new RegExp(route, flags(options));
+}
+function pathToRegexp(path, keys, options) {
+    if (path instanceof RegExp) {
+        return regexpToRegexp(path, keys);
+    }
+    if (Array.isArray(path)) {
+        return arrayToRegexp(path, keys, options);
+    }
+    return stringToRegexp(path, keys, options);
+}
+// Attach static methods to pathToRegexp to match original usage if needed,
+// but since we are exporting them individually, consumers can just import them.
+// However, the original code used `pathToRegexp_1` which had static methods attached.
+// We can just export them as named exports.

package/dist/lib/resolver.d.ts

@@ -0,0 +1,70 @@
+import { GenerateUrlsOptions, ResolverOptions, Route, RouteContext, RouteResult, UrlGenerator } from './types';
+/**
+ * Universal Router (https://www.kriasoft.com/universal-router/)
+ *
+ * Copyright (c) 2015-present Kriasoft.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+export declare class Resolver {
+    baseUrl: string;
+    errorHandler?: (error: Error) => RouteResult;
+    resolveRoute: (context: RouteContext) => RouteResult | Promise<RouteResult> | undefined | Promise<undefined>;
+    context: Partial<RouteContext> & {
+        resolver: Resolver;
+    };
+    root: Route;
+    constructor(routes: Route | Route[], options?: ResolverOptions);
+    /**
+     * Returns the current list of routes (as a shallow copy). Adding / removing
+     * routes to / from the returned array does not affect the routing config,
+     * but modifying the route objects does.
+     *
+     * @return
+     */
+    getRoutes(): Route[];
+    /**
+     * Sets the routing config (replacing the existing one).
+     *
+     * @param routes a single route or an array of those
+     *    (the array is shallow copied)
+     */
+    setRoutes(routes: Route | Route[]): void;
+    /**
+     * Appends one or several routes to the routing config and returns the
+     * effective routing config after the operation.
+     *
+     * @param routes a single route or an array of those
+     *    (the array is shallow copied)
+     * @return
+     * @protected
+     */
+    addRoutes(routes: Route | Route[]): Route[];
+    /**
+     * Removes all existing routes from the routing config.
+     */
+    removeRoutes(): void;
+    /**
+     * Asynchronously resolves the given pathname, i.e. finds all routes matching
+     * the pathname and tries resolving them one after another in the order they
+     * are listed in the routes config until the first non-null result.
+     *
+     * Returns a promise that is fulfilled with the return value of an object that consists of the first
+     * route handler result that returns something other than `null` or `undefined` and context used to get this result.
+     *
+     * If no route handlers return a non-null result, or if no route matches the
+     * given pathname the returned promise is rejected with a 'page not found'
+     * `Error`.
+     *
+     * @param pathnameOrContext the pathname to
+     *    resolve or a context object with a `pathname` property and other
+     *    properties to pass to the route resolver functions.
+     * @return
+     */
+    resolve(pathnameOrContext: string | Partial<RouteContext>): Promise<RouteContext>;
+    static __createUrl(url: string, base: string): URL;
+    __getEffectiveBaseUrl(): string;
+    __normalizePathname(pathname: string): string | undefined;
+}
+export declare function generateUrls(router: Resolver, options?: GenerateUrlsOptions): UrlGenerator;