@microsoft/fast-element 2.9.2 → 2.10.0

package/dist/esm/index.js

@@ -1,40 +1,39 @@
-export { FAST, emptyArray } from "./platform.js";
+export { emptyArray, FAST } from "./platform.js";
 // DOM
-export { DOMAspect, DOM } from "./dom.js";
+export { DOM, DOMAspect } from "./dom.js";
 // Observation
-export { ExecutionContext, Observable, observable, SourceLifetime, volatile, } from "./observation/observable.js";
+export { ArrayObserver, lengthOf, Sort, sortedCount, Splice, SpliceStrategy, SpliceStrategySupport, } from "./observation/arrays.js";
 export { PropertyChangeNotifier, SubscriberSet, } from "./observation/notifier.js";
-export { ArrayObserver, lengthOf, Splice, SpliceStrategy, SpliceStrategySupport, Sort, sortedCount, } from "./observation/arrays.js";
+export { ExecutionContext, Observable, observable, SourceLifetime, volatile, } from "./observation/observable.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";
+export { oneTime } from "./binding/one-time.js";
+export { listener, oneWay } from "./binding/one-way.js";
 // Styles
-export { ElementStyles, } from "./styles/element-styles.js";
-export { css } from "./styles/css.js";
+export { CSSBindingDirective } from "./styles/css-binding-directive.js";
 export { cssDirective, CSSDirective, } from "./styles/css-directive.js";
+export { css } from "./styles/css.js";
+export { ElementStyles, } from "./styles/element-styles.js";
 export {} from "./styles/host.js";
-export {} from "./styles/style-strategy.js";
-export { CSSBindingDirective } from "./styles/css-binding-directive.js";
 // Templating
-export { html, InlineTemplateDirective, ViewTemplate, } from "./templating/template.js";
+export { children, ChildrenDirective } from "./templating/children.js";
 export { Compiler } from "./templating/compiler.js";
-export { Markup, Parser } from "./templating/markup.js";
-export { HTMLBindingDirective, } from "./templating/html-binding-directive.js";
+export { HTMLBindingDirective } from "./templating/html-binding-directive.js";
 export { htmlDirective, HTMLDirective, StatelessAttachedAttributeDirective, } from "./templating/html-directive.js";
+export { Markup, Parser } from "./templating/markup.js";
+export { elements, NodeObservationDirective } from "./templating/node-observation.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";
+export { repeat, RepeatBehavior, RepeatDirective } from "./templating/repeat.js";
+export { slotted, SlottedDirective } from "./templating/slotted.js";
+export { html, InlineTemplateDirective, ViewTemplate } from "./templating/template.js";
+export { HTMLView, HydrationBindingError } from "./templating/view.js";
+export { when } from "./templating/when.js";
 // Components
-export { customElement, FASTElement } from "./components/fast-element.js";
-export { FASTElementDefinition, fastElementRegistry, TemplateOptions, } from "./components/fast-definitions.js";
 export { attr, AttributeConfiguration, AttributeDefinition, booleanConverter, nullableBooleanConverter, nullableNumberConverter, } from "./components/attributes.js";
-export { ElementController, HydratableElementController, needsHydrationAttribute, } from "./components/element-controller.js";
+export { ElementController, HydratableElementController, needsHydrationAttribute, Stages, } from "./components/element-controller.js";
+export { FASTElementDefinition, fastElementRegistry, TemplateOptions, } from "./components/fast-definitions.js";
+export { customElement, FASTElement } from "./components/fast-element.js";
 export { deferHydrationAttribute, isHydratable } from "./components/hydration.js";

package/dist/esm/interfaces.js

@@ -43,6 +43,44 @@ switch (kernelMode) {
         break;
 }
 export { KernelServiceId };
+/**
+ * Warning and error messages.
+ * @internal
+ */
+export var Message;
+(function (Message) {
+    // 1000 - 1100 Kernel
+    // 1101 - 1200 Observation
+    Message[Message["needsArrayObservation"] = 1101] = "needsArrayObservation";
+    // 1201 - 1300 Templating
+    Message[Message["onlySetDOMPolicyOnce"] = 1201] = "onlySetDOMPolicyOnce";
+    Message[Message["bindingInnerHTMLRequiresTrustedTypes"] = 1202] = "bindingInnerHTMLRequiresTrustedTypes";
+    Message[Message["twoWayBindingRequiresObservables"] = 1203] = "twoWayBindingRequiresObservables";
+    Message[Message["hostBindingWithoutHost"] = 1204] = "hostBindingWithoutHost";
+    Message[Message["unsupportedBindingBehavior"] = 1205] = "unsupportedBindingBehavior";
+    Message[Message["directCallToHTMLTagNotAllowed"] = 1206] = "directCallToHTMLTagNotAllowed";
+    Message[Message["onlySetTemplatePolicyOnce"] = 1207] = "onlySetTemplatePolicyOnce";
+    Message[Message["cannotSetTemplatePolicyAfterCompilation"] = 1208] = "cannotSetTemplatePolicyAfterCompilation";
+    Message[Message["blockedByDOMPolicy"] = 1209] = "blockedByDOMPolicy";
+    // 1301 - 1400 Styles
+    // 1401 - 1500 Components
+    Message[Message["missingElementDefinition"] = 1401] = "missingElementDefinition";
+    // 1501 - 1600 Context and Dependency Injection
+    Message[Message["noRegistrationForContext"] = 1501] = "noRegistrationForContext";
+    Message[Message["noFactoryForResolver"] = 1502] = "noFactoryForResolver";
+    Message[Message["invalidResolverStrategy"] = 1503] = "invalidResolverStrategy";
+    Message[Message["cannotAutoregisterDependency"] = 1504] = "cannotAutoregisterDependency";
+    Message[Message["cannotResolveKey"] = 1505] = "cannotResolveKey";
+    Message[Message["cannotConstructNativeFunction"] = 1506] = "cannotConstructNativeFunction";
+    Message[Message["cannotJITRegisterNonConstructor"] = 1507] = "cannotJITRegisterNonConstructor";
+    Message[Message["cannotJITRegisterIntrinsic"] = 1508] = "cannotJITRegisterIntrinsic";
+    Message[Message["cannotJITRegisterInterface"] = 1509] = "cannotJITRegisterInterface";
+    Message[Message["invalidResolver"] = 1510] = "invalidResolver";
+    Message[Message["invalidKey"] = 1511] = "invalidKey";
+    Message[Message["noDefaultResolver"] = 1512] = "noDefaultResolver";
+    Message[Message["cyclicDependency"] = 1513] = "cyclicDependency";
+    Message[Message["connectUpdateRequiresController"] = 1514] = "connectUpdateRequiresController";
+})(Message || (Message = {}));
 /**
  * Determines whether or not an object is a function.
  * @public

package/dist/esm/observable.js

@@ -2,4 +2,4 @@
  * Observable exports for easy access to the Observable API
  */
 export { ExecutionContext, Observable, observable, SourceLifetime, volatile, } from "./observation/observable.js";
-export { PropertyChangeNotifier, SubscriberSet, } from "./observation/notifier.js";
+export { PropertyChangeNotifier, SubscriberSet } from "./observation/notifier.js";

package/dist/esm/observation/arrays.js

@@ -80,6 +80,13 @@ export const SpliceStrategySupport = Object.freeze({
 const reset = new Splice(0, emptyArray, 0);
 reset.reset = true;
 const resetSplices = [reset];
+var Edit;
+(function (Edit) {
+    Edit[Edit["leave"] = 0] = "leave";
+    Edit[Edit["update"] = 1] = "update";
+    Edit[Edit["add"] = 2] = "add";
+    Edit[Edit["delete"] = 3] = "delete";
+})(Edit || (Edit = {}));
 // Note: This function is *based* on the computation of the Levenshtein
 // "edit" distance. The one change is that "updates" are treated as two
 // edits - not one. With Array splices, an update is really a delete
@@ -131,12 +138,12 @@ function spliceOperationsFromEditDistances(distances) {
     const edits = [];
     while (i > 0 || j > 0) {
         if (i === 0) {
-            edits.push(2 /* Edit.add */);
+            edits.push(Edit.add);
             j--;
             continue;
         }
         if (j === 0) {
-            edits.push(3 /* Edit.delete */);
+            edits.push(Edit.delete);
             i--;
             continue;
         }
@@ -152,22 +159,22 @@ function spliceOperationsFromEditDistances(distances) {
         }
         if (min === northWest) {
             if (northWest === current) {
-                edits.push(0 /* Edit.leave */);
+                edits.push(Edit.leave);
             }
             else {
-                edits.push(1 /* Edit.update */);
+                edits.push(Edit.update);
                 current = northWest;
             }
             i--;
             j--;
         }
         else if (min === west) {
-            edits.push(3 /* Edit.delete */);
+            edits.push(Edit.delete);
             i--;
             current = west;
         }
         else {
-            edits.push(2 /* Edit.add */);
+            edits.push(Edit.add);
             j--;
             current = north;
         }
@@ -258,7 +265,7 @@ function calc(current, currentStart, currentEnd, old, oldStart, oldEnd) {
     let oldIndex = oldStart;
     for (let i = 0; i < ops.length; ++i) {
         switch (ops[i]) {
-            case 0 /* Edit.leave */:
+            case Edit.leave:
                 if (splice !== void 0) {
                     splices.push(splice);
                     splice = void 0;
@@ -266,7 +273,7 @@ function calc(current, currentStart, currentEnd, old, oldStart, oldEnd) {
                 index++;
                 oldIndex++;
                 break;
-            case 1 /* Edit.update */:
+            case Edit.update:
                 if (splice === void 0) {
                     splice = new Splice(index, [], 0);
                 }
@@ -275,14 +282,14 @@ function calc(current, currentStart, currentEnd, old, oldStart, oldEnd) {
                 splice.removed.push(old[oldIndex]);
                 oldIndex++;
                 break;
-            case 2 /* Edit.add */:
+            case Edit.add:
                 if (splice === void 0) {
                     splice = new Splice(index, [], 0);
                 }
                 splice.addedCount++;
                 index++;
                 break;
-            case 3 /* Edit.delete */:
+            case Edit.delete:
                 if (splice === void 0) {
                     splice = new Splice(index, [], 0);
                 }

package/dist/esm/observation/observable.js

@@ -1,7 +1,7 @@
-import { isFunction, isString, KernelServiceId, } from "../interfaces.js";
+import { isFunction, isString, KernelServiceId, Message, } from "../interfaces.js";
 import { createMetadataLocator, FAST, makeSerializationNoop } from "../platform.js";
-import { Updates } from "./update-queue.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
+import { Updates } from "./update-queue.js";
 /**
  * Describes how the source's lifetime relates to its controller's lifetime.
  * @public
@@ -27,7 +27,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
     const notifierLookup = new WeakMap();
     let watcher = void 0;
     let createArrayObserver = (array) => {
-        throw FAST.error(1101 /* Message.needsArrayObservation */);
+        throw FAST.error(Message.needsArrayObservation);
     };
     function getNotifier(source) {
         var _a;

package/dist/esm/styles/css.js

@@ -1,9 +1,9 @@
-import { isFunction, isString } from "../interfaces.js";
 import { Binding } from "../binding/binding.js";
 import { oneWay } from "../binding/one-way.js";
+import { isFunction, isString } from "../interfaces.js";
+import { CSSBindingDirective } from "./css-binding-directive.js";
 import { CSSDirective } from "./css-directive.js";
 import { ElementStyles } from "./element-styles.js";
-import { CSSBindingDirective } from "./css-binding-directive.js";
 const marker = `${Math.random().toString(36).substring(2, 8)}`;
 let varId = 0;
 const nextCSSVariable = () => `--v${marker}${++varId}`;

package/dist/esm/templating/children.js

@@ -1,6 +1,6 @@
 import { isString, noop } from "../interfaces.js";
 import { HTMLDirective } from "./html-directive.js";
-import { NodeObservationDirective } from "./node-observation.js";
+import { NodeObservationDirective, } from "./node-observation.js";
 /**
  * The runtime behavior for child node observation.
  * @public

package/dist/esm/templating/compiler.js

@@ -1,11 +1,11 @@
-import { isFunction, isString } from "../interfaces.js";
-import { FAST } from "../platform.js";
-import { DOM } from "../dom.js";
 import { oneTime } from "../binding/one-time.js";
 import { oneWay } from "../binding/one-way.js";
-import { nextId, Parser } from "./markup.js";
+import { DOM } from "../dom.js";
+import { isFunction, isString, Message } from "../interfaces.js";
+import { FAST } from "../platform.js";
 import { HTMLBindingDirective } from "./html-binding-directive.js";
 import { HTMLDirective, } from "./html-directive.js";
+import { nextId, Parser } from "./markup.js";
 import { HTMLView } from "./view.js";
 const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;
 const descriptorCache = {};
@@ -16,7 +16,7 @@ const next = {
 };
 function tryWarn(name) {
     if (!name.startsWith("fast-")) {
-        FAST.warn(1204 /* Message.hostBindingWithoutHost */, { name });
+        FAST.warn(Message.hostBindingWithoutHost, { name });
     }
 }
 const warningHost = new Proxy(document.createElement("div"), {

package/dist/esm/templating/html-binding-directive.js

@@ -1,6 +1,6 @@
 import { isHydratable } from "../components/hydration.js";
 import { DOM, DOMAspect } from "../dom.js";
-import "../interfaces.js";
+import { Message } from "../interfaces.js";
 import { ExecutionContext, } from "../observation/observable.js";
 import { FAST } from "../platform.js";
 import { HTMLDirective, } from "./html-directive.js";
@@ -150,7 +150,7 @@ export class HTMLBindingDirective {
             const sink = sinkLookup[this.aspectType];
             const policy = (_a = this.dataBinding.policy) !== null && _a !== void 0 ? _a : this.policy;
             if (!sink) {
-                throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
+                throw FAST.error(Message.unsupportedBindingBehavior);
             }
             this.data = `${this.id}-d`;
             this.updateTarget = policy.protect(this.targetTagName, this.aspectType, this.targetAspect, sink);

package/dist/esm/templating/node-observation.js

@@ -1,5 +1,5 @@
 import { emptyArray } from "../platform.js";
-import { StatelessAttachedAttributeDirective } from "./html-directive.js";
+import { StatelessAttachedAttributeDirective, } from "./html-directive.js";
 const selectElements = (value) => value.nodeType === 1;
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.

package/dist/esm/templating/render.js

@@ -1,10 +1,10 @@
-import { FASTElementDefinition } from "../components/fast-definitions.js";
-import { isHydratable } from "../components/hydration.js";
-import { isFunction, isString } from "../interfaces.js";
 import { Binding } from "../binding/binding.js";
+import { normalizeBinding } from "../binding/normalize.js";
 import { oneTime } from "../binding/one-time.js";
 import { oneWay } from "../binding/one-way.js";
-import { normalizeBinding } from "../binding/normalize.js";
+import { FASTElementDefinition } from "../components/fast-definitions.js";
+import { isHydratable } from "../components/hydration.js";
+import { isFunction, isString } from "../interfaces.js";
 import { HTMLDirective, } from "./html-directive.js";
 import { Markup } from "./markup.js";
 import { html, ViewTemplate, } from "./template.js";

package/dist/esm/templating/repeat.js

@@ -1,11 +1,11 @@
+import { normalizeBinding } from "../binding/normalize.js";
 import { HydrationMarkup, isHydratable } from "../components/hydration.js";
-import { ArrayObserver } from "../observation/arrays.js";
-import { Observable } from "../observation/observable.js";
+import { ArrayObserver, Sort, Splice } from "../observation/arrays.js";
+import { Observable, } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
-import { normalizeBinding } from "../binding/normalize.js";
 import { HTMLDirective, } from "./html-directive.js";
 import { Markup } from "./markup.js";
-import { HTMLView, HydrationStage } from "./view.js";
+import { HTMLView, HydrationStage, HydrationView } from "./view.js";
 const defaultRepeatOptions = Object.freeze({
     positioning: false,
     recycle: true,

package/dist/esm/templating/slotted.js

@@ -1,6 +1,6 @@
 import { isString } from "../interfaces.js";
 import { HTMLDirective } from "./html-directive.js";
-import { NodeObservationDirective } from "./node-observation.js";
+import { NodeObservationDirective, } from "./node-observation.js";
 const slotEvent = "slotchange";
 /**
  * The runtime behavior for slotted node observation.

package/dist/esm/templating/template.js

@@ -1,10 +1,10 @@
-import { isFunction, isString } from "../interfaces.js";
 import { Binding } from "../binding/binding.js";
-import { FAST, makeSerializationNoop } from "../platform.js";
-import { oneWay } from "../binding/one-way.js";
 import { oneTime } from "../binding/one-time.js";
-import { HTMLBindingDirective } from "./html-binding-directive.js";
+import { oneWay } from "../binding/one-way.js";
+import { isFunction, isString, Message } from "../interfaces.js";
+import { FAST, makeSerializationNoop } from "../platform.js";
 import { Compiler } from "./compiler.js";
+import { HTMLBindingDirective } from "./html-binding-directive.js";
 import { HTMLDirective, } from "./html-directive.js";
 import { nextId } from "./markup.js";
 // Much thanks to LitHTML for working this out!
@@ -100,10 +100,10 @@ export class ViewTemplate {
      */
     withPolicy(policy) {
         if (this.result) {
-            throw FAST.error(1208 /* Message.cannotSetTemplatePolicyAfterCompilation */);
+            throw FAST.error(Message.cannotSetTemplatePolicyAfterCompilation);
         }
         if (this.policy) {
-            throw FAST.error(1207 /* Message.onlySetTemplatePolicyOnce */);
+            throw FAST.error(Message.onlySetTemplatePolicyOnce);
         }
         this.policy = policy;
         return this;
@@ -177,7 +177,7 @@ export const html = ((strings, ...values) => {
     if (Array.isArray(strings) && Array.isArray(strings.raw)) {
         return ViewTemplate.create(strings, values);
     }
-    throw FAST.error(1206 /* Message.directCallToHTMLTagNotAllowed */);
+    throw FAST.error(Message.directCallToHTMLTagNotAllowed);
 });
 html.partial = (html) => {
     return new InlineTemplateDirective(html);

package/dist/fast-element.api.json

@@ -12578,7 +12578,7 @@
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "static lifecycleCallbacks?: "
+                  "text": "static lifecycleCallbacks: "
                 },
                 {
                   "kind": "Reference",
@@ -12591,7 +12591,7 @@
                 }
               ],
               "isReadonly": false,
-              "isOptional": true,
+              "isOptional": false,
               "releaseTag": "Beta",
               "name": "lifecycleCallbacks",
               "propertyTypeTokenRange": {
@@ -13107,26 +13107,57 @@
           "excerptTokens": [
             {
               "kind": "Content",
-              "text": "export interface HydrationControllerCallbacks "
+              "text": "export interface HydrationControllerCallbacks<TElement extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "HTMLElement",
+              "canonicalReference": "!HTMLElement:interface"
+            },
+            {
+              "kind": "Content",
+              "text": " = "
+            },
+            {
+              "kind": "Reference",
+              "text": "HTMLElement",
+              "canonicalReference": "!HTMLElement:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "> "
             }
           ],
           "fileUrlPath": "dist/dts/components/element-controller.d.ts",
           "releaseTag": "Public",
+          "typeParameters": [
+            {
+              "typeParameterName": "TElement",
+              "constraintTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "defaultTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              }
+            }
+          ],
           "name": "HydrationControllerCallbacks",
           "preserveMemberOrder": false,
           "members": [
             {
               "kind": "MethodSignature",
               "canonicalReference": "@microsoft/fast-element!HydrationControllerCallbacks#elementDidHydrate:member(1)",
-              "docComment": "/**\n * Called after hydration has finished\n */\n",
+              "docComment": "/**\n * Called after an individual element's hydration has finished\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "elementDidHydrate?(name: "
+                  "text": "elementDidHydrate?(source: "
                 },
                 {
                   "kind": "Content",
-                  "text": "string"
+                  "text": "TElement"
                 },
                 {
                   "kind": "Content",
@@ -13150,7 +13181,7 @@
               "overloadIndex": 1,
               "parameters": [
                 {
-                  "parameterName": "name",
+                  "parameterName": "source",
                   "parameterTypeTokenRange": {
                     "startIndex": 1,
                     "endIndex": 2
@@ -13163,15 +13194,15 @@
             {
               "kind": "MethodSignature",
               "canonicalReference": "@microsoft/fast-element!HydrationControllerCallbacks#elementWillHydrate:member(1)",
-              "docComment": "/**\n * Called before hydration has started\n */\n",
+              "docComment": "/**\n * Called before an individual element's hydration begins\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "elementWillHydrate?(name: "
+                  "text": "elementWillHydrate?(source: "
                 },
                 {
                   "kind": "Content",
-                  "text": "string"
+                  "text": "TElement"
                 },
                 {
                   "kind": "Content",
@@ -13195,7 +13226,7 @@
               "overloadIndex": 1,
               "parameters": [
                 {
-                  "parameterName": "name",
+                  "parameterName": "source",
                   "parameterTypeTokenRange": {
                     "startIndex": 1,
                     "endIndex": 2
@@ -13232,6 +13263,34 @@
               "overloadIndex": 1,
               "parameters": [],
               "name": "hydrationComplete"
+            },
+            {
+              "kind": "MethodSignature",
+              "canonicalReference": "@microsoft/fast-element!HydrationControllerCallbacks#hydrationStarted:member(1)",
+              "docComment": "/**\n * Called once when the first element enters the hydration pipeline. This is the earliest point at which we know a component has been async-defined with `defer-and-hydrate`, a template is pending via `<f-template>`, and the element has `needs-hydration`.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "hydrationStarted?(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": true,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Public",
+              "overloadIndex": 1,
+              "parameters": [],
+              "name": "hydrationStarted"
             }
           ],
           "extendsTokenRanges": []