@microsoft/fast-element 2.0.0-beta.8 → 2.0.0

package/dist/esm/hydration/target-builder.js

@@ -0,0 +1,175 @@
+import { HydrationMarkup } from "../components/hydration.js";
+export class HydrationTargetElementError extends Error {
+    constructor(
+    /**
+     * The error message
+     */
+    message, 
+    /**
+     * The Compiled View Behavior Factories that belong to the view.
+     */
+    factories, 
+    /**
+     * The node to target factory.
+     */
+    node) {
+        super(message);
+        this.factories = factories;
+        this.node = node;
+    }
+}
+function isComment(node) {
+    return node.nodeType === Node.COMMENT_NODE;
+}
+function isText(node) {
+    return node.nodeType === Node.TEXT_NODE;
+}
+/**
+ * Returns a range object inclusive of all nodes including and between the
+ * provided first and last node.
+ * @param first - The first node
+ * @param last - This last node
+ * @returns
+ */
+export function createRangeForNodes(first, last) {
+    const range = document.createRange();
+    range.setStart(first, 0);
+    // The lastIndex should be inclusive of the end of the lastChild. Obtain offset based
+    // on usageNotes:  https://developer.mozilla.org/en-US/docs/Web/API/Range/setEnd#usage_notes
+    range.setEnd(last, isComment(last) || isText(last) ? last.data.length : last.childNodes.length);
+    return range;
+}
+function isShadowRoot(node) {
+    return node instanceof DocumentFragment && "mode" in node;
+}
+/**
+ * Maps {@link CompiledViewBehaviorFactory} ids to the corresponding node targets for the view.
+ * @param firstNode - The first node of the view.
+ * @param lastNode -  The last node of the view.
+ * @param factories - The Compiled View Behavior Factories that belong to the view.
+ * @returns - A {@link ViewBehaviorTargets } object for the factories in the view.
+ */
+export function buildViewBindingTargets(firstNode, lastNode, factories) {
+    const range = createRangeForNodes(firstNode, lastNode);
+    const treeRoot = range.commonAncestorContainer;
+    const walker = document.createTreeWalker(treeRoot, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT, {
+        acceptNode(node) {
+            return range.comparePoint(node, 0) === 0
+                ? NodeFilter.FILTER_ACCEPT
+                : NodeFilter.FILTER_REJECT;
+        },
+    });
+    const targets = {};
+    const boundaries = {};
+    let node = (walker.currentNode = firstNode);
+    while (node !== null) {
+        switch (node.nodeType) {
+            case Node.ELEMENT_NODE: {
+                targetElement(node, factories, targets);
+                break;
+            }
+            case Node.COMMENT_NODE: {
+                targetComment(node, walker, factories, targets, boundaries);
+                break;
+            }
+        }
+        node = walker.nextNode();
+    }
+    range.detach();
+    return { targets, boundaries };
+}
+function targetElement(node, factories, targets) {
+    // Check for attributes and map any factories.
+    const attrFactoryIds = HydrationMarkup.parseAttributeBinding(node);
+    if (attrFactoryIds !== null) {
+        for (const id of attrFactoryIds) {
+            if (!factories[id]) {
+                throw new HydrationTargetElementError(`HydrationView was unable to successfully target factory on ${node.nodeName} inside ${node.getRootNode().host.nodeName}. This likely indicates a template mismatch between SSR rendering and hydration.`, factories, node);
+            }
+            targetFactory(factories[id], node, targets);
+        }
+        node.removeAttribute(HydrationMarkup.attributeMarkerName);
+    }
+}
+function targetComment(node, walker, factories, targets, boundaries) {
+    if (HydrationMarkup.isElementBoundaryStartMarker(node)) {
+        skipToElementBoundaryEndMarker(node, walker);
+        return;
+    }
+    if (HydrationMarkup.isContentBindingStartMarker(node.data)) {
+        const parsed = HydrationMarkup.parseContentBindingStartMarker(node.data);
+        if (parsed === null) {
+            return;
+        }
+        const [index, id] = parsed;
+        const factory = factories[index];
+        const nodes = [];
+        let current = walker.nextSibling();
+        node.data = "";
+        const first = current;
+        // Search for the binding end marker that closes the binding.
+        while (current !== null) {
+            if (isComment(current)) {
+                const parsed = HydrationMarkup.parseContentBindingEndMarker(current.data);
+                if (parsed && parsed[1] === id) {
+                    break;
+                }
+            }
+            nodes.push(current);
+            current = walker.nextSibling();
+        }
+        if (current === null) {
+            const root = node.getRootNode();
+            throw new Error(`Error hydrating Comment node inside "${isShadowRoot(root) ? root.host.nodeName : root.nodeName}".`);
+        }
+        current.data = "";
+        if (nodes.length === 1 && isText(nodes[0])) {
+            targetFactory(factory, nodes[0], targets);
+        }
+        else {
+            // If current === first, it means there is no content in
+            // the view. This happens when a `when` directive evaluates false,
+            // or whenever a content binding returns null or undefined.
+            // In that case, there will never be any content
+            // to hydrate and Binding can simply create a HTMLView
+            // whenever it needs to.
+            if (current !== first && current.previousSibling !== null) {
+                boundaries[factory.targetNodeId] = {
+                    first,
+                    last: current.previousSibling,
+                };
+            }
+            // Binding evaluates to null / undefined or a template.
+            // If binding revaluates to string, it will replace content in target
+            // So we always insert a text node to ensure that
+            // text content binding will be written to this text node instead of comment
+            const dummyTextNode = current.parentNode.insertBefore(document.createTextNode(""), current);
+            targetFactory(factory, dummyTextNode, targets);
+        }
+    }
+}
+/**
+ * Moves TreeWalker to element boundary end marker
+ * @param node - element boundary start marker node
+ * @param walker - tree walker
+ */
+function skipToElementBoundaryEndMarker(node, walker) {
+    const id = HydrationMarkup.parseElementBoundaryStartMarker(node.data);
+    let current = walker.nextSibling();
+    while (current !== null) {
+        if (isComment(current)) {
+            const parsed = HydrationMarkup.parseElementBoundaryEndMarker(current.data);
+            if (parsed && parsed === id) {
+                break;
+            }
+        }
+        current = walker.nextSibling();
+    }
+}
+export function targetFactory(factory, node, targets) {
+    if (factory.targetNodeId === undefined) {
+        // Dev error, this shouldn't ever be thrown
+        throw new Error("Factory could not be target to the node");
+    }
+    targets[factory.targetNodeId] = node;
+}

package/dist/esm/index.js

@@ -1,30 +1,39 @@
-export * from "./platform.js";
+export { FAST, emptyArray } from "./platform.js";
+// DOM
+export { DOMAspect, DOM } from "./dom.js";
 // Observation
-export * from "./observation/observable.js";
-export * from "./observation/notifier.js";
-export * from "./observation/arrays.js";
-export * from "./observation/update-queue.js";
+export { ExecutionContext, Observable, observable, SourceLifetime, volatile, } from "./observation/observable.js";
+export { PropertyChangeNotifier, SubscriberSet, } from "./observation/notifier.js";
+export { ArrayObserver, lengthOf, Splice, SpliceStrategy, SpliceStrategySupport, } from "./observation/arrays.js";
+export { Updates } from "./observation/update-queue.js";
+// Binding
+export { Binding } from "./binding/binding.js";
+export { listener, oneWay } from "./binding/one-way.js";
+export { oneTime } from "./binding/one-time.js";
+export { normalizeBinding } from "./binding/normalize.js";
 // Styles
-export * from "./styles/element-styles.js";
-export * from "./styles/css.js";
-export * from "./styles/css-directive.js";
-export * from "./styles/host.js";
+export { ElementStyles, } from "./styles/element-styles.js";
+export { css } from "./styles/css.js";
+export { cssDirective, CSSDirective, } from "./styles/css-directive.js";
+export {} from "./styles/host.js";
+export {} from "./styles/style-strategy.js";
+export { CSSBindingDirective } from "./styles/css-binding-directive.js";
 // Templating
-export * from "./templating/dom.js";
-export * from "./templating/template.js";
-export * from "./templating/compiler.js";
+export { html, InlineTemplateDirective, ViewTemplate, } from "./templating/template.js";
+export { Compiler } from "./templating/compiler.js";
 export { Markup, Parser } from "./templating/markup.js";
-export * from "./templating/binding.js";
-export * from "./templating/html-directive.js";
-export * from "./templating/ref.js";
-export * from "./templating/when.js";
-export * from "./templating/repeat.js";
-export * from "./templating/slotted.js";
-export * from "./templating/children.js";
-export * from "./templating/view.js";
-export * from "./templating/node-observation.js";
+export { HTMLBindingDirective, } from "./templating/html-binding-directive.js";
+export { htmlDirective, HTMLDirective, StatelessAttachedAttributeDirective, } from "./templating/html-directive.js";
+export { ref, RefDirective } from "./templating/ref.js";
+export { when } from "./templating/when.js";
+export { repeat, RepeatBehavior, RepeatDirective, } from "./templating/repeat.js";
+export { slotted, SlottedDirective, } from "./templating/slotted.js";
+export { children, ChildrenDirective, } from "./templating/children.js";
+export { HTMLView, HydrationBindingError, } from "./templating/view.js";
+export { elements, NodeObservationDirective, } from "./templating/node-observation.js";
+export { render, RenderBehavior, RenderDirective } from "./templating/render.js";
 // Components
-export * from "./components/fast-element.js";
-export * from "./components/fast-definitions.js";
-export * from "./components/attributes.js";
-export * from "./components/element-controller.js";
+export { customElement, FASTElement } from "./components/fast-element.js";
+export { FASTElementDefinition, } from "./components/fast-definitions.js";
+export { attr, AttributeConfiguration, AttributeDefinition, booleanConverter, nullableBooleanConverter, nullableNumberConverter, } from "./components/attributes.js";
+export { ElementController, HydratableElementController, } from "./components/element-controller.js";

package/dist/esm/index.rollup.debug.js

@@ -1,3 +1,5 @@
-import "./polyfills.js";
 import "./debug.js";
+import { DOMPolicy } from "./dom-policy.js";
+import { DOM } from "./dom.js";
 export * from "./index.js";
+DOM.setPolicy(DOMPolicy.create());

package/dist/esm/index.rollup.js

@@ -1,2 +1,4 @@
-import "./polyfills.js";
+import { DOMPolicy } from "./dom-policy.js";
+import { DOM } from "./dom.js";
 export * from "./index.js";
+DOM.setPolicy(DOMPolicy.create());

package/dist/esm/interfaces.js

@@ -1,12 +1,60 @@
+let kernelMode;
+const kernelAttr = "fast-kernel";
+try {
+    if (document.currentScript) {
+        kernelMode = document.currentScript.getAttribute(kernelAttr);
+    }
+    else {
+        const scripts = document.getElementsByTagName("script");
+        const currentScript = scripts[scripts.length - 1];
+        kernelMode = currentScript.getAttribute(kernelAttr);
+    }
+}
+catch (e) {
+    kernelMode = "isolate";
+}
+let KernelServiceId;
+switch (kernelMode) {
+    case "share": // share the kernel across major versions
+        KernelServiceId = Object.freeze({
+            updateQueue: 1,
+            observable: 2,
+            contextEvent: 3,
+            elementRegistry: 4,
+        });
+        break;
+    case "share-v2": // only share the kernel with other v2 instances
+        KernelServiceId = Object.freeze({
+            updateQueue: 1.2,
+            observable: 2.2,
+            contextEvent: 3.2,
+            elementRegistry: 4.2,
+        });
+        break;
+    default:
+        // fully isolate the kernel from all other FAST instances
+        const postfix = `-${Math.random().toString(36).substring(2, 8)}`;
+        KernelServiceId = Object.freeze({
+            updateQueue: `1.2${postfix}`,
+            observable: `2.2${postfix}`,
+            contextEvent: `3.2${postfix}`,
+            elementRegistry: `4.2${postfix}`,
+        });
+        break;
+}
+export { KernelServiceId };
 /**
- * @internal
+ * Determines whether or not an object is a function.
+ * @public
  */
 export const isFunction = (object) => typeof object === "function";
 /**
- * @internal
+ * Determines whether or not an object is a string.
+ * @public
  */
 export const isString = (object) => typeof object === "string";
 /**
- * @internal
+ * A function which does nothing.
+ * @public
  */
 export const noop = () => void 0;

package/dist/esm/metadata.js

@@ -22,8 +22,11 @@ if (!("metadata" in Reflect)) {
         return void 0;
     };
 }
+const annotationParamTypesKey = "annotation:paramtypes";
+const designParamTypesKey = "design:paramtypes";
 /**
  * Provides basic metadata capabilities used by Context and Dependency Injection.
+ * @public
  */
 export const Metadata = Object.freeze({
     /**
@@ -31,29 +34,29 @@ export const Metadata = Object.freeze({
      * @param Type - The type to get the metadata for.
      * @returns The metadata array or a frozen empty array if no metadata is found.
      */
-    getDesignParamTypes: Type => {
+    getDesignParamTypes: (Type) => {
         var _a;
-        return (_a = Reflect.getOwnMetadata("design:paramtypes", Type)) !== null && _a !== void 0 ? _a : emptyArray;
+        return ((_a = Reflect.getOwnMetadata(designParamTypesKey, Type)) !== null && _a !== void 0 ? _a : emptyArray);
     },
     /**
      * Gets the "annotation:paramtypes" metadata for the specified type.
      * @param Type - The type to get the metadata for.
      * @returns The metadata array or a frozen empty array if no metadata is found.
      */
-    getAnnotationParamTypes: Type => {
+    getAnnotationParamTypes: (Type) => {
         var _a;
-        return (_a = Reflect.getOwnMetadata("annotation:paramtypes", Type)) !== null && _a !== void 0 ? _a : emptyArray;
+        return ((_a = Reflect.getOwnMetadata(annotationParamTypesKey, Type)) !== null && _a !== void 0 ? _a : emptyArray);
     },
     /**
-     *
-     * @param Type - Gets the "annotation:paramtypes" metadata for the specified type. If none is found,
+     * Gets the "annotation:paramtypes" metadata for the specified type. If none is found,
      * an empty, mutable metadata array is created and added.
-     * @returns The metadata array.
+     * @param Type - The type to get or create the metadata for.
+     * @returns A mutable metadata array.
      */
     getOrCreateAnnotationParamTypes(Type) {
         let types = this.getAnnotationParamTypes(Type);
         if (types === emptyArray) {
-            Reflect.defineMetadata("annotation:paramtypes", (types = []), Type);
+            Reflect.defineMetadata(annotationParamTypesKey, (types = []), Type);
         }
         return types;
     },

package/dist/esm/observation/arrays.js

@@ -369,7 +369,7 @@ let defaultSpliceStrategy = Object.freeze({
             if (changes === void 0) {
                 return emptyArray;
             }
-            return changes.length > 1 ? project(current, changes) : changes;
+            return project(current, changes);
         }
         return resetSplices;
     },

package/dist/esm/observation/observable.bench.js

@@ -0,0 +1,79 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { attr, FASTElement, Observable } from "../index.js";
+import { _random, adjectives, nouns } from "../__test__/utilities.js";
+export class TestObservable extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this._greetMessage = "";
+        this._name = "";
+        this._exit = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const first = this.firstName[0].toUpperCase() + this.firstName.slice(1);
+        const last = this.lastName[0].toUpperCase() + this.lastName.slice(1);
+        this.name = `${first} ${last}`;
+        this.greetMessage = `Welcome to FAST, ${this.name} !!`;
+    }
+    get greetMessage() {
+        Observable.track(this, "greetMessage");
+        return this._greetMessage;
+    }
+    set greetMessage(value) {
+        this._greetMessage = value;
+        Observable.notify(this, "greetMessage");
+    }
+    get name() {
+        Observable.track(this, "name");
+        return this._name;
+    }
+    set name(value) {
+        this._name = value;
+        Observable.notify(this, "name");
+    }
+    get exit() {
+        Observable.track(this, "exit");
+        return this._exit;
+    }
+    set exit(value) {
+        this._exit = value;
+        Observable.notify(this, "exit");
+    }
+}
+__decorate([
+    attr,
+    __metadata("design:type", String)
+], TestObservable.prototype, "firstName", void 0);
+__decorate([
+    attr,
+    __metadata("design:type", String)
+], TestObservable.prototype, "lastName", void 0);
+TestObservable.define({
+    name: "test-observable",
+});
+const itemRenderer = () => {
+    const testObservable = document.createElement("test-observable");
+    testObservable.setAttribute("firstname", adjectives[_random(adjectives.length)]);
+    testObservable.setAttribute("lastname", nouns[_random(nouns.length)]);
+    const notifier = Observable.getNotifier(testObservable);
+    const handler = {
+        handleChange(source, propertyName) {
+            if (propertyName === "greetMessage")
+                source._exit = true;
+        },
+    };
+    notifier.subscribe(handler, "greetMessage");
+    testObservable.greetMessage = `Goodbye ${testObservable.name}, see you next time!`;
+    notifier.unsubscribe(handler, "greetMessage");
+    return testObservable;
+};
+export default itemRenderer;
+export { tests } from "@tensile-perf/web-components";

package/dist/esm/observation/observable.js

@@ -1,5 +1,5 @@
-import { isFunction, isString, } from "../interfaces.js";
-import { createMetadataLocator, FAST } from "../platform.js";
+import { isFunction, isString, KernelServiceId, } from "../interfaces.js";
+import { createMetadataLocator, FAST, makeSerializationNoop } from "../platform.js";
 import { Updates } from "./update-queue.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
 /**
@@ -21,9 +21,9 @@ export const SourceLifetime = Object.freeze({
  * Common Observable APIs.
  * @public
  */
-export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
+export const Observable = FAST.getById(KernelServiceId.observable, () => {
     const queueUpdate = Updates.enqueue;
-    const volatileRegex = /(:|&&|\|\||if)/;
+    const volatileRegex = /(:|&&|\|\||if|\?\.)/;
     const notifierLookup = new WeakMap();
     let watcher = void 0;
     let createArrayObserver = (array) => {
@@ -66,9 +66,9 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
         }
     }
     class ExpressionNotifierImplementation extends SubscriberSet {
-        constructor(binding, initialSubscriber, isVolatileBinding = false) {
-            super(binding, initialSubscriber);
-            this.binding = binding;
+        constructor(expression, initialSubscriber, isVolatileBinding = false) {
+            super(expression, initialSubscriber);
+            this.expression = expression;
             this.isVolatileBinding = isVolatileBinding;
             this.needsRefresh = true;
             this.needsQueue = true;
@@ -108,13 +108,17 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
             this.needsRefresh = this.isVolatileBinding;
             let result;
             try {
-                result = this.binding(source, context);
+                result = this.expression(source, context);
             }
             finally {
                 watcher = previousWatcher;
             }
             return result;
         }
+        // backwards compat with v1 kernel
+        disconnect() {
+            this.dispose();
+        }
         dispose() {
             if (this.last !== null) {
                 let current = this.first;
@@ -176,6 +180,7 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
             }
         }
     }
+    makeSerializationNoop(ExpressionNotifierImplementation);
     return Object.freeze({
         /**
          * @internal
@@ -243,20 +248,20 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
         /**
          * Creates a {@link ExpressionNotifier} that can watch the
          * provided {@link Expression} for changes.
-         * @param binding - The binding to observe.
+         * @param expression - The binding to observe.
          * @param initialSubscriber - An initial subscriber to changes in the binding value.
          * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
          */
-        binding(binding, initialSubscriber, isVolatileBinding = this.isVolatileBinding(binding)) {
-            return new ExpressionNotifierImplementation(binding, initialSubscriber, isVolatileBinding);
+        binding(expression, initialSubscriber, isVolatileBinding = this.isVolatileBinding(expression)) {
+            return new ExpressionNotifierImplementation(expression, initialSubscriber, isVolatileBinding);
         },
         /**
          * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
          * on every evaluation of the value.
-         * @param binding - The binding to inspect.
+         * @param expression - The binding to inspect.
          */
-        isVolatileBinding(binding) {
-            return volatileRegex.test(binding.toString());
+        isVolatileBinding(expression) {
+            return volatileRegex.test(expression.toString());
         },
     });
 });
@@ -284,7 +289,7 @@ export function volatile(target, name, descriptor) {
         },
     });
 }
-const contextEvent = FAST.getById(3 /* KernelServiceId.contextEvent */, () => {
+const contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
     let current = null;
     return {
         get() {

package/dist/esm/observation/update-queue.js

@@ -1,10 +1,10 @@
-import "../interfaces.js";
+import { KernelServiceId } from "../interfaces.js";
 import { FAST } from "../platform.js";
 /**
  * The default UpdateQueue.
  * @public
  */
-export const Updates = FAST.getById(1 /* KernelServiceId.updateQueue */, () => {
+export const Updates = FAST.getById(KernelServiceId.updateQueue, () => {
     const tasks = [];
     const pendingErrors = [];
     const rAF = globalThis.requestAnimationFrame;

package/dist/esm/pending-task.js

@@ -1,16 +1,28 @@
 /**
  * A concrete implementation of {@link PendingTask}
- * @beta
+ * @public
  */
 export class PendingTaskEvent extends Event {
+    /**
+     * Creates an instance of PendingTaskEvent.
+     * @param complete - A promise that resolves when the pending task is complete.
+     */
     constructor(complete) {
         super(PendingTaskEvent.type, { bubbles: true, composed: true });
         this.complete = complete;
     }
+    /**
+     * Determines whether a value is a PendingTaskEvent.
+     * @param value - The value to check.
+     * @returns True if the value is a PendingTaskEvent; false otherwise.
+     */
     static isPendingTask(value) {
         var _a;
         return (value.type === PendingTaskEvent.type &&
             typeof ((_a = value.complete) === null || _a === void 0 ? void 0 : _a.then) === "function");
     }
 }
+/**
+ * The type of the pending task event.
+ */
 PendingTaskEvent.type = "pending-task";

package/dist/esm/platform.js

@@ -1,4 +1,6 @@
-// ensure FAST global - duplicated in polyfills.ts and debug.ts
+import { noop } from "./interfaces.js";
+import "./polyfills.js";
+// ensure FAST global - duplicated debug.ts
 const propConfig = {
     configurable: false,
     enumerable: false,
@@ -9,7 +11,7 @@ if (globalThis.FAST === void 0) {
 }
 /**
  * The FAST global.
- * @internal
+ * @public
  */
 export const FAST = globalThis.FAST;
 if (FAST.getById === void 0) {
@@ -85,3 +87,11 @@ export function createMetadataLocator() {
         return metadata;
     };
 }
+/**
+ * Makes a type noop for JSON serialization.
+ * @param type - The type to make noop for JSON serialization.
+ * @internal
+ */
+export function makeSerializationNoop(type) {
+    type.prototype.toJSON = noop;
+}