@microsoft/fast-router 0.4.5 → 1.0.0-alpha.10

package/dist/dts/query-string.d.ts

@@ -1,5 +1,5 @@
 /**
- * @alpha
+ * @beta
  */
 export declare const QueryString: Readonly<{
     readonly current: string;
@@ -10,7 +10,7 @@ export declare const QueryString: Readonly<{
      * @param traditional - Boolean Use the old URI template standard (RFC6570)
      * @returns The generated query string, excluding leading '?'.
      */
-    build(params: Object, traditional?: boolean | undefined): string;
+    build(params: Object, traditional?: boolean): string;
     /**
      * Separate the query string from the path and returns the two parts.
      * @param path - The path to separate.

package/dist/dts/recognizer.d.ts

@@ -1,10 +1,10 @@
 import { Route } from "./navigation.js";
 /**
- * @alpha
+ * @beta
  */
 export declare type RouteParameterConverter = (value: string | undefined) => any | Promise<any>;
 /**
- * @alpha
+ * @beta
  */
 export declare class ConfigurableRoute implements Route {
     readonly path: string;
@@ -13,7 +13,7 @@ export declare class ConfigurableRoute implements Route {
     constructor(path: string, name: string, caseSensitive: boolean);
 }
 /**
- * @alpha
+ * @beta
  */
 export declare class Endpoint<TSettings = any> {
     readonly route: ConfigurableRoute;
@@ -24,7 +24,7 @@ export declare class Endpoint<TSettings = any> {
     get path(): string;
 }
 /**
- * @alpha
+ * @beta
  */
 export declare class RecognizedRoute<TSettings = any> {
     readonly endpoint: Endpoint<TSettings>;
@@ -37,7 +37,7 @@ export declare class RecognizedRoute<TSettings = any> {
     get settings(): TSettings | null;
 }
 /**
- * @alpha
+ * @beta
  */
 export interface RouteRecognizer<TSettings> {
     add(routeOrRoutes: Route | readonly Route[], settings?: TSettings): void;
@@ -46,7 +46,7 @@ export interface RouteRecognizer<TSettings> {
     generateFromPath(path: string, params: object): string | null;
 }
 /**
- * @alpha
+ * @beta
  */
 export declare class DefaultRouteRecognizer<TSettings> implements RouteRecognizer<TSettings> {
     private names;

package/dist/dts/router.d.ts

@@ -4,14 +4,14 @@ import { RouterConfiguration } from "./configuration.js";
 import { NavigationContributor } from "./contributors.js";
 import { RecognizedRoute } from "./recognizer.js";
 /**
- * @alpha
+ * @beta
  */
 export interface RenderOperation {
     commit(): Promise<void>;
     rollback(): Promise<void>;
 }
 /**
- * @alpha
+ * @beta
  */
 export interface Router<TSettings = any> {
     readonly level: number;
@@ -27,7 +27,7 @@ export interface Router<TSettings = any> {
 }
 declare const routerProperty = "$router";
 /**
- * @alpha
+ * @beta
  */
 export interface RouterElement extends HTMLElement {
     readonly [routerProperty]: Router;
@@ -36,7 +36,7 @@ export interface RouterElement extends HTMLElement {
     disconnectedCallback(): any;
 }
 /**
- * @alpha
+ * @beta
  */
 export declare const Router: Readonly<{
     getOrCreateFor(element: HTMLElement): Router<any> | DefaultRouter;
@@ -47,11 +47,11 @@ export declare const Router: Readonly<{
     }>(BaseType: TBase): new () => InstanceType<TBase> & RouterElement;
 }>;
 /**
- * @alpha
+ * @beta
  */
 export declare function isFASTElementHost(host: HTMLElement): host is HTMLElement & FASTElement;
 /**
- * @alpha
+ * @beta
  */
 export declare class DefaultRouter implements Router {
     readonly host: HTMLElement;

package/dist/dts/routes.d.ts

@@ -9,131 +9,131 @@ import { Route } from "./navigation.js";
  */
 export declare const childRouteParameter = "fast-child-route";
 /**
- * @alpha
+ * @beta
  */
 export declare type SupportsSettings<TSettings = any> = {
     settings?: TSettings;
 };
 /**
- * @alpha
+ * @beta
  */
 export declare type PathedRouteDefinition<TSettings = any> = SupportsSettings<TSettings> & Route;
 /**
- * @alpha
+ * @beta
  */
 export declare type IgnorableRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings>;
 /**
- * @alpha
+ * @beta
  */
 export declare type LayoutAndTransitionRouteDefinition = {
     layout?: Layout | ViewTemplate;
     transition?: Transition;
 };
 /**
- * @alpha
+ * @beta
  */
 export declare type RedirectRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings> & {
     redirect: string;
 };
 /**
- * @alpha
+ * @beta
  */
 export declare type HasTitle = {
     title?: string;
 };
 /**
- * @alpha
+ * @beta
  */
 export declare type NavigableRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings> & LayoutAndTransitionRouteDefinition & HasTitle & {
     childRouters?: boolean;
 };
 /**
- * @alpha
+ * @beta
  */
 export declare type FASTElementConstructor = new () => FASTElement;
 /**
- * @alpha
+ * @beta
  */
 export declare type HasElement = {
     element: string | FASTElementConstructor | HTMLElement | (() => Promise<string | FASTElementConstructor | HTMLElement>);
 };
 /**
- * @alpha
+ * @beta
  */
 export declare type ElementFallbackRouteDefinition<TSettings = any> = LayoutAndTransitionRouteDefinition & HasElement & SupportsSettings<TSettings> & HasTitle;
 /**
- * @alpha
+ * @beta
  */
 export declare type ElementRouteDefinition<TSettings = any> = NavigableRouteDefinition<TSettings> & HasElement;
 /**
- * @alpha
+ * @beta
  */
 export declare type HasTemplate = {
     template: ViewTemplate | (() => Promise<ViewTemplate>);
 };
 /**
- * @alpha
+ * @beta
  */
 export declare type TemplateFallbackRouteDefinition<TSettings = any> = LayoutAndTransitionRouteDefinition & HasTemplate & SupportsSettings<TSettings> & HasTitle;
 /**
- * @alpha
+ * @beta
  */
 export declare type TemplateRouteDefinition<TSettings = any> = NavigableRouteDefinition<TSettings> & HasTemplate;
 /**
- * @alpha
+ * @beta
  */
 export declare type HasCommand = {
     command: NavigationCommand;
 };
 /**
- * @alpha
+ * @beta
  */
 export declare type CommandRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings> & HasCommand & HasTitle;
 /**
- * @alpha
+ * @beta
  */
 export declare type CommandFallbackRouteDefinition<TSettings = any> = HasCommand & SupportsSettings<TSettings> & HasTitle;
 /**
- * @alpha
+ * @beta
  */
 export declare type FallbackRouteDefinition<TSettings = any> = ElementFallbackRouteDefinition<TSettings> | TemplateFallbackRouteDefinition<TSettings> | Pick<RedirectRouteDefinition<TSettings>, "redirect"> | CommandFallbackRouteDefinition<TSettings>;
 /**
- * @alpha
+ * @beta
  */
 export declare type DefinitionCallback = () => Promise<FallbackRouteDefinition> | FallbackRouteDefinition;
 /**
- * @alpha
+ * @beta
  */
 export declare type RenderableRouteDefinition<TSettings = any> = ElementRouteDefinition<TSettings> | TemplateRouteDefinition<TSettings>;
 /**
- * @alpha
+ * @beta
  */
 export declare type MappableRouteDefinition<TSettings = any> = RenderableRouteDefinition<TSettings> | RedirectRouteDefinition<TSettings> | CommandRouteDefinition<TSettings> | ParentRouteDefinition<TSettings>;
 /**
- * @alpha
+ * @beta
  */
 export declare type ParentRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings> & LayoutAndTransitionRouteDefinition & {
     children: MappableRouteDefinition<TSettings>[];
 };
 /**
- * @alpha
+ * @beta
  */
 export declare type RouteMatch<TSettings = any> = {
     route: RecognizedRoute<TSettings>;
     command: NavigationCommand;
 };
 /**
- * @alpha
+ * @beta
  */
 export declare type ConverterObject = {
     convert: RouteParameterConverter;
 };
 /**
- * @alpha
+ * @beta
  */
 export declare type ParameterConverter = RouteParameterConverter | ConverterObject | Constructable<ConverterObject>;
 /**
- * @alpha
+ * @beta
  */
 export declare class RouteCollection<TSettings = any> {
     private owner;

package/dist/dts/titles.d.ts

@@ -1,12 +1,12 @@
 /**
- * @alpha
+ * @beta
  */
 export interface TitleBuilder {
     joinTitles(parentTitle: string, childTitle: string): string;
     buildTitle(rootTitle: string, routeTitles: string[][]): string;
 }
 /**
- * @alpha
+ * @beta
  */
 export declare class DefaultTitleBuilder implements TitleBuilder {
     private segmentSeparator;

package/dist/{tsdoc-metadata.json → dts/tsdoc-metadata.json}

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.23.1"
+      "packageVersion": "7.24.2"
     }
   ]
 }

package/dist/dts/view.d.ts

@@ -1,27 +1,22 @@
 import { ComposableStyles, ExecutionContext, ViewTemplate } from "@microsoft/fast-element";
 import { Router } from "./router.js";
 /**
- * @alpha
+ * @beta
  */
 export declare type RouterExecutionContext = ExecutionContext & {
-    router: Router;
+    router?: Router;
 };
 /**
- * @alpha
- */
-export declare const RouterExecutionContext: Readonly<{
-    create(router: Router): any;
-}>;
-/**
- * @alpha
+ * @beta
  */
 export interface RouteView {
-    bind(allTypedParams: Readonly<Record<string, any>>, context: RouterExecutionContext): void;
+    context: RouterExecutionContext;
+    bind(allTypedParams: Readonly<Record<string, any>>): void;
     appendTo(host: HTMLElement): void;
     dispose(): void;
 }
 /**
- * @alpha
+ * @beta
  */
 export interface Transition {
     begin(host: HTMLElement, prev: RouteView | null, next: RouteView): Promise<void>;
@@ -29,32 +24,32 @@ export interface Transition {
     commit(host: HTMLElement, prev: RouteView | null, next: RouteView): Promise<void>;
 }
 /**
- * @alpha
+ * @beta
  */
 export declare const Transition: Readonly<{
     default: Readonly<Transition>;
 }>;
 /**
- * @alpha
+ * @beta
  */
 export interface Layout {
     beforeCommit(routerElement: HTMLElement): Promise<void>;
     afterCommit(routerElement: HTMLElement): Promise<void>;
 }
 /**
- * @alpha
+ * @beta
  */
 export declare class FASTElementLayout implements Layout {
     private readonly template;
     private runBeforeCommit;
     private styles;
-    constructor(template?: ViewTemplate | null, styles?: ComposableStyles | ComposableStyles[] | null, runBeforeCommit?: boolean);
+    constructor(template?: ViewTemplate | null, styles?: ComposableStyles | ComposableStyles[] | undefined, runBeforeCommit?: boolean);
     beforeCommit(routerElement: HTMLElement): Promise<void>;
     afterCommit(routerElement: HTMLElement): Promise<void>;
     private apply;
 }
 /**
- * @alpha
+ * @beta
  */
 export declare const Layout: Readonly<{
     default: Readonly<Layout>;

package/dist/esm/commands.js

@@ -4,7 +4,7 @@ import { FASTElementLayout } from "./view.js";
 import { Route } from "./navigation.js";
 import { navigationContributor } from "./contributors.js";
 /**
- * @alpha
+ * @beta
  */
 export class Ignore {
     createContributor() {
@@ -20,7 +20,7 @@ export class Ignore {
     }
 }
 /**
- * @alpha
+ * @beta
  */
 export class Redirect {
     constructor(redirect) {
@@ -51,9 +51,11 @@ function factoryFromElementName(name) {
 function factoryFromElementInstance(element) {
     const fragment = document.createDocumentFragment();
     fragment.appendChild(element);
-    const view = new HTMLView(fragment, [
-        navigationContributor().createBehavior(element),
-    ]);
+    const factory = navigationContributor();
+    factory.nodeId = "h";
+    const view = new HTMLView(fragment, [factory], {
+        [factory.nodeId]: element,
+    });
     return {
         create() {
             return view;
@@ -86,7 +88,7 @@ class RenderContributor {
     }
 }
 /**
- * @alpha
+ * @beta
  */
 export class Render {
     constructor(owner, createView) {
@@ -134,7 +136,7 @@ export class Render {
                 else if (typeof element === "function") {
                     // Do not cache it becase the function could return
                     // a different value each time.
-                    let def = FASTElementDefinition.forType(element);
+                    let def = FASTElementDefinition.getByType(element);
                     if (def) {
                         factory = factoryFromElementName(def.name);
                     }
@@ -147,7 +149,7 @@ export class Render {
                             factory = factoryFromElementInstance(element);
                         }
                         else {
-                            def = FASTElementDefinition.forType(element);
+                            def = FASTElementDefinition.getByType(element);
                             if (def) {
                                 factory = factoryFromElementName(def.name);
                             }

package/dist/esm/configuration.js

@@ -9,7 +9,7 @@ import { DefaultRoutingEventSink } from "./events.js";
 import { isNavigationPhaseContributor } from "./contributors.js";
 import { DefaultRouteRecognizer } from "./recognizer.js";
 /**
- * @alpha
+ * @beta
  */
 export class RouterConfiguration {
     constructor() {

package/dist/esm/contributors.js

@@ -1,7 +1,7 @@
-import { DOM, HTMLDirective } from "@microsoft/fast-element";
+import { HTMLDirective, Markup, } from "@microsoft/fast-element";
 import { Router } from "./router.js";
 /**
- * @alpha
+ * @beta
  */
 export function isNavigationPhaseContributor(object, phase) {
     return phase in object;
@@ -10,45 +10,49 @@ const defaultOptions = {
     lifecycle: true,
     parameters: true,
 };
-class NavigationContributorDirective extends HTMLDirective {
+class NavigationContributorDirective {
     constructor(options) {
-        super();
         this.options = options;
     }
-    createPlaceholder(index) {
-        return DOM.createCustomAttributePlaceholder("fast-navigation-contributor", index);
+    createHTML(add) {
+        return Markup.attribute(add(this));
     }
-    createBehavior(target) {
-        return new NavigationContributorBehavior(target, this.options);
+    createBehavior() {
+        return new NavigationContributorBehavior(this);
     }
 }
+HTMLDirective.define(NavigationContributorDirective);
 class NavigationContributorBehavior {
-    constructor(contributor, options) {
-        this.contributor = contributor;
-        this.options = options;
+    constructor(directive) {
+        this.directive = directive;
         this.router = null;
     }
-    bind(source, context) {
-        if (this.options.lifecycle) {
-            this.router = context.router || Router.find(this.contributor);
-            this.router.addContributor(this.contributor);
+    bind(controller) {
+        var _a;
+        const context = controller.context;
+        const options = this.directive.options;
+        this.contributor = controller.targets[this.directive.nodeId];
+        if (options.lifecycle) {
+            this.router = (_a = context.router) !== null && _a !== void 0 ? _a : Router.find(this.contributor);
+            if (this.router) {
+                this.router.addContributor(this.contributor);
+                controller.onUnbind(this);
+            }
         }
-        if (this.options.parameters) {
+        if (options.parameters) {
             const contributor = this.contributor;
-            const routeParams = source;
+            const routeParams = controller.source;
             for (const key in routeParams) {
                 contributor[key] = routeParams[key];
             }
         }
     }
     unbind(source) {
-        if (this.router !== null) {
-            this.router.removeContributor(this.contributor);
-        }
+        this.router.removeContributor(this.contributor);
     }
 }
 /**
- * @alpha
+ * @beta
  */
 export function navigationContributor(options) {
     return new NavigationContributorDirective(Object.assign({}, defaultOptions, options));

package/dist/esm/events.js

@@ -1,5 +1,5 @@
 /**
- * @alpha
+ * @beta
  */
 export class DefaultRoutingEventSink {
     onUnhandledNavigationMessage(router, message) { }

package/dist/esm/fast-router.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { customElement, FASTElement } from "@microsoft/fast-element";
 import { Router } from "./router.js";
 /**
- * @alpha
+ * @beta
  */
 let FASTRouter = class FASTRouter extends Router.from(FASTElement) {
 };

package/dist/esm/links.js

@@ -1,6 +1,6 @@
 import { Route } from "./navigation.js";
 /**
- * @alpha
+ * @beta
  */
 export class DefaultLinkHandler {
     constructor() {

package/dist/esm/navigation.js

@@ -1,7 +1,7 @@
 import { __awaiter } from "tslib";
 import { Router } from "./router.js";
 /**
- * @alpha
+ * @beta
  */
 export class NavigationMessage {
     constructor(path) {
@@ -10,7 +10,7 @@ export class NavigationMessage {
 }
 const handlers = new Set();
 /**
- * @alpha
+ * @beta
  */
 export const NavigationHandler = Object.freeze({
     register(handler) {
@@ -25,7 +25,7 @@ export const NavigationHandler = Object.freeze({
 // See http://www.ietf.org/rfc/rfc2396.txt section 3.1 for valid scheme format
 const absoluteUrl = /^([a-z][a-z0-9+\-.]*:)?\/\//i;
 /**
- * @alpha
+ * @beta
  */
 export const Route = Object.freeze({
     path: Object.freeze({
@@ -113,7 +113,7 @@ export const Route = Object.freeze({
     }),
 });
 /**
- * @alpha
+ * @beta
  */
 export class DefaultNavigationQueue {
     constructor() {

package/dist/esm/process.js

@@ -50,7 +50,7 @@ class NavigationPhaseImpl {
     }
 }
 /**
- * @alpha
+ * @beta
  */
 export class DefaultNavigationProcess {
     constructor() {

package/dist/esm/query-string.js

@@ -63,7 +63,7 @@ function parseComplexParam(queryParams, keys, value) {
     }
 }
 /**
- * @alpha
+ * @beta
  */
 export const QueryString = Object.freeze({
     get current() {