mount-observer 0.1.1 → 0.1.2

package/MountObserver.js

@@ -1,12 +1,17 @@
-import { MountEvent, DismountEvent, DisconnectEvent, LoadEvent, AttrChangeEvent } from './Events.js';
+import { MountEvent, DismountEvent, DisconnectEvent, LoadEvent, AttrChangeEvent, } from './Events.js';
 import { registerSharedObserver, unregisterSharedObserver } from './SharedMutationObserver.js';
+import { whereOutside } from './whereOutside.js';
 export class MountObserver extends EventTarget {
     #init;
     #options;
     #abortController;
     #modules = [];
-    #mountedElements = new WeakSet();
-    #processedElements = new WeakSet();
+    #mountedElements = {
+        weakSet: new WeakSet(),
+        setWeak: new Set()
+    };
+    #processedDoForElement = new WeakSet();
+    #processedEventsForElement = new WeakMap();
     #mutationCallback;
     #rootNode;
     #importsLoaded = false;
@@ -14,13 +19,19 @@ export class MountObserver extends EventTarget {
     #elementOnceAttrs = new WeakMap();
     #matchesWhereAttrFn = null;
     #buildAttrCoordinateMapFn = null;
+    #checkAttrChangesFn = null;
     #mediaQueryCleanup;
     #mediaMatches = true;
+    #assignGingerlySource;
     constructor(init, options = {}) {
         super();
         this.#init = init;
         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();
@@ -44,6 +55,13 @@ export class MountObserver extends EventTarget {
             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) => {
+                return checkAttrChanges(element, this.#init, this.#buildAttrCoordinateMapFn, this.#elementAttrStates, this.#elementOnceAttrs);
+            };
+        }
     }
     async #setupMediaQuery() {
         if (!this.#rootNode) {
@@ -97,8 +115,8 @@ export class MountObserver extends EventTarget {
                 else if (mutation.type === 'attributes' && mutation.target.nodeType === Node.ELEMENT_NODE) {
                     // Handle attribute changes for mounted elements
                     const element = mutation.target;
-                    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);
                     }
                 }
@@ -171,6 +189,13 @@ export class MountObserver extends EventTarget {
         if (!matchesElement) {
             return false;
         }
+        // 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;
+            }
+        }
         // Check whereAttr condition if specified
         if (this.#init.whereAttr) {
             // Use cached function (should be loaded by now from constructor)
@@ -197,15 +222,19 @@ export class MountObserver extends EventTarget {
         return true;
     }
     async #handleMatch(element) {
-        if (this.#processedElements.has(element)) {
+        if (this.#processedDoForElement.has(element)) {
             return;
         }
         // Load imports if not already loaded
         if (!this.#importsLoaded && this.#init.import) {
             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) {
             // Root node was garbage collected
@@ -219,9 +248,9 @@ export class MountObserver extends EventTarget {
             }
         };
         // 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
         if (this.#init.do) {
@@ -234,85 +263,55 @@ export class MountObserver extends EventTarget {
         }
         // Dispatch mount event
         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.#init));
             }
         }
     }
-    #checkAttrChanges(element) {
-        if (!this.#init.whereAttr || !this.#buildAttrCoordinateMapFn) {
-            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();
-            this.#elementAttrStates.set(element, attrState);
-        }
-        const changes = [];
-        const currentAttrs = new Set();
-        // 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);
-            }
-            // Check if this attribute has "once: true" in its map entry
-            const mapEntry = this.#init.map?.[coordinate] || null;
-            const isOnce = mapEntry?.once === true;
-            // If "once" is true, check if we've already seen this attribute
-            if (isOnce) {
-                let onceAttrs = this.#elementOnceAttrs.get(element);
-                if (!onceAttrs) {
-                    onceAttrs = new Set();
-                    this.#elementOnceAttrs.set(element, onceAttrs);
-                }
-                // If we've already seen this attribute, skip it
-                if (onceAttrs.has(attrName)) {
-                    continue;
-                }
-                // Mark this attribute as seen if it currently has a value
-                if (currentValue !== null) {
-                    onceAttrs.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;
-                    changes.push({
-                        value: currentValue,
-                        attrNode,
-                        mapEntry,
-                        attrName,
-                        coordinate,
-                        element
-                    });
-                    // Update state
-                    if (currentValue !== null) {
-                        attrState.set(attrName, currentValue);
-                    }
-                    else {
-                        attrState.delete(attrName);
-                    }
-                }
+    async assignGingerly(config) {
+        // Handle undefined case
+        if (config === undefined) {
+            this.#assignGingerlySource = undefined;
+            return;
+        }
+        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);
+        }
+        // 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) {
-        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) {
             // Root node was garbage collected

package/MountObserver.ts

@@ -3,7 +3,10 @@ import {
     MountObserverOptions,
     IMountObserver,
     MountContext,
-    AttrChange
+    AttrChange,
+    WeakDual,
+    EventConfig,
+    EventConstructor
 } from './types.js';
 import {
     MountEvent,
@@ -11,22 +14,25 @@ import {
     DisconnectEvent,
     LoadEvent,
     AttrChangeEvent,
-    MediaMatchEvent,
-    MediaUnmatchEvent
 } 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>();
+    #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;
@@ -34,8 +40,10 @@ export class MountObserver extends EventTarget implements IMountObserver {
     #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();
@@ -43,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();
@@ -69,6 +82,19 @@ 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> {
@@ -140,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);
                     }
                 }
@@ -231,6 +257,14 @@ export class MountObserver extends EventTarget implements IMountObserver {
             return false;
         }
         
+        // 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;
+            }
+        }
+        
         // Check whereAttr condition if specified
         if (this.#init.whereAttr) {
             // Use cached function (should be loaded by now from constructor)
@@ -263,7 +297,7 @@ export class MountObserver extends EventTarget implements IMountObserver {
     }
 
     async #handleMatch(element: Element): Promise<void> {
-        if (this.#processedElements.has(element)) {
+        if (this.#processedDoForElement.has(element)) {
             return;
         }
 
@@ -272,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) {
@@ -290,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
@@ -307,100 +346,61 @@ export class MountObserver extends EventTarget implements IMountObserver {
         // Dispatch mount event
         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.#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);
-            }
-            
-            // Check if this attribute has "once: true" in its map entry
-            const mapEntry = this.#init.map?.[coordinate] || null;
-            const isOnce = mapEntry?.once === true;
-            
-            // If "once" is true, check if we've already seen this attribute
-            if (isOnce) {
-                let onceAttrs = this.#elementOnceAttrs.get(element);
-                if (!onceAttrs) {
-                    onceAttrs = new Set<string>();
-                    this.#elementOnceAttrs.set(element, onceAttrs);
-                }
-                
-                // If we've already seen this attribute, skip it
-                if (onceAttrs.has(attrName)) {
-                    continue;
-                }
-                
-                // Mark this attribute as seen if it currently has a value
-                if (currentValue !== null) {
-                    onceAttrs.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;
-                    
-                    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) {