mount-observer 0.1.19 → 0.1.20

package/handlers/HTMLInclude.js

@@ -333,57 +333,58 @@ export class HTMLIncludeHandler extends EvtRt {
         if (sourceRootNode === templateRootNode) {
             return;
         }
-        // Find all MOSE scripts in the source element
-        const sourceScripts = sourceElement.querySelectorAll('script[type="mountobserver"]');
-        if (sourceScripts.length === 0) {
-            return;
-        }
-        // Find all MOSE scripts in the clone
-        let cloneScripts;
-        if (clone instanceof Element) {
-            cloneScripts = clone.querySelectorAll('script[type="mountobserver"]');
-        }
-        else if (clone instanceof DocumentFragment) {
-            cloneScripts = clone.querySelectorAll('script[type="mountobserver"]');
-        }
-        else {
-            return;
-        }
-        // Copy exports from source scripts to cloned scripts (matching by ID)
-        for (let i = 0; i < sourceScripts.length; i++) {
-            const sourceScript = sourceScripts[i];
-            const sourceId = sourceScript.getAttribute('id');
-            if (!sourceId)
+        const types = ['mountobserver', 'emc'];
+        for (const t of types) {
+            const qry = `script[type="${t}"]`;
+            // Find all MOSE scripts in the source element
+            const sourceScripts = sourceElement.querySelectorAll(qry);
+            if (sourceScripts.length === 0) {
                 continue;
-            // Find matching clone script by ID
-            const cloneScript = Array.from(cloneScripts).find(s => s.getAttribute('id') === sourceId);
-            if (!cloneScript)
+            }
+            // Find all MOSE scripts in the clone
+            let cloneScripts;
+            if (clone instanceof Element || clone instanceof DocumentFragment) {
+                cloneScripts = clone.querySelectorAll('script[type="mountobserver"]');
+            }
+            else {
                 continue;
-            // Check if source script has export
-            let sourceExport = sourceScript.export;
-            if (!sourceExport) {
-                // Wait for the source script to resolve
-                try {
-                    // Create a promise that waits for the resolved event
-                    const event = await new Promise((resolve, reject) => {
-                        const timeout = setTimeout(() => {
-                            reject(new Error('Timeout'));
-                        }, 5000);
-                        sourceScript.addEventListener('resolved', (e) => {
-                            clearTimeout(timeout);
-                            resolve(e);
-                        }, { once: true });
-                    });
-                    sourceExport = event.export;
-                }
-                catch (error) {
-                    console.warn(`HTMLInclude: Timeout waiting for MOSE script #${sourceId} to resolve`);
+            }
+            // Copy exports from source scripts to cloned scripts (matching by ID)
+            for (let i = 0; i < sourceScripts.length; i++) {
+                const sourceScript = sourceScripts[i];
+                const sourceId = sourceScript.getAttribute('id');
+                if (!sourceId)
                     continue;
+                // Find matching clone script by ID
+                const cloneScript = Array.from(cloneScripts).find(s => s.getAttribute('id') === sourceId);
+                if (!cloneScript)
+                    continue;
+                // Check if source script has export
+                let sourceExport = sourceScript.export;
+                if (!sourceExport) {
+                    // Wait for the source script to resolve
+                    try {
+                        // Create a promise that waits for the resolved event
+                        const event = await new Promise((resolve, reject) => {
+                            const timeout = setTimeout(() => {
+                                reject(new Error('Timeout'));
+                            }, 5000);
+                            sourceScript.addEventListener('resolved', (e) => {
+                                clearTimeout(timeout);
+                                resolve(e);
+                            }, { once: true });
+                        });
+                        sourceExport = event.export;
+                    }
+                    catch (error) {
+                        console.warn(`HTMLInclude: Timeout waiting for MOSE script #${sourceId} to resolve`);
+                        continue;
+                    }
+                }
+                // Copy export to cloned script
+                if (sourceExport) {
+                    cloneScript.export = sourceExport;
                 }
-            }
-            // Copy export to cloned script
-            if (sourceExport) {
-                cloneScript.export = sourceExport;
             }
         }
     }

package/handlers/HTMLInclude.ts

@@ -31,19 +31,19 @@ function toQuery(el: Element): string {
     // Get the list of attributes to exclude from the selector
     const insertAttrs = el.getAttribute('-i');
     const excludeAttrs = new Set(['-i']); // Always exclude -i itself
-    
+
     if (insertAttrs !== null) {
         const attrs = splitRefs(insertAttrs);
         attrs.forEach(attr => excludeAttrs.add(attr));
     }
-    
+
     const classes = Array.from(el.classList).map(c => `.${c}`).join('');
     const parts = Array.from(el.part).map(p => `[part~="${p}"]`).join('');
     const attributes = Array.from(el.attributes)
         .filter(attr => !excludeAttrs.has(attr.name))
         .map(attr => `[${attr.name}="${attr.value}"]`)
         .join('');
-    const {localName} = el;
+    const { localName } = el;
     return `${localName}${classes}${parts}${attributes}`;
 }
 
@@ -51,19 +51,19 @@ function toQuery(el: Element): string {
  * Prepares an element for insertion by extracting its children and insertion attributes.
  * Returns a DocumentFragment with the children and a map of attributes to insert.
  */
-function prepareForInsertion(el: Element): { fragment: DocumentFragment, attributeMap: {[key: string]: string} | null } {
+function prepareForInsertion(el: Element): { fragment: DocumentFragment, attributeMap: { [key: string]: string } | null } {
     const fragment = new DocumentFragment();
     const clone = el.cloneNode(true) as Element;
-    
+
     // Move all children to the fragment
     while (clone.firstChild) {
         fragment.appendChild(clone.firstChild);
     }
-    
+
     // Check for -i attribute which specifies which attributes to insert
     const insertAttrs = el.getAttribute('-i');
-    let attributeMap: {[key: string]: string} | null = null;
-    
+    let attributeMap: { [key: string]: string } | null = null;
+
     if (insertAttrs !== null) {
         const attrs = splitRefs(insertAttrs);
         attributeMap = {};
@@ -74,7 +74,7 @@ function prepareForInsertion(el: Element): { fragment: DocumentFragment, attribu
             }
         }
     }
-    
+
     return { fragment, attributeMap };
 }
 
@@ -84,14 +84,14 @@ function prepareForInsertion(el: Element): { fragment: DocumentFragment, attribu
 function applyInsertion(
     targetElement: Element,
     sourceFragment: DocumentFragment,
-    attributeMap: {[key: string]: string} | null
+    attributeMap: { [key: string]: string } | null
 ): void {
     // Clone the fragment so it can be reused
     const fragmentClone = sourceFragment.cloneNode(true) as DocumentFragment;
-    
+
     // Replace all children of the target element
     targetElement.replaceChildren(fragmentClone);
-    
+
     // Update attributes if specified
     if (attributeMap !== null) {
         for (const key in attributeMap) {
@@ -151,7 +151,7 @@ function applyInsertion(
 export class HTMLIncludeHandler extends EvtRt {
     static matching = 'template[src^="#"]';
     static whereInstanceOf = HTMLTemplateElement;
-    
+
     async mount(mountedElement: Element): Promise<void> {
         try {
             const template = mountedElement as HTMLTemplateElement;
@@ -210,7 +210,7 @@ export class HTMLIncludeHandler extends EvtRt {
                     console.warn(`HTMLInclude: ${error}`);
                     return;
                 }
-                
+
                 // Optimization 4: Copy MOSE exports if cloning live element from different root
                 if (isLiveElement) {
                     await this.copyMoseExports(sourceElement, clone, rootNode);
@@ -278,27 +278,27 @@ export class HTMLIncludeHandler extends EvtRt {
         }
     }
 
-    
+
     /**
      * Gets a cached element reference if available and still valid.
      */
     getCachedElement(rootNode: Node, id: string): Element | null {
         const rootCache = idCache.get(rootNode);
         if (!rootCache) return null;
-        
+
         const weakRef = rootCache.get(id);
         if (!weakRef) return null;
-        
+
         const element = weakRef.deref();
         if (!element) {
             // Element was garbage collected, remove from cache
             rootCache.delete(id);
             return null;
         }
-        
+
         return element;
     }
-    
+
     /**
      * Caches an element reference for future lookups.
      */
@@ -310,7 +310,7 @@ export class HTMLIncludeHandler extends EvtRt {
         }
         rootCache.set(id, new WeakRef(element));
     }
-    
+
     /**
      * Processes matching insertions by finding elements in the cloned content that match
      * the selectors from template children and applying insertions to them.
@@ -320,13 +320,13 @@ export class HTMLIncludeHandler extends EvtRt {
         for (const templateChild of templateChildren) {
             // Generate a selector from the template child
             const selector = toQuery(templateChild);
-            
+
             // Prepare the insertion content and attribute map
             const { fragment, attributeMap } = prepareForInsertion(templateChild);
-            
+
             // Find all matching elements in the cloned content
             let matchingElements: Element[] = [];
-            
+
             if (clonedContent instanceof Element) {
                 // Check if the cloned element itself matches
                 if (clonedContent.matches(selector)) {
@@ -339,14 +339,14 @@ export class HTMLIncludeHandler extends EvtRt {
                 // Search within the fragment
                 matchingElements = Array.from(clonedContent.querySelectorAll(selector));
             }
-            
+
             // Apply insertion to each matching element
             for (const matchingElement of matchingElements) {
                 applyInsertion(matchingElement, fragment, attributeMap);
             }
         }
     }
-    
+
     /**
      * Clones content from the source element.
      * Priority: remoteContent (hoisted templates) > content (templates) > element itself
@@ -362,88 +362,93 @@ export class HTMLIncludeHandler extends EvtRt {
                 console.warn('HTMLInclude: Failed to access remoteContent', e);
             }
         }
-        
+
         // Check for content property (regular templates)
         if (sourceElement instanceof HTMLTemplateElement && sourceElement.content) {
             return { clone: sourceElement.content.cloneNode(true), isLiveElement: false };
         }
-        
+
         // Clone the element itself (live DOM element)
         return { clone: sourceElement.cloneNode(true), isLiveElement: true };
     }
-    
+
     /**
      * Copies MOSE script exports from source to cloned scripts.
      * This optimization avoids re-parsing JSON when cloning MOSE scripts across shadow boundaries.
      */
     async copyMoseExports(sourceElement: Element, clone: Node, templateRootNode: Node): Promise<void> {
         const sourceRootNode = sourceElement.getRootNode();
-        
+
         // Only process if source and template are in different root nodes
         if (sourceRootNode === templateRootNode) {
             return;
         }
-        
-        // Find all MOSE scripts in the source element
-        const sourceScripts = sourceElement.querySelectorAll('script[type="mountobserver"]');
-        
-        if (sourceScripts.length === 0) {
-            return;
-        }
-        
-        // Find all MOSE scripts in the clone
-        let cloneScripts: NodeListOf<Element>;
-        if (clone instanceof Element) {
-            cloneScripts = clone.querySelectorAll('script[type="mountobserver"]');
-        } else if (clone instanceof DocumentFragment) {
-            cloneScripts = clone.querySelectorAll('script[type="mountobserver"]');
-        } else {
-            return;
-        }
-        
-        // Copy exports from source scripts to cloned scripts (matching by ID)
-        for (let i = 0; i < sourceScripts.length; i++) {
-            const sourceScript = sourceScripts[i] as HTMLScriptElement;
-            const sourceId = sourceScript.getAttribute('id');
-            
-            if (!sourceId) continue;
-            
-            // Find matching clone script by ID
-            const cloneScript = Array.from(cloneScripts).find(
-                s => s.getAttribute('id') === sourceId
-            ) as HTMLScriptElement | undefined;
-            
-            if (!cloneScript) continue;
-            
-            // Check if source script has export
-            let sourceExport = (sourceScript as any).export;
-            
-            if (!sourceExport) {
-                // Wait for the source script to resolve
-                try {
-                    // Create a promise that waits for the resolved event
-                    const event = await new Promise<Event>((resolve, reject) => {
-                        const timeout = setTimeout(() => {
-                            reject(new Error('Timeout'));
-                        }, 5000);
-                        
-                        sourceScript.addEventListener('resolved', (e) => {
-                            clearTimeout(timeout);
-                            resolve(e);
-                        }, { once: true });
-                    });
-                    sourceExport = (event as any).export;
-                } catch (error) {
-                    console.warn(`HTMLInclude: Timeout waiting for MOSE script #${sourceId} to resolve`);
-                    continue;
-                }
+
+        const types = ['mountobserver', 'emc'];
+
+        for (const t of types) {
+            const qry = `script[type="${t}"]`;
+            // Find all MOSE scripts in the source element
+            const sourceScripts = sourceElement.querySelectorAll(qry);
+
+            if (sourceScripts.length === 0) {
+                continue;
             }
-            
-            // Copy export to cloned script
-            if (sourceExport) {
-                (cloneScript as any).export = sourceExport;
+
+            // Find all MOSE scripts in the clone
+            let cloneScripts: NodeListOf<Element>;
+            if (clone instanceof Element || clone instanceof DocumentFragment) {
+                cloneScripts = clone.querySelectorAll('script[type="mountobserver"]');
+            } else {
+                continue;
+            }
+
+            // Copy exports from source scripts to cloned scripts (matching by ID)
+            for (let i = 0; i < sourceScripts.length; i++) {
+                const sourceScript = sourceScripts[i] as HTMLScriptElement;
+                const sourceId = sourceScript.getAttribute('id');
+
+                if (!sourceId) continue;
+
+                // Find matching clone script by ID
+                const cloneScript = Array.from(cloneScripts).find(
+                    s => s.getAttribute('id') === sourceId
+                ) as HTMLScriptElement | undefined;
+
+                if (!cloneScript) continue;
+
+                // Check if source script has export
+                let sourceExport = (sourceScript as any).export;
+
+                if (!sourceExport) {
+                    // Wait for the source script to resolve
+                    try {
+                        // Create a promise that waits for the resolved event
+                        const event = await new Promise<Event>((resolve, reject) => {
+                            const timeout = setTimeout(() => {
+                                reject(new Error('Timeout'));
+                            }, 5000);
+
+                            sourceScript.addEventListener('resolved', (e) => {
+                                clearTimeout(timeout);
+                                resolve(e);
+                            }, { once: true });
+                        });
+                        sourceExport = (event as any).export;
+                    } catch (error) {
+                        console.warn(`HTMLInclude: Timeout waiting for MOSE script #${sourceId} to resolve`);
+                        continue;
+                    }
+                }
+
+                // Copy export to cloned script
+                if (sourceExport) {
+                    (cloneScript as any).export = sourceExport;
+                }
             }
         }
+
+
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",