mount-observer 0.1.0 → 0.1.2

package/MountObserver.ts

@@ -3,29 +3,47 @@ import {
     MountObserverOptions,
     IMountObserver,
     MountContext,
-    AttrChange
+    AttrChange,
+    WeakDual,
+    EventConfig,
+    EventConstructor
 } from './types.js';
 import {
     MountEvent,
     DismountEvent,
     DisconnectEvent,
     LoadEvent,
-    AttrChangeEvent
+    AttrChangeEvent,
 } from './Events.js';
+import {
+    registerSharedObserver,
+    unregisterSharedObserver,
+    type MutationCallback
+} from './SharedMutationObserver.js';
+import { whereOutside } from './whereOutside.js';
 
 export class MountObserver extends EventTarget implements IMountObserver {
     #init: MountInit;
     #options: MountObserverOptions;
     #abortController: AbortController;
     #modules: any[] = [];
-    #mountedElements = new WeakSet<Element>();
-    #processedElements = new WeakSet<Element>();
-    #mutationObserver: MutationObserver | undefined;
+    #mountedElements: WeakDual<Element> = {
+        weakSet: new WeakSet(),
+        setWeak: new Set()
+    };
+    #processedDoForElement = new WeakSet<Element>();
+    #processedEventsForElement = new WeakMap<Element, Set<string>>();
+    #mutationCallback: MutationCallback | undefined;
     #rootNode: WeakRef<Node> | undefined;
     #importsLoaded = false;
     #elementAttrStates = new WeakMap<Element, Map<string, string | null>>();
+    #elementOnceAttrs = new WeakMap<Element, Set<string>>();
     #matchesWhereAttrFn: ((element: Element, whereAttr: any) => boolean) | null = null;
     #buildAttrCoordinateMapFn: ((whereAttr: any, isCustomElement: boolean) => any) | null = null;
+    #checkAttrChangesFn: ((element: Element) => AttrChange[]) | null = null;
+    #mediaQueryCleanup?: () => void;
+    #mediaMatches: boolean = true;
+    #assignGingerlySource: Record<string, any> | undefined;
 
     constructor(init: MountInit, options: MountObserverOptions = {}) {
         super();
@@ -33,6 +51,11 @@ export class MountObserver extends EventTarget implements IMountObserver {
         this.#options = options;
         this.#abortController = new AbortController();
 
+        // Make a copy of assignGingerly config using structuredClone
+        if (init.assignGingerly !== undefined) {
+            this.#assignGingerlySource = structuredClone(init.assignGingerly);
+        }
+
         if (options.disconnectedSignal) {
             options.disconnectedSignal.addEventListener('abort', () => {
                 this.disconnect();
@@ -59,6 +82,38 @@ export class MountObserver extends EventTarget implements IMountObserver {
             const { buildAttrCoordinateMap } = await import('./attrCoordinates.js');
             this.#buildAttrCoordinateMapFn = buildAttrCoordinateMap;
         }
+        if (!this.#checkAttrChangesFn) {
+            const { checkAttrChanges } = await import('./attrChanges.js');
+            // Create a bound function that passes the required parameters
+            this.#checkAttrChangesFn = (element: Element) => {
+                return checkAttrChanges(
+                    element,
+                    this.#init,
+                    this.#buildAttrCoordinateMapFn!,
+                    this.#elementAttrStates,
+                    this.#elementOnceAttrs
+                );
+            };
+        }
+    }
+    
+    async #setupMediaQuery(): Promise<void> {
+        if (!this.#rootNode) {
+            throw new Error('Cannot setup media query before observe() is called');
+        }
+        
+        const { setupMediaQuery } = await import('./mediaQuery.js');
+        const result = setupMediaQuery(
+            this.#init,
+            this.#rootNode,
+            this.#mountedElements,
+            this.#modules,
+            this,
+            (node) => this.#processNode(node)
+        );
+        
+        this.#mediaMatches = result.mediaMatches;
+        this.#mediaQueryCleanup = result.cleanup;
     }
 
     get disconnectedSignal(): AbortSignal {
@@ -72,16 +127,28 @@ export class MountObserver extends EventTarget implements IMountObserver {
 
         this.#rootNode = new WeakRef(rootNode);
 
+        // Set up media query if specified (needs rootNode to be set first)
+        if (this.#init.whereMediaMatches) {
+            await this.#setupMediaQuery();
+        }
+
         // Wait for whereAttr utilities to load if needed
         if (this.#init.whereAttr && !this.#matchesWhereAttrFn) {
             await this.#preloadWhereAttrUtilities();
         }
         
-        // Process existing elements
-        this.#processNode(rootNode);
+        // Process existing elements only if media matches
+        if (this.#mediaMatches) {
+            this.#processNode(rootNode);
+        }
 
-        // Set up mutation observer
-        this.#mutationObserver = new MutationObserver((mutations) => {
+        // Create mutation callback
+        this.#mutationCallback = (mutations) => {
+            // Skip processing if media doesn't match
+            if (!this.#mediaMatches) {
+                return;
+            }
+            
             const attrChanges: AttrChange[] = [];
             
             for (const mutation of mutations) {
@@ -99,8 +166,8 @@ export class MountObserver extends EventTarget implements IMountObserver {
                 } else if (mutation.type === 'attributes' && mutation.target.nodeType === Node.ELEMENT_NODE) {
                     // Handle attribute changes for mounted elements
                     const element = mutation.target as Element;
-                    if (this.#mountedElements.has(element) && this.#init.whereAttr) {
-                        const changes = this.#checkAttrChanges(element);
+                    if (this.#mountedElements.weakSet.has(element) && this.#checkAttrChangesFn) {
+                        const changes = this.#checkAttrChangesFn(element);
                         attrChanges.push(...changes);
                     }
                 }
@@ -108,9 +175,9 @@ export class MountObserver extends EventTarget implements IMountObserver {
             
             // Batch and dispatch attribute changes
             if (attrChanges.length > 0) {
-                this.dispatchEvent(new AttrChangeEvent(attrChanges));
+                this.dispatchEvent(new AttrChangeEvent(attrChanges, this.#init));
             }
-        });
+        };
 
         const observerConfig: MutationObserverInit = {
             childList: true,
@@ -123,14 +190,25 @@ export class MountObserver extends EventTarget implements IMountObserver {
             observerConfig.attributeOldValue = true;
         }
 
-        this.#mutationObserver.observe(rootNode, observerConfig);
+        // Register with shared mutation observer
+        registerSharedObserver(rootNode, this.#mutationCallback, observerConfig);
     }
 
     disconnect(): void {
-        if (this.#mutationObserver) {
-            this.#mutationObserver.disconnect();
-            this.#mutationObserver = undefined;
+        const rootNode = this.#rootNode?.deref();
+        
+        // Unregister from shared mutation observer
+        if (rootNode && this.#mutationCallback) {
+            unregisterSharedObserver(rootNode, this.#mutationCallback);
+            this.#mutationCallback = undefined;
+        }
+        
+        // Remove media query listener
+        if (this.#mediaQueryCleanup) {
+            this.#mediaQueryCleanup();
+            this.#mediaQueryCleanup = undefined;
         }
+        
         this.#abortController.abort();
         this.#rootNode = undefined;
     }
@@ -145,7 +223,7 @@ export class MountObserver extends EventTarget implements IMountObserver {
         this.#modules = await loadImports(this.#init.import);
         this.#importsLoaded = true;
 
-        this.dispatchEvent(new LoadEvent(this.#modules));
+        this.dispatchEvent(new LoadEvent(this.#modules, this.#init));
     }
 
     #processNode(node: Node): void {
@@ -162,45 +240,64 @@ export class MountObserver extends EventTarget implements IMountObserver {
         if (node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.DOCUMENT_NODE) {
             const root = node as Element | Document;
             
-            // If whereAttr is specified, we need to check all elements
-            // since we can't use querySelectorAll for complex attribute matching
-            if (this.#init.whereAttr) {
-                // Get all elements matching the CSS selector first
-                root.querySelectorAll(this.#init.whereElementMatches).forEach(child => {
-                    if (this.#matchesSelector(child)) {
-                        this.#handleMatch(child);
-                    }
-                });
-            } else {
-                // Optimize: use querySelectorAll directly when no whereAttr
-                root.querySelectorAll(this.#init.whereElementMatches).forEach(child => {
+            // Get all elements matching the CSS selector first
+            root.querySelectorAll(this.#init.whereElementMatches).forEach(child => {
+                if (this.#matchesSelector(child)) {
                     this.#handleMatch(child);
-                });
-            }
+                }
+            });
         }
     }
 
     #matchesSelector(element: Element): boolean {
+        //TODO:  reduce redundncy with this.#init?
         // Check whereElementMatches condition
         const matchesElement = element.matches(this.#init.whereElementMatches);
+        if (!matchesElement) {
+            return false;
+        }
         
-        // If whereAttr is not specified, only check whereElementMatches
-        if (!this.#init.whereAttr) {
-            return matchesElement;
+        // Check whereOutside condition if specified (donut hole scoping)
+        if (this.#init.whereOutside) {
+            const rootNode = this.#rootNode?.deref();
+            if (!rootNode || !whereOutside(rootNode, element, this.#init.whereOutside)) {
+                return false;
+            }
         }
         
-        // Use cached function (should be loaded by now from constructor)
-        if (!this.#matchesWhereAttrFn) {
-            console.warn('whereAttr utilities not loaded yet');
-            return false;
+        // Check whereAttr condition if specified
+        if (this.#init.whereAttr) {
+            // Use cached function (should be loaded by now from constructor)
+            if (!this.#matchesWhereAttrFn) {
+                console.warn('whereAttr utilities not loaded yet');
+                return false;
+            }
+            
+            if (!this.#matchesWhereAttrFn(element, this.#init.whereAttr)) {
+                return false;
+            }
+        }
+        
+        // Check whereInstanceOf condition if specified
+        if (this.#init.whereInstanceOf) {
+            const constructors = Array.isArray(this.#init.whereInstanceOf) 
+                ? this.#init.whereInstanceOf 
+                : [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;
+            }
         }
         
-        // Both conditions must be true (AND logic)
-        return matchesElement && this.#matchesWhereAttrFn(element, this.#init.whereAttr);
+        // All conditions passed
+        return true;
     }
 
     async #handleMatch(element: Element): Promise<void> {
-        if (this.#processedElements.has(element)) {
+        if (this.#processedDoForElement.has(element)) {
             return;
         }
 
@@ -209,8 +306,13 @@ export class MountObserver extends EventTarget implements IMountObserver {
             await this.#loadImports();
         }
 
-        this.#processedElements.add(element);
-        this.#mountedElements.add(element);
+        this.#processedDoForElement.add(element);
+        
+        // Add to both WeakSet and Set<WeakRef> for efficient operations
+        if (!this.#mountedElements.weakSet.has(element)) {
+            this.#mountedElements.weakSet.add(element);
+            this.#mountedElements.setWeak.add(new WeakRef(element));
+        }
 
         const rootNode = this.#rootNode?.deref();
         if (!rootNode) {
@@ -227,9 +329,9 @@ export class MountObserver extends EventTarget implements IMountObserver {
         };
 
         // Apply assignGingerly if specified
-        if (this.#init.assignGingerly) {
+        if (this.#assignGingerlySource) {
             const { assignGingerly } = await import('assign-gingerly/index.js');
-            assignGingerly(element, this.#init.assignGingerly);
+            assignGingerly(element, this.#assignGingerlySource);
         }
 
         // Call do callback
@@ -242,80 +344,63 @@ export class MountObserver extends EventTarget implements IMountObserver {
         }
 
         // Dispatch mount event
-        this.dispatchEvent(new MountEvent(element, this.#modules));
+        this.dispatchEvent(new MountEvent(element, this.#modules, this.#init));
+        
+        // Emit events from mounted element if configured
+        if (this.#init.mountedElemEmits) {
+            const { emitMountedElementEvents } = await import('./emitEvents.js');
+            await emitMountedElementEvents(element, this.#init, this.#processedEventsForElement);
+        }
         
         // Check for initial attribute changes if whereAttr is configured
-        if (this.#init.whereAttr) {
-            const changes = this.#checkAttrChanges(element);
+        if (this.#checkAttrChangesFn) {
+            const changes = this.#checkAttrChangesFn(element);
             if (changes.length > 0) {
-                this.dispatchEvent(new AttrChangeEvent(changes));
+                this.dispatchEvent(new AttrChangeEvent(changes, this.#init));
             }
         }
     }
     
-    #checkAttrChanges(element: Element): AttrChange[] {
-        if (!this.#init.whereAttr || !this.#buildAttrCoordinateMapFn) {
-            return [];
+    async assignGingerly(config: Record<string, any> | undefined): Promise<void> {
+        // Handle undefined case
+        if (config === undefined) {
+            this.#assignGingerlySource = undefined;
+            return;
         }
-        
-        const isCustomElement = element.tagName.toLowerCase().includes('-');
-        const attrCoordMap = this.#buildAttrCoordinateMapFn(this.#init.whereAttr, isCustomElement);
-        
-        // Get or create the attribute state for this element
-        let attrState = this.#elementAttrStates.get(element);
-        if (!attrState) {
-            attrState = new Map<string, string | null>();
-            this.#elementAttrStates.set(element, attrState);
+
+        const { assignGingerly } = await import('assign-gingerly/index.js');
+
+        // Update the source config for future mounted elements
+        if (this.#assignGingerlySource === undefined) {
+            // No existing config, just clone the passed in object
+            this.#assignGingerlySource = structuredClone(config);
+        } else {
+            // Merge into existing config using assignGingerly
+            assignGingerly(this.#assignGingerlySource, config);
         }
-        
-        const changes: AttrChange[] = [];
-        const currentAttrs = new Set<string>();
-        
-        // Check all possible attributes from the coordinate map
-        for (const attrName of Object.keys(attrCoordMap)) {
-            const coordinate = attrCoordMap[attrName];
-            const currentValue = element.getAttribute(attrName);
-            const previousValue = attrState.get(attrName);
-            
-            if (currentValue !== null) {
-                currentAttrs.add(attrName);
-            }
-            
-            // Include if: currently has value OR previously had value but now removed
-            if (currentValue !== null || (previousValue !== undefined && currentValue === null)) {
-                // Check if value changed
-                if (currentValue !== previousValue) {
-                    const attrNode = currentValue !== null ? element.getAttributeNode(attrName) : null;
-                    const mapEntry = this.#init.map?.[coordinate] || null;
-                    
-                    changes.push({
-                        value: currentValue,
-                        attrNode,
-                        mapEntry,
-                        attrName,
-                        coordinate,
-                        element
-                    });
-                    
-                    // Update state
-                    if (currentValue !== null) {
-                        attrState.set(attrName, currentValue);
-                    } else {
-                        attrState.delete(attrName);
-                    }
-                }
+
+        // Apply to already mounted elements using setWeak for iteration
+        for (const ref of this.#mountedElements.setWeak) {
+            const element = ref.deref();
+            if (element) {
+                assignGingerly(element, config);
             }
         }
-        
-        return changes;
     }
 
     #handleRemoval(element: Element): void {
-        if (!this.#mountedElements.has(element)) {
+        if (!this.#mountedElements.weakSet.has(element)) {
             return;
         }
 
-        this.#mountedElements.delete(element);
+        // Remove from both structures
+        this.#mountedElements.weakSet.delete(element);
+        for (const ref of this.#mountedElements.setWeak) {
+            if (ref.deref() === element) {
+                this.#mountedElements.setWeak.delete(ref);
+                break;
+            }
+        }
 
         const rootNode = this.#rootNode?.deref();
         if (!rootNode) {
@@ -337,7 +422,7 @@ export class MountObserver extends EventTarget implements IMountObserver {
         }
 
         // Dispatch dismount event
-        this.dispatchEvent(new DismountEvent(element));
+        this.dispatchEvent(new DismountEvent(element, 'where-element-matches-failed', this.#init));
 
         // Check if element is being moved within the same root
         // If it's truly disconnected, dispatch disconnect event
@@ -347,7 +432,7 @@ export class MountObserver extends EventTarget implements IMountObserver {
                     this.#init.do.disconnect(element, context);
                 }
 
-                this.dispatchEvent(new DisconnectEvent(element));
+                this.dispatchEvent(new DisconnectEvent(element, this.#init));
             }
         }, 0);
     }