mount-observer 0.1.10 → 0.1.11

package/EnhanceMountedElementHandler.js

@@ -1,18 +1,20 @@
 import { EvtRt } from './EvtRt.js';
+//import { buildCSSQuery } from 'assign-gingerly/buildCSSQuery.js';
+import 'assign-gingerly/object-extension.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) {
+    async 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);
+        const registryItem = await this._findRegistryItem(module, mountedElement);
         if (!registryItem) {
             throw new Error('No registry item found in module. Expected an export with a "spawn" property.');
         }
@@ -21,15 +23,13 @@ export class EnhanceMountedElementHandler extends EvtRt {
             throw new Error('Registry item "spawn" property must be a constructor function');
         }
         // Spawn the enhancement
-        this.spawnEnhancement(mountedElement, registryItem, context);
+        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');
+    _spawnEnhancement(element, registryItem, context) {
         // Polyfill element.customElementRegistry if it doesn't exist (for browsers without scoped registries)
         if (!element.customElementRegistry) {
             Object.defineProperty(element, 'customElementRegistry', {
@@ -52,14 +52,19 @@ export class EnhanceMountedElementHandler extends EvtRt {
      * @param module - The imported module
      * @returns The registry item or null if not found
      */
-    findRegistryItem(module) {
+    async _findRegistryItem(module, el) {
         // Check default export first
-        if (module.default && this.isRegistryItem(module.default)) {
+        if (module.default && await this._isRegistryItem(module.default, el)) {
             return module.default;
         }
         // Search all exports for a registry item
-        const registryItems = Object.values(module)
-            .filter(exp => this.isRegistryItem(exp));
+        const exports = Object.values(module);
+        const registryItems = [];
+        for (const e of exports) {
+            const isRegistryItem = await this._isRegistryItem(e, el);
+            if (isRegistryItem)
+                registryItems.push(e);
+        }
         if (registryItems.length === 0) {
             return null;
         }
@@ -73,10 +78,18 @@ export class EnhanceMountedElementHandler extends EvtRt {
      * @param exp - The export to check
      * @returns True if the export is a registry item
      */
-    isRegistryItem(exp) {
-        return exp !== null
+    async _isRegistryItem(exp, mountedElement) {
+        let test = exp !== null
             && typeof exp === 'object'
             && 'spawn' in exp
             && typeof exp.spawn === 'function';
+        if (!test)
+            return false;
+        const emc = exp;
+        if (emc.withAttrs !== undefined) {
+            const cssQuery = (await import('assign-gingerly/buildCSSQuery.js')).buildCSSQuery(emc);
+            return mountedElement.matches(cssQuery);
+        }
+        return true;
     }
 }

package/EnhanceMountedElementHandler.ts

@@ -1,5 +1,8 @@
 import { EvtRt } from './EvtRt.js';
+import {EnhancementConfig} from './types/assign-gingerly/types.js';
 import { MountConfig, MountContext } from './types/mount-observer/types.js';
+//import { buildCSSQuery } from 'assign-gingerly/buildCSSQuery.js';
+import 'assign-gingerly/object-extension.js';
 
 /**
  * Handler for automatically enhancing mounted elements using assign-gingerly.
@@ -7,7 +10,7 @@ import { MountConfig, MountContext } from './types/mount-observer/types.js';
  * and uses element.enh.get() to spawn the enhancement.
  */
 export class EnhanceMountedElementHandler extends EvtRt {
-    mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext): void {
+    async mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext){
         // Check if modules are specified
         if (!context.modules || context.modules.length === 0) {
             throw new Error('Must specify an ES Module with import property');
@@ -16,7 +19,7 @@ export class EnhanceMountedElementHandler extends EvtRt {
         const module = context.modules[0];
         
         // Find registry item (object with spawn property)
-        const registryItem = this.findRegistryItem(module);
+        const registryItem = await this._findRegistryItem(module, mountedElement);
         
         if (!registryItem) {
             throw new Error('No registry item found in module. Expected an export with a "spawn" property.');
@@ -28,17 +31,14 @@ export class EnhanceMountedElementHandler extends EvtRt {
         }
         
         // Spawn the enhancement
-        this.spawnEnhancement(mountedElement, registryItem, context);
+        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');
-        
+    protected _spawnEnhancement(element: Element, registryItem: any, context: MountContext): void {
         // Polyfill element.customElementRegistry if it doesn't exist (for browsers without scoped registries)
         if (!(element as any).customElementRegistry) {
             Object.defineProperty(element, 'customElementRegistry', {
@@ -64,15 +64,19 @@ export class EnhanceMountedElementHandler extends EvtRt {
      * @param module - The imported module
      * @returns The registry item or null if not found
      */
-    private findRegistryItem(module: any): any | null {
+    protected async _findRegistryItem(module: any, el: Element): Promise<any | null> {
         // Check default export first
-        if (module.default && this.isRegistryItem(module.default)) {
+        if (module.default && await this._isRegistryItem(module.default, el)) {
             return module.default;
         }
         
         // Search all exports for a registry item
-        const registryItems = Object.values(module)
-            .filter(exp => this.isRegistryItem(exp));
+        const exports = Object.values(module);
+        const registryItems = [];
+        for(const e of exports){
+            const isRegistryItem = await this._isRegistryItem(e, el);
+            if(isRegistryItem) registryItems.push(e);
+        }
         
         if (registryItems.length === 0) {
             return null;
@@ -90,10 +94,17 @@ export class EnhanceMountedElementHandler extends EvtRt {
      * @param exp - The export to check
      * @returns True if the export is a registry item
      */
-    private isRegistryItem(exp: any): boolean {
-        return exp !== null 
+    protected async  _isRegistryItem(exp: any, mountedElement: Element): Promise<boolean> {
+        let test = exp !== null 
             && typeof exp === 'object' 
             && 'spawn' in exp 
             && typeof exp.spawn === 'function';
+        if(!test) return false;
+        const emc = exp as EnhancementConfig;
+        if(emc.withAttrs !== undefined){
+            const cssQuery = (await import('assign-gingerly/buildCSSQuery.js')).buildCSSQuery(emc);
+            return mountedElement.matches(cssQuery);
+        }
+        return true;
     }
 }

package/README.md

@@ -42,9 +42,9 @@ The following features have been implemented and tested:
 
 Author: Bruce B. Anderson (with valuable feedback from @doeixd)
 
-Issues / PRs / polyfill: [mount-observer](https://github.com/bahrus/mount-observer)
+Issues / PRs / polyfill: [mount-observer](https://github.com/bahrus/mount-observer/tree/v2)
 
-Last Update: Aug 7, 2025
+Last Update: Feb 23, 2026
 
 ## Benefits of this API
 
@@ -100,7 +100,7 @@ The extra flexibility this new primitive would provide could be quite useful to
 
 Before getting into the weeds, let's demonstrate the two most prominent use cases:
 
-### Use Case 1:  Custom Attribute Enhancement
+### Use Case 1:  Custom Attribute Enhancement [TODO]: out of date
 
 ```html
 <body>
@@ -108,6 +108,8 @@ Before getting into the weeds, let's demonstrate the two most prominent use case
 
     <script type=module>
         import 'mount-observer/ElementMountExtension.js';
+
+        
         document.body.mount([{
             withAttrs:{base: 'log-to-console'},
             spawn: function(el){

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "mount-observer",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
   "dependencies": {
-    "assign-gingerly": "0.0.14"
+    "assign-gingerly": "0.0.18"
   },
   "devDependencies": {
     "@playwright/test": "1.58.2",