mount-observer 0.1.1 → 0.1.3

package/MountObserver.js

@@ -1,12 +1,26 @@
-import { MountEvent, DismountEvent, DisconnectEvent, LoadEvent, AttrChangeEvent } from './Events.js';
+import { arr } from './arr.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 {
+    // Static registry for registered handlers
+    static #handlerRegistry = new Map();
+    static define(name, handler) {
+        if (this.#handlerRegistry.has(name)) {
+            throw new Error(`${name} already in use`);
+        }
+        this.#handlerRegistry.set(name, handler);
+    }
     #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,27 +28,84 @@ export class MountObserver extends EventTarget {
     #elementOnceAttrs = new WeakMap();
     #matchesWhereAttrFn = null;
     #buildAttrCoordinateMapFn = null;
+    #checkAttrChangesFn = null;
     #mediaQueryCleanup;
     #mediaMatches = true;
+    #asgMtSource;
+    #asgDisMtSource;
+    #elementNotifiers = new WeakMap();
+    #notifierMountedElements = new WeakSet();
     constructor(init, options = {}) {
         super();
         this.#init = init;
         this.#options = options;
         this.#abortController = new AbortController();
+        const { assignOnMount, assignOnDismount, do: doValue, reference, whereAttr, loadingEagerness, import: imp } = init;
+        // Make a copy of assignOnMount config using structuredClone
+        if (assignOnMount !== undefined) {
+            this.#asgMtSource = structuredClone(assignOnMount);
+        }
+        if (assignOnDismount !== undefined) {
+            this.#asgDisMtSource = structuredClone(assignOnDismount);
+        }
         if (options.disconnectedSignal) {
             options.disconnectedSignal.addEventListener('abort', () => {
                 this.disconnect();
             });
         }
+        // Validate do property if it contains string references
+        if (doValue !== undefined) {
+            this.#validateDoHandlers();
+        }
+        // Validate reference property if present
+        if (reference !== undefined) {
+            this.#validateReference();
+        }
         // Preload whereAttr utilities if needed
-        if (init.whereAttr) {
+        if (whereAttr) {
             this.#preloadWhereAttrUtilities();
         }
         // Start loading imports if eager
-        if (init.loadingEagerness === 'eager' && init.import) {
+        if (loadingEagerness === 'eager' && imp) {
             this.#loadImports();
         }
     }
+    #validateDoHandlers() {
+        const doValue = this.#init.do;
+        if (doValue === undefined)
+            return;
+        const handlers = Array.isArray(doValue) ? doValue : [doValue];
+        for (const handler of handlers) {
+            if (typeof handler === 'string') {
+                if (!MountObserver.#handlerRegistry.has(handler)) {
+                    throw new Error(`No handler defined for ${handler}`);
+                }
+            }
+        }
+    }
+    #validateReference() {
+        if (!this.#init.import) {
+            throw new Error('reference property requires import to be defined');
+        }
+        // Normalize import to array
+        const imports = Array.isArray(this.#init.import)
+            ? this.#init.import
+            : [this.#init.import];
+        // Normalize reference to array
+        const references = arr(this.#init.reference);
+        // Validate each reference index
+        for (const index of references) {
+            // Check if index is within bounds
+            if (index < 0 || index >= imports.length) {
+                throw new Error(`reference index ${index} is out of bounds (import array length: ${imports.length})`);
+            }
+            const importItem = imports[index];
+            // Check if it's a JS module (not a 2D array with type option)
+            if (Array.isArray(importItem)) {
+                throw new Error(`reference index ${index} points to a non-JS module import (array with type option)`);
+            }
+        }
+    }
     async #preloadWhereAttrUtilities() {
         if (!this.#matchesWhereAttrFn) {
             const { matchesWhereAttr } = await import('./whereAttr.js');
@@ -44,6 +115,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) {
@@ -57,10 +135,24 @@ export class MountObserver extends EventTarget {
     get disconnectedSignal() {
         return this.#abortController.signal;
     }
+    getNotifier(element) {
+        // Return cached notifier if it exists
+        let notifier = this.#elementNotifiers.get(element);
+        if (notifier) {
+            return notifier;
+        }
+        // Create new EventTarget for this element
+        notifier = new EventTarget();
+        this.#elementNotifiers.set(element, notifier);
+        return notifier;
+    }
     async observe(rootNode) {
         if (this.#rootNode) {
             throw new Error('Already observing');
         }
+        if (this.#asgMtSource || this.#asgDisMtSource) {
+            await import('assign-gingerly/object-extension.js');
+        }
         this.#rootNode = new WeakRef(rootNode);
         // Set up media query if specified (needs rootNode to be set first)
         if (this.#init.whereMediaMatches) {
@@ -70,6 +162,10 @@ export class MountObserver extends EventTarget {
         if (this.#init.whereAttr && !this.#matchesWhereAttrFn) {
             await this.#preloadWhereAttrUtilities();
         }
+        // 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) {
             this.#processNode(rootNode);
@@ -97,8 +193,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);
                     }
                 }
@@ -106,6 +202,20 @@ export class MountObserver extends EventTarget {
             // Batch and dispatch attribute changes
             if (attrChanges.length > 0) {
                 this.dispatchEvent(new AttrChangeEvent(attrChanges, this.#init));
+                // Dispatch filtered attrchange events to element-specific notifiers
+                const changesByElement = new Map();
+                for (const change of attrChanges) {
+                    if (!changesByElement.has(change.element)) {
+                        changesByElement.set(change.element, []);
+                    }
+                    changesByElement.get(change.element).push(change);
+                }
+                for (const [element, changes] of changesByElement) {
+                    const notifier = this.#elementNotifiers.get(element);
+                    if (notifier) {
+                        notifier.dispatchEvent(new AttrChangeEvent(changes, this.#init));
+                    }
+                }
             }
         };
         const observerConfig = {
@@ -143,6 +253,23 @@ export class MountObserver extends EventTarget {
         const { loadImports } = await import('./loadImports.js');
         this.#modules = await loadImports(this.#init.import);
         this.#importsLoaded = true;
+        // 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.whereInstanceOf !== undefined) {
+                    // Validate that it's a Constructor or array of Constructors
+                    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 whereInstanceOf: must be a Constructor or array of Constructors`);
+                        }
+                    }
+                }
+            }
+        }
         this.dispatchEvent(new LoadEvent(this.#modules, this.#init));
     }
     #processNode(node) {
@@ -171,6 +298,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)
@@ -184,28 +318,45 @@ export class MountObserver extends EventTarget {
         }
         // Check whereInstanceOf condition if specified
         if (this.#init.whereInstanceOf) {
-            const constructors = Array.isArray(this.#init.whereInstanceOf)
-                ? this.#init.whereInstanceOf
-                : [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) => 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
@@ -214,105 +365,119 @@ export class MountObserver extends EventTarget {
         const context = {
             modules: this.#modules,
             observer: this,
-            observeInfo: {
-                rootNode
-            }
+            rootNode,
+            mountInit: this.#init,
         };
         // Apply assignGingerly if specified
-        if (this.#init.assignGingerly) {
-            const { assignGingerly } = await import('assign-gingerly/index.js');
-            assignGingerly(element, this.#init.assignGingerly);
-        }
-        // Call do callback
-        if (this.#init.do) {
-            if (typeof this.#init.do === 'function') {
-                this.#init.do(element, context);
+        if (this.#asgMtSource) {
+            element.assignGingerly(this.#asgMtSource);
+        }
+        // Check if notifier exists BEFORE calling do callback
+        const notifierExistedBeforeDo = this.#elementNotifiers.has(element);
+        // Call do callback(s) - can be string, function, or array
+        if (this.#init.do !== undefined) {
+            const doHandlers = Array.isArray(this.#init.do) ? this.#init.do : [this.#init.do];
+            for (const handler of doHandlers) {
+                if (typeof handler === 'string') {
+                    // Registered handler - instantiate it
+                    const HandlerClass = MountObserver.#handlerRegistry.get(handler);
+                    if (HandlerClass) {
+                        new HandlerClass(element, context);
+                    }
+                }
+                else if (typeof handler === 'function') {
+                    // Inline function
+                    handler(element, context);
+                }
             }
-            else if (this.#init.do.mount) {
-                this.#init.do.mount(element, context);
+        }
+        // Call referenced do functions from imported modules
+        if (this.#init.reference !== undefined) {
+            const references = arr(this.#init.reference);
+            for (const index of references) {
+                const module = this.#modules[index];
+                if (module && typeof module.do === 'function') {
+                    module.do(element, context);
+                }
             }
         }
         // Dispatch mount event
-        this.dispatchEvent(new MountEvent(element, this.#modules, this.#init));
+        const mountEvent = new MountEvent(element, this.#modules, this.#init, context);
+        this.dispatchEvent(mountEvent);
+        // Dispatch to element-specific notifier only if:
+        // 1. Notifier existed before do callback (wasn't just created), AND
+        // 2. Element hasn't already received a mount event on its notifier
+        if (notifierExistedBeforeDo && !this.#notifierMountedElements.has(element)) {
+            const notifier = this.#elementNotifiers.get(element);
+            if (notifier) {
+                this.#notifierMountedElements.add(element);
+                notifier.dispatchEvent(mountEvent);
+            }
+        }
+        // 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));
+                // Also dispatch to element-specific notifier
+                const notifier = this.#elementNotifiers.get(element);
+                if (notifier) {
+                    notifier.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.#asgMtSource = undefined;
+            return;
+        }
+        await import('assign-gingerly/object-extension.js');
+        // Update the source config for future mounted elements
+        if (this.#asgMtSource === undefined) {
+            // No existing config, just clone the passed in object
+            this.#asgMtSource = structuredClone(config);
+        }
+        else {
+            // Merge into existing config using assignGingerly
+            this.#asgMtSource.assignGingerly(config);
+            //assignGingerly(this.#asgMtSource, config);
+        }
+        // Apply to already mounted elements using setWeak for iteration
+        for (const ref of this.#mountedElements.setWeak) {
+            const element = ref.deref();
+            if (element) {
+                element.assignGingerly(config);
+                //assignGingerly(element, config);
             }
         }
-        return changes;
     }
-    #handleRemoval(element) {
-        if (!this.#mountedElements.has(element)) {
+    async #handleRemoval(element) {
+        if (!this.#mountedElements.weakSet.has(element)) {
             return;
         }
-        this.#mountedElements.delete(element);
+        // Apply assignGingerly if specified for dismount
+        if (this.#asgDisMtSource) {
+            element.assignGingerly(this.#asgDisMtSource);
+        }
+        // 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;
+            }
+        }
+        // Remove from processed set so element can be re-mounted
+        this.#processedDoForElement.delete(element);
+        // Remove from notifier mounted tracking so mount event can fire again
+        this.#notifierMountedElements.delete(element);
         const rootNode = this.#rootNode?.deref();
         if (!rootNode) {
             // Root node was garbage collected
@@ -321,24 +486,28 @@ export class MountObserver extends EventTarget {
         const context = {
             modules: this.#modules,
             observer: this,
-            observeInfo: {
-                rootNode
-            }
+            rootNode,
+            mountInit: this.#init,
         };
-        // Call dismount callback
-        if (this.#init.do && typeof this.#init.do !== 'function' && this.#init.do.dismount) {
-            this.#init.do.dismount(element, context);
-        }
         // Dispatch dismount event
-        this.dispatchEvent(new DismountEvent(element, 'where-element-matches-failed', this.#init));
+        const dismountEvent = new DismountEvent(element, 'where-element-matches-failed', this.#init);
+        this.dispatchEvent(dismountEvent);
+        // Dispatch to element-specific notifier
+        const notifier = this.#elementNotifiers.get(element);
+        if (notifier) {
+            notifier.dispatchEvent(dismountEvent);
+        }
         // Check if element is being moved within the same root
         // If it's truly disconnected, dispatch disconnect event
         setTimeout(() => {
             if (!rootNode.contains(element)) {
-                if (this.#init.do && typeof this.#init.do !== 'function' && this.#init.do.disconnect) {
-                    this.#init.do.disconnect(element, context);
+                const disconnectEvent = new DisconnectEvent(element, this.#init);
+                this.dispatchEvent(disconnectEvent);
+                // Dispatch to element-specific notifier
+                const notifier = this.#elementNotifiers.get(element);
+                if (notifier) {
+                    notifier.dispatchEvent(disconnectEvent);
                 }
-                this.dispatchEvent(new DisconnectEvent(element, this.#init));
             }
         }, 0);
     }