mount-observer 0.1.10 → 0.1.12

package/DefineCustomElementHandler.js

@@ -1,6 +1,7 @@
 import { EvtRt } from './EvtRt.js';
 export class DefineCustomElementHandler extends EvtRt {
     mount(mountedElement, MountConfig, context) {
+        this.abort();
         // Check if modules are specified
         if (!context.modules || context.modules.length === 0) {
             throw new Error('Must specify an ES Module');

package/DefineCustomElementHandler.ts

@@ -3,6 +3,7 @@ import { MountConfig, MountContext } from './types/mount-observer/types.js';
 
 export class DefineCustomElementHandler extends EvtRt {
     mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext): void {
+        this.abort();
         // Check if modules are specified
         if (!context.modules || context.modules.length === 0) {
             throw new Error('Must specify an ES Module');

package/EnhanceMountedElementHandler.js

@@ -1,18 +1,21 @@
 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) {
+        this.abort();
         // 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 +24,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 +53,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 +79,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,8 @@ 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){
+        this.abort();
         // 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 +20,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 +32,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');
-        
+    #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 +65,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 +95,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/EvtRt.js

@@ -1,13 +1,18 @@
 import { DismountEvent, MountEvent, DisconnectEvent, dismountEventName, disconnectEventName, mountEventName } from './Events.js';
 export class EvtRt {
+    #ac;
     constructor(mountedElement, ctx) {
         const { observer, MountConfig } = ctx;
+        this.#ac = new AbortController();
         const et = observer.getNotifier(mountedElement);
-        et.addEventListener(mountEventName, this);
-        et.addEventListener(disconnectEventName, this);
-        et.addEventListener(dismountEventName, this);
+        et.addEventListener(mountEventName, this, { signal: this.#ac.signal });
+        et.addEventListener(disconnectEventName, this, { signal: this.#ac.signal });
+        et.addEventListener(dismountEventName, this, { signal: this.#ac.signal });
         this.mount(mountedElement, MountConfig, ctx);
     }
+    abort() {
+        this.#ac.abort();
+    }
     mount(mountedElement, MountConfig, context) {
         console.log({ mountedElement, MountConfig, context });
     }

package/EvtRt.ts

@@ -5,16 +5,25 @@ import {
     dismountEventName, disconnectEventName, mountEventName 
 } from './Events.js';
 export class EvtRt implements EventListenerObject{
+
+    
+    #ac: AbortController;
+
     constructor(mountedElement: Element, ctx: MountContext ){
         const {observer, MountConfig} = ctx;
+        this.#ac = new AbortController();
         const et = observer.getNotifier(mountedElement);
-        et.addEventListener(mountEventName, this);
-        et.addEventListener(disconnectEventName, this);
-        et.addEventListener(dismountEventName, this);
+        et.addEventListener(mountEventName, this, {signal: this.#ac.signal});
+        et.addEventListener(disconnectEventName, this, {signal: this.#ac.signal});
+        et.addEventListener(dismountEventName, this, {signal: this.#ac.signal});
         this.mount(mountedElement, MountConfig, ctx);
 
     }
 
+    abort(){
+        this.#ac.abort();
+    }
+
     mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext){
         console.log({mountedElement, MountConfig, context});
     }

package/MountObserver.js

@@ -25,7 +25,13 @@ export class MountObserver extends EventTarget {
     #rootNode;
     #importsLoaded = false;
     #mediaQueryCleanup;
+    #rootSizeCleanup;
+    #intersectionCleanup;
+    #connectionCleanup;
+    #intersectionObserver;
     #mediaMatches = true;
+    #rootSizeMatches = true;
+    #connectionMatches = true;
     #asgMtSource;
     #asgDisMtSource;
     #stageMtSource;
@@ -33,12 +39,39 @@ export class MountObserver extends EventTarget {
     #assignTentatively;
     #elementNotifiers = new WeakMap();
     #notifierMountedElements = new WeakSet();
+    #mergeHandlerDefaults(config) {
+        const doValue = config.do;
+        // Only process if do is a string (single handler reference)
+        if (typeof doValue !== 'string') {
+            return config;
+        }
+        // Look up the handler class
+        const HandlerClass = MountObserver.#handlerRegistry.get(doValue);
+        if (!HandlerClass) {
+            // Validation will catch this later
+            return config;
+        }
+        // Extract static properties from the handler class
+        const handlerDefaults = {};
+        const proto = HandlerClass;
+        // Get all static properties
+        for (const key of Object.getOwnPropertyNames(proto)) {
+            if (key !== 'prototype' && key !== 'length' && key !== 'name') {
+                handlerDefaults[key] = proto[key];
+            }
+        }
+        // Merge: handler defaults first, then inline config (inline trumps)
+        // Using object spread - inline config overwrites handler defaults
+        return { ...handlerDefaults, ...config };
+    }
     constructor(config, options = {}) {
         super();
-        this.#init = config;
+        // Merge handler defaults if do is a string reference
+        const mergedConfig = this.#mergeHandlerDefaults(config);
+        this.#init = mergedConfig;
         this.#options = options;
         this.#abortController = new AbortController();
-        const { assignOnMount, assignOnDismount, stageOnMount, do: doValue, reference, loadingEagerness, import: imp } = config;
+        const { assignOnMount, assignOnDismount, stageOnMount, do: doValue, reference, loadingEagerness, import: imp } = mergedConfig;
         // Make a copy of assignOnMount config using structuredClone
         if (assignOnMount !== undefined) {
             this.#asgMtSource = structuredClone(assignOnMount);
@@ -112,6 +145,33 @@ export class MountObserver extends EventTarget {
         this.#mediaMatches = result.mediaMatches;
         this.#mediaQueryCleanup = result.cleanup;
     }
+    async #setupRootSizeObserver() {
+        if (!this.#rootNode) {
+            throw new Error('Cannot setup root size observer before observe() is called');
+        }
+        const { setupRootSizeObserver } = await import('./rootSizeObserver.js');
+        const result = setupRootSizeObserver(this.#init, this.#rootNode, this.#mountedElements, this.#modules, this, (node) => this.#processNode(node));
+        this.#rootSizeMatches = result.conditionMatches;
+        this.#rootSizeCleanup = result.cleanup;
+    }
+    async #setupElementIntersection() {
+        if (!this.#rootNode) {
+            throw new Error('Cannot setup element intersection before observe() is called');
+        }
+        const { setupElementIntersection } = await import('./elementIntersection.js');
+        const result = setupElementIntersection(this.#init, this.#rootNode, this.#mountedElements, this.#modules, this, (element) => this.#matchesSelector(element), (element) => this.#handleMatch(element));
+        this.#intersectionObserver = result.intersectionObserver;
+        this.#intersectionCleanup = result.cleanup;
+    }
+    async #setupConnectionMonitor() {
+        if (!this.#rootNode) {
+            throw new Error('Cannot setup connection monitor before observe() is called');
+        }
+        const { setupConnectionMonitor } = await import('./connectionMonitor.js');
+        const result = setupConnectionMonitor(this.#init, this.#rootNode, this.#mountedElements, this.#modules, this, (node) => this.#processNode(node));
+        this.#connectionMatches = result.conditionMatches;
+        this.#connectionCleanup = result.cleanup;
+    }
     get disconnectedSignal() {
         return this.#abortController.signal;
     }
@@ -142,18 +202,30 @@ export class MountObserver extends EventTarget {
         if (this.#init.withMediaMatching) {
             await this.#setupMediaQuery();
         }
+        // Set up root size observer if specified (needs rootNode to be set first)
+        if (this.#init.whereObservedRootSizeMatches) {
+            await this.#setupRootSizeObserver();
+        }
+        // Set up element intersection observer if specified (needs rootNode to be set first)
+        if (this.#init.whereElementIntersectsWith) {
+            await this.#setupElementIntersection();
+        }
+        // Set up connection monitor if specified (needs rootNode to be set first)
+        if (this.#init.whereConnectionHas) {
+            await this.#setupConnectionMonitor();
+        }
         // Wait for eager imports to complete if they were started in constructor
         if (this.#init.loadingEagerness === 'eager' && this.#init.import && !this.#importsLoaded) {
             await this.#loadImports();
         }
-        // Process existing elements only if media matches
-        if (this.#mediaMatches) {
+        // Process existing elements only if all conditions match
+        if (this.#mediaMatches && this.#rootSizeMatches && this.#connectionMatches) {
             this.#processNode(rootNode);
         }
         // Create mutation callback
         this.#mutationCallback = (mutations) => {
-            // Skip processing if media doesn't match
-            if (!this.#mediaMatches) {
+            // Skip processing if any condition doesn't match
+            if (!this.#mediaMatches || !this.#rootSizeMatches || !this.#connectionMatches) {
                 return;
             }
             for (const mutation of mutations) {
@@ -190,6 +262,21 @@ export class MountObserver extends EventTarget {
             this.#mediaQueryCleanup();
             this.#mediaQueryCleanup = undefined;
         }
+        // Remove root size observer
+        if (this.#rootSizeCleanup) {
+            this.#rootSizeCleanup();
+            this.#rootSizeCleanup = undefined;
+        }
+        // Remove intersection observer
+        if (this.#intersectionCleanup) {
+            this.#intersectionCleanup();
+            this.#intersectionCleanup = undefined;
+        }
+        // Remove connection monitor
+        if (this.#connectionCleanup) {
+            this.#connectionCleanup();
+            this.#connectionCleanup = undefined;
+        }
         this.#abortController.abort();
         this.#rootNode = undefined;
     }
@@ -201,18 +288,18 @@ export class MountObserver extends EventTarget {
         const { loadImports } = await import('./loadImports.js');
         this.#modules = await loadImports(this.#init.import);
         this.#importsLoaded = true;
-        // Validate referenced withInstance if reference is specified
+        // Validate referenced whereInstanceOf if reference is specified
         if (this.#init.reference !== undefined) {
             const references = arr(this.#init.reference);
             for (const index of references) {
                 const module = this.#modules[index];
-                if (module && module.withInstance !== undefined) {
+                if (module && module.whereInstanceOf !== undefined) {
                     // Validate that it's a Constructor or array of Constructors
-                    const withInstance = module.withInstance;
-                    const constructors = arr(withInstance);
+                    const whereInstanceOf = module.whereInstanceOf;
+                    const constructors = arr(whereInstanceOf);
                     for (const constructor of constructors) {
                         if (typeof constructor !== 'function') {
-                            throw new Error(`Referenced module at index ${index} exports invalid withInstance: must be a Constructor or array of Constructors`);
+                            throw new Error(`Referenced module at index ${index} exports invalid whereInstanceOf: must be a Constructor or array of Constructors`);
                         }
                     }
                 }
@@ -224,7 +311,12 @@ export class MountObserver extends EventTarget {
         // If it's an element node, check if it matches
         if (node.nodeType === Node.ELEMENT_NODE) {
             const element = node;
-            if (this.#matchesSelector(element)) {
+            // If intersection observer is active, start observing the element
+            // The intersection callback will handle mounting when it intersects
+            if (this.#intersectionObserver) {
+                this.#intersectionObserver.observe(element);
+            }
+            else if (this.#matchesSelector(element)) {
                 this.#handleMatch(element);
             }
         }
@@ -233,7 +325,11 @@ export class MountObserver extends EventTarget {
             const root = node;
             // Get all elements matching the CSS selector first
             root.querySelectorAll(this.#init.matching).forEach(child => {
-                if (this.#matchesSelector(child)) {
+                // If intersection observer is active, start observing the element
+                if (this.#intersectionObserver) {
+                    this.#intersectionObserver.observe(child);
+                }
+                else if (this.#matchesSelector(child)) {
                     this.#handleMatch(child);
                 }
             });
@@ -256,22 +352,26 @@ export class MountObserver extends EventTarget {
                 return false;
             }
         }
-        // Check withInstance condition if specified
-        if (this.#init.withInstance) {
-            const constructors = arr(this.#init.withInstance);
+        // Check whereObservedRootSizeMatches condition if specified
+        if (this.#init.whereObservedRootSizeMatches && !this.#rootSizeMatches) {
+            return false;
+        }
+        // Check whereInstanceOf condition if specified
+        if (this.#init.whereInstanceOf) {
+            const constructors = arr(this.#init.whereInstanceOf);
             // Element must be an instance of at least one constructor (OR logic for array)
             const matchesInstanceOf = constructors.some(constructor => element instanceof constructor);
             if (!matchesInstanceOf) {
                 return false;
             }
         }
-        // Check referenced withInstance if imports are loaded and reference is specified
+        // Check referenced whereInstanceOf if imports are loaded and reference is specified
         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.withInstance !== undefined) {
-                    const constructors = arr(module.withInstance);
+                if (module && module.whereInstanceOf !== undefined) {
+                    const constructors = arr(module.whereInstanceOf);
                     // Element must be an instance of at least one constructor (OR logic within this module)
                     const matchesInstanceOf = constructors.some((constructor) => element instanceof constructor);
                     if (!matchesInstanceOf) {