mount-observer 0.1.0 → 0.1.2

package/Events.js

@@ -1,44 +1,78 @@
-// Event classes for MountObserver
-import { mountEventName, dismountEventName, disconnectEventName, loadEventName, attrchangeEventName } from './constants.js';
+// Event name constants
+export const loadEventName = 'load';
+export const mountEventName = 'mount';
+export const dismountEventName = 'dismount';
+export const disconnectEventName = 'disconnect';
+export const attrchangeEventName = 'attrchange';
+export const mediamatchEventName = 'mediamatch';
+export const mediaunmatchEventName = 'mediaunmatch';
 export class MountEvent extends Event {
     matchingElement;
     modules;
+    mountInit;
     static eventName = mountEventName;
-    constructor(matchingElement, modules) {
+    constructor(matchingElement, modules, mountInit) {
         super(MountEvent.eventName);
         this.matchingElement = matchingElement;
         this.modules = modules;
+        this.mountInit = mountInit;
     }
 }
 export class DismountEvent extends Event {
     matchingElement;
+    reason;
+    mountInit;
     static eventName = dismountEventName;
-    constructor(matchingElement) {
+    constructor(matchingElement, reason, mountInit) {
         super(DismountEvent.eventName);
         this.matchingElement = matchingElement;
+        this.reason = reason;
+        this.mountInit = mountInit;
     }
 }
 export class DisconnectEvent extends Event {
     matchingElement;
+    mountInit;
     static eventName = disconnectEventName;
-    constructor(matchingElement) {
+    constructor(matchingElement, mountInit) {
         super(DisconnectEvent.eventName);
         this.matchingElement = matchingElement;
+        this.mountInit = mountInit;
     }
 }
 export class LoadEvent extends Event {
     modules;
+    mountInit;
     static eventName = loadEventName;
-    constructor(modules) {
+    constructor(modules, mountInit) {
         super(LoadEvent.eventName);
         this.modules = modules;
+        this.mountInit = mountInit;
     }
 }
 export class AttrChangeEvent extends Event {
     changes;
+    mountInit;
     static eventName = attrchangeEventName;
-    constructor(changes) {
+    constructor(changes, mountInit) {
         super(AttrChangeEvent.eventName);
         this.changes = changes;
+        this.mountInit = mountInit;
+    }
+}
+export class MediaMatchEvent extends Event {
+    mountInit;
+    static eventName = mediamatchEventName;
+    constructor(mountInit) {
+        super(MediaMatchEvent.eventName);
+        this.mountInit = mountInit;
+    }
+}
+export class MediaUnmatchEvent extends Event {
+    mountInit;
+    static eventName = mediaunmatchEventName;
+    constructor(mountInit) {
+        super(MediaUnmatchEvent.eventName);
+        this.mountInit = mountInit;
     }
 }

package/Events.ts

@@ -1,17 +1,19 @@
 // Event classes for MountObserver
-import {
-    mountEventName,
-    dismountEventName,
-    disconnectEventName,
-    loadEventName,
-    attrchangeEventName
-} from './constants.js';
-import type { IMountEvent, IDismountEvent, IAttrChangeEvent, AttrChange } from './types.js';
+import type { IMountEvent, IDismountEvent, IAttrChangeEvent, AttrChange, MountInit, DismountReason } from './types.js';
+
+// Event name constants
+export const loadEventName = 'load';
+export const mountEventName = 'mount';
+export const dismountEventName = 'dismount';
+export const disconnectEventName = 'disconnect';
+export const attrchangeEventName = 'attrchange';
+export const mediamatchEventName = 'mediamatch';
+export const mediaunmatchEventName = 'mediaunmatch';
 
 export class MountEvent extends Event implements IMountEvent {
     static eventName: typeof mountEventName = mountEventName;
     
-    constructor(public matchingElement: Element, public modules: any[]) {
+    constructor(public matchingElement: Element, public modules: any[], public mountInit: MountInit) {
         super(MountEvent.eventName);
     }
 }
@@ -19,7 +21,7 @@ export class MountEvent extends Event implements IMountEvent {
 export class DismountEvent extends Event implements IDismountEvent {
     static eventName: typeof dismountEventName = dismountEventName;
     
-    constructor(public matchingElement: Element) {
+    constructor(public matchingElement: Element, public reason: DismountReason, public mountInit: MountInit) {
         super(DismountEvent.eventName);
     }
 }
@@ -27,7 +29,7 @@ export class DismountEvent extends Event implements IDismountEvent {
 export class DisconnectEvent extends Event {
     static eventName: typeof disconnectEventName = disconnectEventName;
     
-    constructor(public matchingElement: Element) {
+    constructor(public matchingElement: Element, public mountInit: MountInit) {
         super(DisconnectEvent.eventName);
     }
 }
@@ -35,7 +37,7 @@ export class DisconnectEvent extends Event {
 export class LoadEvent extends Event {
     static eventName: typeof loadEventName = loadEventName;
     
-    constructor(public modules: any[]) {
+    constructor(public modules: any[], public mountInit: MountInit) {
         super(LoadEvent.eventName);
     }
 }
@@ -43,7 +45,23 @@ export class LoadEvent extends Event {
 export class AttrChangeEvent extends Event implements IAttrChangeEvent {
     static eventName: typeof attrchangeEventName = attrchangeEventName;
     
-    constructor(public changes: AttrChange[]) {
+    constructor(public changes: AttrChange[], public mountInit: MountInit) {
         super(AttrChangeEvent.eventName);
     }
 }
+
+export class MediaMatchEvent extends Event {
+    static eventName: typeof mediamatchEventName = mediamatchEventName;
+    
+    constructor(public mountInit: MountInit) {
+        super(MediaMatchEvent.eventName);
+    }
+}
+
+export class MediaUnmatchEvent extends Event {
+    static eventName: typeof mediaunmatchEventName = mediaunmatchEventName;
+    
+    constructor(public mountInit: MountInit) {
+        super(MediaUnmatchEvent.eventName);
+    }
+}

package/MountObserver.js

@@ -1,22 +1,37 @@
-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();
-    #mutationObserver;
+    #mountedElements = {
+        weakSet: new WeakSet(),
+        setWeak: new Set()
+    };
+    #processedDoForElement = new WeakSet();
+    #processedEventsForElement = new WeakMap();
+    #mutationCallback;
     #rootNode;
     #importsLoaded = false;
     #elementAttrStates = new WeakMap();
+    #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();
@@ -40,6 +55,22 @@ 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) {
+            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() {
         return this.#abortController.signal;
@@ -49,14 +80,24 @@ export class MountObserver extends EventTarget {
             throw new Error('Already observing');
         }
         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);
-        // Set up mutation observer
-        this.#mutationObserver = new MutationObserver((mutations) => {
+        // Process existing elements only if media matches
+        if (this.#mediaMatches) {
+            this.#processNode(rootNode);
+        }
+        // Create mutation callback
+        this.#mutationCallback = (mutations) => {
+            // Skip processing if media doesn't match
+            if (!this.#mediaMatches) {
+                return;
+            }
             const attrChanges = [];
             for (const mutation of mutations) {
                 if (mutation.type === 'childList') {
@@ -74,17 +115,17 @@ 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);
                     }
                 }
             }
             // Batch and dispatch attribute changes
             if (attrChanges.length > 0) {
-                this.dispatchEvent(new AttrChangeEvent(attrChanges));
+                this.dispatchEvent(new AttrChangeEvent(attrChanges, this.#init));
             }
-        });
+        };
         const observerConfig = {
             childList: true,
             subtree: true
@@ -94,12 +135,20 @@ export class MountObserver extends EventTarget {
             observerConfig.attributes = true;
             observerConfig.attributeOldValue = true;
         }
-        this.#mutationObserver.observe(rootNode, observerConfig);
+        // Register with shared mutation observer
+        registerSharedObserver(rootNode, this.#mutationCallback, observerConfig);
     }
     disconnect() {
-        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;
@@ -112,7 +161,7 @@ export class MountObserver extends EventTarget {
         const { loadImports } = await import('./loadImports.js');
         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) {
         // If it's an element node, check if it matches
@@ -125,49 +174,67 @@ export class MountObserver extends EventTarget {
         // Process children
         if (node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.DOCUMENT_NODE) {
             const root = node;
-            // 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) {
+        //TODO:  reduce redundncy with this.#init?
         // Check whereElementMatches condition
         const matchesElement = element.matches(this.#init.whereElementMatches);
-        // If whereAttr is not specified, only check whereElementMatches
-        if (!this.#init.whereAttr) {
-            return matchesElement;
-        }
-        // Use cached function (should be loaded by now from constructor)
-        if (!this.#matchesWhereAttrFn) {
-            console.warn('whereAttr utilities not loaded yet');
+        if (!matchesElement) {
             return false;
         }
-        // Both conditions must be true (AND logic)
-        return matchesElement && this.#matchesWhereAttrFn(element, this.#init.whereAttr);
+        // 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)
+            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;
+            }
+        }
+        // All conditions passed
+        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
@@ -181,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) {
@@ -195,68 +262,56 @@ export class MountObserver extends EventTarget {
             }
         }
         // 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) {
-        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);
-            }
-            // 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);
-                    }
-                }
+    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
@@ -274,7 +329,7 @@ export class MountObserver extends EventTarget {
             this.#init.do.dismount(element, context);
         }
         // 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
         setTimeout(() => {
@@ -282,7 +337,7 @@ export class MountObserver extends EventTarget {
                 if (this.#init.do && typeof this.#init.do !== 'function' && this.#init.do.disconnect) {
                     this.#init.do.disconnect(element, context);
                 }
-                this.dispatchEvent(new DisconnectEvent(element));
+                this.dispatchEvent(new DisconnectEvent(element, this.#init));
             }
         }, 0);
     }