mount-observer 0.1.13 → 0.1.15

package/Events.js

@@ -5,6 +5,7 @@ export const dismountEventName = 'dismount';
 export const disconnectEventName = 'disconnect';
 export const mediamatchEventName = 'mediamatch';
 export const mediaunmatchEventName = 'mediaunmatch';
+export const resolvedEventName = 'resolved';
 export class MountEvent extends Event {
     mountedElement;
     modules;
@@ -67,3 +68,11 @@ export class MediaUnmatchEvent extends Event {
         this.mountConfig = mountConfig;
     }
 }
+export class ResolvedEvent extends Event {
+    static eventName = resolvedEventName;
+    export;
+    constructor(exportValue) {
+        super(ResolvedEvent.eventName);
+        this.export = exportValue;
+    }
+}

package/Events.ts

@@ -8,6 +8,7 @@ export const dismountEventName = 'dismount';
 export const disconnectEventName = 'disconnect';
 export const mediamatchEventName = 'mediamatch';
 export const mediaunmatchEventName = 'mediaunmatch';
+export const resolvedEventName = 'resolved';
 
 export class MountEvent extends Event implements IMountEvent {
     static eventName: typeof mountEventName = mountEventName;
@@ -61,3 +62,14 @@ export class MediaUnmatchEvent extends Event {
         super(MediaUnmatchEvent.eventName);
     }
 }
+
+export class ResolvedEvent extends Event {
+    static eventName: typeof resolvedEventName = resolvedEventName;
+    
+    export: any;
+    
+    constructor(exportValue: any) {
+        super(ResolvedEvent.eventName);
+        this.export = exportValue;
+    }
+}

package/MountObserver.js

@@ -41,6 +41,7 @@ export class MountObserver extends EventTarget {
     #elementNotifiers = new WeakMap();
     #notifierMountedElements = new WeakSet();
     #subObservers;
+    #whenDefinedResolved = false;
     #mergeHandlerDefaults(config) {
         const doValue = config.do;
         // Only process if do is a string (single handler reference)
@@ -167,6 +168,24 @@ export class MountObserver extends EventTarget {
         // Update the init config with merged result
         this.#init = mergedConfig;
     }
+    /**
+     * Waits for custom elements to be defined before mounting.
+     * Only runs once per observer instance.
+     */
+    async #waitForWhenDefined(rootNode) {
+        // Skip if already resolved or not configured
+        if (this.#whenDefinedResolved || !this.#init.whenDefined) {
+            return;
+        }
+        // Get the custom element registry from the root node
+        const registry = rootNode.customElementRegistry || customElements;
+        // Normalize to array
+        const tagNames = arr(this.#init.whenDefined);
+        // Wait for all tags to be defined
+        await Promise.all(tagNames.map(tag => registry.whenDefined(tag)));
+        // Mark as resolved so we don't check again
+        this.#whenDefinedResolved = true;
+    }
     /**
      * Creates and initializes sub-observers from the `with` property.
      * Each sub-observer observes the same root node as the parent.
@@ -272,6 +291,8 @@ export class MountObserver extends EventTarget {
             this.#assignTentatively = assignTentatively;
         }
         this.#rootNode = new WeakRef(observedNode);
+        // Wait for whenDefined if specified (must be first check)
+        await this.#waitForWhenDefined(observedNode);
         // Create sub-observers from `with` property
         await this.#createSubObservers(observedNode);
         // Set up media query if specified (needs rootNode to be set first)

package/MountObserver.ts

@@ -65,6 +65,7 @@ export class MountObserver<TKeys extends string = string> extends EventTarget im
     #elementNotifiers = new WeakMap<Element, EventTarget>();
     #notifierMountedElements = new WeakSet<Element>();
     #subObservers: Map<string, MountObserver> | undefined;
+    #whenDefinedResolved = false;
 
     #mergeHandlerDefaults(config: MountConfig): MountConfig {
         const doValue = config.do;
@@ -220,6 +221,29 @@ export class MountObserver<TKeys extends string = string> extends EventTarget im
         this.#init = mergedConfig;
     }
 
+    /**
+     * Waits for custom elements to be defined before mounting.
+     * Only runs once per observer instance.
+     */
+    async #waitForWhenDefined(rootNode: Node): Promise<void> {
+        // Skip if already resolved or not configured
+        if (this.#whenDefinedResolved || !this.#init.whenDefined) {
+            return;
+        }
+        
+        // Get the custom element registry from the root node
+        const registry = (rootNode as any).customElementRegistry || customElements;
+        
+        // Normalize to array
+        const tagNames = arr(this.#init.whenDefined);
+        
+        // Wait for all tags to be defined
+        await Promise.all(tagNames.map(tag => registry.whenDefined(tag)));
+        
+        // Mark as resolved so we don't check again
+        this.#whenDefinedResolved = true;
+    }
+
     /**
      * Creates and initializes sub-observers from the `with` property.
      * Each sub-observer observes the same root node as the parent.
@@ -379,6 +403,9 @@ export class MountObserver<TKeys extends string = string> extends EventTarget im
 
         this.#rootNode = new WeakRef(observedNode);
 
+        // Wait for whenDefined if specified (must be first check)
+        await this.#waitForWhenDefined(observedNode);
+
         // Create sub-observers from `with` property
         await this.#createSubObservers(observedNode);