mount-observer 0.1.8 → 0.1.10

package/ElementMountExtension.ts

@@ -6,13 +6,12 @@
 import { MountObserver } from './MountObserver.js';
 import { getRootRegistryContainer } from './getRootRegistryContainer.js';
 import type { MountConfig, MountObserverOptions } from './types/mount-observer/types.js';
-import type { EnhancementConfig } from './types/assign-gingerly/types.js';
 
 declare global {
     interface Element {
         mount<T extends Element>(
             this: T,
-            config: MountConfig | EnhancementConfig[], 
+            config: MountConfig, 
             options?: MountObserverOptions
         ): Promise<T>;
     }
@@ -28,7 +27,7 @@ declare global {
 Object.defineProperty(Element.prototype, 'mount', {
     value: async function <T extends Element>(
         this: T,
-        config: MountConfig | EnhancementConfig[], 
+        config: MountConfig, 
         options: MountObserverOptions = {}
     ): Promise<T> {
         const scope = options.scope ?? 'registry';

package/EnhanceMountedElementHandler.js

@@ -0,0 +1,82 @@
+import { EvtRt } from './EvtRt.js';
+/**
+ * Handler for automatically enhancing mounted elements using assign-gingerly.
+ * Searches the first imported module for an export with a "spawn" property
+ * and uses element.enh.get() to spawn the enhancement.
+ */
+export class EnhanceMountedElementHandler extends EvtRt {
+    mount(mountedElement, MountConfig, context) {
+        // Check if modules are specified
+        if (!context.modules || context.modules.length === 0) {
+            throw new Error('Must specify an ES Module with import property');
+        }
+        const module = context.modules[0];
+        // Find registry item (object with spawn property)
+        const registryItem = this.findRegistryItem(module);
+        if (!registryItem) {
+            throw new Error('No registry item found in module. Expected an export with a "spawn" property.');
+        }
+        // Validate spawn is a constructor
+        if (typeof registryItem.spawn !== 'function') {
+            throw new Error('Registry item "spawn" property must be a constructor function');
+        }
+        // Spawn the enhancement
+        this.spawnEnhancement(mountedElement, registryItem, context);
+    }
+    /**
+     * Spawn the enhancement using element.enh.get().
+     * Polyfills customElementRegistry if needed for browsers without scoped registry support.
+     */
+    async spawnEnhancement(element, registryItem, context) {
+        // Import assign-gingerly object-extension to enable enh property
+        await import('assign-gingerly/object-extension.js');
+        // Polyfill element.customElementRegistry if it doesn't exist (for browsers without scoped registries)
+        if (!element.customElementRegistry) {
+            Object.defineProperty(element, 'customElementRegistry', {
+                value: customElements,
+                writable: true,
+                enumerable: false,
+                configurable: true
+            });
+        }
+        // Use element.enh.get() to spawn the enhancement
+        const enh = element.enh;
+        if (!enh || typeof enh.get !== 'function') {
+            throw new Error('Element does not have enh.get() method. Make sure assign-gingerly/object-extension.js is loaded.');
+        }
+        enh.get(registryItem, context);
+    }
+    /**
+     * Find a registry item in the module exports.
+     * A registry item is an object with a "spawn" property.
+     * @param module - The imported module
+     * @returns The registry item or null if not found
+     */
+    findRegistryItem(module) {
+        // Check default export first
+        if (module.default && this.isRegistryItem(module.default)) {
+            return module.default;
+        }
+        // Search all exports for a registry item
+        const registryItems = Object.values(module)
+            .filter(exp => this.isRegistryItem(exp));
+        if (registryItems.length === 0) {
+            return null;
+        }
+        if (registryItems.length > 1) {
+            throw new Error('More than one registry item found in module. Expected exactly one export with a "spawn" property.');
+        }
+        return registryItems[0];
+    }
+    /**
+     * Check if an export is a registry item (has a spawn property).
+     * @param exp - The export to check
+     * @returns True if the export is a registry item
+     */
+    isRegistryItem(exp) {
+        return exp !== null
+            && typeof exp === 'object'
+            && 'spawn' in exp
+            && typeof exp.spawn === 'function';
+    }
+}

package/EnhanceMountedElementHandler.ts

@@ -0,0 +1,99 @@
+import { EvtRt } from './EvtRt.js';
+import { MountConfig, MountContext } from './types/mount-observer/types.js';
+
+/**
+ * Handler for automatically enhancing mounted elements using assign-gingerly.
+ * Searches the first imported module for an export with a "spawn" property
+ * and uses element.enh.get() to spawn the enhancement.
+ */
+export class EnhanceMountedElementHandler extends EvtRt {
+    mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext): void {
+        // Check if modules are specified
+        if (!context.modules || context.modules.length === 0) {
+            throw new Error('Must specify an ES Module with import property');
+        }
+        
+        const module = context.modules[0];
+        
+        // Find registry item (object with spawn property)
+        const registryItem = this.findRegistryItem(module);
+        
+        if (!registryItem) {
+            throw new Error('No registry item found in module. Expected an export with a "spawn" property.');
+        }
+        
+        // Validate spawn is a constructor
+        if (typeof registryItem.spawn !== 'function') {
+            throw new Error('Registry item "spawn" property must be a constructor function');
+        }
+        
+        // Spawn the enhancement
+        this.spawnEnhancement(mountedElement, registryItem, context);
+    }
+    
+    /**
+     * Spawn the enhancement using element.enh.get().
+     * Polyfills customElementRegistry if needed for browsers without scoped registry support.
+     */
+    private async spawnEnhancement(element: Element, registryItem: any, context: MountContext): Promise<void> {
+        // Import assign-gingerly object-extension to enable enh property
+        await import('assign-gingerly/object-extension.js');
+        
+        // Polyfill element.customElementRegistry if it doesn't exist (for browsers without scoped registries)
+        if (!(element as any).customElementRegistry) {
+            Object.defineProperty(element, 'customElementRegistry', {
+                value: customElements,
+                writable: true,
+                enumerable: false,
+                configurable: true
+            });
+        }
+        
+        // Use element.enh.get() to spawn the enhancement
+        const enh = (element as any).enh;
+        if (!enh || typeof enh.get !== 'function') {
+            throw new Error('Element does not have enh.get() method. Make sure assign-gingerly/object-extension.js is loaded.');
+        }
+        
+        enh.get(registryItem, context);
+    }
+    
+    /**
+     * Find a registry item in the module exports.
+     * A registry item is an object with a "spawn" property.
+     * @param module - The imported module
+     * @returns The registry item or null if not found
+     */
+    private findRegistryItem(module: any): any | null {
+        // Check default export first
+        if (module.default && this.isRegistryItem(module.default)) {
+            return module.default;
+        }
+        
+        // Search all exports for a registry item
+        const registryItems = Object.values(module)
+            .filter(exp => this.isRegistryItem(exp));
+        
+        if (registryItems.length === 0) {
+            return null;
+        }
+        
+        if (registryItems.length > 1) {
+            throw new Error('More than one registry item found in module. Expected exactly one export with a "spawn" property.');
+        }
+        
+        return registryItems[0];
+    }
+    
+    /**
+     * Check if an export is a registry item (has a spawn property).
+     * @param exp - The export to check
+     * @returns True if the export is a registry item
+     */
+    private isRegistryItem(exp: any): boolean {
+        return exp !== null 
+            && typeof exp === 'object' 
+            && 'spawn' in exp 
+            && typeof exp.spawn === 'function';
+    }
+}

package/MountObserver.js

@@ -35,21 +35,10 @@ export class MountObserver extends EventTarget {
     #notifierMountedElements = new WeakSet();
     constructor(config, options = {}) {
         super();
-        // Handle array shorthand - convert EnhancementConfig[] to MountConfig
-        let init;
-        if (Array.isArray(config)) {
-            init = {
-                matching: '*', // Match all elements, let withAttrs do the filtering
-                enhancementConfig: config
-            };
-        }
-        else {
-            init = config;
-        }
-        this.#init = init;
+        this.#init = config;
         this.#options = options;
         this.#abortController = new AbortController();
-        const { assignOnMount, assignOnDismount, stageOnMount, do: doValue, reference, loadingEagerness, import: imp } = init;
+        const { assignOnMount, assignOnDismount, stageOnMount, do: doValue, reference, loadingEagerness, import: imp } = config;
         // Make a copy of assignOnMount config using structuredClone
         if (assignOnMount !== undefined) {
             this.#asgMtSource = structuredClone(assignOnMount);
@@ -157,11 +146,6 @@ export class MountObserver extends EventTarget {
         if (this.#init.loadingEagerness === 'eager' && this.#init.import && !this.#importsLoaded) {
             await this.#loadImports();
         }
-        // Register enhancement configs if no imports (inline only)
-        // If imports exist, registration happens in #loadImports after modules are loaded
-        if (!this.#init.import && this.#init.enhancementConfig) {
-            await this.#registerEnhancementConfigs();
-        }
         // Process existing elements only if media matches
         if (this.#mediaMatches) {
             this.#processNode(rootNode);
@@ -234,94 +218,8 @@ export class MountObserver extends EventTarget {
                 }
             }
         }
-        // Register enhancement configs after imports are loaded
-        await this.#registerEnhancementConfigs();
         this.dispatchEvent(new LoadEvent(this.#modules, this.#init));
     }
-    async #registerEnhancementConfigs() {
-        const rootNode = this.#rootNode?.deref();
-        if (!rootNode || !(rootNode instanceof Element)) {
-            return;
-        }
-        const registry = rootNode.customElementRegistry?.enhancementRegistry;
-        if (!registry) {
-            return;
-        }
-        const items = registry.getItems();
-        // Collect all enhancement configs to register
-        const configsToRegister = [];
-        // First, add inline enhancementConfig(s)
-        if (this.#init.enhancementConfig) {
-            const inlineConfigs = arr(this.#init.enhancementConfig);
-            configsToRegister.push(...inlineConfigs);
-        }
-        // Then, add referenced enhancementConfig(s) from imported modules
-        if (this.#importsLoaded && this.#init.reference !== undefined) {
-            const references = arr(this.#init.reference);
-            for (const index of references) {
-                const module = this.#modules[index];
-                if (module && module.enhancementConfig !== undefined) {
-                    const referencedConfigs = arr(module.enhancementConfig);
-                    configsToRegister.push(...referencedConfigs);
-                }
-            }
-        }
-        // Register each config if not already registered (using reference equality)
-        for (const config of configsToRegister) {
-            if (!items.includes(config)) {
-                registry.push(config);
-            }
-        }
-    }
-    /**
-     * Resolves template variables in a string recursively
-     * @param template - Template string with ${var} placeholders
-     * @param patterns - The patterns object containing variable values
-     * @returns Resolved string
-     */
-    #resolveAttrTemplate(template, patterns) {
-        return template.replace(/\$\{(\w+)\}/g, (match, varName) => {
-            const value = patterns[varName];
-            if (value === undefined) {
-                throw new Error(`Undefined template variable: ${varName}`);
-            }
-            if (typeof value === 'string') {
-                // Recursively resolve
-                return this.#resolveAttrTemplate(value, patterns);
-            }
-            return String(value);
-        });
-    }
-    /**
-     * Checks if element has attribute with enh- prefix handling
-     * @param element - The element to check
-     * @param attrName - The attribute name (without enh- prefix)
-     * @param allowUnprefixed - Pattern that element tag name must match to allow unprefixed attributes
-     * @returns true if element has the attribute
-     */
-    #hasAttributeWithEnhPrefix(element, attrName, allowUnprefixed) {
-        const isCustomElement = element.tagName.includes('-');
-        const isSVGElement = element instanceof SVGElement;
-        // For custom elements and SVG - strict enh- requirement
-        if (isCustomElement || isSVGElement) {
-            if (element.hasAttribute(`enh-${attrName}`)) {
-                return true;
-            }
-            // Only check unprefixed if tag name matches allowUnprefixed pattern
-            if (allowUnprefixed) {
-                const pattern = typeof allowUnprefixed === 'string'
-                    ? new RegExp(allowUnprefixed)
-                    : allowUnprefixed;
-                const tagName = element.tagName.toLowerCase();
-                if (pattern.test(tagName)) {
-                    return element.hasAttribute(attrName);
-                }
-            }
-            return false;
-        }
-        // For built-in elements - enh- is alias (check both)
-        return element.hasAttribute(`enh-${attrName}`) || element.hasAttribute(attrName);
-    }
     #processNode(node) {
         // If it's an element node, check if it matches
         if (node.nodeType === Node.ELEMENT_NODE) {
@@ -382,65 +280,6 @@ export class MountObserver extends EventTarget {
                 }
             }
         }
-        //TODO:  move to a separate file?
-        // Check withAttrs condition if specified (attribute-based matching)
-        // Check ALL enhancementConfigs (inline + referenced)
-        const enhancementConfigs = [];
-        // Add inline configs
-        if (this.#init.enhancementConfig) {
-            enhancementConfigs.push(...arr(this.#init.enhancementConfig));
-        }
-        // Add referenced configs if imports are loaded
-        if (this.#importsLoaded && this.#init.reference !== undefined) {
-            const references = arr(this.#init.reference);
-            for (const index of references) {
-                const module = this.#modules[index];
-                if (module && module.enhancementConfig !== undefined) {
-                    enhancementConfigs.push(...arr(module.enhancementConfig));
-                }
-            }
-        }
-        // Check if ANY enhancementConfig has withAttrs - if so, element must match at least ONE
-        let hasAnyWithAttrs = false;
-        let matchesAnyWithAttrs = false;
-        for (const config of enhancementConfigs) {
-            if (!config.withAttrs) {
-                continue; // Skip configs without withAttrs
-            }
-            hasAnyWithAttrs = true;
-            const withAttrs = config.withAttrs;
-            const allowUnprefixed = config.allowUnprefixed;
-            // Collect all attribute names to check for this config
-            const attrNames = [];
-            for (const key in withAttrs) {
-                // Skip base and underscore-prefixed config keys
-                if (key === 'base' || key.startsWith('_')) {
-                    continue;
-                }
-                const value = withAttrs[key];
-                if (typeof value === 'string') {
-                    // Resolve template string to get actual attribute name
-                    const attrName = this.#resolveAttrTemplate(value, withAttrs);
-                    attrNames.push(attrName);
-                }
-            }
-            // Handle base attribute specially if present
-            if ('base' in withAttrs && typeof withAttrs.base === 'string') {
-                attrNames.push(withAttrs.base);
-            }
-            // Check if element has at least ONE of the specified attributes (OR logic within config)
-            if (attrNames.length > 0) {
-                const hasAnyAttribute = attrNames.some(attrName => this.#hasAttributeWithEnhPrefix(element, attrName, allowUnprefixed));
-                if (hasAnyAttribute) {
-                    matchesAnyWithAttrs = true;
-                    break; // Found a matching config, no need to check others
-                }
-            }
-        }
-        // If any config has withAttrs but element doesn't match any of them, reject
-        if (hasAnyWithAttrs && !matchesAnyWithAttrs) {
-            return false;
-        }
         // All conditions passed
         return true;
     }
@@ -479,32 +318,6 @@ export class MountObserver extends EventTarget {
             this.#assignTentatively(element, this.#stageMtSource, { reversal });
             this.#stageReversals.set(element, reversal);
         }
-        // Spawn enhancements if configured
-        // Process inline configs first, then referenced configs
-        const enhancementConfigs = [];
-        // Add inline configs
-        if (this.#init.enhancementConfig) {
-            enhancementConfigs.push(...arr(this.#init.enhancementConfig));
-        }
-        // Add referenced configs if imports are loaded
-        if (this.#importsLoaded && this.#init.reference !== undefined) {
-            const references = arr(this.#init.reference);
-            for (const index of references) {
-                const module = this.#modules[index];
-                if (module && module.enhancementConfig !== undefined) {
-                    enhancementConfigs.push(...arr(module.enhancementConfig));
-                }
-            }
-        }
-        // Spawn each enhancement that has a spawn property
-        if (enhancementConfigs.length > 0) {
-            await import('assign-gingerly/object-extension.js');
-            for (const config of enhancementConfigs) {
-                if (config.spawn) {
-                    element.enh.get(config, context);
-                }
-            }
-        }
         // Check if notifier exists BEFORE calling do callback
         const notifierExistedBeforeDo = this.#elementNotifiers.has(element);
         // Call do callback(s) - can be string, function, or array

package/MountObserver.ts

@@ -22,7 +22,6 @@ import {
 } from './SharedMutationObserver.js';
 import { withScopePerimeter } from './withScopePerimeter.js';
 import type { assignTentatively as AssignTentativelyType } from 'assign-gingerly/assignTentatively.js';
-import type { BaseRegistry, EnhancementConfig } from './types/assign-gingerly/types.js';
 
 export class MountObserver extends EventTarget implements IMountObserver {
     // Static registry for registered handlers
@@ -58,28 +57,17 @@ export class MountObserver extends EventTarget implements IMountObserver {
     #elementNotifiers = new WeakMap<Element, EventTarget>();
     #notifierMountedElements = new WeakSet<Element>();
 
-    constructor(config: MountConfig | EnhancementConfig[], options: MountObserverOptions = {}) {
+    constructor(config: MountConfig, options: MountObserverOptions = {}) {
         super();
         
-        // Handle array shorthand - convert EnhancementConfig[] to MountConfig
-        let init: MountConfig;
-        if (Array.isArray(config)) {
-            init = {
-                matching: '*', // Match all elements, let withAttrs do the filtering
-                enhancementConfig: config
-            };
-        } else {
-            init = config;
-        }
-        
-        this.#init = init;
+        this.#init = config;
         this.#options = options;
         this.#abortController = new AbortController();
 
         const {
             assignOnMount, assignOnDismount, stageOnMount, do: doValue, reference, loadingEagerness,
             import: imp
-        } = init;
+        } = config;
         // Make a copy of assignOnMount config using structuredClone
         if (assignOnMount !== undefined) {
             this.#asgMtSource = structuredClone(assignOnMount);
@@ -218,12 +206,6 @@ export class MountObserver extends EventTarget implements IMountObserver {
             await this.#loadImports();
         }
         
-        // Register enhancement configs if no imports (inline only)
-        // If imports exist, registration happens in #loadImports after modules are loaded
-        if (!this.#init.import && this.#init.enhancementConfig) {
-            await this.#registerEnhancementConfigs();
-        }
-        
         // Process existing elements only if media matches
         if (this.#mediaMatches) {
             this.#processNode(rootNode);
@@ -310,113 +292,9 @@ export class MountObserver extends EventTarget implements IMountObserver {
             }
         }
 
-        // Register enhancement configs after imports are loaded
-        await this.#registerEnhancementConfigs();
-
         this.dispatchEvent(new LoadEvent(this.#modules, this.#init));
     }
 
-    async #registerEnhancementConfigs(): Promise<void> {
-        const rootNode = this.#rootNode?.deref();
-        if (!rootNode || !(rootNode instanceof Element)) {
-            return;
-        }
-
-        const registry = (rootNode as any).customElementRegistry?.enhancementRegistry as BaseRegistry | undefined;
-        if (!registry) {
-            return;
-        }
-
-        const items = registry.getItems();
-        
-        // Collect all enhancement configs to register
-        const configsToRegister: EnhancementConfig[] = [];
-        
-        // First, add inline enhancementConfig(s)
-        if (this.#init.enhancementConfig) {
-            const inlineConfigs = arr(this.#init.enhancementConfig);
-            configsToRegister.push(...inlineConfigs);
-        }
-        
-        // Then, add referenced enhancementConfig(s) from imported modules
-        if (this.#importsLoaded && this.#init.reference !== undefined) {
-            const references = arr(this.#init.reference);
-            
-            for (const index of references) {
-                const module = this.#modules[index];
-                if (module && module.enhancementConfig !== undefined) {
-                    const referencedConfigs = arr(module.enhancementConfig);
-                    configsToRegister.push(...referencedConfigs);
-                }
-            }
-        }
-        
-        // Register each config if not already registered (using reference equality)
-        for (const config of configsToRegister) {
-            if (!items.includes(config)) {
-                registry.push(config);
-            }
-        }
-    }
-
-    /**
-     * Resolves template variables in a string recursively
-     * @param template - Template string with ${var} placeholders
-     * @param patterns - The patterns object containing variable values
-     * @returns Resolved string
-     */
-    #resolveAttrTemplate(template: string, patterns: Record<string, any>): string {
-        return template.replace(/\$\{(\w+)\}/g, (match, varName) => {
-            const value = patterns[varName];
-            if (value === undefined) {
-                throw new Error(`Undefined template variable: ${varName}`);
-            }
-            if (typeof value === 'string') {
-                // Recursively resolve
-                return this.#resolveAttrTemplate(value, patterns);
-            }
-            return String(value);
-        });
-    }
-
-    /**
-     * Checks if element has attribute with enh- prefix handling
-     * @param element - The element to check
-     * @param attrName - The attribute name (without enh- prefix)
-     * @param allowUnprefixed - Pattern that element tag name must match to allow unprefixed attributes
-     * @returns true if element has the attribute
-     */
-    #hasAttributeWithEnhPrefix(
-        element: Element, 
-        attrName: string, 
-        allowUnprefixed?: string | RegExp
-    ): boolean {
-        const isCustomElement = element.tagName.includes('-');
-        const isSVGElement = element instanceof SVGElement;
-        
-        // For custom elements and SVG - strict enh- requirement
-        if (isCustomElement || isSVGElement) {
-            if (element.hasAttribute(`enh-${attrName}`)) {
-                return true;
-            }
-            
-            // Only check unprefixed if tag name matches allowUnprefixed pattern
-            if (allowUnprefixed) {
-                const pattern = typeof allowUnprefixed === 'string' 
-                    ? new RegExp(allowUnprefixed) 
-                    : allowUnprefixed;
-                const tagName = element.tagName.toLowerCase();
-                if (pattern.test(tagName)) {
-                    return element.hasAttribute(attrName);
-                }
-            }
-            return false;
-        }
-        
-        // For built-in elements - enh- is alias (check both)
-        return element.hasAttribute(`enh-${attrName}`) || element.hasAttribute(attrName);
-    }
-
     #processNode(node: Node): void {
         // If it's an element node, check if it matches
         if (node.nodeType === Node.ELEMENT_NODE) {
@@ -490,80 +368,7 @@ export class MountObserver extends EventTarget implements IMountObserver {
                 }
             }
         }
-        //TODO:  move to a separate file?
-        // Check withAttrs condition if specified (attribute-based matching)
-        // Check ALL enhancementConfigs (inline + referenced)
-        const enhancementConfigs: EnhancementConfig[] = [];
-        
-        // Add inline configs
-        if (this.#init.enhancementConfig) {
-            enhancementConfigs.push(...arr(this.#init.enhancementConfig));
-        }
-        
-        // Add referenced configs if imports are loaded
-        if (this.#importsLoaded && this.#init.reference !== undefined) {
-            const references = arr(this.#init.reference);
-            for (const index of references) {
-                const module = this.#modules[index];
-                if (module && module.enhancementConfig !== undefined) {
-                    enhancementConfigs.push(...arr(module.enhancementConfig));
-                }
-            }
-        }
-        
-        // Check if ANY enhancementConfig has withAttrs - if so, element must match at least ONE
-        let hasAnyWithAttrs = false;
-        let matchesAnyWithAttrs = false;
-        
-        for (const config of enhancementConfigs) {
-            if (!config.withAttrs) {
-                continue; // Skip configs without withAttrs
-            }
-            
-            hasAnyWithAttrs = true;
-            const withAttrs = config.withAttrs;
-            const allowUnprefixed = config.allowUnprefixed;
-            
-            // Collect all attribute names to check for this config
-            const attrNames: string[] = [];
-            
-            for (const key in withAttrs) {
-                // Skip base and underscore-prefixed config keys
-                if (key === 'base' || key.startsWith('_')) {
-                    continue;
-                }
-                
-                const value = withAttrs[key];
-                if (typeof value === 'string') {
-                    // Resolve template string to get actual attribute name
-                    const attrName = this.#resolveAttrTemplate(value, withAttrs);
-                    attrNames.push(attrName);
-                }
-            }
-            
-            // Handle base attribute specially if present
-            if ('base' in withAttrs && typeof withAttrs.base === 'string') {
-                attrNames.push(withAttrs.base);
-            }
-            
-            // Check if element has at least ONE of the specified attributes (OR logic within config)
-            if (attrNames.length > 0) {
-                const hasAnyAttribute = attrNames.some(attrName => 
-                    this.#hasAttributeWithEnhPrefix(element, attrName, allowUnprefixed)
-                );
-                
-                if (hasAnyAttribute) {
-                    matchesAnyWithAttrs = true;
-                    break; // Found a matching config, no need to check others
-                }
-            }
-        }
-        
-        // If any config has withAttrs but element doesn't match any of them, reject
-        if (hasAnyWithAttrs && !matchesAnyWithAttrs) {
-            return false;
-        }
-        
+
         // All conditions passed
         return true;
     }
@@ -611,36 +416,6 @@ export class MountObserver extends EventTarget implements IMountObserver {
             this.#stageReversals.set(element, reversal);
         }
 
-        // Spawn enhancements if configured
-        // Process inline configs first, then referenced configs
-        const enhancementConfigs: EnhancementConfig[] = [];
-        
-        // Add inline configs
-        if (this.#init.enhancementConfig) {
-            enhancementConfigs.push(...arr(this.#init.enhancementConfig));
-        }
-        
-        // Add referenced configs if imports are loaded
-        if (this.#importsLoaded && this.#init.reference !== undefined) {
-            const references = arr(this.#init.reference);
-            for (const index of references) {
-                const module = this.#modules[index];
-                if (module && module.enhancementConfig !== undefined) {
-                    enhancementConfigs.push(...arr(module.enhancementConfig));
-                }
-            }
-        }
-        
-        // Spawn each enhancement that has a spawn property
-        if (enhancementConfigs.length > 0) {
-            await import('assign-gingerly/object-extension.js');
-            for (const config of enhancementConfigs) {
-                if (config.spawn) {
-                    (element as any).enh.get(config, context);
-                }
-            }
-        }
-
         // Check if notifier exists BEFORE calling do callback
         const notifierExistedBeforeDo = this.#elementNotifiers.has(element);
 

package/README.md

@@ -25,9 +25,7 @@ The following features have been implemented and tested:
 - ✅ **assignOnMount**: Property assignment when elements mount
 - ✅ **assignOnDismount**: Property assignment when elements dismount
 - ✅ **stageOnMount**: Reversible property assignment (auto-restores on dismount)
-- ✅ **spawn**: Automatic enhancement spawning via assign-gingerly integration
 - ✅ **do callbacks**: Mount/dismount/disconnect/reconnect lifecycle hooks
-- ✅ **Array argument shorthand**: Pass EnhancementConfig[] directly to constructor
 - ✅ **Element mount extension**: element.mount() method for scoped registry observation
 - ✅ **Shared MutationObserver**: Efficient observer sharing across instances
 - ✅ **Code splitting**: Conditional features loaded on-demand
@@ -165,6 +163,56 @@ element.mount({
 });
 ```
 
+## Enhancing Elements with assign-gingerly
+
+The `builtIns.enhanceMountedElement` handler automatically enhances mounted elements using the [assign-gingerly](https://www.npmjs.com/package/assign-gingerly) enhancement system. This allows you to attach behavior and state to elements without subclassing.
+
+```JavaScript
+// MyEnhancement.js
+class ButtonEnhancement {
+    constructor(element, ctx, initVals) {
+        this.element = element;
+        this.ctx = ctx;
+        this.clickCount = 0;
+        
+        element.addEventListener('click', () => {
+            this.clickCount++;
+            element.setAttribute('data-clicks', this.clickCount);
+        });
+    }
+}
+
+export default {
+    spawn: ButtonEnhancement,
+    enhKey: 'buttonEnh'
+};
+
+// main.js
+import 'mount-observer/ElementMountExtension.js';
+
+document.mount({
+    matching: '.enhance-me',
+    import: './MyEnhancement.js',
+    do: 'builtIns.enhanceMountedElement'
+});
+
+// HTML
+<button class="enhance-me">Click me</button>
+
+// Access the enhancement
+const button = document.querySelector('.enhance-me');
+console.log(button.enh.buttonEnh.clickCount); // 0
+button.click();
+console.log(button.enh.buttonEnh.clickCount); // 1
+```
+
+The handler:
+1. Searches the imported module for an export with a `spawn` property (the enhancement class)
+2. Calls `element.enh.get(registryItem, context)` to spawn the enhancement
+3. Stores the enhancement instance on `element.enh[enhKey]` if an `enhKey` is provided
+
+This works with browsers that don't support scoped custom element registries by polyfilling the `customElementRegistry` property on elements.
+
 
 # Thorough Exposition Begins Here
 
@@ -414,51 +462,6 @@ This optimization ensures that with lazy loading, elements that don't match the
 
 [Implemented as [Requirement12](requirements/Done/Requirement12.md)]
 
-## Simplified API: Array Argument Shorthand
-
-For simple use cases where you just want to enhance elements based on attributes without needing the full `MountConfig` object, you can pass an array of [EnhancementConfig` objects](https://github.com/bahrus/assign-gingerly) directly to the constructor:
-
-```JavaScript
-import { MountObserver } from 'mount-observer';
-
-// Instead of wrapping in MountConfig:
-// const observer = new MountObserver({
-//     enhancementConfig: [config1, config2]
-// });
-
-// You can use the shorthand:
-const observer = new MountObserver([
-    {
-        spawn: Enhancement1,
-        enhKey: 'enh1',
-        withAttrs: {
-            base: 'data-',
-            action: '${base}action'
-        }
-    },
-    {
-        spawn: Enhancement2,
-        enhKey: 'enh2',
-        withAttrs: {
-            base: 'data-',
-            theme: '${base}theme'
-        }
-    }
-]);
-
-await observer.observe(document.body);
-```
-
-When you pass an array directly:
-- The array is automatically converted to `{ matching: '*', enhancementConfig: [...] }`
-- All elements are considered (matching: '*'), with filtering done by `withAttrs` in each config
-- This is perfect for attribute-based progressive enhancement scenarios
-- You can still use all `EnhancementConfig` features like `spawn`, `withAttrs`, `canSpawn`, etc.
-
-This "lite" API makes it easier to do the right thing by reducing boilerplate for common enhancement patterns.
-
-[Implemented as ArrayArgument requirement](requirements/Done/ArrayArgument.md).
-
 ## Element Mount Extension
 
 For even more convenience, you can use the `element.mount()` method to observe elements within their scoped custom element registry context. This is particularly useful with scoped custom element registries (Chrome 146+, latest WebKit/Safari).
@@ -473,18 +476,6 @@ await document.body.mount({
         element.classList.add('enhanced');
     }
 });
-
-// Or use the array shorthand directly
-await document.body.mount([
-    {
-        spawn: ButtonEnhancement,
-        enhKey: 'btn-enh',
-        withAttrs: {
-            base: 'data-',
-            action: '${base}action'
-        }
-    }
-]);
 ```
 
 The `mount()` method:
@@ -492,7 +483,6 @@ The `mount()` method:
 - Creates a `MountObserver` with the provided config
 - Observes the determined scope
 - Returns the element for chaining (as a Promise)
-- Accepts both `MountConfig` objects and `EnhancementConfig[]` arrays
 
 Scope options (via `options.scope`):
 - `'registry'` (default): Observes the root registry container (highest element with same customElementRegistry)
@@ -1097,231 +1087,6 @@ button.classList.remove('loading');  // Dismount: disabled restored to true (the
 
 [Implemented as [Requirement13](requirements/Done/Requirement13.md)]
 
-## Spawning enhancements with assign-gingerly integration
-
-MountObserver integrates with the [assign-gingerly](https://github.com/bahrus/assign-gingerly) enhancement system to automatically spawn enhancement instances when elements mount. This provides a powerful way to attach behaviors and functionality to elements using the enhancement registry pattern.
-
-### What is spawn?
-
-In the assign-gingerly enhancement system, `spawn` is a class constructor (not a boolean) that defines what enhancement instance to create. The `enhancementConfig` object is a registry item that gets registered with the element's enhancement registry.
-
-### Basic spawn usage
-
-```JavaScript
-// Define an enhancement class
-class ButtonEnhancement {
-   constructor(element, ctx, initVals) {
-      this.element = element;
-      this.onClick = this.onClick.bind(this);
-      element.addEventListener('click', this.onClick);
-   }
-   
-   onClick(e) {
-      console.log('Button clicked!', this.element);
-   }
-}
-
-const observer = new MountObserver({
-   matching: 'button[data-enhance]',
-   enhancementConfig: {
-      spawn: ButtonEnhancement,  // The class constructor
-      enhKey: 'buttonEnh'
-   }
-});
-observer.observe(document);
-```
-
-When an element mounts, if `enhancementConfig.spawn` is defined, MountObserver will:
-1. Import the assign-gingerly object extension module
-2. Call `element.enh.get(enhancementConfig, mountContext)` to spawn the enhancement
-3. Pass the mount context as the second parameter, making it available to the enhancement constructor
-
-### How spawn works
-
-The spawn feature leverages the `element.enh` property from assign-gingerly, which provides access to the enhancement registry. The `enhancementConfig` is a registry item with this structure:
-
-```TypeScript
-interface IBaseRegistryItem<T> {
-   spawn: {new(element?: Element, ctx?: SpawnContext<T>, initVals?: Partial<T>): T};
-   symlinks?: {[key: symbol]: keyof T};
-   enhKey?: string;
-   withAttrs?: AttrPatterns<T>;
-   canSpawn?: (obj: any, ctx?: SpawnContext<T>) => boolean;
-}
-```
-
-When you call `element.enh.get(enhancementConfig, mountContext)`:
-- If an enhancement matching the config already exists for this element, it returns the existing instance
-- If no enhancement exists, it creates a new one by calling `new enhancementConfig.spawn(element, ctx, initVals)`
-- The enhancement is registered in the element's custom element registry's enhancement registry
-- The mount context is passed to the enhancement constructor via `ctx.mountCtx`
-
-### Spawn happens once per element
-
-The spawn operation only occurs the first time an element mounts. If the element is removed and re-added to the DOM:
-- The spawn code won't run again (element already in `#processedDoForElement`)
-- The existing enhancement instance persists with the element
-- This ensures enhancements are singletons per element instance
-
-### Mount context in enhancements
-
-The mount context passed to spawned enhancements includes:
-
-```TypeScript
-interface MountContext {
-   modules: any[];        // Imported modules (if import was specified)
-   observer: MountObserver;  // The MountObserver instance
-   rootNode: Node;        // The observed root node
-   MountConfig: MountConfig; // The full configuration object
-}
-```
-
-This allows enhancements to access imported dependencies, communicate with the observer, and understand their mounting context.
-
-### Combining spawn with other features
-
-Spawn works seamlessly with other MountObserver features:
-
-```JavaScript
-class WidgetEnhancement {
-   constructor(element, ctx, initVals) {
-      this.element = element;
-      this.modules = ctx.mountCtx?.modules || [];
-      console.log('Widget enhanced with', this.modules);
-   }
-   
-   theme = 'light';
-   mode = 'default';
-}
-
-const observer = new MountObserver({
-   matching: 'my-widget',
-   import: './widget-helpers.js',
-   assignOnMount: {
-      dataset: { initialized: 'true' }
-   },
-   stageOnMount: {
-      disabled: true  // Temporarily disable during setup
-   },
-   enhancementConfig: {
-      spawn: WidgetEnhancement,
-      enhKey: 'widget',
-      withAttrs: {
-         base: 'data-config',
-         theme: '${base}-theme',
-         mode: '${base}-mode'
-      }
-   },
-   do: (element, ctx) => {
-      console.log('Additional setup after spawn');
-   }
-});
-```
-
-**Execution order on mount:**
-1. `assignOnMount` properties applied
-2. `stageOnMount` properties applied
-3. **Spawn enhancement** (if configured)
-4. `do` callbacks executed
-5. Mount event dispatched
-
-### Attribute-based enhancement spawning
-
-When combined with `withAttrs`, spawn only occurs for elements that have the specified attributes:
-
-```JavaScript
-class ActionEnhancement {
-   constructor(element, ctx, initVals) {
-      this.element = element;
-      this.onClick = this.onClick.bind(this);
-      element.addEventListener('click', this.onClick);
-   }
-   
-   onClick(e) {
-      const action = this.element.dataset.action;
-      console.log(`Action: ${action}`);
-   }
-}
-
-const observer = new MountObserver({
-   matching: 'button',
-   enhancementConfig: {
-      spawn: ActionEnhancement,
-      enhKey: 'action',
-      withAttrs: {
-         base: 'data-action'
-      }
-   }
-});
-```
-
-Only buttons with a `data-action` attribute (or `enh-data-action` for custom elements) will have the enhancement spawned.
-
-### Guard conditions with canSpawn
-
-The `canSpawn` property in `enhancementConfig` provides conditional spawning:
-
-```JavaScript
-class InputEnhancement {
-   constructor(element, ctx, initVals) {
-      this.element = element;
-      this.onInput = this.onInput.bind(this);
-      element.addEventListener('input', this.onInput);
-   }
-   
-   onInput(e) {
-      console.log('Input changed:', e.target.value);
-   }
-   
-   static canSpawn(element) {
-      // Only spawn for inputs that aren't readonly
-      return !element.readOnly;
-   }
-}
-
-const observer = new MountObserver({
-   matching: 'input',
-   enhancementConfig: {
-      spawn: InputEnhancement,
-      enhKey: 'inputEnh'
-   }
-});
-```
-
-If `canSpawn` returns `false`, the enhancement won't be spawned for that element.
-
-### Browser compatibility
-
-The spawn feature requires:
-- `Element.prototype.customElementRegistry` (Chrome 146+)
-- `customElementRegistry.enhancementRegistry` (Chrome 146+)
-
-For older browsers, you'll need to polyfill these features or the spawn functionality won't work. The test suite includes a polyfill example:
-
-```JavaScript
-// Polyfill for browsers without customElementRegistry
-if (!Element.prototype.hasOwnProperty('customElementRegistry')) {
-   Object.defineProperty(Element.prototype, 'customElementRegistry', {
-      get() {
-         if (!this._customElementRegistry) {
-            this._customElementRegistry = {
-               enhancementRegistry: new BaseRegistry()
-            };
-         }
-         return this._customElementRegistry;
-      }
-   });
-}
-```
-
-### Performance considerations
-
-- The assign-gingerly object extension module is only loaded when `spawn` is configured
-- Enhancements are created once per element (singleton pattern)
-- The enhancement registry uses weak references to allow garbage collection
-
-[Implemented as [SpawnOnMount](requirements/Done/SpawnOnMount.md)]
-
 ## Emitting events from mounted elements
 
 MountObserver can automatically dispatch custom events from elements when they mount. This is useful for:

package/index.js

@@ -5,11 +5,14 @@ export { emitMountedElementEvents } from './emitEvents.js';
 export { arr } from './arr.js';
 export { EvtRt } from './EvtRt.js';
 export { DefineCustomElementHandler } from './DefineCustomElementHandler.js';
+export { EnhanceMountedElementHandler } from './EnhanceMountedElementHandler.js';
 export { mountEventName, dismountEventName, disconnectEventName, loadEventName, mediamatchEventName, mediaunmatchEventName } from './Events.js';
 // Register built-in handlers
 import { MountObserver } from './MountObserver.js';
 import { EvtRt } from './EvtRt.js';
 import { DefineCustomElementHandler, DefineScopedCustomElementHandler } from './DefineCustomElementHandler.js';
+import { EnhanceMountedElementHandler } from './EnhanceMountedElementHandler.js';
 MountObserver.define('builtIns.logToConsole', EvtRt);
 MountObserver.define('builtIns.defineCustomElement', DefineCustomElementHandler);
 MountObserver.define('buildIns.defineScopedCustomElement', DefineScopedCustomElementHandler);
+MountObserver.define('builtIns.enhanceMountedElement', EnhanceMountedElementHandler);

package/index.ts

@@ -5,6 +5,7 @@ export { emitMountedElementEvents } from './emitEvents.js';
 export { arr } from './arr.js';
 export { EvtRt } from './EvtRt.js';
 export { DefineCustomElementHandler } from './DefineCustomElementHandler.js';
+export { EnhanceMountedElementHandler } from './EnhanceMountedElementHandler.js';
 export type {
     MountConfig,
     MountObserverOptions,
@@ -28,7 +29,9 @@ export {
 import { MountObserver } from './MountObserver.js';
 import { EvtRt } from './EvtRt.js';
 import { DefineCustomElementHandler, DefineScopedCustomElementHandler } from './DefineCustomElementHandler.js';
+import { EnhanceMountedElementHandler } from './EnhanceMountedElementHandler.js';
 
 MountObserver.define('builtIns.logToConsole', EvtRt);
 MountObserver.define('builtIns.defineCustomElement', DefineCustomElementHandler);
 MountObserver.define('buildIns.defineScopedCustomElement', DefineScopedCustomElementHandler);
+MountObserver.define('builtIns.enhanceMountedElement', EnhanceMountedElementHandler);

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "mount-observer",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
   "dependencies": {
-    "assign-gingerly": "0.0.13"
+    "assign-gingerly": "0.0.14"
   },
   "devDependencies": {
     "@playwright/test": "1.58.2",
-    "spa-ssi": "0.0.26"
+    "spa-ssi": "0.0.27"
   },
   "exports": {
     ".": {
@@ -39,6 +39,10 @@
     "./DefineCustomElementHandler.js": {
       "default": "./DefineCustomElementHandler.js",
       "types": "./DefineCustomElementHandler.ts"
+    },
+    "./EnhanceMountedElementHandler.js": {
+      "default": "./EnhanceMountedElementHandler.js",
+      "types": "./EnhanceMountedElementHandler.ts"
     }
   },
   "files": [