@optionfactory/ful 0.46.0 → 0.48.0

package/dist/ful.mjs

@@ -665,6 +665,38 @@ class Nodes {
     }
 }
 
+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() {
@@ -683,83 +715,85 @@ class UpgradeQueue {
 
 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}`);
             }
         });
     }
@@ -836,12 +870,12 @@ function mutate(el, raw) {
     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);
@@ -859,7 +893,7 @@ class Form extends Templated(ParsedElement) {
                 this.spinner(false);
             }
         });
-        return form;
+        this.replaceChildren(form);
     }
     spinner(spin) {
         this.querySelectorAll('ful-spinner').forEach(el => el.hidden = !spin);
@@ -916,11 +950,7 @@ class Form extends Templated(ParsedElement) {
     }
 }
 
-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>
@@ -930,33 +960,31 @@ const ful_input_template_ = globalThis.ful_input_template || ftl.Template.fromHt
         <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;
@@ -970,11 +998,8 @@ class Input extends Stateful(StatelessInput, [], ['value']) {
  * <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">
@@ -985,15 +1010,17 @@ const ful_select_template_ = globalThis.ful_select_template || ftl.Template.from
         <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';
@@ -1021,7 +1048,6 @@ class Select extends Stateful(Templated(ParsedElement, ful_select_template_), []
             }
         };
 
-
         this._remote = remote;
         // we need to await this load in setValue when remote is configured and the option
         // is not loaded yet.
@@ -1036,7 +1062,7 @@ class Select extends Stateful(Templated(ParsedElement, ful_select_template_), []
             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);
@@ -1050,12 +1076,12 @@ class Select extends Stateful(Templated(ParsedElement, ful_select_template_), []
         } : {}, 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);
         })();
@@ -1066,11 +1092,7 @@ class Select extends Stateful(Templated(ParsedElement, ful_select_template_), []
     }
 }
 
-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 }}}}
@@ -1089,11 +1111,12 @@ const ful_radiougroup_template_ = globalThis.ful_radiogroup_template || ftl.Temp
             {{{{ 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 => {
@@ -1108,38 +1131,32 @@ class RadioGroup extends Stateful(Templated(ParsedElement, ful_radiougroup_templ
             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 });
     }
 }
 
@@ -1216,7 +1233,8 @@ class Wizard extends HTMLElement {
 }
 
 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);
@@ -1225,5 +1243,5 @@ class CustomElements {
     }
 }
 
-export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, CustomElements, Failure, Form, Fragments, Hex, HttpClient, Input, LocalStorage, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Slots, Spinner, Stateful, StatelessInput, SyncEvent, Templated, VersionedStorage, Wizard, jsonPatch, jsonPost, jsonPut, jsonRequest, timing };
+export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, CustomElements, Failure, Form, Fragments, Hex, HttpClient, Input, LocalStorage, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Slots, Spinner, SyncEvent, TemplateRegistry, VersionedStorage, Wizard, jsonPatch, jsonPost, jsonPut, jsonRequest, makeInputFragment, templates, timing };
 //# sourceMappingURL=ful.mjs.map