@optionfactory/ful 0.65.0 → 0.67.0

package/dist/ful.mjs

@@ -557,14 +557,28 @@ const timing = {
     }
 };
 
+class Deferred {
+    constructor() {
+        this.promise = new Promise((resolve, reject) => {
+            this.reject = reject;
+            this.resolve = resolve;
+        });
+    }
+}
+
 // SyncEvent.on($0, 'asd', async e => { await ful.timing.sleep(10_000); return 3; })
-// const [success, results] = await new SyncEvent("asd").dispatchTo($0);
+// const success = await new SyncEvent("asd").dispatchTo($0);
 class SyncEvent extends CustomEvent {
+    #promises;
     #results;
     constructor(type, options) {
         super(type, {...options, cancelable: true});
+        this.#promises = [];
         this.#results = [];
     }
+    get results(){
+        return this.#results;
+    }
 
     async dispatchTo(el) {
         // unlike "native" events, which are fired by the browser and invoke 
@@ -574,14 +588,14 @@ class SyncEvent extends CustomEvent {
         el.dispatchEvent(this);
         //we ignore the result of dispatchEvent and use defaultPrevented instead
         //because handlers can be async
-        const results = await Promise.all(this.#results);
-        return [!this.defaultPrevented, results];
+        this.#results = await Promise.all(this.#promises);
+        return !this.defaultPrevented;
     }
 
     static on(el, type, h, useCapture) {
         el.addEventListener(type, e => {
             //e *must* be an async event
-            e.#results.push(h(e));
+            e.#promises.push(h(e));
         }, useCapture);
     }
 }
@@ -672,6 +686,19 @@ class Attributes {
                 to.setAttribute(target, from.getAttribute(a));
             });
     }
+    /**
+     * 
+     * @param {HTMLElement} el 
+     * @param {stirng} attr 
+     * @param {boolean} value 
+     */
+    static toggle(el, attr, value) {
+        if (value) {
+            el.setAttribute(attr, '');
+        } else {
+            el.removeAttribute(attr);
+        }
+    }
 }
 
 class LightSlots {
@@ -708,7 +735,7 @@ class Nodes {
 }
 
 class Events {
-    static dispatchChange(el, value){
+    static dispatchChange(el, value) {
         return el.dispatchEvent(new CustomEvent("change", {
             bubbles: true,
             cancelable: true,
@@ -844,6 +871,7 @@ const ParsedElement = (conf) => {
         }
         #parsed;
         #initialized;
+        #reflecting;
         #internals;
         constructor(...args) {
             super(...args);
@@ -880,9 +908,20 @@ const ParsedElement = (conf) => {
             if (!this.#parsed || oldValue === newValue) {
                 return;
             }
+            if (this.#reflecting) {
+                return;
+            }
             const mapper = attrToMapper[attr];
             this[attr] = mapper(newValue);
         }
+        reflect(fn) {
+            this.#reflecting = true;
+            try {
+                fn();
+            } finally {
+                this.#reflecting = false;
+            }
+        }
         async upgrade() {
             if (this.#parsed) {
                 return;
@@ -907,29 +946,16 @@ const ParsedElement = (conf) => {
                 return this.internals.states.has(`--${attr}`);
             },
             set(value) {
-                const etb = this.initialized ? 'change' : 'init';
-                const before = new SyncEvent(`${attr}:${etb}`, {
-                    detail: {
-                        target: this,
-                        value: value
-                    }
-                });
-                const eta = this.initialized ? 'changed' : 'inited';
-                const after = new SyncEvent(`${attr}:${eta}`, {
-                    detail: {
-                        target: this,
-                        value: value
-                    }
-                });
-
+                const detail = { target: this, value };
+                const before = new SyncEvent(`${attr}:${this.initialized ? 'change' : 'init'}`, { detail });
+                const after = new SyncEvent(`${attr}:${this.initialized ? 'changed' : 'inited'}`, { detail });
                 (async () => {
-                    const [success, results] = await before.dispatchTo(this);
-                    if (!success) {
+                    if (!await before.dispatchTo(this)) {
                         return;
                     }
                     //see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#using_double_dash_prefixed_idents
                     this.internals.states[value ? 'add' : 'delete'](`--${attr}`);
-
+                    this.reflect(() => Attributes.toggle(this, attr, value));
                     await after.dispatchTo(this);
                 })();
             }
@@ -1413,5 +1439,5 @@ class Wizard extends HTMLElement {
     }
 }
 
-export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, ElementsRegistry, Failure, Form, Fragments, Hex, HttpClient, INPUT_TEMPLATE, Input, LightSlots, LocalStorage, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Spinner, SyncEvent, TemplatesRegistry, VersionedStorage, Wizard, elements, jsonPatch, jsonPost, jsonPut, jsonRequest, makeInputFragment, timing };
+export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Deferred, ElementsRegistry, Failure, Form, Fragments, Hex, HttpClient, INPUT_TEMPLATE, Input, LightSlots, LocalStorage, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Spinner, SyncEvent, TemplatesRegistry, VersionedStorage, Wizard, elements, jsonPatch, jsonPost, jsonPut, jsonRequest, makeInputFragment, timing };
 //# sourceMappingURL=ful.mjs.map