@microsoft/fast-element 2.0.0-beta.9 → 2.0.1

package/dist/esm/components/element-controller.js

@@ -1,8 +1,11 @@
 import "../interfaces.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
-import { Observable, SourceLifetime } from "../observation/observable.js";
-import { FAST } from "../platform.js";
+import { ExecutionContext, Observable, SourceLifetime, } from "../observation/observable.js";
+import { FAST, makeSerializationNoop } from "../platform.js";
+import { ElementStyles } from "../styles/element-styles.js";
+import { UnobservableMutationObserver } from "../utilities.js";
 import { FASTElementDefinition } from "./fast-definitions.js";
+import { HydrationMarkup, isHydratable } from "./hydration.js";
 const defaultEventOptions = {
     bubbles: true,
     composed: true,
@@ -14,6 +17,7 @@ function getShadowRoot(element) {
     var _a, _b;
     return (_b = (_a = element.shadowRoot) !== null && _a !== void 0 ? _a : shadowRoots.get(element)) !== null && _b !== void 0 ? _b : null;
 }
+let elementControllerStrategy;
 /**
  * Controls the lifecycle and rendering of a `FASTElement`.
  * @public
@@ -32,8 +36,19 @@ export class ElementController extends PropertyChangeNotifier {
         this.needsInitialization = true;
         this.hasExistingShadowRoot = false;
         this._template = null;
-        this._isConnected = false;
+        this.stage = 3 /* Stages.disconnected */;
+        /**
+         * A guard against connecting behaviors multiple times
+         * during connect in scenarios where a behavior adds
+         * another behavior during it's connectedCallback
+         */
+        this.guardBehaviorConnection = false;
         this.behaviors = null;
+        /**
+         * Tracks whether behaviors are connected so that
+         * behaviors cant be connected multiple times
+         */
+        this.behaviorsConnected = false;
         this._mainStyles = null;
         /**
          * This allows Observable.getNotifier(...) to return the Controller
@@ -88,11 +103,28 @@ export class ElementController extends PropertyChangeNotifier {
      */
     get isConnected() {
         Observable.track(this, isConnectedPropertyName);
-        return this._isConnected;
+        return this.stage === 1 /* Stages.connected */;
     }
-    setIsConnected(value) {
-        this._isConnected = value;
-        Observable.notify(this, isConnectedPropertyName);
+    /**
+     * The context the expression is evaluated against.
+     */
+    get context() {
+        var _a, _b;
+        return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.context) !== null && _b !== void 0 ? _b : ExecutionContext.default;
+    }
+    /**
+     * Indicates whether the controller is bound.
+     */
+    get isBound() {
+        var _a, _b;
+        return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.isBound) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Indicates how the source's lifetime relates to the controller's lifetime.
+     */
+    get sourceLifetime() {
+        var _a;
+        return (_a = this.view) === null || _a === void 0 ? void 0 : _a.sourceLifetime;
     }
     /**
      * Gets/sets the template used to render the component.
@@ -156,6 +188,14 @@ export class ElementController extends PropertyChangeNotifier {
             this.addStyles(value);
         }
     }
+    /**
+     * Registers an unbind handler with the controller.
+     * @param behavior - An object to call when the controller unbinds.
+     */
+    onUnbind(behavior) {
+        var _a;
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.onUnbind(behavior);
+    }
     /**
      * Adds the behavior to the component.
      * @param behavior - The behavior to add.
@@ -167,7 +207,9 @@ export class ElementController extends PropertyChangeNotifier {
         if (count === 0) {
             targetBehaviors.set(behavior, 1);
             behavior.addedCallback && behavior.addedCallback(this);
-            if (behavior.connectedCallback && this.isConnected) {
+            if (behavior.connectedCallback &&
+                !this.guardBehaviorConnection &&
+                (this.stage === 1 /* Stages.connected */ || this.stage === 0 /* Stages.connecting */)) {
                 behavior.connectedCallback(this);
             }
         }
@@ -191,7 +233,7 @@ export class ElementController extends PropertyChangeNotifier {
         }
         if (count === 1 || force) {
             targetBehaviors.delete(behavior);
-            if (behavior.disconnectedCallback && this.isConnected) {
+            if (behavior.disconnectedCallback && this.stage !== 3 /* Stages.disconnected */) {
                 behavior.disconnectedCallback(this);
             }
             behavior.removedCallback && behavior.removedCallback(this);
@@ -210,13 +252,13 @@ export class ElementController extends PropertyChangeNotifier {
             return;
         }
         const source = this.source;
-        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
         if (styles instanceof HTMLElement) {
+            const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : this.source;
             target.append(styles);
         }
-        else if (!styles.isAttachedTo(target)) {
+        else if (!styles.isAttachedTo(source)) {
             const sourceBehaviors = styles.behaviors;
-            styles.addStylesTo(target);
+            styles.addStylesTo(source);
             if (sourceBehaviors !== null) {
                 for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
                     this.addBehavior(sourceBehaviors[i]);
@@ -234,16 +276,16 @@ export class ElementController extends PropertyChangeNotifier {
             return;
         }
         const source = this.source;
-        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
         if (styles instanceof HTMLElement) {
+            const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source;
             target.removeChild(styles);
         }
-        else if (styles.isAttachedTo(target)) {
+        else if (styles.isAttachedTo(source)) {
             const sourceBehaviors = styles.behaviors;
-            styles.removeStylesFrom(target);
+            styles.removeStylesFrom(source);
             if (sourceBehaviors !== null) {
                 for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
-                    this.addBehavior(sourceBehaviors[i]);
+                    this.removeBehavior(sourceBehaviors[i]);
                 }
             }
         }
@@ -252,40 +294,73 @@ export class ElementController extends PropertyChangeNotifier {
      * Runs connected lifecycle behavior on the associated element.
      */
     connect() {
-        if (this._isConnected) {
+        if (this.stage !== 3 /* Stages.disconnected */) {
             return;
         }
+        this.stage = 0 /* Stages.connecting */;
+        this.bindObservables();
+        this.connectBehaviors();
         if (this.needsInitialization) {
-            this.finishInitialization();
+            this.renderTemplate(this.template);
+            this.addStyles(this.mainStyles);
+            this.needsInitialization = false;
         }
         else if (this.view !== null) {
             this.view.bind(this.source);
         }
-        const behaviors = this.behaviors;
-        if (behaviors !== null) {
-            for (const key of behaviors.keys()) {
-                key.connectedCallback && key.connectedCallback(this);
+        this.stage = 1 /* Stages.connected */;
+        Observable.notify(this, isConnectedPropertyName);
+    }
+    bindObservables() {
+        if (this.boundObservables !== null) {
+            const element = this.source;
+            const boundObservables = this.boundObservables;
+            const propertyNames = Object.keys(boundObservables);
+            for (let i = 0, ii = propertyNames.length; i < ii; ++i) {
+                const propertyName = propertyNames[i];
+                element[propertyName] = boundObservables[propertyName];
+            }
+            this.boundObservables = null;
+        }
+    }
+    connectBehaviors() {
+        if (this.behaviorsConnected === false) {
+            const behaviors = this.behaviors;
+            if (behaviors !== null) {
+                this.guardBehaviorConnection = true;
+                for (const key of behaviors.keys()) {
+                    key.connectedCallback && key.connectedCallback(this);
+                }
+                this.guardBehaviorConnection = false;
+            }
+            this.behaviorsConnected = true;
+        }
+    }
+    disconnectBehaviors() {
+        if (this.behaviorsConnected === true) {
+            const behaviors = this.behaviors;
+            if (behaviors !== null) {
+                for (const key of behaviors.keys()) {
+                    key.disconnectedCallback && key.disconnectedCallback(this);
+                }
             }
+            this.behaviorsConnected = false;
         }
-        this.setIsConnected(true);
     }
     /**
      * Runs disconnected lifecycle behavior on the associated element.
      */
     disconnect() {
-        if (!this._isConnected) {
+        if (this.stage !== 1 /* Stages.connected */) {
             return;
         }
-        this.setIsConnected(false);
+        this.stage = 2 /* Stages.disconnecting */;
+        Observable.notify(this, isConnectedPropertyName);
         if (this.view !== null) {
             this.view.unbind();
         }
-        const behaviors = this.behaviors;
-        if (behaviors !== null) {
-            for (const key of behaviors.keys()) {
-                key.disconnectedCallback && key.disconnectedCallback(this);
-            }
-        }
+        this.disconnectBehaviors();
+        this.stage = 3 /* Stages.disconnected */;
     }
     /**
      * Runs the attribute changed callback for the associated element.
@@ -308,27 +383,11 @@ export class ElementController extends PropertyChangeNotifier {
      * Only emits events if connected.
      */
     emit(type, detail, options) {
-        if (this._isConnected) {
+        if (this.stage === 1 /* Stages.connected */) {
             return this.source.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({ detail }, defaultEventOptions), options)));
         }
         return false;
     }
-    finishInitialization() {
-        const element = this.source;
-        const boundObservables = this.boundObservables;
-        // If we have any observables that were bound, re-apply their values.
-        if (boundObservables !== null) {
-            const propertyNames = Object.keys(boundObservables);
-            for (let i = 0, ii = propertyNames.length; i < ii; ++i) {
-                const propertyName = propertyNames[i];
-                element[propertyName] = boundObservables[propertyName];
-            }
-            this.boundObservables = null;
-        }
-        this.renderTemplate(this.template);
-        this.addStyles(this.mainStyles);
-        this.needsInitialization = false;
-    }
     renderTemplate(template) {
         var _a;
         // When getting the host to render to, we start by looking
@@ -372,6 +431,217 @@ export class ElementController extends PropertyChangeNotifier {
         if (definition === void 0) {
             throw FAST.error(1401 /* Message.missingElementDefinition */);
         }
-        return (element.$fastController = new ElementController(element, definition));
+        return (element.$fastController = new elementControllerStrategy(element, definition));
+    }
+    /**
+     * Sets the strategy that ElementController.forCustomElement uses to construct
+     * ElementController instances for an element.
+     * @param strategy - The strategy to use.
+     */
+    static setStrategy(strategy) {
+        elementControllerStrategy = strategy;
+    }
+}
+makeSerializationNoop(ElementController);
+// Set default strategy for ElementController
+ElementController.setStrategy(ElementController);
+/**
+ * Converts a styleTarget into the operative target. When the provided target is an Element
+ * that is a FASTElement, the function will return the ShadowRoot for that element. Otherwise,
+ * it will return the root node for the element.
+ * @param target
+ * @returns
+ */
+function normalizeStyleTarget(target) {
+    var _a;
+    if ("adoptedStyleSheets" in target) {
+        return target;
+    }
+    else {
+        return ((_a = getShadowRoot(target)) !== null && _a !== void 0 ? _a : target.getRootNode());
+    }
+}
+// Default StyleStrategy implementations are defined in this module because they
+// require access to element shadowRoots, and we don't want to leak shadowRoot
+// objects out of this module.
+/**
+ * https://wicg.github.io/construct-stylesheets/
+ * https://developers.google.com/web/updates/2019/02/constructable-stylesheets
+ *
+ * @internal
+ */
+export class AdoptedStyleSheetsStrategy {
+    constructor(styles) {
+        const styleSheetCache = AdoptedStyleSheetsStrategy.styleSheetCache;
+        this.sheets = styles.map((x) => {
+            if (x instanceof CSSStyleSheet) {
+                return x;
+            }
+            let sheet = styleSheetCache.get(x);
+            if (sheet === void 0) {
+                sheet = new CSSStyleSheet();
+                sheet.replaceSync(x);
+                styleSheetCache.set(x, sheet);
+            }
+            return sheet;
+        });
+    }
+    addStylesTo(target) {
+        addAdoptedStyleSheets(normalizeStyleTarget(target), this.sheets);
+    }
+    removeStylesFrom(target) {
+        removeAdoptedStyleSheets(normalizeStyleTarget(target), this.sheets);
+    }
+}
+AdoptedStyleSheetsStrategy.styleSheetCache = new Map();
+let id = 0;
+const nextStyleId = () => `fast-${++id}`;
+function usableStyleTarget(target) {
+    return target === document ? document.body : target;
+}
+/**
+ * @internal
+ */
+export class StyleElementStrategy {
+    constructor(styles) {
+        this.styles = styles;
+        this.styleClass = nextStyleId();
+    }
+    addStylesTo(target) {
+        target = usableStyleTarget(normalizeStyleTarget(target));
+        const styles = this.styles;
+        const styleClass = this.styleClass;
+        for (let i = 0; i < styles.length; i++) {
+            const element = document.createElement("style");
+            element.innerHTML = styles[i];
+            element.className = styleClass;
+            target.append(element);
+        }
+    }
+    removeStylesFrom(target) {
+        target = usableStyleTarget(normalizeStyleTarget(target));
+        const styles = target.querySelectorAll(`.${this.styleClass}`);
+        for (let i = 0, ii = styles.length; i < ii; ++i) {
+            target.removeChild(styles[i]);
+        }
+    }
+}
+let addAdoptedStyleSheets = (target, sheets) => {
+    target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...sheets];
+};
+let removeAdoptedStyleSheets = (target, sheets) => {
+    target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
+};
+if (ElementStyles.supportsAdoptedStyleSheets) {
+    try {
+        // Test if browser implementation uses FrozenArray.
+        // If not, use push / splice to alter the stylesheets
+        // in place. This circumvents a bug in Safari 16.4 where
+        // periodically, assigning the array would previously
+        // cause sheets to be removed.
+        document.adoptedStyleSheets.push();
+        document.adoptedStyleSheets.splice();
+        addAdoptedStyleSheets = (target, sheets) => {
+            target.adoptedStyleSheets.push(...sheets);
+        };
+        removeAdoptedStyleSheets = (target, sheets) => {
+            for (const sheet of sheets) {
+                const index = target.adoptedStyleSheets.indexOf(sheet);
+                if (index !== -1) {
+                    target.adoptedStyleSheets.splice(index, 1);
+                }
+            }
+        };
+    }
+    catch (e) {
+        // Do nothing if an error is thrown, the default
+        // case handles FrozenArray.
+    }
+    ElementStyles.setDefaultStrategy(AdoptedStyleSheetsStrategy);
+}
+else {
+    ElementStyles.setDefaultStrategy(StyleElementStrategy);
+}
+const deferHydrationAttribute = "defer-hydration";
+const needsHydrationAttribute = "needs-hydration";
+/**
+ * An ElementController capable of hydrating FAST elements from
+ * Declarative Shadow DOM.
+ *
+ * @beta
+ */
+export class HydratableElementController extends ElementController {
+    static hydrationObserverHandler(records) {
+        for (const record of records) {
+            HydratableElementController.hydrationObserver.unobserve(record.target);
+            record.target.$fastController.connect();
+        }
+    }
+    connect() {
+        var _a, _b;
+        // Initialize needsHydration on first connect
+        if (this.needsHydration === undefined) {
+            this.needsHydration =
+                this.source.getAttribute(needsHydrationAttribute) !== null;
+        }
+        // If the `defer-hydration` attribute exists on the source,
+        // wait for it to be removed before continuing connection behavior.
+        if (this.source.hasAttribute(deferHydrationAttribute)) {
+            HydratableElementController.hydrationObserver.observe(this.source, {
+                attributeFilter: [deferHydrationAttribute],
+            });
+            return;
+        }
+        // If the controller does not need to be hydrated, defer connection behavior
+        // to the base-class. This case handles element re-connection and initial connection
+        // of elements that did not get declarative shadow-dom emitted, as well as if an extending
+        // class
+        if (!this.needsHydration) {
+            super.connect();
+            return;
+        }
+        if (this.stage !== 3 /* Stages.disconnected */) {
+            return;
+        }
+        this.stage = 0 /* Stages.connecting */;
+        this.bindObservables();
+        this.connectBehaviors();
+        const element = this.source;
+        const host = (_a = getShadowRoot(element)) !== null && _a !== void 0 ? _a : element;
+        if (this.template) {
+            if (isHydratable(this.template)) {
+                let firstChild = host.firstChild;
+                let lastChild = host.lastChild;
+                if (element.shadowRoot === null) {
+                    // handle element boundary markers when shadowRoot is not present
+                    if (HydrationMarkup.isElementBoundaryStartMarker(firstChild)) {
+                        firstChild.data = "";
+                        firstChild = firstChild.nextSibling;
+                    }
+                    if (HydrationMarkup.isElementBoundaryEndMarker(lastChild)) {
+                        lastChild.data = "";
+                        lastChild = lastChild.previousSibling;
+                    }
+                }
+                this.view = this.template.hydrate(firstChild, lastChild, element);
+                (_b = this.view) === null || _b === void 0 ? void 0 : _b.bind(this.source);
+            }
+            else {
+                this.renderTemplate(this.template);
+            }
+        }
+        this.addStyles(this.mainStyles);
+        this.stage = 1 /* Stages.connected */;
+        this.source.removeAttribute(needsHydrationAttribute);
+        this.needsInitialization = this.needsHydration = false;
+        Observable.notify(this, isConnectedPropertyName);
+    }
+    disconnect() {
+        super.disconnect();
+        HydratableElementController.hydrationObserver.unobserve(this.source);
+    }
+    static install() {
+        ElementController.setStrategy(HydratableElementController);
     }
 }
+HydratableElementController.hydrationObserver = new UnobservableMutationObserver(HydratableElementController.hydrationObserverHandler);

package/dist/esm/components/element-hydration.js

@@ -0,0 +1,2 @@
+export { HydratableElementController } from "./element-controller.js";
+export * from "./hydration.js";

package/dist/esm/components/fast-definitions.js

@@ -1,11 +1,12 @@
-import { isString } from "../interfaces.js";
+import { isString, KernelServiceId } from "../interfaces.js";
 import { Observable } from "../observation/observable.js";
 import { createTypeRegistry, FAST } from "../platform.js";
 import { ElementStyles } from "../styles/element-styles.js";
 import { AttributeDefinition } from "./attributes.js";
 const defaultShadowOptions = { mode: "open" };
 const defaultElementOptions = {};
-const fastElementRegistry = FAST.getById(4 /* KernelServiceId.elementRegistry */, () => createTypeRegistry());
+const fastElementBaseTypes = new Set();
+const fastElementRegistry = FAST.getById(KernelServiceId.elementRegistry, () => createTypeRegistry());
 /**
  * Defines metadata for a FASTElement.
  * @public
@@ -80,13 +81,20 @@ export class FASTElementDefinition {
      * that describes the element to define.
      */
     static compose(type, nameOrDef) {
-        const found = fastElementRegistry.getByType(type);
-        if (found) {
+        if (fastElementBaseTypes.has(type) || fastElementRegistry.getByType(type)) {
             return new FASTElementDefinition(class extends type {
             }, nameOrDef);
         }
         return new FASTElementDefinition(type, nameOrDef);
     }
+    /**
+     * Registers a FASTElement base type.
+     * @param type - The type to register as a base type.
+     * @internal
+     */
+    static registerBaseType(type) {
+        fastElementBaseTypes.add(type);
+    }
 }
 /**
  * Gets the element definition associated with the specified type.

package/dist/esm/components/fast-element.js

@@ -3,7 +3,7 @@ import { ElementController } from "./element-controller.js";
 import { FASTElementDefinition, } from "./fast-definitions.js";
 /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
 function createFASTElement(BaseType) {
-    return class extends BaseType {
+    const type = class extends BaseType {
         constructor() {
             /* eslint-disable-next-line */
             super();
@@ -22,6 +22,8 @@ function createFASTElement(BaseType) {
             this.$fastController.onAttributeChangedCallback(name, oldValue, newValue);
         }
     };
+    FASTElementDefinition.registerBaseType(type);
+    return type;
 }
 function compose(type, nameOrDef) {
     if (isFunction(type)) {

package/dist/esm/components/hydration.js

@@ -0,0 +1,104 @@
+const bindingStartMarker = /fe-b\$\$start\$\$(\d+)\$\$(.+)\$\$fe-b/;
+const bindingEndMarker = /fe-b\$\$end\$\$(\d+)\$\$(.+)\$\$fe-b/;
+const repeatViewStartMarker = /fe-repeat\$\$start\$\$(\d+)\$\$fe-repeat/;
+const repeatViewEndMarker = /fe-repeat\$\$end\$\$(\d+)\$\$fe-repeat/;
+const elementBoundaryStartMarker = /^(?:.{0,1000})fe-eb\$\$start\$\$(.+?)\$\$fe-eb/;
+const elementBoundaryEndMarker = /fe-eb\$\$end\$\$(.{0,1000})\$\$fe-eb(?:.{0,1000})$/;
+function isComment(node) {
+    return node && node.nodeType === Node.COMMENT_NODE;
+}
+/**
+ * Markup utilities to aid in template hydration.
+ * @internal
+ */
+export const HydrationMarkup = Object.freeze({
+    attributeMarkerName: "data-fe-b",
+    attributeBindingSeparator: " ",
+    contentBindingStartMarker(index, uniqueId) {
+        return `fe-b$$start$$${index}$$${uniqueId}$$fe-b`;
+    },
+    contentBindingEndMarker(index, uniqueId) {
+        return `fe-b$$end$$${index}$$${uniqueId}$$fe-b`;
+    },
+    repeatStartMarker(index) {
+        return `fe-repeat$$start$$${index}$$fe-repeat`;
+    },
+    repeatEndMarker(index) {
+        return `fe-repeat$$end$$${index}$$fe-repeat`;
+    },
+    isContentBindingStartMarker(content) {
+        return bindingStartMarker.test(content);
+    },
+    isContentBindingEndMarker(content) {
+        return bindingEndMarker.test(content);
+    },
+    isRepeatViewStartMarker(content) {
+        return repeatViewStartMarker.test(content);
+    },
+    isRepeatViewEndMarker(content) {
+        return repeatViewEndMarker.test(content);
+    },
+    isElementBoundaryStartMarker(node) {
+        return isComment(node) && elementBoundaryStartMarker.test(node.data.trim());
+    },
+    isElementBoundaryEndMarker(node) {
+        return isComment(node) && elementBoundaryEndMarker.test(node.data);
+    },
+    /**
+     * Returns the indexes of the ViewBehaviorFactories affecting
+     * attributes for the element, or null if no factories were found.
+     */
+    parseAttributeBinding(node) {
+        const attr = node.getAttribute(this.attributeMarkerName);
+        return attr === null
+            ? attr
+            : attr.split(this.attributeBindingSeparator).map(i => parseInt(i));
+    },
+    /**
+     * Parses the ViewBehaviorFactory index from string data. Returns
+     * the binding index or null if the index cannot be retrieved.
+     */
+    parseContentBindingStartMarker(content) {
+        return parseIndexAndIdMarker(bindingStartMarker, content);
+    },
+    parseContentBindingEndMarker(content) {
+        return parseIndexAndIdMarker(bindingEndMarker, content);
+    },
+    /**
+     * Parses the index of a repeat directive from a content string.
+     */
+    parseRepeatStartMarker(content) {
+        return parseIntMarker(repeatViewStartMarker, content);
+    },
+    parseRepeatEndMarker(content) {
+        return parseIntMarker(repeatViewEndMarker, content);
+    },
+    /**
+     * Parses element Id from element boundary markers
+     */
+    parseElementBoundaryStartMarker(content) {
+        return parseStringMarker(elementBoundaryStartMarker, content.trim());
+    },
+    parseElementBoundaryEndMarker(content) {
+        return parseStringMarker(elementBoundaryEndMarker, content);
+    },
+});
+function parseIntMarker(regex, content) {
+    const match = regex.exec(content);
+    return match === null ? match : parseInt(match[1]);
+}
+function parseStringMarker(regex, content) {
+    const match = regex.exec(content);
+    return match === null ? match : match[1];
+}
+function parseIndexAndIdMarker(regex, content) {
+    const match = regex.exec(content);
+    return match === null ? match : [parseInt(match[1]), match[2]];
+}
+/**
+ * @internal
+ */
+export const Hydratable = Symbol.for("fe-hydration");
+export function isHydratable(value) {
+    return value[Hydratable] === Hydratable;
+}

package/dist/esm/components/install-hydration.js

@@ -0,0 +1,3 @@
+import "../templating/install-hydratable-view-templates.js";
+import { HydratableElementController } from "./element-controller.js";
+HydratableElementController.install();