mount-observer 0.1.10 → 0.1.12

package/MountObserver.ts

@@ -48,7 +48,13 @@ export class MountObserver extends EventTarget implements IMountObserver {
     #rootNode: WeakRef<Node> | undefined;
     #importsLoaded = false;
     #mediaQueryCleanup?: () => void;
+    #rootSizeCleanup?: () => void;
+    #intersectionCleanup?: () => void;
+    #connectionCleanup?: () => void;
+    #intersectionObserver?: IntersectionObserver;
     #mediaMatches: boolean = true;
+    #rootSizeMatches: boolean = true;
+    #connectionMatches: boolean = true;
     #asgMtSource: Record<string, any> | undefined;
     #asgDisMtSource: Record<string, any> | undefined;
     #stageMtSource: Record<string, any> | undefined;
@@ -57,17 +63,51 @@ export class MountObserver extends EventTarget implements IMountObserver {
     #elementNotifiers = new WeakMap<Element, EventTarget>();
     #notifierMountedElements = new WeakSet<Element>();
 
+    #mergeHandlerDefaults(config: MountConfig): MountConfig {
+        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: Partial<MountConfig> = {};
+        const proto = HandlerClass as any;
+        
+        // Get all static properties
+        for (const key of Object.getOwnPropertyNames(proto)) {
+            if (key !== 'prototype' && key !== 'length' && key !== 'name') {
+                handlerDefaults[key as keyof MountConfig] = proto[key];
+            }
+        }
+        
+        // Merge: handler defaults first, then inline config (inline trumps)
+        // Using object spread - inline config overwrites handler defaults
+        return { ...handlerDefaults, ...config };
+    }
+
     constructor(config: MountConfig, options: MountObserverOptions = {}) {
         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;
+        } = mergedConfig;
         // Make a copy of assignOnMount config using structuredClone
         if (assignOnMount !== undefined) {
             this.#asgMtSource = structuredClone(assignOnMount);
@@ -165,6 +205,64 @@ export class MountObserver extends EventTarget implements IMountObserver {
         this.#mediaQueryCleanup = result.cleanup;
     }
 
+    async #setupRootSizeObserver(): Promise<void> {
+        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(): Promise<void> {
+        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(): Promise<void> {
+        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(): AbortSignal {
         return this.#abortController.signal;
     }
@@ -201,20 +299,35 @@ export class MountObserver extends EventTarget implements IMountObserver {
             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;
             }
             
@@ -258,6 +371,24 @@ export class MountObserver extends EventTarget implements IMountObserver {
             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;
     }
@@ -272,20 +403,20 @@ export class MountObserver extends EventTarget implements IMountObserver {
         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`);
                         }
                     }
                 }
@@ -300,7 +431,11 @@ export class MountObserver extends EventTarget implements IMountObserver {
         if (node.nodeType === Node.ELEMENT_NODE) {
             const element = node as Element;
             
-            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);
             }
         }
@@ -311,7 +446,10 @@ export class MountObserver extends EventTarget implements IMountObserver {
             
             // 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);
                 }
             });
@@ -319,59 +457,65 @@ export class MountObserver extends EventTarget implements IMountObserver {
     }
 
     #matchesSelector(element: Element): boolean {
-        //TODO:  reduce redundncy with this.#init?
-        // Check matching condition
-        if (!this.#init.matching) {
-            return false;
-        }
-        
-        const matchesElement = element.matches(this.#init.matching);
-        if (!matchesElement) {
-            return false;
-        }
-        
-        // Check withScopePerimeter condition if specified (donut hole scoping)
-        if (this.#init.withScopePerimeter) {
-            const rootNode = this.#rootNode?.deref();
-            if (!rootNode || !withScopePerimeter(rootNode, element, this.#init.withScopePerimeter)) {
+            //TODO:  reduce redundncy with this.#init?
+            // Check matching condition
+            if (!this.#init.matching) {
                 return false;
             }
-        }
-        
-        // Check withInstance condition if specified
-        if (this.#init.withInstance) {
-            const constructors = arr(this.#init.withInstance);
-            
-            // Element must be an instance of at least one constructor (OR logic for array)
-            const matchesInstanceOf = constructors.some(constructor => element instanceof constructor);
-            
-            if (!matchesInstanceOf) {
+
+            const matchesElement = element.matches(this.#init.matching);
+            if (!matchesElement) {
                 return false;
             }
-        }
-        
-        // Check referenced withInstance 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);
-                    
-                    // Element must be an instance of at least one constructor (OR logic within this module)
-                    const matchesInstanceOf = constructors.some((constructor: Constructor) => element instanceof constructor);
-                    
-                    if (!matchesInstanceOf) {
-                        return false;
+            // Check withScopePerimeter condition if specified (donut hole scoping)
+            if (this.#init.withScopePerimeter) {
+                const rootNode = this.#rootNode?.deref();
+                if (!rootNode || !withScopePerimeter(rootNode, element, this.#init.withScopePerimeter)) {
+                    return false;
+                }
+            }
+
+            // 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 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.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: Constructor) => element instanceof constructor);
+
+                        if (!matchesInstanceOf) {
+                            return false;
+                        }
                     }
                 }
             }
+
+            // All conditions passed
+            return true;
         }
 
-        // All conditions passed
-        return true;
-    }
 
     async #handleMatch(element: Element): Promise<void> {
         if (this.#processedDoForElement.has(element)) {