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

package/dist/esm/polyfills.js

@@ -1,10 +1,13 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 (function ensureGlobalThis() {
     if (typeof globalThis !== "undefined") {
         // We're running in a modern environment.
         return;
     }
+    // @ts-ignore
     if (typeof global !== "undefined") {
         // We're running in NodeJS
+        // @ts-ignore
         global.globalThis = global;
     }
     else if (typeof self !== "undefined") {
@@ -22,64 +25,3 @@
         result.globalThis = result;
     }
 })();
-// API-only Polyfill for trustedTypes
-if (!globalThis.trustedTypes) {
-    globalThis.trustedTypes = {
-        createPolicy: (n, r) => r,
-    };
-}
-// ensure FAST global - duplicated in platform.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 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));
-}
-// duplicated from DOM
-const supportsAdoptedStyleSheets = Array.isArray(document.adoptedStyleSheets) &&
-    "replace" in CSSStyleSheet.prototype;
-function usableStyleTarget(target) {
-    return target === document ? document.body : target;
-}
-let id = 0;
-const nextStyleId = () => `fast-${++id}`;
-export class StyleElementStrategy {
-    constructor(styles) {
-        this.styles = styles;
-        this.styleClass = nextStyleId();
-    }
-    addStylesTo(target) {
-        target = usableStyleTarget(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) {
-        const styles = target.querySelectorAll(`.${this.styleClass}`);
-        target = usableStyleTarget(target);
-        for (let i = 0, ii = styles.length; i < ii; ++i) {
-            target.removeChild(styles[i]);
-        }
-    }
-}
-if (!supportsAdoptedStyleSheets) {
-    FAST.getById(/* KernelServiceId.styleSheetStrategy */ 5, () => StyleElementStrategy);
-}

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

@@ -0,0 +1,76 @@
+import { CSSDirective } from "./css-directive.js";
+function handleChange(directive, controller, observer) {
+    controller.source.style.setProperty(directive.targetAspect, observer.bind(controller));
+}
+/**
+ * Enables bindings in CSS.
+ *
+ * @public
+ */
+export class CSSBindingDirective {
+    /**
+     * Creates an instance of CSSBindingDirective.
+     * @param dataBinding - The binding to use in CSS.
+     * @param targetAspect - The CSS property to target.
+     */
+    constructor(dataBinding, targetAspect) {
+        this.dataBinding = dataBinding;
+        this.targetAspect = targetAspect;
+    }
+    /**
+     * Creates a CSS fragment to interpolate into the CSS document.
+     * @returns - the string to interpolate into CSS
+     */
+    createCSS(add) {
+        add(this);
+        return `var(${this.targetAspect})`;
+    }
+    /**
+     * Executed when this behavior is attached to a controller.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    addedCallback(controller) {
+        var _a;
+        const element = controller.source;
+        if (!element.$cssBindings) {
+            element.$cssBindings = new Map();
+            const setAttribute = element.setAttribute;
+            element.setAttribute = (attr, value) => {
+                setAttribute.call(element, attr, value);
+                if (attr === "style") {
+                    element.$cssBindings.forEach((v, k) => handleChange(k, v.controller, v.observer));
+                }
+            };
+        }
+        const observer = (_a = controller[this.targetAspect]) !== null && _a !== void 0 ? _a : (controller[this.targetAspect] = this.dataBinding.createObserver(this, this));
+        observer.controller = controller;
+        controller.source.$cssBindings.set(this, { controller, observer });
+    }
+    /**
+     * Executed when this behavior's host is connected.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    connectedCallback(controller) {
+        handleChange(this, controller, controller[this.targetAspect]);
+    }
+    /**
+     * Executed when this behavior is detached from a controller.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    removedCallback(controller) {
+        if (controller.source.$cssBindings) {
+            controller.source.$cssBindings.delete(this);
+        }
+    }
+    /**
+     * Called when a subject this instance has subscribed to changes.
+     * @param subject - The subject of the change.
+     * @param args - The event args detailing the change that occurred.
+     *
+     * @internal
+     */
+    handleChange(_, observer) {
+        handleChange(this, observer.controller, observer);
+    }
+}
+CSSDirective.define(CSSBindingDirective);

package/dist/esm/styles/css.js

@@ -1,6 +1,12 @@
-import { isString } from "../interfaces.js";
+import { isFunction, isString } from "../interfaces.js";
+import { Binding } from "../binding/binding.js";
+import { oneWay } from "../binding/one-way.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}`;
 function collectStyles(strings, values) {
     const styles = [];
     let cssString = "";
@@ -11,7 +17,13 @@ function collectStyles(strings, values) {
     for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
         cssString += strings[i];
         let value = values[i];
-        if (CSSDirective.getForInstance(value) !== void 0) {
+        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 (value instanceof ElementStyles || value instanceof CSSStyleSheet) {
@@ -83,8 +95,3 @@ css.partial = (strings, ...values) => {
     const { styles, behaviors } = collectStyles(strings, values);
     return new CSSPartial(styles, behaviors);
 };
-/**
- * @deprecated Use css.partial instead.
- * @public
- */
-export const cssPartial = css.partial;

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

@@ -1,6 +1,3 @@
-import { FAST } from "../platform.js";
-import "../interfaces.js";
-const styleSheetCache = new Map();
 let DefaultStyleStrategy;
 function reduceStyles(styles) {
     return styles
@@ -91,33 +88,3 @@ export class ElementStyles {
  */
 ElementStyles.supportsAdoptedStyleSheets = Array.isArray(document.adoptedStyleSheets) &&
     "replace" in CSSStyleSheet.prototype;
-/**
- * https://wicg.github.io/construct-stylesheets/
- * https://developers.google.com/web/updates/2019/02/constructable-stylesheets
- *
- * @internal
- */
-export class AdoptedStyleSheetsStrategy {
-    constructor(styles) {
-        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) {
-        target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...this.sheets];
-    }
-    removeStylesFrom(target) {
-        const sheets = this.sheets;
-        target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
-    }
-}
-ElementStyles.setDefaultStrategy(FAST.getById(5 /* KernelServiceId.styleSheetStrategy */, () => AdoptedStyleSheetsStrategy));

package/dist/esm/styles/style-strategy.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/templating/children.js

@@ -1,4 +1,4 @@
-import { isString } from "../interfaces.js";
+import { isString, noop } from "../interfaces.js";
 import { HTMLDirective } from "./html-directive.js";
 import { NodeObservationDirective } from "./node-observation.js";
 /**
@@ -12,7 +12,7 @@ export class ChildrenDirective extends NodeObservationDirective {
      */
     constructor(options) {
         super(options);
-        this.observerProperty = `${this.id}-o`;
+        this.observerProperty = Symbol();
         this.handleEvent = (mutations, observer) => {
             const target = observer.target;
             this.updateTarget(this.getSource(target), this.computeNodes(target));
@@ -24,8 +24,12 @@ export class ChildrenDirective extends NodeObservationDirective {
      * @param target - The target to observe.
      */
     observe(target) {
-        var _a;
-        const observer = (_a = target[this.observerProperty]) !== null && _a !== void 0 ? _a : (target[this.observerProperty] = new MutationObserver(this.handleEvent));
+        let observer = target[this.observerProperty];
+        if (!observer) {
+            observer = new MutationObserver(this.handleEvent);
+            observer.toJSON = noop;
+            target[this.observerProperty] = observer;
+        }
         observer.target = target;
         observer.observe(target, this.options);
     }

package/dist/esm/templating/compiler.js

@@ -1,8 +1,11 @@
 import { isFunction, isString } from "../interfaces.js";
 import { FAST } from "../platform.js";
-import { Parser } from "./markup.js";
-import { HTMLBindingDirective, oneTime } from "./binding.js";
-import { Aspect } from "./html-directive.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 { HTMLBindingDirective } from "./html-binding-directive.js";
+import { HTMLDirective, } from "./html-directive.js";
 import { HTMLView } from "./view.js";
 const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;
 const descriptorCache = {};
@@ -28,20 +31,25 @@ const warningHost = new Proxy(document.createElement("div"), {
     },
 });
 class CompilationContext {
-    constructor(fragment, directives) {
+    constructor(fragment, directives, policy) {
         this.fragment = fragment;
         this.directives = directives;
+        this.policy = policy;
         this.proto = null;
         this.nodeIds = new Set();
         this.descriptors = {};
         this.factories = [];
     }
-    addFactory(factory, parentId, nodeId, targetIndex) {
+    addFactory(factory, parentId, nodeId, targetIndex, tagName) {
+        var _a, _b;
         if (!this.nodeIds.has(nodeId)) {
             this.nodeIds.add(nodeId);
             this.addTargetDescriptor(parentId, nodeId, targetIndex);
         }
-        factory.nodeId = nodeId;
+        factory.id = (_a = factory.id) !== null && _a !== void 0 ? _a : nextId();
+        factory.targetNodeId = nodeId;
+        factory.targetTagName = tagName;
+        factory.policy = (_b = factory.policy) !== null && _b !== void 0 ? _b : this.policy;
         this.factories.push(factory);
     }
     freeze() {
@@ -94,19 +102,19 @@ function compileAttributes(context, parentId, node, nodeId, nodeIndex, includeBa
         let result = null;
         if (parseResult === null) {
             if (includeBasicValues) {
-                result = new HTMLBindingDirective(oneTime(() => attrValue));
-                Aspect.assign(result, attr.name);
+                result = new HTMLBindingDirective(oneTime(() => attrValue, context.policy));
+                HTMLDirective.assignAspect(result, attr.name);
             }
         }
         else {
             /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-            result = Compiler.aggregate(parseResult);
+            result = Compiler.aggregate(parseResult, context.policy);
         }
         if (result !== null) {
             node.removeAttributeNode(attr);
             i--;
             ii--;
-            context.addFactory(result, parentId, nodeId, nodeIndex);
+            context.addFactory(result, parentId, nodeId, nodeIndex, node.tagName);
         }
     }
 }
@@ -131,8 +139,8 @@ function compileContent(context, node, parentId, nodeId, nodeIndex) {
         }
         else {
             currentNode.textContent = " ";
-            Aspect.assign(currentPart);
-            context.addFactory(currentPart, parentId, nodeId, nodeIndex);
+            HTMLDirective.assignAspect(currentPart);
+            context.addFactory(currentPart, parentId, nodeId, nodeIndex, null);
         }
         lastNode = currentNode;
     }
@@ -164,7 +172,7 @@ function compileNode(context, parentId, node, nodeIndex) {
             if (parts !== null) {
                 context.addFactory(
                 /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-                Compiler.aggregate(parts), parentId, nodeId, nodeIndex);
+                Compiler.aggregate(parts), parentId, nodeId, nodeIndex, null);
             }
             break;
     }
@@ -178,45 +186,28 @@ function isMarker(node, directives) {
         Parser.parse(node.data, directives) !== null);
 }
 const templateTag = "TEMPLATE";
-const policyOptions = { createHTML: html => html };
-let htmlPolicy = globalThis.trustedTypes
-    ? globalThis.trustedTypes.createPolicy("fast-html", policyOptions)
-    : policyOptions;
-const fastHTMLPolicy = htmlPolicy;
 /**
  * Common APIs related to compilation.
  * @public
  */
 export const Compiler = {
-    /**
-     * Sets the HTML trusted types policy used by the compiler.
-     * @param policy - The policy to set for HTML.
-     * @remarks
-     * This API can only be called once, for security reasons. It should be
-     * called by the application developer at the start of their program.
-     */
-    setHTMLPolicy(policy) {
-        if (htmlPolicy !== fastHTMLPolicy) {
-            throw FAST.error(1201 /* Message.onlySetHTMLPolicyOnce */);
-        }
-        htmlPolicy = policy;
-    },
     /**
      * Compiles a template and associated directives into a compilation
      * result which can be used to create views.
      * @param html - The html string or template element to compile.
-     * @param directives - The directives referenced by the template.
+     * @param factories - The behavior factories referenced by the template.
+     * @param policy - The security policy to compile the html with.
      * @remarks
      * The template that is provided for compilation is altered in-place
      * and cannot be compiled again. If the original template must be preserved,
      * it is recommended that you clone the original and pass the clone to this API.
      * @public
      */
-    compile(html, directives) {
+    compile(html, factories, policy = DOM.policy) {
         let template;
         if (isString(html)) {
             template = document.createElement(templateTag);
-            template.innerHTML = htmlPolicy.createHTML(html);
+            template.innerHTML = policy.createHTML(html);
             const fec = template.content.firstElementChild;
             if (fec !== null && fec.tagName === templateTag) {
                 template = fec;
@@ -225,20 +216,23 @@ export const Compiler = {
         else {
             template = html;
         }
+        if (!template.content.firstChild && !template.content.lastChild) {
+            template.content.appendChild(document.createComment(""));
+        }
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
         const fragment = document.adoptNode(template.content);
-        const context = new CompilationContext(fragment, directives);
+        const context = new CompilationContext(fragment, factories, policy);
         compileAttributes(context, "", template, /* host */ "h", 0, true);
         if (
         // If the first node in a fragment is a marker, that means it's an unstable first node,
         // because something like a when, repeat, etc. could add nodes before the marker.
         // To mitigate this, we insert a stable first node. However, if we insert a node,
         // that will alter the result of the TreeWalker. So, we also need to offset the target index.
-        isMarker(fragment.firstChild, directives) ||
+        isMarker(fragment.firstChild, factories) ||
             // Or if there is only one node and a directive, it means the template's content
             // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
             // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
-            (fragment.childNodes.length === 1 && Object.keys(directives).length > 0)) {
+            (fragment.childNodes.length === 1 && Object.keys(factories).length > 0)) {
             fragment.insertBefore(document.createComment(""), fragment.firstChild);
         }
         compileChildren(context, fragment, /* root */ "r");
@@ -257,23 +251,24 @@ export const Compiler = {
      * Aggregates an array of strings and directives into a single directive.
      * @param parts - A heterogeneous array of static strings interspersed with
      * directives.
+     * @param policy - The security policy to use with the aggregated bindings.
      * @returns A single inline directive that aggregates the behavior of all the parts.
      */
-    aggregate(parts) {
+    aggregate(parts, policy = DOM.policy) {
         if (parts.length === 1) {
             return parts[0];
         }
         let sourceAspect;
-        let binding;
         let isVolatile = false;
+        let bindingPolicy = void 0;
         const partCount = parts.length;
         const finalParts = parts.map((x) => {
             if (isString(x)) {
                 return () => x;
             }
             sourceAspect = x.sourceAspect || sourceAspect;
-            binding = x.dataBinding || binding;
             isVolatile = isVolatile || x.dataBinding.isVolatile;
+            bindingPolicy = bindingPolicy || x.dataBinding.policy;
             return x.dataBinding.evaluate;
         });
         const expression = (scope, context) => {
@@ -283,10 +278,8 @@ export const Compiler = {
             }
             return output;
         };
-        binding.evaluate = expression;
-        binding.isVolatile = isVolatile;
-        const directive = new HTMLBindingDirective(binding);
-        Aspect.assign(directive, sourceAspect);
+        const directive = new HTMLBindingDirective(oneWay(expression, bindingPolicy !== null && bindingPolicy !== void 0 ? bindingPolicy : policy, isVolatile));
+        HTMLDirective.assignAspect(directive, sourceAspect);
         return directive;
     },
 };