@optionfactory/fml 8.0.0 → 8.0.2

package/dist/ftl.mjs

@@ -3457,7 +3457,7 @@ class EvaluatingVisitor {
             case '<=':
                 return lhs <= rhs;
             default:
-                throw new Error('unknown cmp op ' + node.op);
+                throw new Error(`unknown cmp op ${node.op}`);
         }
     }
     [nodes.call](node) {
@@ -3468,7 +3468,7 @@ class EvaluatingVisitor {
         }
         const fn = module[fnRef.value];
         if (!fn) {
-            throw new Error(`Function "#${fnRef.module === null ? '' : fnRef.module + ':'}${fnRef.value}" not found`);
+            throw new Error(`Function "#${fnRef.module === null ? '' : `${fnRef.module}:`}${fnRef.value}" not found`);
         }
         const args = node.args.map((arg) => this.visit(arg));
         return fn.apply(this.#resolve_proxy(), args);
@@ -3504,14 +3504,14 @@ class EvaluatingVisitor {
         return cond ? cond : this.visit(node.ifFalse);
     }
     [nodes.access](node) {
-        let prev = undefined;
+        let prev ;
         let cur = this.visit(node.lhs);
         for (let i = 0; i !== node.rhs.length; ++i) {
             const rhs = node.rhs[i];
             if (rhs.ns && cur == null) {
                 return undefined;
             }
-            let value = undefined;
+            let value ;
             switch (rhs.type) {
                 case nodes.member: {
                     value = cur[rhs.rhs];
@@ -3552,7 +3552,7 @@ class EvaluatingVisitor {
                     case nodes.templated.ten:
                         return { type: nodes.dom.n, value: this.visit(node.value) };
                     default:
-                        throw new Error('unknown node type ' + node.type.toString());
+                        throw new Error(`unknown node type ${node.type.toString()}`);
                 }
             });
     }
@@ -3728,7 +3728,7 @@ class Attributes {
             .forEach((a) => {
                 const target = a.substring(prefix.length);
                 if (target === 'class') {
-                    const classes = from.getAttribute(prefix + 'class')?.split(/\s+/).filter((a) => a.length) ?? [];
+                    const classes = from.getAttribute(`${prefix}class`)?.split(/\s+/).filter((a) => a.length) ?? [];
                     to.classList.add(...classes);
                     return;
                 }
@@ -3820,8 +3820,7 @@ class Nodes {
      * @returns
      */
     static isParsed(el) {
-        //@ts-ignore
-        for (let c = el; c; c = c.parentNode) {
+        for (let c = /** @type {Node | null} */ (el); c; c = c.parentNode) {
             if (c.nextSibling) {
                 return true;
             }
@@ -3884,19 +3883,18 @@ class Nodes {
 }
 
 class NodeOperations {
-    #forRemoval;
-    constructor() {
-        this.#forRemoval = [];
-    }
+    #forRemoval = new Set();
     removed(node) {
-        return this.#forRemoval.includes(node);
+        return this.#forRemoval.has(node);
     }
     remove(node) {
         node.replaceChildren?.();
         Object.keys(node.dataset || {})
             .filter((k) => k.startsWith('tpl'))
-            .forEach((k) => delete node.dataset[k]);
-        this.#forRemoval.push(node);
+            .forEach((k) => {
+                delete node.dataset[k];
+            });
+        this.#forRemoval.add(node);
     }
     popData(node, key) {
         const v = node.dataset[key];
@@ -3914,9 +3912,10 @@ class NodeOperations {
         this.remove(ref);
     }
     cleanup() {
-        while (this.#forRemoval.length) {
-            this.#forRemoval.pop().remove();
+        for (const node of this.#forRemoval) {
+            node.remove();
         }
+        this.#forRemoval.clear();
     }
 }
 
@@ -3971,7 +3970,7 @@ class CommandsHandler {
     }
     static tplRemove(node, value, ops, modules, dataStack) {
         switch (value.toLowerCase()) {
-            case 'tag':
+            case 'tag': {
                 const fragment = new DocumentFragment();
                 while (node.firstChild) {
                     fragment.appendChild(node.firstChild);
@@ -3985,6 +3984,7 @@ class CommandsHandler {
                     ops.remove(node);
                 }
                 break;
+            }
             case 'body':
                 node.replaceChildren();
                 break;
@@ -4050,8 +4050,10 @@ class CommandsHandler {
     }
 }
 
-// Module-isolated string cache for dataset-to-attribute conversions
+// Module-isolated string cache for dataset-to-attribute conversions, bounded with
+// FIFO eviction like the expression ast cache
 const attributeCache = new Map();
+const ATTRIBUTE_CACHE_MAX_SIZE = 1000;
 
 /**
  * Converts a tpl camelCase dataset key into a kebab-case attribute name.
@@ -4062,6 +4064,9 @@ const attributeCache = new Map();
 function toAttr(dataSetKey) {
     let cached = attributeCache.get(dataSetKey);
     if (!cached) {
+        if (attributeCache.size >= ATTRIBUTE_CACHE_MAX_SIZE) {
+            attributeCache.delete(attributeCache.keys().next().value);
+        }
         cached = dataSetKey
             .substring(3)
             .split(/(?=[A-Z])/)
@@ -4196,9 +4201,10 @@ class Template {
      * @param {string} expression
      * @param {(typeof Expressions.MODE_EXPRESSION | typeof Expressions.MODE_TEMPLATED)?} [mode]
      * @param {...*} data
+     * @returns the evaluated expression result
      */
     evaluate(expression, mode, ...data) {
-        new ExpressionEvaluator(this.#modules, this.#dataStack).withOverlay(...data).evaluate(expression, mode);
+        return new ExpressionEvaluator(this.#modules, this.#dataStack).withOverlay(...data).evaluate(expression, mode);
     }
     /**
      * Returns an expression evaluator with bound modules and dataStack.
@@ -4343,8 +4349,8 @@ class RenderError extends Error {
         if (node.nodeType === Node.TEXT_NODE) {
             node.nodeValue = node.nodeValue.trim();
         }
-        for (var n = 0; n < node.childNodes.length; n++) {
-            var child = node.childNodes[n];
+        for (let n = 0; n < node.childNodes.length; n++) {
+            const child = node.childNodes[n];
             if (child.nodeType === Node.TEXT_NODE) {
                 child.nodeValue = child.nodeValue.trim();
                 if (child.nodeValue.length === 0) {
@@ -4363,8 +4369,7 @@ class UpgradeQueue {
     #q = new Map();
     constructor() {
         document.addEventListener('DOMContentLoaded', async () => {
-            const pending = Array.from(this.entries).map(([child, promise]) => promise);
-            await Promise.all(pending);
+            await this.settle();
             document.dispatchEvent(
                 new CustomEvent('ftl:ready', {
                     bubbles: false,
@@ -4373,16 +4378,39 @@ class UpgradeQueue {
             );
         });
     }
+    #finished = new Map();
     enqueue(el) {
         if (this.#q.has(el)) {
             //already upgrading, can happen when disconnecting an element
             //while it's already queued for upgrade (e.g.: ful-form)
             return;
         }
+        //settling waits on a signal that only ever resolves, so nothing here attaches a
+        //rejection handler to the upgrade itself: a component that fails is still
+        //reported the way it always was
+        const { promise: finished, resolve: markFinished } = /** @type {PromiseWithResolvers<void>} */ (
+            Promise.withResolvers()
+        );
         const promise = Nodes.waitParsed(el)
             .then(() => el.upgrade())
-            .finally(() => this.#q.delete(el));
+            .finally(() => {
+                this.#q.delete(el);
+                this.#finished.delete(el);
+                markFinished();
+            });
         this.#q.set(el, promise);
+        this.#finished.set(el, finished);
+    }
+    /**
+     * Waits for every queued upgrade to settle, including the ones enqueued while
+     * waiting: a component is only queued once its parent connects it, so a single pass
+     * would miss everything nested. A component that fails to upgrade does not hold the
+     * others back, readiness means the queue drained rather than that everything worked.
+     */
+    async settle() {
+        while (this.#finished.size !== 0) {
+            await Promise.all(Array.from(this.#finished.values()));
+        }
     }
     get entries() {
         return this.#q.entries();
@@ -4578,18 +4606,30 @@ class Templates {
     }
 }
 
-class Rendering {
-    static async waitFor(el) {
+/**
+ * Waits for the queued upgrades matching the filter, including the ones enqueued while
+ * waiting: a component is only queued once its parent connects it, so a single pass
+ * would miss everything nested.
+ * @param {(el: Element) => boolean} accept
+ */
+const settle = async (accept) => {
+    for (;;) {
         const pending = Array.from(registry.upgrades)
-            .filter(([child, promise]) => el.contains(child))
-            .map(([child, promise]) => promise);
+            .filter(([child]) => accept(child))
+            .map(([, promise]) => promise);
+        if (pending.length === 0) {
+            return;
+        }
         await Promise.all(pending);
     }
+};
+
+class Rendering {
+    static async waitFor(el) {
+        await settle((child) => el.contains(child));
+    }
     static async waitForChildren(el) {
-        const pending = Array.from(registry.upgrades)
-            .filter(([child, promise]) => el !== child && el.contains(child))
-            .map(([child, promise]) => promise);
-        await Promise.all(pending);
+        await settle((child) => el !== child && el.contains(child));
     }
 }
 
@@ -4631,7 +4671,7 @@ class ParsedElement extends HTMLElement {
     template(name) {
         const { modules, data } = registry.context();
         let t = this.#bits().TEMPLATES[name ?? 'default'].withData(data).withModules(modules);
-        for (let k of ['l10n', 'config']) {
+        for (const k of ['l10n', 'config']) {
             const v = this.constructor[k];
             if (v) {
                 t = t.withOverlay({ [k]: v });
@@ -4661,6 +4701,19 @@ class ParsedElement extends HTMLElement {
             return;
         }
         Reflect.set(this, 'disabled', disabled);
+        if (disabled) {
+            this.#unclaimFormDisabled();
+        }
+    }
+    //a disabled ancestor fieldset already matches the element through :disabled, and
+    //an attribute of its own would keep the element disabled once the fieldset is
+    //re-enabled, as formDisabledCallback(false) is only delivered on an actual state
+    //change. a claim of its own made while already disabled by ancestry is safe: the
+    //platform fires no callback for it, so it survives the fieldset being re-enabled
+    #unclaimFormDisabled() {
+        if (this.closest('fieldset:disabled')) {
+            this.removeAttribute('disabled');
+        }
     }
     async upgrade() {
         if (this.#parsed) {
@@ -4676,6 +4729,9 @@ class ParsedElement extends HTMLElement {
         );
         const disabled = this.#disabledBeforeParsed ?? false;
         await this.render({ slots, observed, disabled });
+        if (disabled) {
+            this.#unclaimFormDisabled();
+        }
     }
     render(c) {}
     reflect(fn) {