@microsoft/fast-element 2.0.0-beta.2 → 2.0.0-beta.21

package/dist/esm/dom-policy.js

@@ -0,0 +1,345 @@
+import { DOMAspect } from "./dom.js";
+import { isString } from "./interfaces.js";
+import { FAST } from "./platform.js";
+function safeURL(tagName, aspect, aspectName, sink) {
+    return (target, name, value, ...rest) => {
+        if (isString(value)) {
+            value = value.replace("javascript:", "");
+        }
+        sink(target, name, value, ...rest);
+    };
+}
+function block(tagName, aspect, aspectName, sink) {
+    throw FAST.error(1209 /* Message.blockedByDOMPolicy */, {
+        aspectName,
+        tagName: tagName !== null && tagName !== void 0 ? tagName : "text",
+    });
+}
+const defaultDOMElementGuards = {
+    a: {
+        [DOMAspect.attribute]: {
+            href: safeURL,
+        },
+        [DOMAspect.property]: {
+            href: safeURL,
+        },
+    },
+    area: {
+        [DOMAspect.attribute]: {
+            href: safeURL,
+        },
+        [DOMAspect.property]: {
+            href: safeURL,
+        },
+    },
+    button: {
+        [DOMAspect.attribute]: {
+            formaction: safeURL,
+        },
+        [DOMAspect.property]: {
+            formAction: safeURL,
+        },
+    },
+    embed: {
+        [DOMAspect.attribute]: {
+            src: block,
+        },
+        [DOMAspect.property]: {
+            src: block,
+        },
+    },
+    form: {
+        [DOMAspect.attribute]: {
+            action: safeURL,
+        },
+        [DOMAspect.property]: {
+            action: safeURL,
+        },
+    },
+    frame: {
+        [DOMAspect.attribute]: {
+            src: safeURL,
+        },
+        [DOMAspect.property]: {
+            src: safeURL,
+        },
+    },
+    iframe: {
+        [DOMAspect.attribute]: {
+            src: safeURL,
+        },
+        [DOMAspect.property]: {
+            src: safeURL,
+            srcdoc: block,
+        },
+    },
+    input: {
+        [DOMAspect.attribute]: {
+            formaction: safeURL,
+        },
+        [DOMAspect.property]: {
+            formAction: safeURL,
+        },
+    },
+    link: {
+        [DOMAspect.attribute]: {
+            href: block,
+        },
+        [DOMAspect.property]: {
+            href: block,
+        },
+    },
+    object: {
+        [DOMAspect.attribute]: {
+            codebase: block,
+            data: block,
+        },
+        [DOMAspect.property]: {
+            codeBase: block,
+            data: block,
+        },
+    },
+    script: {
+        [DOMAspect.attribute]: {
+            src: block,
+            text: block,
+        },
+        [DOMAspect.property]: {
+            src: block,
+            text: block,
+            innerText: block,
+            textContent: block,
+        },
+    },
+    style: {
+        [DOMAspect.property]: {
+            innerText: block,
+            textContent: block,
+        },
+    },
+};
+const blockedEvents = {
+    onabort: block,
+    onauxclick: block,
+    onbeforeinput: block,
+    onbeforematch: block,
+    onblur: block,
+    oncancel: block,
+    oncanplay: block,
+    oncanplaythrough: block,
+    onchange: block,
+    onclick: block,
+    onclose: block,
+    oncontextlost: block,
+    oncontextmenu: block,
+    oncontextrestored: block,
+    oncopy: block,
+    oncuechange: block,
+    oncut: block,
+    ondblclick: block,
+    ondrag: block,
+    ondragend: block,
+    ondragenter: block,
+    ondragleave: block,
+    ondragover: block,
+    ondragstart: block,
+    ondrop: block,
+    ondurationchange: block,
+    onemptied: block,
+    onended: block,
+    onerror: block,
+    onfocus: block,
+    onformdata: block,
+    oninput: block,
+    oninvalid: block,
+    onkeydown: block,
+    onkeypress: block,
+    onkeyup: block,
+    onload: block,
+    onloadeddata: block,
+    onloadedmetadata: block,
+    onloadstart: block,
+    onmousedown: block,
+    onmouseenter: block,
+    onmouseleave: block,
+    onmousemove: block,
+    onmouseout: block,
+    onmouseover: block,
+    onmouseup: block,
+    onpaste: block,
+    onpause: block,
+    onplay: block,
+    onplaying: block,
+    onprogress: block,
+    onratechange: block,
+    onreset: block,
+    onresize: block,
+    onscroll: block,
+    onsecuritypolicyviolation: block,
+    onseeked: block,
+    onseeking: block,
+    onselect: block,
+    onslotchange: block,
+    onstalled: block,
+    onsubmit: block,
+    onsuspend: block,
+    ontimeupdate: block,
+    ontoggle: block,
+    onvolumechange: block,
+    onwaiting: block,
+    onwebkitanimationend: block,
+    onwebkitanimationiteration: block,
+    onwebkitanimationstart: block,
+    onwebkittransitionend: block,
+    onwheel: block,
+};
+const defaultDOMGuards = {
+    elements: defaultDOMElementGuards,
+    aspects: {
+        [DOMAspect.attribute]: Object.assign({}, blockedEvents),
+        [DOMAspect.property]: Object.assign({ innerHTML: block }, blockedEvents),
+        [DOMAspect.event]: Object.assign({}, blockedEvents),
+    },
+};
+function createDomSinkGuards(config, defaults) {
+    const result = {};
+    for (const name in defaults) {
+        const overrideValue = config[name];
+        const defaultValue = defaults[name];
+        switch (overrideValue) {
+            case null:
+                // remove the default
+                break;
+            case undefined:
+                // keep the default
+                result[name] = defaultValue;
+                break;
+            default:
+                // override the default
+                result[name] = overrideValue;
+                break;
+        }
+    }
+    // add any new sinks that were not overrides
+    for (const name in config) {
+        if (!(name in result)) {
+            result[name] = config[name];
+        }
+    }
+    return Object.freeze(result);
+}
+function createDOMAspectGuards(config, defaults) {
+    const result = {};
+    for (const aspect in defaults) {
+        const overrideValue = config[aspect];
+        const defaultValue = defaults[aspect];
+        switch (overrideValue) {
+            case null:
+                // remove the default
+                break;
+            case undefined:
+                // keep the default
+                result[aspect] = createDomSinkGuards(defaultValue, {});
+                break;
+            default:
+                // override the default
+                result[aspect] = createDomSinkGuards(overrideValue, defaultValue);
+                break;
+        }
+    }
+    // add any new aspect guards that were not overrides
+    for (const aspect in config) {
+        if (!(aspect in result)) {
+            result[aspect] = createDomSinkGuards(config[aspect], {});
+        }
+    }
+    return Object.freeze(result);
+}
+function createElementGuards(config, defaults) {
+    const result = {};
+    for (const tag in defaults) {
+        const overrideValue = config[tag];
+        const defaultValue = defaults[tag];
+        switch (overrideValue) {
+            case null:
+                // remove the default
+                break;
+            case undefined:
+                // keep the default
+                result[tag] = createDOMAspectGuards(overrideValue, {});
+                break;
+            default:
+                // override the default aspects
+                result[tag] = createDOMAspectGuards(overrideValue, defaultValue);
+                break;
+        }
+    }
+    // Add any new element guards that were not overrides
+    for (const tag in config) {
+        if (!(tag in result)) {
+            result[tag] = createDOMAspectGuards(config[tag], {});
+        }
+    }
+    return Object.freeze(result);
+}
+function createDOMGuards(config, defaults) {
+    return Object.freeze({
+        elements: config.elements
+            ? createElementGuards(config.elements, defaults.elements)
+            : defaults.elements,
+        aspects: config.aspects
+            ? createDOMAspectGuards(config.aspects, defaults.aspects)
+            : defaults.aspects,
+    });
+}
+function createTrustedType() {
+    const createHTML = html => html;
+    return globalThis.trustedTypes
+        ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML })
+        : { createHTML };
+}
+function tryGuard(aspectGuards, tagName, aspect, aspectName, sink) {
+    const sinkGuards = aspectGuards[aspect];
+    if (sinkGuards) {
+        const guard = sinkGuards[aspectName];
+        if (guard) {
+            return guard(tagName, aspect, aspectName, sink);
+        }
+    }
+}
+/**
+ * A helper for creating DOM policies.
+ * @public
+ */
+const DOMPolicy = Object.freeze({
+    /**
+     * Creates a new DOM Policy object.
+     * @param options The options to use in creating the policy.
+     * @returns The newly created DOMPolicy.
+     */
+    create(options = {}) {
+        var _a, _b;
+        const trustedType = (_a = options.trustedType) !== null && _a !== void 0 ? _a : createTrustedType();
+        const guards = createDOMGuards((_b = options.guards) !== null && _b !== void 0 ? _b : {}, defaultDOMGuards);
+        return Object.freeze({
+            createHTML(value) {
+                return trustedType.createHTML(value);
+            },
+            protect(tagName, aspect, aspectName, sink) {
+                var _a;
+                // Check for element-specific guards.
+                const key = (tagName !== null && tagName !== void 0 ? tagName : "").toLowerCase();
+                const elementGuards = guards.elements[key];
+                if (elementGuards) {
+                    const guard = tryGuard(elementGuards, tagName, aspect, aspectName, sink);
+                    if (guard) {
+                        return guard;
+                    }
+                }
+                // Check for guards applicable to all nodes.
+                return ((_a = tryGuard(guards.aspects, tagName, aspect, aspectName, sink)) !== null && _a !== void 0 ? _a : sink);
+            },
+        });
+    },
+});
+export { DOMPolicy };

package/dist/esm/dom.js

@@ -0,0 +1,101 @@
+import "./interfaces.js";
+import { FAST } from "./platform.js";
+/**
+ * The type of HTML aspect to target.
+ * @public
+ */
+export const DOMAspect = Object.freeze({
+    /**
+     * Not aspected.
+     */
+    none: 0,
+    /**
+     * An attribute.
+     */
+    attribute: 1,
+    /**
+     * A boolean attribute.
+     */
+    booleanAttribute: 2,
+    /**
+     * A property.
+     */
+    property: 3,
+    /**
+     * Content
+     */
+    content: 4,
+    /**
+     * A token list.
+     */
+    tokenList: 5,
+    /**
+     * An event.
+     */
+    event: 6,
+});
+const createHTML = html => html;
+const fastTrustedType = globalThis.trustedTypes
+    ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML })
+    : { createHTML };
+let defaultPolicy = Object.freeze({
+    createHTML(value) {
+        return fastTrustedType.createHTML(value);
+    },
+    protect(tagName, aspect, aspectName, sink) {
+        return sink;
+    },
+});
+const fastPolicy = defaultPolicy;
+/**
+ * Common DOM APIs.
+ * @public
+ */
+export const DOM = Object.freeze({
+    /**
+     * Gets the dom policy used by the templating system.
+     */
+    get policy() {
+        return defaultPolicy;
+    },
+    /**
+     * Sets the dom policy used by the templating system.
+     * @param policy - The policy to set.
+     * @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.
+     */
+    setPolicy(value) {
+        if (defaultPolicy !== fastPolicy) {
+            throw FAST.error(1201 /* Message.onlySetDOMPolicyOnce */);
+        }
+        defaultPolicy = value;
+    },
+    /**
+     * Sets an attribute value on an element.
+     * @param element - The element to set the attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is `null` or `undefined`, the attribute is removed, otherwise
+     * it is set to the provided value using the standard `setAttribute` API.
+     */
+    setAttribute(element, attributeName, value) {
+        value === null || value === undefined
+            ? element.removeAttribute(attributeName)
+            : element.setAttribute(attributeName, value);
+    },
+    /**
+     * Sets a boolean attribute value.
+     * @param element - The element to set the boolean attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is true, the attribute is added; otherwise it is removed.
+     */
+    setBooleanAttribute(element, attributeName, value) {
+        value
+            ? element.setAttribute(attributeName, "")
+            : element.removeAttribute(attributeName);
+    },
+});

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export * from "./platform.js";
+export * from "./dom.js";
 // Observation
 export * from "./observation/observable.js";
 export * from "./observation/notifier.js";
@@ -8,8 +9,9 @@ export * from "./observation/update-queue.js";
 export * from "./styles/element-styles.js";
 export * from "./styles/css.js";
 export * from "./styles/css-directive.js";
+export * from "./styles/host.js";
+export * from "./styles/style-strategy.js";
 // Templating
-export * from "./templating/dom.js";
 export * from "./templating/template.js";
 export * from "./templating/compiler.js";
 export { Markup, Parser } from "./templating/markup.js";
@@ -26,4 +28,4 @@ export * from "./templating/node-observation.js";
 export * from "./components/fast-element.js";
 export * from "./components/fast-definitions.js";
 export * from "./components/attributes.js";
-export * from "./components/controller.js";
+export { ElementController, } 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,8 +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 };
 /**
+ * Determines whether or not an object is a function.
  * @internal
  */
 export const isFunction = (object) => typeof object === "function";
 /**
+ * Determines whether or not an object is a string.
  * @internal
  */
 export const isString = (object) => typeof object === "string";
+/**
+ * A function which does nothing.
+ * @internal
+ */
+export const noop = () => void 0;

package/dist/esm/metadata.js

@@ -22,6 +22,7 @@ if (!("metadata" in Reflect)) {
         return void 0;
     };
 }
+const annotationParamTypesKey = "annotation:paramtypes";
 /**
  * Provides basic metadata capabilities used by Context and Dependency Injection.
  */
@@ -31,29 +32,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("design:paramtypes", 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;
     },