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

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,9 @@
 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 +14,7 @@ function findParentRouterForElement(element) {
     return null;
 }
 /**
- * @alpha
+ * @beta
  */
 export const Router = Object.freeze({
     getOrCreateFor(element) {
@@ -85,13 +69,13 @@ export const Router = Object.freeze({
     },
 });
 /**
- * @alpha
+ * @beta
  */
 export function isFASTElementHost(host) {
     return host instanceof FASTElement;
 }
 /**
- * @alpha
+ * @beta
  */
 export class DefaultRouter {
     constructor(host) {
@@ -152,7 +136,8 @@ export class DefaultRouter {
         return __awaiter(this, void 0, void 0, function* () {
             this.newRoute = route;
             this.newView = yield command.createView();
-            this.newView.bind(route.allTypedParams, RouterExecutionContext.create(this));
+            this.newView.context.router = this;
+            this.newView.bind(route.allTypedParams);
             this.newView.appendTo(this.host);
             yield command.transition.begin(this.host, this.view, this.newView);
             return {

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,20 +1,8 @@
 import { __awaiter } from "tslib";
-import { defaultExecutionContext, ElementStyles, html, } from "@microsoft/fast-element";
+import { ElementStyles, html, } from "@microsoft/fast-element";
 import { isFASTElementHost } from "./router.js";
 /**
- * @alpha
- */
-export const RouterExecutionContext = Object.freeze({
-    create(router) {
-        return Object.create(defaultExecutionContext, {
-            router: {
-                value: router,
-            },
-        });
-    },
-});
-/**
- * @alpha
+ * @beta
  */
 export const Transition = Object.freeze({
     default: Object.freeze({
@@ -30,20 +18,14 @@ export const Transition = Object.freeze({
     }),
 });
 /**
- * @alpha
+ * @beta
  */
 export class FASTElementLayout {
-    constructor(template = null, styles = null, runBeforeCommit = true) {
+    constructor(template = null, styles = undefined, runBeforeCommit = true) {
+        var _a;
         this.template = template;
         this.runBeforeCommit = runBeforeCommit;
-        this.styles =
-            styles === void 0 || styles === null
-                ? null
-                : Array.isArray(styles)
-                    ? ElementStyles.create(styles)
-                    : styles instanceof ElementStyles
-                        ? styles
-                        : ElementStyles.create([styles]);
+        this.styles = (_a = ElementStyles.normalize(styles)) !== null && _a !== void 0 ? _a : null;
     }
     beforeCommit(routerElement) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -64,14 +46,14 @@ export class FASTElementLayout {
             if (routerElement.$fastController.template !== this.template) {
                 routerElement.$fastController.template = this.template;
             }
-            if (routerElement.$fastController.styles !== this.styles) {
-                routerElement.$fastController.styles = this.styles;
+            if (routerElement.$fastController.mainStyles !== this.styles) {
+                routerElement.$fastController.mainStyles = this.styles;
             }
         }
     }
 }
 /**
- * @alpha
+ * @beta
  */
 export const Layout = Object.freeze({
     default: new FASTElementLayout(html `