@optionfactory/ful 0.46.0 → 0.48.0

package/dist/ful.iife.js

@@ -668,6 +668,38 @@ var ful = (function (exports) {
         }
     }
 
+    class TemplateRegistry {
+        #idToFragment = {};
+        #idToTemplate = {};
+        #ec;
+        put(k, fragment) {
+            if (this.#ec) {
+                this.#idToTemplate[k] = ftl.Template.fromFragment(fragment, ec);
+                return;
+            }
+            this.#idToFragment[k] = fragment;
+        }
+        get(k) {
+            if (!this.#ec) {
+                throw new Error("evaluationContext is not configured");
+            }
+            const tpl = this.#idToTemplate[k];
+            if (!tpl) {
+                throw new Error(`missing template: '${k}'`);
+            }
+            return tpl;
+        }
+        configure(ec) {
+            this.#ec = ec;
+            for (const [k, fragment] of Object.entries(this.#idToFragment)) {
+                delete this.#idToFragment[k];
+                this.#idToTemplate[k] = ftl.Template.fromFragment(fragment, ec);
+            }
+        }
+    }
+
+    const templates = new TemplateRegistry();
+
     class UpgradeQueue {
         #q = [];
         constructor() {
@@ -686,83 +718,85 @@ var ful = (function (exports) {
 
     const upgradeQueue = new UpgradeQueue();
 
-    class ParsedElement extends HTMLElement {
-        #parsed;
-        connectedCallback() {
-            if (this.#parsed) {
-                return;
-            }
-            if (this.ownerDocument.readyState === 'complete' || Nodes.isParsed(this)) {
-                upgradeQueue.enqueue(this);
-                return;
-            }
-            this.ownerDocument.addEventListener('DOMContentLoaded', () => {
-                observer.disconnect();
-                upgradeQueue.enqueue(this);
-            });
-            const observer = new MutationObserver(() => {
-                if (!Nodes.isParsed(this)) {
-                    return;
-                }
-                observer.disconnect();
-                upgradeQueue.enqueue(this);
-            });
-            observer.observe(this.parentNode, { childList: true, subtree: true });
-        }
-        attributeChangedCallback(name, oldValue, newValue) {
-            if (!this.#parsed || oldValue === newValue) {
-                return;
-            }
-            this[name] = newValue;
-        }
-        upgrade() {
-            if (this.#parsed) {
-                return;
-            }
-            this.#parsed = true;
-            return this.ready();
-        }
-    }
-
+    const ParsedElement = (flags, others) => {
 
-    const Templated = (SuperClass, template) => {
-        return class extends SuperClass {
-            async ready() {
-                const slotted = Slots.from(this);
-                const fragment = await Promise.resolve(this.render(slotted, template));
-                this.replaceChildren(fragment);
-            }
-        };
-    };
-
-    const Stateful = (SuperClass, flags, others) => {
+        const observed_flags = flags || [];
+        const observed_others = others || [];    
+        const observed = [].concat(observed_flags).concat(observed_others);
 
-        const all = [].concat(flags).concat(others || []);
-
-        const k = class extends SuperClass {
+        const k = class extends HTMLElement {
             static get observedAttributes() {
-                return all;
+                return observed;
             }
+            #parsed;
+            #internals;
             constructor(...args) {
                 super(...args);
-                this.internals_ = this.internals_ || this.attachInternals();
+                this.#internals = this.attachInternals();
+            }
+            get internals() {
+                return this.#internals;
+            }
+            connectedCallback() {
+                if (this.#parsed) {
+                    return;
+                }
+                if (this.ownerDocument.readyState === 'complete' || Nodes.isParsed(this)) {
+                    upgradeQueue.enqueue(this);
+                    return;
+                }
+                this.ownerDocument.addEventListener('DOMContentLoaded', () => {
+                    observer.disconnect();
+                    upgradeQueue.enqueue(this);
+                });
+                const observer = new MutationObserver(() => {
+                    if (!Nodes.isParsed(this)) {
+                        return;
+                    }
+                    observer.disconnect();
+                    upgradeQueue.enqueue(this);
+                });
+                observer.observe(this.parentNode, { childList: true, subtree: true });
             }
+            attributeChangedCallback(name, oldValue, newValue) {
+                if (!this.#parsed || oldValue === newValue) {
+                    return;
+                }
+                this[name] = newValue;
+            }
+            async upgrade() {
+                if (this.#parsed) {
+                    return;
+                }
+                this.#parsed = true;
+                await this.render();
+                for (const flag of observed_flags) {
+                    if(this.hasAttribute(flag)){
+                        this[flag] = true;
+                    }
+                }
+                for (const other of observed_others) {
+                    if(this.hasAttribute(other)){
+                        this[other] = this.getAttribute(other);
+                    }
+                }
+            }        
         };
 
-        for (const flag of flags) {
+        for (const flag of observed_flags) {
             Object.defineProperty(k.prototype, flag, {
                 enumerable: true,
                 configurable: true,
                 get() {
-                    return this.internals_.states.has(`--${flag}`);
+                    return this.internals.states.has(`--${flag}`);
                 },
                 set(value) {
                     //see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#using_double_dash_prefixed_idents
                     if (Attributes.asBoolean(value)) {
-                        this.internals_.states.add(`--${flag}`);
+                        this.internals.states.add(`--${flag}`);
                         return;
                     }
-                    this.internals_.states.delete(`--${flag}`);
+                    this.internals.states.delete(`--${flag}`);
                 }
             });
         }
@@ -839,12 +873,12 @@ var ful = (function (exports) {
         el.value = raw;
     }
 
-    class Form extends Templated(ParsedElement) {
+    class Form extends ParsedElement() {
         static IGNORED_CHILDREN_SELECTOR = '.d-none, [hidden]';
         static SCROLL_OFFSET = 50;
-        render(slotted) {
+        render() {
             const form = document.createElement('form');
-            form.append(slotted.default);
+            form.replaceChildren(...this.childNodes);
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
                 this.spinner(true);
@@ -862,7 +896,7 @@ var ful = (function (exports) {
                     this.spinner(false);
                 }
             });
-            return form;
+            this.replaceChildren(form);
         }
         spinner(spin) {
             this.querySelectorAll('ful-spinner').forEach(el => el.hidden = !spin);
@@ -919,11 +953,7 @@ var ful = (function (exports) {
         }
     }
 
-    const ful_input_ec = globalThis.ec || ftl.EvaluationContext.configure({
-
-    });
-
-    const ful_input_template_ = globalThis.ful_input_template || ftl.Template.fromHtml(`
+    templates.put('ful-input', Fragments.fromHtml(`
     <label data-tpl-for="id" class="form-label">{{{{ slotted.default }}}}</label>
     <div class="input-group">
         <span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
@@ -933,33 +963,31 @@ var ful = (function (exports) {
         <span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
     </div>
     <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
-`, ful_input_ec);
-
-    class StatelessInput extends Templated(ParsedElement, ful_input_template_) {
-        render(slotted, template) {
-            const input = this.input = slotted.input = slotted.input || (() => {
-                const el = document.createElement("input");
-                el.classList.add("form-control");
-                return el;
-            })();
-            input.setAttribute('ful-validation-target', '');
-
-            const id = input.getAttribute('id') || this.getAttribute('input-id') || Attributes.uid('ful-input');
-            Attributes.forward('input-', this, slotted.input);
-            Attributes.defaultValue(slotted.input, "id", id);
-            Attributes.defaultValue(slotted.input, "type", "text");
-            Attributes.defaultValue(slotted.input, "placeholder", " ");
-            const name = this.getAttribute('name');
-            return template.render({ id, name, slotted });
-        }
-
-    }
+`));
+
+
+    const makeInputFragment = (el, slotted) => {
+        const input = el.input = slotted.input = slotted.input || (() => {
+            const el = document.createElement("input");
+            el.classList.add("form-control");
+            return el;
+        })();
+        input.setAttribute('ful-validation-target', '');
+
+        const id = input.getAttribute('id') || el.getAttribute('input-id') || Attributes.uid('ful-input');
+        Attributes.forward('input-', el, slotted.input);
+        Attributes.defaultValue(slotted.input, "id", id);
+        Attributes.defaultValue(slotted.input, "type", "text");
+        Attributes.defaultValue(slotted.input, "placeholder", " ");
+        const name = el.getAttribute('name');
+        return templates.get('ful-input').render(el, { id, name, slotted });
+    };
 
-    class Input extends Stateful(StatelessInput, [], ['value']) {
-        render(slotted, template) {
-            const fragment = super.render(slotted, template);
-            this.input.value = this.getAttribute('value');
-            return fragment;
+    class Input extends ParsedElement([], ['value']) {
+        render() {
+            const slotted = Slots.from(el);
+            const fragment = makeInputFragment(this, slotted);
+            this.replaceChildren(fragment);
         }
         get value() {
             return this.input.value;
@@ -973,11 +1001,8 @@ var ful = (function (exports) {
      * <script src="tom-select.complete.js"></script>
      * <link href="tom-select.bootstrap5.css" rel="stylesheet" />
      */
-    const ful_select_ec = globalThis.ec || ftl.EvaluationContext.configure({
-
-    });
 
-    const ful_select_template_ = globalThis.ful_select_template || ftl.Template.fromHtml(`
+    templates.put('ful-select', Fragments.fromHtml(`
     <label data-tpl-for="tsId" class="form-label">{{{{ slotted.default }}}}</label>
     {{{{ input }}}}
     <div class="input-group">
@@ -988,15 +1013,17 @@ var ful = (function (exports) {
         <span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
     </div>
     <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>            
-`, ful_select_ec);
+`));
 
 
-    class Select extends Stateful(Templated(ParsedElement, ful_select_template_), [], ["value"]) {
+    class Select extends ParsedElement([], ["value"]) {
         constructor(tsConfig) {
             super();
             this.tsConfig = tsConfig;
         }
-        render(slotted, template) {
+        render() {
+            const slotted = Slots.from(this);
+
             const type = this.getAttribute("type") || 'local';
             const remote = type != 'local';
             const loadOnce = this.getAttribute('load') != 'always';
@@ -1024,7 +1051,6 @@ var ful = (function (exports) {
                 }
             };
 
-
             this._remote = remote;
             // we need to await this load in setValue when remote is configured and the option
             // is not loaded yet.
@@ -1039,7 +1065,7 @@ var ful = (function (exports) {
                 const type = query && query.hasOwnProperty('byId') ? 'id' : 'query';
                 const qvalue = type === 'id' ? query.byId : query;
                 const data = await (this.loader ? this.loader(qvalue, type) : []);
-                if(type !== 'id'){
+                if (type !== 'id') {
                     this.loaded = true;
                 }
                 callback(data);
@@ -1053,12 +1079,12 @@ var ful = (function (exports) {
             } : {}, tsDefaultConfig, this.tsConfig));
             //we remove the input to move it
             input.remove();
-            return template.render({ id, tsId, name, input, slotted });
+            templates.get('ful-select').renderTo(this, { id, tsId, name, input, slotted });
         }
         set value(v) {
             (async () => {
-                if(this._remote){
-                    await this._unwrappedRemoteLoad({byId: v}, this.ts.loadCallback.bind(this.ts));
+                if (this._remote) {
+                    await this._unwrappedRemoteLoad({ byId: v }, this.ts.loadCallback.bind(this.ts));
                 }
                 this.ts.setValue(v);
             })();
@@ -1069,11 +1095,7 @@ var ful = (function (exports) {
         }
     }
 
-    const ful_radiogroup_ec = globalThis.ec || ftl.EvaluationContext.configure({
-
-    });
-
-    const ful_radiougroup_template_ = globalThis.ful_radiogroup_template || ftl.Template.fromHtml(`
+    templates.put('ful-radio-group', Fragments.fromHtml(`
     <fieldset>
         <legend class="form-label">
             {{{{ slotted.default }}}}
@@ -1092,11 +1114,12 @@ var ful = (function (exports) {
             {{{{ slotted.footer }}}}
         </footer>
     </fieldset>
-`, ful_radiogroup_ec);
+`));
 
 
-    class RadioGroup extends Stateful(Templated(ParsedElement, ful_radiougroup_template_), ['disabled'], ['value']) {
-        render(slotted, template) {        
+    class RadioGroup extends ParsedElement(['disabled'], ['value']) {
+        render() {
+            const slotted = Slots.from(this);
             const name = this.getAttribute('name') || Attributes.uid('ful-radiogroup');
             const radioEls = Array.from(slotted.default.querySelectorAll('ful-radio'));
             const inputsAndLabels = radioEls.map(el => {
@@ -1111,38 +1134,32 @@ var ful = (function (exports) {
                 return [input, label];
             });
             radioEls.forEach(el => el.remove());
-            
-            const fragment = template.render({
+            templates.get('ful-radio-group').renderTo(this, {
                 name: name,
                 slotted: slotted,
                 inputsAndLabels: inputsAndLabels
             });
-            return fragment;
         }
         get value() {
             const checked = this.querySelector('input[type=radio]:checked');
             return checked ? checked.value : null;
         }
-        set value(value){
+        set value(value) {
             this.querySelector(`input[type=radio][value=${CSS.escape(value)}]`).checked = true;
         }
     }
 
-    const ful_spinner_ec = globalThis.ec || ftl.EvaluationContext.configure({
-
-    });
-
-    const ful_spinner_template_ = globalThis.ful_spinner_template || ftl.Template.fromHtml(`
+    templates.put('ful-spinner', Fragments.fromHtml(`
     <div class="ful-spinner-wrapper">
         <div class="ful-spinner-text">{{{{ slotted.default }}}}</div>
         <div class="ful-spinner-icon"></div>
     </div>
-`, ful_spinner_ec);
+`));
 
-
-    class Spinner extends Templated(ParsedElement, ful_spinner_template_) {
-        render(slotted, template) {
-            return template.render({ slotted });
+    class Spinner extends ParsedElement() {
+        render() {
+            const slotted = Slots.from(this);
+            templates.get('ful-spinner').renderTo(this, { slotted });
         }
     }
 
@@ -1219,7 +1236,8 @@ var ful = (function (exports) {
     }
 
     class CustomElements {
-        static configure() {
+        static configure(ec) {
+            templates.configure(ec);
             customElements.define('ful-spinner', Spinner);
             customElements.define('ful-input', Input);
             customElements.define('ful-radio-group', RadioGroup);
@@ -1248,16 +1266,16 @@ var ful = (function (exports) {
     exports.SessionStorage = SessionStorage;
     exports.Slots = Slots;
     exports.Spinner = Spinner;
-    exports.Stateful = Stateful;
-    exports.StatelessInput = StatelessInput;
     exports.SyncEvent = SyncEvent;
-    exports.Templated = Templated;
+    exports.TemplateRegistry = TemplateRegistry;
     exports.VersionedStorage = VersionedStorage;
     exports.Wizard = Wizard;
     exports.jsonPatch = jsonPatch;
     exports.jsonPost = jsonPost;
     exports.jsonPut = jsonPut;
     exports.jsonRequest = jsonRequest;
+    exports.makeInputFragment = makeInputFragment;
+    exports.templates = templates;
     exports.timing = timing;
 
     Object.defineProperty(exports, '__esModule', { value: true });