mount-observer 0.1.18 → 0.1.20

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/index.js

@@ -8,6 +8,7 @@ export { DefineCustomElementHandler, DefineScopedCustomElementHandler } from './
 export { EnhanceMountedElementHandler } from './handlers/EnhanceMountedElement.js';
 export { ScriptExportHandler } from './handlers/ScriptExport.js';
 export { MountObserverScriptHandler } from './handlers/MountObserverScript.js';
+export { EMCScriptHandler } from './handlers/EMCScript.js';
 export { HoistTemplateHandler } from './handlers/HoistTemplate.js';
 export { HTMLIncludeHandler } from './handlers/HTMLInclude.js';
 export { upShadowSearch } from './upShadowSearch.js';
@@ -19,5 +20,6 @@ import './handlers/EnhanceMountedElement.js';
 import './handlers/GenIds.js'; // Temporarily disabled due to missing dependency
 import './handlers/ScriptExport.js';
 import './handlers/MountObserverScript.js';
+import './handlers/EMCScript.js';
 import './handlers/HoistTemplate.js';
 import './handlers/HTMLInclude.js';

package/index.ts

@@ -8,6 +8,7 @@ export { DefineCustomElementHandler, DefineScopedCustomElementHandler } from './
 export { EnhanceMountedElementHandler } from './handlers/EnhanceMountedElement.js';
 export { ScriptExportHandler } from './handlers/ScriptExport.js';
 export { MountObserverScriptHandler } from './handlers/MountObserverScript.js';
+export { EMCScriptHandler } from './handlers/EMCScript.js';
 export { HoistTemplateHandler } from './handlers/HoistTemplate.js';
 export { HTMLIncludeHandler } from './handlers/HTMLInclude.js';
 export { upShadowSearch } from './upShadowSearch.js';
@@ -19,7 +20,8 @@ export type {
     DoCallback,
     ImportSpec,
     IMountEvent,
-    IDismountEvent
+    IDismountEvent,
+    EMC
 } from './types/mount-observer/types.js';
 export {
     mountEventName,
@@ -37,6 +39,6 @@ import './handlers/EnhanceMountedElement.js';
 import './handlers/GenIds.js'; // Temporarily disabled due to missing dependency
 import './handlers/ScriptExport.js';
 import './handlers/MountObserverScript.js';
+import './handlers/EMCScript.js';
 import './handlers/HoistTemplate.js';
 import './handlers/HTMLInclude.js';
-

package/package.json

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

package/types/assign-gingerly/types.d.ts

@@ -30,35 +30,40 @@ export type Spawner<T = any, Obj = Element> = {
   canSpawn?: (obj: any, ctx?: SpawnContext<T>) => boolean;
 }
 
+export interface EnhancementConfigBase<T = any> {
+    //Allow unprefixed attributes for custom elements and SVG when element tag name matches pattern
+    allowUnprefixed?: string | RegExp;
+    
+    //keys of type symbol are used for dependency injection
+    //and are used by assign-gingerly
+    symlinks?: { [key: symbol]: keyof T };
+    
+    lifecycleKeys?: 
+    | true  // Use standard names: "dispose" method, "resolved" property/event
+    | {
+        dispose?: string | symbol,
+        resolved?: string | symbol
+      }
+    //used by mount-observer, not by assign-gingerly
+    //impossible to polyfill, but will always be disposed
+    //when oElement's reference count goes to zero
+    disposeOn?: DisposeEvent | DisposeEvent[]
+}
+
 /**
  * Configuration for enhancing elements with class instances
  * Defines how to spawn and initialize enhancement classes
  */
-export interface EnhancementConfig<T = any, Obj = Element> {
+export interface EnhancementConfig<T = any, Obj = Element> extends EnhancementConfigBase<T> {
   
   spawn: Spawner<T, Obj>;
   
   //Applicable to passing in the initVals during the spawn lifecycle event
   withAttrs?: AttrPatterns<T>;
   
-  //Allow unprefixed attributes for custom elements and SVG when element tag name matches pattern
-  allowUnprefixed?: string | RegExp;
-  
-  //keys of type symbol are used for dependency injection
-  //and are used by assign-gingerly
-  symlinks?: { [key: symbol]: keyof T };
+
   //only applicable when spawning from a DOM Element reference
   enhKey?: EnhKey;
-  lifecycleKeys?: 
-    | true  // Use standard names: "dispose" method, "resolved" property/event
-    | {
-        dispose?: string | symbol,
-        resolved?: string | symbol
-      }
-  //used by mount-observer, not by assign-gingerly
-  //impossible to polyfill, but will always be disposed
-  //when oElement's reference count goes to zero
-  disposeOn?: DisposeEvent | DisposeEvent[]
     
 }
 

package/types/mount-observer/types.d.ts

@@ -1,5 +1,7 @@
 // Core types for MountObserver v2 - Polyfill Supported Scenario I
 
+import {Spawner, EnhancementConfigBase, EnhKey} from '../assign-gingerly/types';
+
 export type Constructor = new (...args: any[]) => any;
 
 export type EventConstructor = {new(...args: any[]): Event};
@@ -25,6 +27,26 @@ export interface ConnectionCondition {
     rttMax?: number;
 }
 
+/**
+ * Configuration for enhancing elements with class instances
+ * Defines how to spawn and initialize enhancement classes
+ */
+export interface EnhConfig<T = any, Obj = Element> extends EnhancementConfigBase<T, Obj> {
+  
+    // bare import specifier path
+    spawn: string;
+  
+    enhKey: EnhKey;
+
+    //Applicable to passing in the initVals during the spawn lifecycle event
+    withAttrs?: AttrPatterns<T>;
+    
+}
+
+
+
+
+
 /**
  * Configuration object for MountObserver that defines what elements to observe and how to handle them.
  * All `where*` properties form an AND condition - elements must satisfy ALL specified conditions to mount.
@@ -218,6 +240,15 @@ export interface MountConfig<TKeys extends string = string> {
      * ```
      */
     with?: {[K in TKeys]: MountConfig};
+
+    
+}
+
+export interface EMC<
+    TKeys extends string = string,
+    T = any, Obj = Element
+> extends MountConfig<TKeys>{
+    enhConfig: EnhConfig<T, Obj>
 }