@microsoft/fast-element 2.10.4 → 3.0.0-rc.2

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

@@ -1,67 +1,56 @@
-import { KernelServiceId } from "../interfaces.js";
-import { FAST } from "../platform.js";
-/**
- * The default UpdateQueue.
- * @public
- */
-export const Updates = FAST.getById(KernelServiceId.updateQueue, () => {
-    const tasks = [];
-    const pendingErrors = [];
-    const rAF = globalThis.requestAnimationFrame;
-    let updateAsync = true;
-    function throwFirstError() {
-        if (pendingErrors.length) {
-            throw pendingErrors.shift();
-        }
+const tasks = [];
+const pendingErrors = [];
+const rAF = globalThis.requestAnimationFrame;
+let updateAsync = true;
+function throwFirstError() {
+    if (pendingErrors.length) {
+        throw pendingErrors.shift();
+    }
+}
+function tryRunTask(task) {
+    try {
+        task.call();
     }
-    function tryRunTask(task) {
-        try {
-            task.call();
+    catch (error) {
+        if (updateAsync) {
+            pendingErrors.push(error);
+            setTimeout(throwFirstError, 0);
         }
-        catch (error) {
-            if (updateAsync) {
-                pendingErrors.push(error);
-                setTimeout(throwFirstError, 0);
-            }
-            else {
-                tasks.length = 0;
-                throw error;
-            }
+        else {
+            tasks.length = 0;
+            throw error;
         }
     }
-    function process() {
-        const capacity = 1024;
-        let index = 0;
-        while (index < tasks.length) {
-            tryRunTask(tasks[index]);
-            index++;
-            // Prevent leaking memory for long chains of recursive calls to `enqueue`.
-            // If we call `enqueue` within a task scheduled by `enqueue`, the queue will
-            // grow, but to avoid an O(n) walk for every task we execute, we don't
-            // shift tasks off the queue after they have been executed.
-            // Instead, we periodically shift 1024 tasks off the queue.
-            if (index > capacity) {
-                // Manually shift all values starting at the index back to the
-                // beginning of the queue.
-                for (let scan = 0, newLength = tasks.length - index; scan < newLength; scan++) {
-                    tasks[scan] = tasks[scan + index];
-                }
-                tasks.length -= index;
-                index = 0;
+}
+function process() {
+    const capacity = 1024;
+    let index = 0;
+    while (index < tasks.length) {
+        tryRunTask(tasks[index]);
+        index++;
+        if (index > capacity) {
+            for (let scan = 0, newLength = tasks.length - index; scan < newLength; scan++) {
+                tasks[scan] = tasks[scan + index];
             }
+            tasks.length -= index;
+            index = 0;
         }
-        tasks.length = 0;
     }
-    function enqueue(callable) {
-        tasks.push(callable);
-        if (tasks.length < 2) {
-            updateAsync ? rAF(process) : process();
-        }
+    tasks.length = 0;
+}
+function enqueue(callable) {
+    tasks.push(callable);
+    if (tasks.length < 2) {
+        updateAsync ? rAF(process) : process();
     }
-    return Object.freeze({
-        enqueue,
-        next: () => new Promise(enqueue),
-        process,
-        setMode: (isAsync) => (updateAsync = isAsync),
-    });
+}
+/**
+ * The default UpdateQueue.
+ * @public
+ */
+export const Updates = Object.freeze({
+    enqueue,
+    next: () => new Promise(enqueue),
+    process,
+    setMode: (isAsync) => (updateAsync = isAsync),
 });

package/dist/esm/platform.js

@@ -1,37 +1,38 @@
 import { noop } from "./interfaces.js";
-import "./polyfills.js";
-// ensure FAST global - duplicated debug.ts
-const propConfig = {
-    configurable: false,
-    enumerable: false,
-    writable: false,
-};
-if (globalThis.FAST === void 0) {
-    Reflect.defineProperty(globalThis, "FAST", Object.assign({ value: Object.create(null) }, propConfig));
-}
+const debugMessages = Object.create(null);
 /**
- * The FAST global.
+ * The FAST messaging API for warnings and errors.
  * @public
  */
-export const FAST = globalThis.FAST;
-if (FAST.getById === void 0) {
-    const storage = Object.create(null);
-    Reflect.defineProperty(FAST, "getById", Object.assign({ value(id, initialize) {
-            let found = storage[id];
-            if (found === void 0) {
-                found = initialize ? (storage[id] = initialize()) : null;
-            }
-            return found;
-        } }, propConfig));
-}
-if (FAST.error === void 0) {
-    Object.assign(FAST, {
-        warn() { },
-        error(code) {
-            return new Error(`Error ${code}`);
-        },
-        addMessages() { },
-    });
+export const FAST = {
+    /**
+     * Sends a warning to the developer.
+     * @param code - The warning code to send.
+     * @param values - Values relevant for the warning message.
+     */
+    warn(_code, _values) { },
+    /**
+     * Creates an error from a code.
+     * @param code - The error code.
+     * @param values - Values relevant for the error message.
+     */
+    error(code, _values) {
+        return new Error(`Error ${code}`);
+    },
+    /**
+     * Adds debug messages for errors and warnings.
+     * @param messages - The message dictionary to add.
+     */
+    addMessages(messages) {
+        Object.assign(debugMessages, messages);
+    },
+};
+/**
+ * Gets the shared debug message lookup.
+ * @internal
+ */
+export function getDebugMessageLookup() {
+    return debugMessages;
 }
 /**
  * A readonly, empty array.

package/dist/esm/registry.js

@@ -0,0 +1 @@
+export { FASTElementDefinition, fastElementRegistry, } from "./components/fast-definitions.js";

package/dist/esm/render.js

@@ -0,0 +1 @@
+export { RenderBehavior, RenderDirective, render } from "./templating/render.js";

package/dist/esm/schema.js

@@ -0,0 +1 @@
+export { Schema, schemaRegistry, } from "./components/schema.js";

package/dist/esm/state/exports.js

@@ -1,3 +1,3 @@
 export { reactive } from "./reactive.js";
-export { watch } from "./watch.js";
 export * from "./state.js";
+export { watch } from "./watch.js";

package/dist/esm/styles/css-directive.js

@@ -1,8 +1,7 @@
 import { createTypeRegistry } from "../platform.js";
 const registry = createTypeRegistry();
 /**
- * Instructs the css engine to provide dynamic styles or
- * associate behaviors with styles.
+ * Instructs the css engine to provide styles during CSS template composition.
  * @public
  */
 export const CSSDirective = Object.freeze({

package/dist/esm/styles/css.js

@@ -1,30 +1,13 @@
-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";
-const marker = `${Math.random().toString(36).substring(2, 8)}`;
-let varId = 0;
-const nextCSSVariable = () => `--v${marker}${++varId}`;
 function collectStyles(strings, values) {
     const styles = [];
     let cssString = "";
-    const behaviors = [];
-    const add = (behavior) => {
-        behaviors.push(behavior);
-    };
     for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
         cssString += strings[i];
         let value = values[i];
-        if (isFunction(value)) {
-            value = new CSSBindingDirective(oneWay(value), nextCSSVariable()).createCSS(add);
-        }
-        else if (value instanceof Binding) {
-            value = new CSSBindingDirective(value, nextCSSVariable()).createCSS(add);
-        }
-        else if (CSSDirective.getForInstance(value) !== void 0) {
-            value = value.createCSS(add);
+        if (CSSDirective.getForInstance(value) !== void 0) {
+            value = value.createCSS();
         }
         if (value instanceof ElementStyles || value instanceof CSSStyleSheet) {
             if (cssString.trim() !== "") {
@@ -41,57 +24,33 @@ function collectStyles(strings, values) {
     if (cssString.trim() !== "") {
         styles.push(cssString);
     }
-    return {
-        styles,
-        behaviors,
-    };
+    return styles;
 }
 /**
  * Transforms a template literal string into styles.
  * @param strings - The string fragments that are interpolated with the values.
  * @param values - The values that are interpolated with the string fragments.
  * @remarks
- * The css helper supports interpolation of strings and ElementStyle instances.
+ * The css helper supports interpolation of static composable styles and CSS directives.
  * @public
  */
 export const css = ((strings, ...values) => {
-    const { styles, behaviors } = collectStyles(strings, values);
-    const elementStyles = new ElementStyles(styles);
-    return behaviors.length ? elementStyles.withBehaviors(...behaviors) : elementStyles;
+    return new ElementStyles(collectStyles(strings, values));
 });
 class CSSPartial {
-    constructor(styles, behaviors) {
-        this.behaviors = behaviors;
-        this.css = "";
-        const stylesheets = styles.reduce((accumulated, current) => {
-            if (isString(current)) {
-                this.css += current;
-            }
-            else {
-                accumulated.push(current);
-            }
-            return accumulated;
-        }, []);
-        if (stylesheets.length) {
-            this.styles = new ElementStyles(stylesheets);
-        }
-    }
-    createCSS(add) {
-        this.behaviors.forEach(add);
-        if (this.styles) {
-            add(this);
-        }
-        return this.css;
-    }
-    addedCallback(controller) {
-        controller.addStyles(this.styles);
+    constructor(styles) {
+        this.value =
+            styles.length === 0
+                ? ""
+                : styles.length === 1
+                    ? styles[0]
+                    : new ElementStyles(styles);
     }
-    removedCallback(controller) {
-        controller.removeStyles(this.styles);
+    createCSS() {
+        return this.value;
     }
 }
 CSSDirective.define(CSSPartial);
 css.partial = (strings, ...values) => {
-    const { styles, behaviors } = collectStyles(strings, values);
-    return new CSSPartial(styles, behaviors);
+    return new CSSPartial(collectStyles(strings, values));
 };

package/dist/esm/styles/element-styles.js

@@ -1,8 +1,14 @@
 let DefaultStyleStrategy;
 function reduceStyles(styles) {
-    return styles
-        .map((x) => x instanceof ElementStyles ? reduceStyles(x.styles) : [x])
-        .reduce((prev, curr) => prev.concat(curr), []);
+    return styles.reduce((reduced, current) => {
+        if (current instanceof ElementStyles) {
+            reduced.push(...reduceStyles(current.styles));
+        }
+        else {
+            reduced.push(current);
+        }
+        return reduced;
+    }, []);
 }
 /**
  * Represents styles that can be applied to a custom element.
@@ -14,6 +20,11 @@ export class ElementStyles {
      */
     get strategy() {
         if (this._strategy === null) {
+            if (!DefaultStyleStrategy) {
+                ElementStyles.setDefaultStrategy(ElementStyles.supportsAdoptedStyleSheets
+                    ? createAdoptedSheetsStrategy()
+                    : createStyleElementStrategy());
+            }
             this.withStrategy(DefaultStyleStrategy);
         }
         return this._strategy;
@@ -26,9 +37,6 @@ export class ElementStyles {
         this.styles = styles;
         this.targets = new WeakSet();
         this._strategy = null;
-        this.behaviors = styles
-            .map((x) => x instanceof ElementStyles ? x.behaviors : null)
-            .reduce((prev, curr) => (curr === null ? prev : prev === null ? curr : prev.concat(curr)), null);
     }
     /** @internal */
     addStylesTo(target) {
@@ -44,15 +52,6 @@ export class ElementStyles {
     isAttachedTo(target) {
         return this.targets.has(target);
     }
-    /**
-     * Associates behaviors with this set of styles.
-     * @param behaviors - The behaviors to associate.
-     */
-    withBehaviors(...behaviors) {
-        this.behaviors =
-            this.behaviors === null ? behaviors : this.behaviors.concat(behaviors);
-        return this;
-    }
     /**
      * Sets the strategy that handles adding/removing these styles for an element.
      * @param strategy - The strategy to use.
@@ -88,3 +87,58 @@ export class ElementStyles {
  */
 ElementStyles.supportsAdoptedStyleSheets = Array.isArray(document.adoptedStyleSheets) &&
     "replace" in CSSStyleSheet.prototype;
+// Fallback strategy factories used when no strategy has been explicitly set
+// via ElementStyles.setDefaultStrategy (e.g. when importing only from the
+// styles.js subpath without loading element-controller.ts).
+function createAdoptedSheetsStrategy() {
+    const cache = new Map();
+    return class FallbackAdoptedSheetsStrategy {
+        constructor(styles) {
+            this.sheets = styles.map(x => {
+                if (x instanceof CSSStyleSheet) {
+                    return x;
+                }
+                let sheet = cache.get(x);
+                if (sheet === void 0) {
+                    sheet = new CSSStyleSheet();
+                    sheet.replaceSync(x);
+                    cache.set(x, sheet);
+                }
+                return sheet;
+            });
+        }
+        addStylesTo(target) {
+            const t = target;
+            t.adoptedStyleSheets = [...t.adoptedStyleSheets, ...this.sheets];
+        }
+        removeStylesFrom(target) {
+            const t = target;
+            t.adoptedStyleSheets = t.adoptedStyleSheets.filter((x) => this.sheets.indexOf(x) === -1);
+        }
+    };
+}
+let fallbackStyleId = 0;
+function createStyleElementStrategy() {
+    return class FallbackStyleElementStrategy {
+        constructor(styles) {
+            this.styles = styles;
+            this.styleClass = `fast-${++fallbackStyleId}`;
+        }
+        addStylesTo(target) {
+            const t = target === document ? document.body : target;
+            for (let i = 0; i < this.styles.length; i++) {
+                const element = document.createElement("style");
+                element.innerHTML = this.styles[i];
+                element.className = this.styleClass;
+                t.append(element);
+            }
+        }
+        removeStylesFrom(target) {
+            const t = target === document ? document.body : target;
+            const styles = t.querySelectorAll(`.${this.styleClass}`);
+            for (let i = 0, ii = styles.length; i < ii; ++i) {
+                t.removeChild(styles[i]);
+            }
+        }
+    };
+}

package/dist/esm/styles.js

@@ -0,0 +1,2 @@
+export { CSSDirective, cssDirective, } from "./styles/css-directive.js";
+export { ElementStyles, } from "./styles/element-styles.js";

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

@@ -4,8 +4,8 @@ import { Message } from "../interfaces.js";
 import { ExecutionContext, } from "../observation/observable.js";
 import { FAST } from "../platform.js";
 import { HTMLDirective, } from "./html-directive.js";
+import { HydrationStage } from "./hydration-view.js";
 import { Markup } from "./markup.js";
-import { HydrationStage } from "./view.js";
 function isContentTemplate(value) {
     return value.create !== undefined;
 }
@@ -158,12 +158,12 @@ export class HTMLBindingDirective {
      * @param dataBinding - The binding configuration to apply.
      */
     constructor(dataBinding) {
-        this.dataBinding = dataBinding;
         this.updateTarget = null;
         /**
          * The type of aspect to target.
          */
         this.aspectType = DOMAspect.content;
+        this.dataBinding = dataBinding;
     }
     /**
      * Creates HTML to be used within a template.
@@ -203,9 +203,6 @@ export class HTMLBindingDirective {
     bind(controller) {
         var _a;
         const target = controller.targets[this.targetNodeId];
-        const isHydrating = isHydratable(controller) &&
-            controller.hydrationStage &&
-            controller.hydrationStage !== HydrationStage.hydrated;
         switch (this.aspectType) {
             case DOMAspect.event:
                 target[this.data] = controller;
@@ -218,14 +215,19 @@ export class HTMLBindingDirective {
                 const observer = (_a = target[this.data]) !== null && _a !== void 0 ? _a : (target[this.data] = this.dataBinding.createObserver(this, this));
                 observer.target = target;
                 observer.controller = controller;
-                if (isHydrating &&
+                // Evaluate to establish dependency tracking
+                const value = observer.bind(controller);
+                // Skip DOM update for attribute bindings when prerendered —
+                // the server has already rendered the correct attribute values.
+                // Content, property, and tokenList bindings must still run
+                // so structural directives, host properties, and class lists
+                // are properly initialized.
+                if (controller._skipAttrUpdates &&
                     (this.aspectType === DOMAspect.attribute ||
                         this.aspectType === DOMAspect.booleanAttribute)) {
-                    observer.bind(controller);
-                    // Skip updating target during bind for attributes
                     break;
                 }
-                this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+                this.updateTarget(target, this.targetAspect, value, controller);
                 break;
             }
         }