@spearwolf/shadow-objects 0.30.1 → 0.31.0

package/src/elements/ShaeEntElement.js

@@ -1,359 +1,338 @@
-import { on } from '@spearwolf/eventize';
-import { beQuiet, createEffect, createSignal } from '@spearwolf/signalize';
-import { ComponentContext } from '../view/ComponentContext.js';
-import { ShadowEnv } from '../view/ShadowEnv.js';
-import { ViewComponent } from '../view/ViewComponent.js';
-import { ShaeElement } from './ShaeElement.js';
-import { ATTR_FORWARD_CUSTOM_EVENTS, ATTR_TOKEN, RequestEntParentEventName, ReRequestEntParentEventName } from './constants.js';
-export class ShaeEntElement extends ShaeElement {
-    static { this.observedAttributes = [...ShaeElement.observedAttributes, ATTR_TOKEN, ATTR_FORWARD_CUSTOM_EVENTS]; }
-    get componentContext() {
-        return this.componentContext$.value;
-    }
-    get viewComponent() {
-        return this.viewComponent$.value;
-    }
-    get uuid() {
-        return this.viewComponent?.uuid;
-    }
-    get token() {
-        return this.token$.value;
-    }
-    set token(token) {
-        this.token$.set(token);
-    }
-    #parentObserver;
-    constructor() {
-        super();
-        this.isShaeEntElement = true;
-        this.componentContext$ = createSignal();
-        this.viewComponent$ = createSignal();
-        this.token$ = createSignal();
-        this.forwardCustomEvents$ = createSignal(false);
-        this.#shadowRootHostNeedsUpdate = true;
-        this.#onSlotChange = () => {
-            const shadowRootHost = this.findShadowRootHost();
-            if (shadowRootHost == null)
-                return;
-            this.dispatchEvent(new CustomEvent(ReRequestEntParentEventName, {
-                bubbles: true,
-                composed: true,
-                detail: { requester: this, shadowRootHost },
-            }));
-        };
-        this.#onReRequestParent = (event) => {
-            const requester = event.detail?.requester;
-            if (requester === this)
-                return;
-            if (!requester?.isShaeEntElement)
-                return;
-            if (requester.ns !== this.ns)
-                return;
-            const shadowRootHost = event.detail?.shadowRootHost;
-            if (shadowRootHost) {
-                this.#dispatchRequestParent();
-            }
-        };
-        this.#onRequestParent = (event) => {
-            const requester = event.detail?.requester;
-            if (requester === this)
-                return;
-            if (!requester?.isShaeEntElement)
-                return;
-            if (requester.ns !== this.ns)
-                return;
-            event.stopPropagation();
-            requester.#setParent(this);
-        };
-        this.ns$.onChange((ns) => {
-            this.componentContext$.set(ComponentContext.get(ns));
-            if (this.isConnected) {
-                this.#dispatchRequestParent();
-            }
-        });
-        this.#updateTokenValue();
-        this.token$.onChange((token) => {
-            if (token == null) {
-                this.removeAttribute(ATTR_TOKEN);
-            }
-            else if (this.getAttribute(ATTR_TOKEN) !== token) {
-                this.setAttribute(ATTR_TOKEN, token);
-            }
-        });
-        this.#updateForwardCustomEventsValue();
-        this.forwardCustomEvents$.onChange((val) => {
-            if (!val) {
-                this.removeAttribute(ATTR_FORWARD_CUSTOM_EVENTS);
-            }
-            else if (val === true) {
-                if (!this.hasAttribute(ATTR_FORWARD_CUSTOM_EVENTS)) {
-                    this.setAttribute(ATTR_FORWARD_CUSTOM_EVENTS, '');
-                }
-            }
-            else {
-                const str = Array.from(val).join(',');
-                if (this.getAttribute(ATTR_FORWARD_CUSTOM_EVENTS) !== str) {
-                    this.setAttribute(ATTR_FORWARD_CUSTOM_EVENTS, str);
-                }
-            }
-        });
-        createEffect(() => {
-            const vc = this.viewComponent$.get();
-            if (vc) {
-                const unsubcribe = on(vc, ComponentContext.ReRequestParentRoots, () => this.#reReuestParentRoot());
-                const oldNs = vc.context?.ns;
-                return () => {
-                    unsubcribe();
-                    vc.destroy();
-                    if (oldNs && oldNs !== this.ns) {
-                        ShadowEnv.get(oldNs)?.sync();
-                    }
-                    else {
-                        this.syncShadowObjects();
-                    }
-                };
-            }
-        });
-        createEffect(() => {
-            const vc = this.viewComponent$.get();
-            if (!vc)
-                return;
-            // Make sure we are patching the instance method, not the prototype
-            const originalDispatchEvent = Object.hasOwn(vc, 'dispatchEvent')
-                ? Object.getPrototypeOf(vc).dispatchEvent
-                : vc.dispatchEvent;
-            const filter = this.forwardCustomEvents$.get();
-            if (!filter)
-                return;
-            const allowedTypes = filter instanceof Set ? filter : undefined;
-            const newDispatch = (type, data, traverseChildren) => {
-                originalDispatchEvent.call(vc, type, data, traverseChildren);
-                if (type === ComponentContext.ReRequestParentRoots)
-                    return;
-                if (allowedTypes && !allowedTypes.has(type))
-                    return;
-                this.dispatchEvent(new CustomEvent(type, {
-                    bubbles: true,
-                    composed: true,
-                    detail: data,
-                }));
-            };
-            // We use defineProperty to ensure it is writable and configurable
-            Object.defineProperty(vc, 'dispatchEvent', {
-                value: newDispatch,
-                writable: true,
-                configurable: true,
-            });
-            return () => {
-                if (Object.hasOwn(vc, 'dispatchEvent') && vc.dispatchEvent === newDispatch) {
-                    delete vc.dispatchEvent;
-                }
-            };
-        });
-        this.token$.onChange((token) => {
-            const vc = this.viewComponent$.value;
-            if (vc) {
-                vc.token = token;
-                this.syncShadowObjects();
-            }
-        });
-        this.style.display = 'contents';
-    }
-    #unsubscribeViewComponentEffect;
-    #setupViewComponentEffect() {
-        this.#unsubscribeViewComponentEffect?.();
-        const unsubscribeComponentContext = this.componentContext$.onChange((context) => {
-            const token = this.token$.value;
-            let vc = this.viewComponent$.value;
-            if (vc) {
-                vc.context = context;
-            }
-            else if (context) {
-                vc = new ViewComponent(token, { context });
-                this.viewComponent$.set(vc);
-            }
+import { on } from "@spearwolf/eventize";
+import { beQuiet, createEffect, createSignal } from "@spearwolf/signalize";
+import { ComponentContext } from "../view/ComponentContext.js";
+import { ShadowEnv } from "../view/ShadowEnv.js";
+import { ViewComponent } from "../view/ViewComponent.js";
+import { ATTR_FORWARD_CUSTOM_EVENTS, ATTR_TOKEN, RequestEntParentEventName, ReRequestEntParentEventName } from "./constants.js";
+import { ShaeElement } from "./ShaeElement.js";
+class ShaeEntElement extends ShaeElement {
+  constructor() {
+    super();
+    this.isShaeEntElement = true;
+    this.componentContext$ = createSignal();
+    this.viewComponent$ = createSignal();
+    this.token$ = createSignal();
+    this.forwardCustomEvents$ = createSignal(false);
+    this.#shadowRootHostNeedsUpdate = true;
+    this.#onSlotChange = () => {
+      const shadowRootHost = this.findShadowRootHost();
+      if (shadowRootHost == null) return;
+      this.dispatchEvent(
+        new CustomEvent(ReRequestEntParentEventName, {
+          bubbles: true,
+          composed: true,
+          detail: { requester: this, shadowRootHost }
+        })
+      );
+    };
+    this.#onReRequestParent = (event) => {
+      const requester = event.detail?.requester;
+      if (requester === this) return;
+      if (!requester?.isShaeEntElement) return;
+      if (requester.ns !== this.ns) return;
+      const shadowRootHost = event.detail?.shadowRootHost;
+      if (shadowRootHost) {
+        this.#dispatchRequestParent();
+      }
+    };
+    this.#onRequestParent = (event) => {
+      const requester = event.detail?.requester;
+      if (requester === this) return;
+      if (!requester?.isShaeEntElement) return;
+      if (requester.ns !== this.ns) return;
+      event.stopPropagation();
+      requester.#setParent(this);
+    };
+    this.ns$.onChange((ns) => {
+      this.componentContext$.set(ComponentContext.get(ns));
+      if (this.isConnected) {
+        this.#dispatchRequestParent();
+      }
+    });
+    this.#updateTokenValue();
+    this.token$.onChange((token) => {
+      if (token == null) {
+        this.removeAttribute(ATTR_TOKEN);
+      } else if (this.getAttribute(ATTR_TOKEN) !== token) {
+        this.setAttribute(ATTR_TOKEN, token);
+      }
+    });
+    this.#updateForwardCustomEventsValue();
+    this.forwardCustomEvents$.onChange((val) => {
+      if (!val) {
+        this.removeAttribute(ATTR_FORWARD_CUSTOM_EVENTS);
+      } else if (val === true) {
+        if (!this.hasAttribute(ATTR_FORWARD_CUSTOM_EVENTS)) {
+          this.setAttribute(ATTR_FORWARD_CUSTOM_EVENTS, "");
+        }
+      } else {
+        const str = Array.from(val).join(",");
+        if (this.getAttribute(ATTR_FORWARD_CUSTOM_EVENTS) !== str) {
+          this.setAttribute(ATTR_FORWARD_CUSTOM_EVENTS, str);
+        }
+      }
+    });
+    createEffect(() => {
+      const vc = this.viewComponent$.get();
+      if (vc) {
+        const unsubcribe = on(vc, ComponentContext.ReRequestParentRoots, () => this.#reReuestParentRoot());
+        const oldNs = vc.context?.ns;
+        return () => {
+          unsubcribe();
+          vc.destroy();
+          if (oldNs && oldNs !== this.ns) {
+            ShadowEnv.get(oldNs)?.sync();
+          } else {
             this.syncShadowObjects();
-        });
-        this.#unsubscribeViewComponentEffect = () => {
-            unsubscribeComponentContext();
+          }
         };
-    }
-    #destroyViewComponentEffect() {
-        this.#unsubscribeViewComponentEffect?.();
-        this.#unsubscribeViewComponentEffect = undefined;
-    }
-    #shadowRootHost;
-    #shadowRootHostNeedsUpdate;
-    findShadowRootHost() {
-        if (this.#shadowRootHostNeedsUpdate) {
-            this.#shadowRootHostNeedsUpdate = false;
-            let current = this;
-            while (current) {
-                if (current.parentElement == null) {
-                    const root = current.parentNode;
-                    if (root) {
-                        this.#shadowRootHost = root.host;
-                    }
-                    break;
-                }
-                current = current.parentElement;
-            }
-        }
-        return this.#shadowRootHost;
-    }
-    getParentNodeForObserver() {
-        const parent = this.parentNode;
-        if (parent)
-            return parent;
-        return parent.host ?? parent;
-    }
-    connectedCallback() {
-        this.#shadowRootHostNeedsUpdate = true;
-        this.addEventListener('slotchange', this.#onSlotChange, { capture: false, passive: false });
-        this.addEventListener(RequestEntParentEventName, this.#onRequestParent, { capture: false, passive: false });
-        this.#setupViewComponentEffect();
-        // --- token ---
-        beQuiet(() => this.#updateTokenValue());
-        // --- forward-custom-events ---
-        beQuiet(() => this.#updateForwardCustomEventsValue());
-        // --- componentContext | viewComponent ---
-        if (this.componentContext == null) {
-            this.componentContext$.set(ComponentContext.get(this.ns));
+      }
+    });
+    createEffect(() => {
+      const vc = this.viewComponent$.get();
+      if (!vc) return;
+      const originalDispatchEvent = Object.hasOwn(vc, "dispatchEvent") ? Object.getPrototypeOf(vc).dispatchEvent : vc.dispatchEvent;
+      const filter = this.forwardCustomEvents$.get();
+      if (!filter) return;
+      const allowedTypes = filter instanceof Set ? filter : void 0;
+      const newDispatch = (type, data, traverseChildren) => {
+        originalDispatchEvent.call(vc, type, data, traverseChildren);
+        if (type === ComponentContext.ReRequestParentRoots) return;
+        if (allowedTypes && !allowedTypes.has(type)) return;
+        this.dispatchEvent(
+          new CustomEvent(type, {
+            bubbles: true,
+            composed: true,
+            detail: data
+          })
+        );
+      };
+      Object.defineProperty(vc, "dispatchEvent", {
+        value: newDispatch,
+        writable: true,
+        configurable: true
+      });
+      return () => {
+        if (Object.hasOwn(vc, "dispatchEvent") && vc.dispatchEvent === newDispatch) {
+          delete vc.dispatchEvent;
         }
-        // --- viewComponent.parent ---
-        this.#dispatchRequestParent();
-        // --- parents ---
-        this.componentContext?.dispatchReRequestParentRoots();
-        this.#createParentObserver();
-        // --- sync! ---
+      };
+    });
+    this.token$.onChange((token) => {
+      const vc = this.viewComponent$.value;
+      if (vc) {
+        vc.token = token;
         this.syncShadowObjects();
-    }
-    #createParentObserver() {
-        this.#destroyParentObserver();
-        const parent = this.getParentNodeForObserver();
-        if (parent) {
-            this.#parentObserver = new MutationObserver((mutations, _observer) => {
-                for (const { target, removedNodes } of mutations) {
-                    if (target === parent) {
-                        for (const node of removedNodes) {
-                            if (node === this) {
-                                this.#destroyParentObserver();
-                                this.onParentChanged(this.getParentNodeForObserver(), parent);
-                                break;
-                            }
-                        }
-                    }
-                }
-            });
-            this.#parentObserver.observe(parent, { childList: true, subtree: false, attributes: false });
+      }
+    });
+    this.style.display = "contents";
+  }
+  static {
+    this.observedAttributes = [...ShaeElement.observedAttributes, ATTR_TOKEN, ATTR_FORWARD_CUSTOM_EVENTS];
+  }
+  get componentContext() {
+    return this.componentContext$.value;
+  }
+  get viewComponent() {
+    return this.viewComponent$.value;
+  }
+  get uuid() {
+    return this.viewComponent?.uuid;
+  }
+  get token() {
+    return this.token$.value;
+  }
+  set token(token) {
+    this.token$.set(token);
+  }
+  #parentObserver;
+  #unsubscribeViewComponentEffect;
+  #setupViewComponentEffect() {
+    this.#unsubscribeViewComponentEffect?.();
+    const unsubscribeComponentContext = this.componentContext$.onChange((context) => {
+      const token = this.token$.value;
+      let vc = this.viewComponent$.value;
+      if (vc) {
+        vc.context = context;
+      } else if (context) {
+        vc = new ViewComponent(token, { context });
+        this.viewComponent$.set(vc);
+      }
+      this.syncShadowObjects();
+    });
+    this.#unsubscribeViewComponentEffect = () => {
+      unsubscribeComponentContext();
+    };
+  }
+  #destroyViewComponentEffect() {
+    this.#unsubscribeViewComponentEffect?.();
+    this.#unsubscribeViewComponentEffect = void 0;
+  }
+  #shadowRootHost;
+  #shadowRootHostNeedsUpdate;
+  findShadowRootHost() {
+    if (this.#shadowRootHostNeedsUpdate) {
+      this.#shadowRootHostNeedsUpdate = false;
+      let current = this;
+      while (current) {
+        if (current.parentElement == null) {
+          const root = current.parentNode;
+          if (root) {
+            this.#shadowRootHost = root.host;
+          }
+          break;
         }
+        current = current.parentElement;
+      }
     }
-    onParentChanged(_newParent, _oldParent) {
-        this.#setParent(undefined);
-        this.#dispatchRequestParent();
-    }
-    #destroyParentObserver() {
-        this.#parentObserver?.disconnect();
-        this.#parentObserver = undefined;
+    return this.#shadowRootHost;
+  }
+  getParentNodeForObserver() {
+    const parent = this.parentNode;
+    if (parent) return parent;
+    return parent.host ?? parent;
+  }
+  connectedCallback() {
+    this.#shadowRootHostNeedsUpdate = true;
+    this.addEventListener("slotchange", this.#onSlotChange, { capture: false, passive: false });
+    this.addEventListener(RequestEntParentEventName, this.#onRequestParent, { capture: false, passive: false });
+    this.#setupViewComponentEffect();
+    beQuiet(() => this.#updateTokenValue());
+    beQuiet(() => this.#updateForwardCustomEventsValue());
+    if (this.componentContext == null) {
+      this.componentContext$.set(ComponentContext.get(this.ns));
     }
-    attributeChangedCallback(name) {
-        super.attributeChangedCallback(name);
-        if (name === ATTR_TOKEN) {
-            this.#updateTokenValue();
-        }
-        else if (name === ATTR_FORWARD_CUSTOM_EVENTS) {
-            this.#updateForwardCustomEventsValue();
+    this.#dispatchRequestParent();
+    this.componentContext?.dispatchReRequestParentRoots();
+    this.#createParentObserver();
+    this.syncShadowObjects();
+  }
+  #createParentObserver() {
+    this.#destroyParentObserver();
+    const parent = this.getParentNodeForObserver();
+    if (parent) {
+      this.#parentObserver = new MutationObserver((mutations, _observer) => {
+        for (const { target, removedNodes } of mutations) {
+          if (target === parent) {
+            for (const node of removedNodes) {
+              if (node === this) {
+                this.#destroyParentObserver();
+                this.onParentChanged(this.getParentNodeForObserver(), parent);
+                break;
+              }
+            }
+          }
         }
+      });
+      this.#parentObserver.observe(parent, { childList: true, subtree: false, attributes: false });
     }
-    disconnectedCallback() {
-        this.#shadowRootHostNeedsUpdate = true;
-        this.#destroyParentObserver();
-        this.removeEventListener('slotchange', this.#onSlotChange, { capture: false });
-        this.removeEventListener(RequestEntParentEventName, this.#onRequestParent, { capture: false });
-        this.#setParent(undefined);
-        this.componentContext$.set(undefined);
-        this.syncShadowObjects();
-        this.#destroyViewComponentEffect();
+  }
+  onParentChanged(_newParent, _oldParent) {
+    this.#setParent(void 0);
+    this.#dispatchRequestParent();
+  }
+  #destroyParentObserver() {
+    this.#parentObserver?.disconnect();
+    this.#parentObserver = void 0;
+  }
+  attributeChangedCallback(name) {
+    super.attributeChangedCallback(name);
+    if (name === ATTR_TOKEN) {
+      this.#updateTokenValue();
+    } else if (name === ATTR_FORWARD_CUSTOM_EVENTS) {
+      this.#updateForwardCustomEventsValue();
     }
-    #reReuestParentRoot() {
-        if (this.isConnected) {
-            this.#setParent(undefined);
-            this.#dispatchRequestParent();
-        }
+  }
+  disconnectedCallback() {
+    this.#shadowRootHostNeedsUpdate = true;
+    this.#destroyParentObserver();
+    this.removeEventListener("slotchange", this.#onSlotChange, { capture: false });
+    this.removeEventListener(RequestEntParentEventName, this.#onRequestParent, { capture: false });
+    this.#setParent(void 0);
+    this.componentContext$.set(void 0);
+    this.syncShadowObjects();
+    this.#destroyViewComponentEffect();
+  }
+  #reReuestParentRoot() {
+    if (this.isConnected) {
+      this.#setParent(void 0);
+      this.#dispatchRequestParent();
     }
-    #dispatchRequestParent() {
-        // https://pm.dartus.fr/blog/a-complete-guide-on-shadow-dom-and-event-propagation/
-        this.dispatchEvent(new CustomEvent(RequestEntParentEventName, {
-            bubbles: true,
-            composed: true,
-            detail: { requester: this },
-        }));
+  }
+  #dispatchRequestParent() {
+    this.dispatchEvent(
+      new CustomEvent(RequestEntParentEventName, {
+        bubbles: true,
+        composed: true,
+        detail: { requester: this }
+      })
+    );
+  }
+  #unsubscribeFromParent;
+  #setParent(parent) {
+    if (this.entParentNode === parent) return;
+    if (this.entParentNode) {
+      this.entParentNode.removeEventListener(ReRequestEntParentEventName, this.#onReRequestParent, { capture: false });
     }
-    #unsubscribeFromParent;
-    #setParent(parent) {
-        if (this.entParentNode === parent)
-            return;
-        if (this.entParentNode) {
-            this.entParentNode.removeEventListener(ReRequestEntParentEventName, this.#onReRequestParent, { capture: false });
-        }
-        this.entParentNode = parent;
-        if (this.entParentNode) {
-            this.entParentNode.addEventListener(ReRequestEntParentEventName, this.#onReRequestParent, {
-                capture: false,
-                passive: false,
-            });
-        }
-        this.#unsubscribeFromParent?.();
-        this.#unsubscribeFromParent = undefined;
-        if (parent) {
-            const e = createEffect(() => {
-                const vc = this.viewComponent$.get();
-                if (vc) {
-                    const parentVC = parent.viewComponent$.get();
-                    vc.parent = parentVC && parentVC.context === vc.context ? parentVC : undefined;
-                    if (vc.parent == null) {
-                        queueMicrotask(() => {
-                            this.#dispatchRequestParent();
-                        });
-                    }
-                    this.syncShadowObjects();
-                }
+    this.entParentNode = parent;
+    if (this.entParentNode) {
+      this.entParentNode.addEventListener(ReRequestEntParentEventName, this.#onReRequestParent, {
+        capture: false,
+        passive: false
+      });
+    }
+    this.#unsubscribeFromParent?.();
+    this.#unsubscribeFromParent = void 0;
+    if (parent) {
+      const e = createEffect(() => {
+        const vc = this.viewComponent$.get();
+        if (vc) {
+          const parentVC = parent.viewComponent$.get();
+          vc.parent = parentVC && parentVC.context === vc.context ? parentVC : void 0;
+          if (vc.parent == null) {
+            queueMicrotask(() => {
+              this.#dispatchRequestParent();
             });
-            this.#unsubscribeFromParent = () => e.destroy();
-        }
-        else {
-            const vc = this.viewComponent;
-            if (vc.parent) {
-                vc.parent = undefined;
-                this.syncShadowObjects();
-            }
+          }
+          this.syncShadowObjects();
         }
+      });
+      this.#unsubscribeFromParent = () => e.destroy();
+    } else {
+      const vc = this.viewComponent;
+      if (vc.parent) {
+        vc.parent = void 0;
+        this.syncShadowObjects();
+      }
     }
-    #onSlotChange;
-    #onReRequestParent;
-    #onRequestParent;
-    #updateTokenValue() {
-        if (this.hasAttribute(ATTR_TOKEN)) {
-            const token = this.getAttribute(ATTR_TOKEN)?.trim() || undefined;
-            this.token$.set(token);
-        }
+  }
+  #onSlotChange;
+  #onReRequestParent;
+  #onRequestParent;
+  #updateTokenValue() {
+    if (this.hasAttribute(ATTR_TOKEN)) {
+      const token = this.getAttribute(ATTR_TOKEN)?.trim() || void 0;
+      this.token$.set(token);
     }
-    #updateForwardCustomEventsValue() {
-        if (this.hasAttribute(ATTR_FORWARD_CUSTOM_EVENTS)) {
-            const val = this.getAttribute(ATTR_FORWARD_CUSTOM_EVENTS);
-            if (!val || val.trim().length === 0) {
-                this.forwardCustomEvents$.set(true);
-            }
-            else {
-                this.forwardCustomEvents$.set(new Set(val
-                    .split(',')
-                    .map((s) => s.trim())
-                    .filter((s) => s.length > 0)));
-            }
-        }
-        else {
-            this.forwardCustomEvents$.set(false);
-        }
+  }
+  #updateForwardCustomEventsValue() {
+    if (this.hasAttribute(ATTR_FORWARD_CUSTOM_EVENTS)) {
+      const val = this.getAttribute(ATTR_FORWARD_CUSTOM_EVENTS);
+      if (!val || val.trim().length === 0) {
+        this.forwardCustomEvents$.set(true);
+      } else {
+        this.forwardCustomEvents$.set(
+          new Set(
+            val.split(",").map((s) => s.trim()).filter((s) => s.length > 0)
+          )
+        );
+      }
+    } else {
+      this.forwardCustomEvents$.set(false);
     }
+  }
 }
-//# sourceMappingURL=ShaeEntElement.js.map
+export {
+  ShaeEntElement
+};
+//# sourceMappingURL=ShaeEntElement.js.map