@lwrjs/router 0.10.0-alpha.1 → 0.10.0-alpha.10

package/build/{modules → es/modules}/lwr/routerUtils/types.d.ts

@@ -1,40 +1,40 @@
 import type { Key, PathFunction } from './pathToRegexp';
 import type { ContextId } from 'lwr/navigationContext';
 import { Unsubscriber } from 'lwr/observable';
-export declare type Module = Record<string | symbol | number, unknown>;
-export declare type Constructor<T = object> = new (...args: any[]) => T;
+export type Module = Record<string | symbol | number, unknown>;
+export type Constructor<T = object> = new (...args: any[]) => T;
 export interface Constructable<T = object> {
     constructor: Constructor<T>;
 }
-export declare type UrlMapper<TAddress> = {
+export type UrlMapper<TAddress> = {
     generateUrl(address: TAddress): string | null;
     parseUrl(url: string): TAddress | null;
 };
-export declare type RouteMatcher<TAddress> = {
+export type RouteMatcher<TAddress> = {
     matchRoute(address: TAddress): RoutingMatch | null;
 };
-export declare type ViewMapper<TAddress> = {
+export type ViewMapper<TAddress> = {
     navigate(address: TAddress): void;
     subscribe(callback: RouteCallback, replay?: boolean): Unsubscriber;
     resolveView(address: TAddress): Promise<RouteDestination>;
     contextId?: ContextId;
 };
-export declare type Router<TAddress = string> = ViewMapper<TAddress> & UrlMapper<TAddress> & RouteMatcher<TAddress>;
+export type Router<TAddress = string> = ViewMapper<TAddress> & UrlMapper<TAddress> & RouteMatcher<TAddress>;
 export interface DEPRECATED_getRouteFromUrl {
     <TAddress>(url: string, defaultImpl: Function): TAddress | null;
 }
 export interface DEPRECATED_getUrlFromRoute {
     <TAddress>(route: TAddress, defaultImpl: Function): string | null;
 }
-export declare type RouterConfig = {
+export type RouterConfig = {
     basePath?: string;
     routes?: RouteDefinition[];
     caseSensitive?: boolean;
     DEPRECATED_getRouteFromUrl?: DEPRECATED_getRouteFromUrl;
     DEPRECATED_getUrlFromRoute?: DEPRECATED_getUrlFromRoute;
 };
-export declare type RouterSerializationConfig<TAddress> = Required<Omit<RouterConfig, 'DEPRECATED_getRouteFromUrl' | 'DEPRECATED_getUrlFromRoute'> & UrlMapper<TAddress>>;
-export declare type RouteParameterPatterns = {
+export type RouterSerializationConfig<TAddress> = Required<Omit<RouterConfig, 'DEPRECATED_getRouteFromUrl' | 'DEPRECATED_getUrlFromRoute'> & UrlMapper<TAddress>>;
+export type RouteParameterPatterns = {
     [paramName: string]: string;
 };
 export interface RouteDefinition<TMetadata = Record<string, any>> {
@@ -46,21 +46,21 @@ export interface RouteDefinition<TMetadata = Record<string, any>> {
     handler: () => Promise<RouteHandlerModule>;
     metadata?: TMetadata;
 }
-export declare type PageBindings = {
+export type PageBindings = {
     attributeBindings: NullableStringAttributes;
     stateBindings: NullableStringAttributes;
 };
-declare type CompiledQueryResult = {
+type CompiledQueryResult = {
     literalValue?: string | null;
     routeParamName?: string;
 };
-export declare type CompiledQuery = Record<string, CompiledQueryResult>;
-declare type MatchedQueryResult = {
+export type CompiledQuery = Record<string, CompiledQueryResult>;
+type MatchedQueryResult = {
     value: string | null;
     routeParamName?: string;
 };
-export declare type MatchedQuery = Record<string, MatchedQueryResult>;
-export declare type QueryMatcher = (queryObject: QueryObject) => MatchedQuery | null;
+export type MatchedQuery = Record<string, MatchedQueryResult>;
+export type QueryMatcher = (queryObject: QueryObject) => MatchedQuery | null;
 export interface CompiledRouteDefinition {
     original: RouteDefinition;
     regex: RegExp;
@@ -69,11 +69,11 @@ export interface CompiledRouteDefinition {
     compiledQuery: CompiledQuery;
     queryMatcher: QueryMatcher;
 }
-export declare type RouteHandlerCallback = (routeDestination: RouteDestination) => void;
-export declare type RouteHandlerClass = {
+export type RouteHandlerCallback = (routeDestination: RouteDestination) => void;
+export type RouteHandlerClass = {
     new (callback: RouteHandlerCallback): RouteHandler;
 };
-export declare type RouteHandlerModule = {
+export type RouteHandlerModule = {
     default: RouteHandlerClass;
 };
 export interface RouteInstance {
@@ -82,12 +82,12 @@ export interface RouteInstance {
     state: NullableStringAttributes;
     pageReference: PageReference;
 }
-export declare type RouteDestination = {
+export type RouteDestination = {
     status?: 200 | 404 | 500;
     viewset: ViewSet;
     error?: Error;
 };
-export declare type RoutingMatch = {
+export type RoutingMatch = {
     pathMatch: string;
     route: RouteInstance;
     routeDefinition: RouteDefinition;
@@ -96,7 +96,7 @@ export interface CompiledRoutingMatch {
     route: RouteInstance;
     routeDefinition: CompiledRouteDefinition;
 }
-export declare type RoutingResult = RoutingMatch & RouteDestination;
+export type RoutingResult = RoutingMatch & RouteDestination;
 export interface ViewSet {
     [viewName: string]: (() => Promise<Module>) | ViewInfo;
 }
@@ -104,7 +104,7 @@ export interface ViewInfo {
     module: () => Promise<Module>;
     specifier: string;
 }
-export declare type RouteCallback = (result: RoutingResult) => void;
+export type RouteCallback = (result: RoutingResult) => void;
 export interface RouteHandler {
     dispose(): void;
     update(routeInfo: RouteInstance): void;
@@ -122,7 +122,7 @@ export interface MessageObject {
     url?: string;
     address?: string;
 }
-export declare type QueryObject = NullableStringAttributes;
+export type QueryObject = NullableStringAttributes;
 export interface StringAttributes {
     [key: string]: string;
 }

package/build/es/modules/lwr/routerUtils/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/es/modules/lwr/routerUtils/uriUtils.js

@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) 2019, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+/**
+ * f("one two &") -> "one%20two%20%26"
+ *
+ * @param str - String to URI encode
+ *
+ * @returns {string}
+ */
+export function encode(str = '') {
+    str = str || '';
+    return encodeURIComponent(str);
+}
+/**
+ * f("one%20two%20%26") -> "one two &"
+ *
+ * @param str - String to URI decode
+ *
+ * @returns {string}
+ */
+export function decode(str = '') {
+    str = str || '';
+    return decodeURIComponent(str);
+}
+/**
+ * f(url) -> "/some/relative/path"
+ * Output will...
+ * - always start with '/'
+ * - not contain query params or fragment
+ * - akin to window.location.pathname
+ *
+ * @param   {string} url - URL string to parse for a path
+ *
+ * @returns {string}
+ */
+export function getPathFromUrl(url) {
+    url = url || '/';
+    if (url.charAt(0) !== '/') {
+        url = '/' + url;
+    }
+    // can't use url object here to maintain portability
+    const fullmatch = url.match(/^[^#?]+/);
+    if (fullmatch !== null) {
+        const path = fullmatch[0];
+        return path === '/' ? '/' : path.replace(/\/$/, '');
+    }
+    return '/';
+}
+/**
+ * f(url) -> { "param1": "one", "param2": "two", param3: "" }
+ * Parameters without values get set to an empty string.
+ *
+ * @param {string} url - URL string to parse for a query object
+ *
+ * @returns {object}
+ */
+export function getQueryFromUrl(url) {
+    // Ensure this is a full URL.
+    url = url || '';
+    // Remove the fragment off the end if present
+    const fragmentStart = url.indexOf('#');
+    if (fragmentStart >= 0) {
+        url = url.substring(0, fragmentStart);
+    }
+    // can't use url object here to maintain portability
+    const queryIdx = url.indexOf('?');
+    const queryStr = queryIdx >= 0 ? url.substr(queryIdx + 1) : null;
+    const queryParams = {};
+    if (queryStr) {
+        queryStr.split('&').forEach((pair) => {
+            if (pair.indexOf('=') >= 0) {
+                const [key, value = ''] = pair.split('=');
+                queryParams[decode(key)] = decode(value);
+            }
+            else {
+                // e.g, ?qKey1 => { qKey1: null }
+                queryParams[decode(pair)] = null;
+            }
+        });
+    }
+    return queryParams;
+}
+/**
+ * f({ "param1": "one", "param2": "two", param3: "" }) -> "?param1=one&param2=two&param3"
+ * Query parameter values, but not keys, get URI encoded.
+ *
+ * @param {object} queryObject - Query object to turn into a string
+ *
+ * @returns {string}
+ */
+export function getQueryString(queryObj = {}) {
+    const keys = Object.keys(queryObj);
+    return keys.length // handle params without values here
+        ? `?${keys
+            .map((key) => {
+            const value = queryObj[key];
+            if (value === null) {
+                // { qKey: null } => '?qKey
+                return key;
+            }
+            return `${key}=${encode(value)}`;
+        })
+            .join('&')}`
+        : '';
+}
+/**
+ * Determines if the given string is a paramter name (":paramName")
+ * @param str string to test
+ * @returns true if string starts with ":"
+ */
+export function isParam(str) {
+    return str && str.length > 1 ? str.startsWith(':') : false;
+}
+/**
+ * @param routeParamName - routeParamName from CompiledQueryResult
+ * @returns the paramName without prefix; or undefined
+ */
+export function getParamName(routeParamName) {
+    return routeParamName ? (isParam(routeParamName) ? routeParamName.substr(1) : false) : false;
+}
+export function getQueryNames(compiledQuery) {
+    return Object.values(compiledQuery).reduce((paramNames, { routeParamName }) => {
+        const paramName = getParamName(routeParamName);
+        if (paramName) {
+            paramNames.push(paramName);
+        }
+        return paramNames;
+    }, []);
+}
+//# sourceMappingURL=uriUtils.js.map

package/build/modules/lwr/contextUtils/contextUtils.js

@@ -4,6 +4,11 @@
 import { ContextInfo } from './contextInfo';
 export { ContextInfo };
 export { getNavigationHelm, registerNavigationHelm } from './navigationApiStore';
+
+/**
+ * Interface for contextual wire adapters to subscribe to context changes
+ */
+
 export function generateContextualWireAdapter(contextInstance) {
   const Adapter = class Adapter {
     constructor(callback) {

package/build/modules/lwr/contextUtils/navigationApiStore.js

@@ -6,6 +6,13 @@
  */
 
 import { generateMessage, messages } from 'lwr/routerErrors';
+
+/**
+ * Provides the ability for a given context provider to find its NavigationHelm
+ * provider by just an ID. Having access to the NavigationHelm allows the consumer
+ * to direct navigation. Generally, the Helm is more powerful than the exposed APIs.
+ */
+
 // Keep a cache of context metadata, with their IDs as keys
 const CACHE = new WeakMap();
 

package/build/modules/lwr/domRouter/domRouter.js

@@ -18,6 +18,12 @@ import { CONTEXT_ID_BACKDOOR } from 'lwr/navigationMixinHacks';
 export const NAV_EVENT = `universalcontainernavigationevent${guid()}`;
 // Event fired to find nearest parent
 export const PARENT_EVENT = `universalcontainerparentevent${guid()}`;
+
+/*
+ * Provides a DomRouter class. Extended by the HistoryRouter and composed by the router-container LWCs.
+ * Composed with a Router for underlying routing capabilities.
+ */
+
 export class DomRouterImpl {
   pendingRoute = null;
   committedRoute = null;

package/build/modules/lwr/domRouterUtils/historyUtils.js

@@ -9,7 +9,6 @@
  * Manipulates the browser history on the window.
  * Ths just uses the window.history functionality directly.
  */
-
 /**
  * Sets a history state.
 

package/build/modules/lwr/outlet/outlet.css

@@ -1,3 +1,3 @@
-div[role='region'] {
+div[role='region'].outlet {
     outline: none;
 }

package/build/modules/lwr/outlet/outlet.html

@@ -1,10 +1,10 @@
-<template>
+<template lwc:render-mode="light">
     <div role="alert">
         <template if:true={hasError}>
             <slot name="error"></slot>
         </template>
     </div>
-    <div role="region" tabindex="-1">
+    <div class="outlet" role="region" tabindex="-1">
         <lwr-dynamic lwc:dynamic={viewCtor}></lwr-dynamic>
     </div>
 </template>

package/build/modules/lwr/outlet/outlet.js

@@ -1,6 +1,7 @@
 import { LightningElement, api, wire } from 'lwc';
 import { CurrentView } from 'lwr/navigation';
 export default class Outlet extends LightningElement {
+  static renderMode = 'light';
   @api
   refocusOff = false;
   @api
@@ -52,10 +53,8 @@ export default class Outlet extends LightningElement {
     // If the feature is not turned off, put the browser focus onto the dynamic content.
     // This is done after a route change for accessibility.
     if (!this.refocusOff) {
-      // TODO: LightningElement template type 'ShadowRootTheGoodPart' does not contain
-      // a querySelector function, neccessitating 'any'
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      this.template.querySelector(`div[role='region']`).focus();
+      const region = this.querySelector(`div[role='region'].outlet`);
+      if (region) region.focus();
     }
   }
 }

package/build/modules/lwr/router/router.js

@@ -10,6 +10,9 @@ import { generateMessage, messages } from 'lwr/routerErrors';
 import { createObservable } from 'lwr/observable';
 class RouterImpl {
   deprecatedConfig = {};
+
+  // The in-flight route state to be committed once the view mapping is handled
+
   routeHandlerId = 0;
 
   /**

package/build/modules/lwr/routerContainer/utils.js

@@ -10,9 +10,7 @@ import { invariant, messages } from 'lwr/routerErrors';
 import { DomRouterImpl } from 'lwr/domRouter';
 /*
  * Provides programmatic routing capabilities.
- */
-
-// The application may create 1 root router at a time.
+ */ // The application may create 1 root router at a time.
 let hasRoot = false;
 /**
  * Create a new navigation context, attach to the given node.

package/build/modules/lwr/routerUtils/pathToRegexp.js

@@ -311,6 +311,19 @@ export function tokensToFunction(tokens, options = {}) {
 export function compile(str, options) {
   return tokensToFunction(parse(str, options), options);
 }
+
+/**
+ * A match result contains data about the path match.
+ */
+
+/**
+ * A match is either `false` (no match) or a match result.
+ */
+
+/**
+ * The match function takes a string and returns whether it matched the path.
+ */
+
 /**
  * Create a path match function from `path-to-regexp` output.
  */
@@ -350,6 +363,10 @@ export function regexpToFunction(re, keys, options = {}) {
  * Metadata about a key.
  */
 
+/**
+ * A token is a string (nothing special) or key metadata (capture group).
+ */
+
 /**
  * Pull out keys from a regexp.
  */

package/build/modules/lwr/routerUtils/typeUtils.js

@@ -8,7 +8,6 @@
 /*
  * Utilities for checking type, including route types.
  */
-
 /**
  * @param {*} o - Item to check if it's an object
  * @returns {boolean}

package/package.json

@@ -5,7 +5,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.10.0-alpha.1",
+    "version": "0.10.0-alpha.10",
     "homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
     "repository": {
         "type": "git",
@@ -16,16 +16,16 @@
         "url": "https://github.com/salesforce-experience-platform-emu/lwr/issues"
     },
     "type": "module",
-    "types": "build/services/index.d.ts",
+    "types": "build/es/services/index.d.ts",
     "main": "build/cjs/services/index.cjs",
-    "module": "build/services/index.js",
+    "module": "build/es/services/index.js",
     "exports": {
         ".": {
-            "import": "./build/services/index.js",
+            "import": "./build/es/services/index.js",
             "require": "./build/cjs/services/index.cjs"
         },
         "./module-provider": {
-            "import": "./build/services/module-provider/index.js",
+            "import": "./build/es/services/module-provider/index.js",
             "require": "./build/cjs/services/module-provider/index.cjs"
         },
         "./pageObjects/*": {
@@ -48,11 +48,16 @@
         "utam:compile": "utam -c utam.config.cjs -t module"
     },
     "dependencies": {
-        "@lwrjs/client-modules": "0.10.0-alpha.1",
-        "@lwrjs/diagnostics": "0.10.0-alpha.1",
-        "@lwrjs/shared-utils": "0.10.0-alpha.1",
+        "@lwrjs/client-modules": "0.10.0-alpha.10",
+        "@lwrjs/diagnostics": "0.10.0-alpha.10",
+        "@lwrjs/shared-utils": "0.10.0-alpha.10",
         "ajv": "6.12.6"
     },
+    "devDependencies": {
+        "@rollup/plugin-typescript": "^11.1.0",
+        "rollup": "^2.78.0",
+        "utam": "^2.0.0"
+    },
     "lwc": {
         "modules": [
             {
@@ -76,5 +81,8 @@
     "engines": {
         "node": ">=16.0.0 <20"
     },
-    "gitHead": "2683dd5839b4da2ed93d42874cfceb78cbb5bf0d"
+    "volta": {
+        "extends": "../../../package.json"
+    },
+    "gitHead": "81dd6125be1023415344b59c4dcd977c8dbaf7f5"
 }

package/pageObjects/outlet.cjs

@@ -1,18 +1,25 @@
+
 'use strict';
 
 var core = require('@utam/core');
 
 async function _utam_get_content(driver, root) {
     let _element = root;
-    const _locator = core.By.css(`lwr-dynamic`);
-    _element = new core.ShadowRoot(driver, _element);
+    const _locator = core.By.css("lwr-dynamic");
     return _element.findElement(_locator);
 }
 
+/**
+ * @lwrjs/router Outlet dynamically renders LWC view components.
+ * generated from JSON src/modules/lwr/outlet/__utam__/outlet.utam.json
+ * @version 0.10
+ * @author lwr-js
+ */
 class Outlet extends core.UtamBaseRootPageObject {
-    constructor(driver, element, locator = core.By.css(`lwr-outlet`)) {
+    constructor(driver, element, locator = core.By.css("lwr-outlet")) {
         super(driver, element, locator);
     }
+
     async __getRoot() {
         const driver = this.driver;
         const root = await this.getRootElement();
@@ -23,10 +30,20 @@ class Outlet extends core.UtamBaseRootPageObject {
     async getContent(ContainerCtor) {
         const driver = this.driver;
         const root = await this.getRootElement();
-        let element = await _utam_get_content(driver, root, );
+        let element = await _utam_get_content(driver, root);
         element = new ContainerCtor(driver, element);
         return element;
     }
+    
+    async waitForOutletContent() {
+        await this.waitFor(async () => {
+            const _statement0 = await this.__getRoot();
+            const _result0 = await _statement0.containsElement(core.By.css("lwr-dynamic"), true);
+            return _result0;
+        });
+        return this;
+    }
+    
 }
 
 module.exports = Outlet;

package/pageObjects/outlet.d.ts

@@ -1,6 +1,14 @@
-import { By as _By, ShadowRoot as _ShadowRoot, UtamBaseRootPageObject as _UtamBaseRootPageObject, UtamBasePageObject as _UtamBasePageObject, Driver as _Driver, Element as _Element, Locator as _Locator, BaseUtamElement as _BaseUtamElement, ContainerCtor as _ContainerCtor } from '@utam/core';
+
+import { Driver as _Driver, Element as _Element, Locator as _Locator, ContainerCtor as _ContainerCtor, UtamBasePageObject as _UtamBasePageObject, UtamBaseRootPageObject as _UtamBaseRootPageObject } from '@utam/core';
+
+/**
+ * @lwrjs/router Outlet dynamically renders LWC view components.
+ * generated from JSON src/modules/lwr/outlet/__utam__/outlet.utam.json
+ * @version 0.10
+ * @author lwr-js
+ */
 export default class Outlet extends _UtamBaseRootPageObject {
     constructor(driver: _Driver, element?: _Element, locator?: _Locator);
-    
+    waitForOutletContent(): Promise<this>;
     getContent<T extends _UtamBasePageObject>(ContainerCtor: _ContainerCtor<T>): Promise<T>;
 }

package/pageObjects/outlet.js

@@ -1,16 +1,23 @@
-import { By as _By, ShadowRoot as _ShadowRoot, UtamBaseRootPageObject as _UtamBaseRootPageObject, createUtamMixinCtor as _createUtamMixinCtor, UtamBasePageObject as _UtamBasePageObject } from '@utam/core';
+
+import { By as _By, createUtamMixinCtor as _createUtamMixinCtor, UtamBaseRootPageObject as _UtamBaseRootPageObject } from '@utam/core';
 
 async function _utam_get_content(driver, root) {
     let _element = root;
-    const _locator = _By.css(`lwr-dynamic`);
-    _element = new _ShadowRoot(driver, _element);
+    const _locator = _By.css("lwr-dynamic");
     return _element.findElement(_locator);
 }
 
+/**
+ * @lwrjs/router Outlet dynamically renders LWC view components.
+ * generated from JSON src/modules/lwr/outlet/__utam__/outlet.utam.json
+ * @version 0.10
+ * @author lwr-js
+ */
 export default class Outlet extends _UtamBaseRootPageObject {
-    constructor(driver, element, locator = _By.css(`lwr-outlet`)) {
+    constructor(driver, element, locator = _By.css("lwr-outlet")) {
         super(driver, element, locator);
     }
+
     async __getRoot() {
         const driver = this.driver;
         const root = await this.getRootElement();
@@ -21,8 +28,18 @@ export default class Outlet extends _UtamBaseRootPageObject {
     async getContent(ContainerCtor) {
         const driver = this.driver;
         const root = await this.getRootElement();
-        let element = await _utam_get_content(driver, root, );
+        let element = await _utam_get_content(driver, root);
         element = new ContainerCtor(driver, element);
         return element;
     }
+    
+    async waitForOutletContent() {
+        await this.waitFor(async () => {
+            const _statement0 = await this.__getRoot();
+            const _result0 = await _statement0.containsElement(_By.css("lwr-dynamic"), true);
+            return _result0;
+        });
+        return this;
+    }
+    
 }

package/build/modules/lwr/navigationMixinHacks/navigationMixinHacks.d.ts

@@ -1,7 +0,0 @@
-export declare const CONTEXT_ID_BACKDOOR: string;
-export declare type NavigationContextBackdoorEvent = globalThis.CustomEvent<NavigationContextBackdoorEventPayload>;
-import type { ContextId } from 'lwr/navigation';
-export declare type NavigationContextBackdoorEventPayload = {
-    callback: (contextId: ContextId) => void;
-};
-//# sourceMappingURL=navigationMixinHacks.d.ts.map