@microsoft/fast-router 0.4.2 → 1.0.0-alpha.1

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/dts/view.d.ts

@@ -1,19 +1,19 @@
 import { ComposableStyles, ExecutionContext, ViewTemplate } from "@microsoft/fast-element";
 import { Router } from "./router.js";
 /**
- * @alpha
+ * @beta
  */
 export declare type RouterExecutionContext = ExecutionContext & {
     router: Router;
 };
 /**
- * @alpha
+ * @beta
  */
 export declare const RouterExecutionContext: Readonly<{
     create(router: Router): any;
 }>;
 /**
- * @alpha
+ * @beta
  */
 export interface RouteView {
     bind(allTypedParams: Readonly<Record<string, any>>, context: RouterExecutionContext): void;
@@ -21,7 +21,7 @@ export interface RouteView {
     dispose(): void;
 }
 /**
- * @alpha
+ * @beta
  */
 export interface Transition {
     begin(host: HTMLElement, prev: RouteView | null, next: RouteView): Promise<void>;
@@ -29,20 +29,20 @@ 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;
@@ -54,7 +54,7 @@ export declare class FASTElementLayout implements Layout {
     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,18 +10,18 @@ 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(targets) {
+        return new NavigationContributorBehavior(targets[this.nodeId], this.options);
     }
 }
+HTMLDirective.define(NavigationContributorDirective);
 class NavigationContributorBehavior {
     constructor(contributor, options) {
         this.contributor = contributor;
@@ -48,7 +48,7 @@ class NavigationContributorBehavior {
     }
 }
 /**
- * @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() {

package/dist/esm/recognizer.js

@@ -2,7 +2,7 @@ import { __awaiter } from "tslib";
 import { QueryString } from "./query-string.js";
 const defaultParameterConverter = (value) => value;
 /**
- * @alpha
+ * @beta
  */
 export class ConfigurableRoute {
     constructor(path, name, caseSensitive) {
@@ -12,7 +12,7 @@ export class ConfigurableRoute {
     }
 }
 /**
- * @alpha
+ * @beta
  */
 export class Endpoint {
     constructor(route, paramNames, paramTypes, settings) {
@@ -26,7 +26,7 @@ export class Endpoint {
     }
 }
 /**
- * @alpha
+ * @beta
  */
 export class RecognizedRoute {
     constructor(endpoint, params, typedParams, queryParams) {
@@ -279,7 +279,7 @@ class RecognizeResult {
     }
 }
 /**
- * @alpha
+ * @beta
  */
 export class DefaultRouteRecognizer {
     constructor() {
@@ -458,19 +458,19 @@ class State {
         this.nextStates = null;
         this.endpoint = null;
         switch (segment === null || segment === void 0 ? void 0 : segment.kind) {
-            case 2 /* dynamic */:
+            case 2 /* SegmentKind.dynamic */:
                 this.length = prevState.length + 1;
                 this.isSeparator = false;
                 this.isDynamic = true;
                 this.isOptional = segment.optional;
                 break;
-            case 1 /* star */:
+            case 1 /* SegmentKind.star */:
                 this.length = prevState.length + 1;
                 this.isSeparator = false;
                 this.isDynamic = true;
                 this.isOptional = false;
                 break;
-            case 3 /* static */:
+            case 3 /* SegmentKind.static */:
                 this.length = prevState.length + 1;
                 this.isSeparator = false;
                 this.isDynamic = false;
@@ -517,11 +517,11 @@ class State {
     isMatch(ch) {
         const segment = this.segment;
         switch (segment === null || segment === void 0 ? void 0 : segment.kind) {
-            case 2 /* dynamic */:
+            case 2 /* SegmentKind.dynamic */:
                 return !this.value.includes(ch);
-            case 1 /* star */:
+            case 1 /* SegmentKind.star */:
                 return true;
-            case 3 /* static */:
+            case 3 /* SegmentKind.static */:
             case undefined:
                 // segment separators (slashes) are non-segments. We could say return ch === '/' as well, technically.
                 return this.value.includes(ch);
@@ -537,7 +537,7 @@ class StaticSegment {
         this.caseSensitive = caseSensitive;
     }
     get kind() {
-        return 3 /* static */;
+        return 3 /* SegmentKind.static */;
     }
     appendTo(state) {
         const { value, value: { length }, } = this;
@@ -560,7 +560,7 @@ class StaticSegment {
         return this.value;
     }
     equals(b) {
-        return (b.kind === 3 /* static */ &&
+        return (b.kind === 3 /* SegmentKind.static */ &&
             b.caseSensitive === this.caseSensitive &&
             b.value === this.value);
     }
@@ -571,7 +571,7 @@ class DynamicSegment {
         this.optional = optional;
     }
     get kind() {
-        return 2 /* dynamic */;
+        return 2 /* SegmentKind.dynamic */;
     }
     appendTo(state) {
         state = state.append(/* segment */ this, /* value   */ "/");
@@ -582,7 +582,7 @@ class DynamicSegment {
         return params[this.name];
     }
     equals(b) {
-        return (b.kind === 2 /* dynamic */ &&
+        return (b.kind === 2 /* SegmentKind.dynamic */ &&
             b.optional === this.optional &&
             b.name === this.name);
     }
@@ -592,7 +592,7 @@ class StarSegment {
         this.name = name;
     }
     get kind() {
-        return 1 /* star */;
+        return 1 /* SegmentKind.star */;
     }
     appendTo(state) {
         state = state.append(/* segment */ this, /* value   */ "");
@@ -603,6 +603,6 @@ class StarSegment {
         return params[this.name];
     }
     equals(b) {
-        return b.kind === 1 /* star */ && b.name === this.name;
+        return b.kind === 1 /* SegmentKind.star */ && b.name === this.name;
     }
 }

package/dist/esm/router.js

@@ -1,25 +1,10 @@
 import { __awaiter } from "tslib";
 import { FASTElement } from "@microsoft/fast-element";
+import { composedParent } from "@microsoft/fast-element/utilities";
 import { NavigationMessage } from "./navigation.js";
 import { childRouteParameter } from "./routes.js";
 import { RouterExecutionContext } from "./view.js";
 const routerProperty = "$router";
-// TODO: remove this from here and from fast-foundation
-// TODO: move this to fast-element so router and foundation can both use it
-function composedParent(element) {
-    const parentNode = element.parentElement;
-    if (parentNode) {
-        return parentNode;
-    }
-    else {
-        const rootNode = element.getRootNode();
-        if (rootNode.host instanceof HTMLElement) {
-            // this is shadow-root
-            return rootNode.host;
-        }
-    }
-    return null;
-}
 function findParentRouterForElement(element) {
     let parent = element;
     while ((parent = composedParent(parent))) {
@@ -30,7 +15,7 @@ function findParentRouterForElement(element) {
     return null;
 }
 /**
- * @alpha
+ * @beta
  */
 export const Router = Object.freeze({
     getOrCreateFor(element) {
@@ -85,13 +70,13 @@ export const Router = Object.freeze({
     },
 });
 /**
- * @alpha
+ * @beta
  */
 export function isFASTElementHost(host) {
     return host instanceof FASTElement;
 }
 /**
- * @alpha
+ * @beta
  */
 export class DefaultRouter {
     constructor(host) {

package/dist/esm/routes.js

@@ -40,7 +40,7 @@ const defaultConverters = {
     bool: booleanConverter,
 };
 /**
- * @alpha
+ * @beta
  */
 export class RouteCollection {
     constructor(owner) {

package/dist/esm/titles.js

@@ -1,5 +1,5 @@
 /**
- * @alpha
+ * @beta
  */
 export class DefaultTitleBuilder {
     constructor(segmentSeparator = " - ", fragmentSeparator = ":") {

package/dist/esm/view.js

@@ -1,12 +1,12 @@
 import { __awaiter } from "tslib";
-import { defaultExecutionContext, ElementStyles, html, } from "@microsoft/fast-element";
+import { ElementStyles, ExecutionContext, html, } from "@microsoft/fast-element";
 import { isFASTElementHost } from "./router.js";
 /**
- * @alpha
+ * @beta
  */
 export const RouterExecutionContext = Object.freeze({
     create(router) {
-        return Object.create(defaultExecutionContext, {
+        return Object.create(ExecutionContext.default, {
             router: {
                 value: router,
             },
@@ -14,7 +14,7 @@ export const RouterExecutionContext = Object.freeze({
     },
 });
 /**
- * @alpha
+ * @beta
  */
 export const Transition = Object.freeze({
     default: Object.freeze({
@@ -30,7 +30,7 @@ export const Transition = Object.freeze({
     }),
 });
 /**
- * @alpha
+ * @beta
  */
 export class FASTElementLayout {
     constructor(template = null, styles = null, runBeforeCommit = true) {
@@ -40,10 +40,10 @@ export class FASTElementLayout {
             styles === void 0 || styles === null
                 ? null
                 : Array.isArray(styles)
-                    ? ElementStyles.create(styles)
+                    ? new ElementStyles(styles)
                     : styles instanceof ElementStyles
                         ? styles
-                        : ElementStyles.create([styles]);
+                        : new ElementStyles([styles]);
     }
     beforeCommit(routerElement) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -71,7 +71,7 @@ export class FASTElementLayout {
     }
 }
 /**
- * @alpha
+ * @beta
  */
 export const Layout = Object.freeze({
     default: new FASTElementLayout(html `