@microsoft/fast-element 1.10.0 → 2.0.0-beta.1

package/dist/esm/dom.js

@@ -1,207 +0,0 @@
-import { $global } from "./platform.js";
-const updateQueue = $global.FAST.getById(1 /* updateQueue */, () => {
-    const tasks = [];
-    const pendingErrors = [];
-    function throwFirstError() {
-        if (pendingErrors.length) {
-            throw pendingErrors.shift();
-        }
-    }
-    function tryRunTask(task) {
-        try {
-            task.call();
-        }
-        catch (error) {
-            pendingErrors.push(error);
-            setTimeout(throwFirstError, 0);
-        }
-    }
-    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 `DOM.queueUpdate`.
-            // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, 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;
-            }
-        }
-        tasks.length = 0;
-    }
-    function enqueue(callable) {
-        if (tasks.length < 1) {
-            $global.requestAnimationFrame(process);
-        }
-        tasks.push(callable);
-    }
-    return Object.freeze({
-        enqueue,
-        process,
-    });
-});
-/* eslint-disable */
-const fastHTMLPolicy = $global.trustedTypes.createPolicy("fast-html", {
-    createHTML: html => html,
-});
-/* eslint-enable */
-let htmlPolicy = fastHTMLPolicy;
-const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
-/** @internal */
-export const _interpolationStart = `${marker}{`;
-/** @internal */
-export const _interpolationEnd = `}${marker}`;
-/**
- * Common DOM APIs.
- * @public
- */
-export const DOM = Object.freeze({
-    /**
-     * Indicates whether the DOM supports the adoptedStyleSheets feature.
-     */
-    supportsAdoptedStyleSheets: Array.isArray(document.adoptedStyleSheets) &&
-        "replace" in CSSStyleSheet.prototype,
-    /**
-     * Sets the HTML trusted types policy used by the templating engine.
-     * @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 new Error("The HTML policy can only be set once.");
-        }
-        htmlPolicy = policy;
-    },
-    /**
-     * Turns a string into trusted HTML using the configured trusted types policy.
-     * @param html - The string to turn into trusted HTML.
-     * @remarks
-     * Used internally by the template engine when creating templates
-     * and setting innerHTML.
-     */
-    createHTML(html) {
-        return htmlPolicy.createHTML(html);
-    },
-    /**
-     * Determines if the provided node is a template marker used by the runtime.
-     * @param node - The node to test.
-     */
-    isMarker(node) {
-        return node && node.nodeType === 8 && node.data.startsWith(marker);
-    },
-    /**
-     * Given a marker node, extract the {@link HTMLDirective} index from the placeholder.
-     * @param node - The marker node to extract the index from.
-     */
-    extractDirectiveIndexFromMarker(node) {
-        return parseInt(node.data.replace(`${marker}:`, ""));
-    },
-    /**
-     * Creates a placeholder string suitable for marking out a location *within*
-     * an attribute value or HTML content.
-     * @param index - The directive index to create the placeholder for.
-     * @remarks
-     * Used internally by binding directives.
-     */
-    createInterpolationPlaceholder(index) {
-        return `${_interpolationStart}${index}${_interpolationEnd}`;
-    },
-    /**
-     * Creates a placeholder that manifests itself as an attribute on an
-     * element.
-     * @param attributeName - The name of the custom attribute.
-     * @param index - The directive index to create the placeholder for.
-     * @remarks
-     * Used internally by attribute directives such as `ref`, `slotted`, and `children`.
-     */
-    createCustomAttributePlaceholder(attributeName, index) {
-        return `${attributeName}="${this.createInterpolationPlaceholder(index)}"`;
-    },
-    /**
-     * Creates a placeholder that manifests itself as a marker within the DOM structure.
-     * @param index - The directive index to create the placeholder for.
-     * @remarks
-     * Used internally by structural directives such as `repeat`.
-     */
-    createBlockPlaceholder(index) {
-        return `<!--${marker}:${index}-->`;
-    },
-    /**
-     * Schedules DOM update work in the next async batch.
-     * @param callable - The callable function or object to queue.
-     */
-    queueUpdate: updateQueue.enqueue,
-    /**
-     * Immediately processes all work previously scheduled
-     * through queueUpdate.
-     * @remarks
-     * This also forces nextUpdate promises
-     * to resolve.
-     */
-    processUpdates: updateQueue.process,
-    /**
-     * Resolves with the next DOM update.
-     */
-    nextUpdate() {
-        return new Promise(updateQueue.enqueue);
-    },
-    /**
-     * 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) {
-        if (value === null || value === undefined) {
-            element.removeAttribute(attributeName);
-        }
-        else {
-            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);
-    },
-    /**
-     * Removes all the child nodes of the provided parent node.
-     * @param parent - The node to remove the children from.
-     */
-    removeChildNodes(parent) {
-        for (let child = parent.firstChild; child !== null; child = parent.firstChild) {
-            parent.removeChild(child);
-        }
-    },
-    /**
-     * Creates a TreeWalker configured to walk a template fragment.
-     * @param fragment - The fragment to walk.
-     */
-    createTemplateWalker(fragment) {
-        return document.createTreeWalker(fragment, 133, // element, text, comment
-        null, false);
-    },
-});

package/dist/esm/observation/array-observer.js

@@ -1,173 +0,0 @@
-import { DOM } from "../dom.js";
-import { calcSplices, newSplice, projectArraySplices } from "./array-change-records.js";
-import { SubscriberSet } from "./notifier.js";
-import { Observable } from "./observable.js";
-let arrayObservationEnabled = false;
-function adjustIndex(changeRecord, array) {
-    let index = changeRecord.index;
-    const arrayLength = array.length;
-    if (index > arrayLength) {
-        index = arrayLength - changeRecord.addedCount;
-    }
-    else if (index < 0) {
-        index =
-            arrayLength + changeRecord.removed.length + index - changeRecord.addedCount;
-    }
-    if (index < 0) {
-        index = 0;
-    }
-    changeRecord.index = index;
-    return changeRecord;
-}
-class ArrayObserver extends SubscriberSet {
-    constructor(source) {
-        super(source);
-        this.oldCollection = void 0;
-        this.splices = void 0;
-        this.needsQueue = true;
-        this.call = this.flush;
-        Reflect.defineProperty(source, "$fastController", {
-            value: this,
-            enumerable: false,
-        });
-    }
-    addSplice(splice) {
-        if (this.splices === void 0) {
-            this.splices = [splice];
-        }
-        else {
-            this.splices.push(splice);
-        }
-        if (this.needsQueue) {
-            this.needsQueue = false;
-            DOM.queueUpdate(this);
-        }
-    }
-    reset(oldCollection) {
-        this.oldCollection = oldCollection;
-        if (this.needsQueue) {
-            this.needsQueue = false;
-            DOM.queueUpdate(this);
-        }
-    }
-    flush() {
-        const splices = this.splices;
-        const oldCollection = this.oldCollection;
-        if (splices === void 0 && oldCollection === void 0) {
-            return;
-        }
-        this.needsQueue = true;
-        this.splices = void 0;
-        this.oldCollection = void 0;
-        const finalSplices = oldCollection === void 0
-            ? projectArraySplices(this.source, splices)
-            : calcSplices(this.source, 0, this.source.length, oldCollection, 0, oldCollection.length);
-        this.notify(finalSplices);
-    }
-}
-/* eslint-disable prefer-rest-params */
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-/**
- * Enables the array observation mechanism.
- * @remarks
- * Array observation is enabled automatically when using the
- * {@link RepeatDirective}, so calling this API manually is
- * not typically necessary.
- * @public
- */
-export function enableArrayObservation() {
-    if (arrayObservationEnabled) {
-        return;
-    }
-    arrayObservationEnabled = true;
-    Observable.setArrayObserverFactory((collection) => {
-        return new ArrayObserver(collection);
-    });
-    const proto = Array.prototype;
-    // Don't patch Array if it has already been patched
-    // by another copy of fast-element.
-    if (proto.$fastPatch) {
-        return;
-    }
-    Reflect.defineProperty(proto, "$fastPatch", {
-        value: 1,
-        enumerable: false,
-    });
-    const pop = proto.pop;
-    const push = proto.push;
-    const reverse = proto.reverse;
-    const shift = proto.shift;
-    const sort = proto.sort;
-    const splice = proto.splice;
-    const unshift = proto.unshift;
-    proto.pop = function () {
-        const notEmpty = this.length > 0;
-        const methodCallResult = pop.apply(this, arguments);
-        const o = this.$fastController;
-        if (o !== void 0 && notEmpty) {
-            o.addSplice(newSplice(this.length, [methodCallResult], 0));
-        }
-        return methodCallResult;
-    };
-    proto.push = function () {
-        const methodCallResult = push.apply(this, arguments);
-        const o = this.$fastController;
-        if (o !== void 0) {
-            o.addSplice(adjustIndex(newSplice(this.length - arguments.length, [], arguments.length), this));
-        }
-        return methodCallResult;
-    };
-    proto.reverse = function () {
-        let oldArray;
-        const o = this.$fastController;
-        if (o !== void 0) {
-            o.flush();
-            oldArray = this.slice();
-        }
-        const methodCallResult = reverse.apply(this, arguments);
-        if (o !== void 0) {
-            o.reset(oldArray);
-        }
-        return methodCallResult;
-    };
-    proto.shift = function () {
-        const notEmpty = this.length > 0;
-        const methodCallResult = shift.apply(this, arguments);
-        const o = this.$fastController;
-        if (o !== void 0 && notEmpty) {
-            o.addSplice(newSplice(0, [methodCallResult], 0));
-        }
-        return methodCallResult;
-    };
-    proto.sort = function () {
-        let oldArray;
-        const o = this.$fastController;
-        if (o !== void 0) {
-            o.flush();
-            oldArray = this.slice();
-        }
-        const methodCallResult = sort.apply(this, arguments);
-        if (o !== void 0) {
-            o.reset(oldArray);
-        }
-        return methodCallResult;
-    };
-    proto.splice = function () {
-        const methodCallResult = splice.apply(this, arguments);
-        const o = this.$fastController;
-        if (o !== void 0) {
-            o.addSplice(adjustIndex(newSplice(+arguments[0], methodCallResult, arguments.length > 2 ? arguments.length - 2 : 0), this));
-        }
-        return methodCallResult;
-    };
-    proto.unshift = function () {
-        const methodCallResult = unshift.apply(this, arguments);
-        const o = this.$fastController;
-        if (o !== void 0) {
-            o.addSplice(adjustIndex(newSplice(0, [], arguments.length), this));
-        }
-        return methodCallResult;
-    };
-}
-/* eslint-enable prefer-rest-params */
-/* eslint-enable @typescript-eslint/explicit-function-return-type */