mount-observer 0.1.1 → 0.1.3

package/MountObserver.ts

@@ -3,30 +3,48 @@ import {
     MountObserverOptions,
     IMountObserver,
     MountContext,
-    AttrChange
+    AttrChange,
+    WeakDual,
+    EventConfig,
+    EventConstructor,
+    Constructor
 } from './types.js';
+import { arr } from './arr.js';
 import {
     MountEvent,
     DismountEvent,
     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 {
+    // Static registry for registered handlers
+    static #handlerRegistry = new Map<string, Constructor>();
+    
+    static define(name: string, handler: Constructor): void {
+        if (this.#handlerRegistry.has(name)) {
+            throw new Error(`${name} already in use`);
+        }
+        this.#handlerRegistry.set(name, handler);
+    }
+    
     #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 +52,13 @@ 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;
+    #asgMtSource: Record<string, any> | undefined;
+    #asgDisMtSource: Record<string, any> | undefined;
+    #elementNotifiers = new WeakMap<Element, EventTarget>();
+    #notifierMountedElements = new WeakSet<Element>();
 
     constructor(init: MountInit, options: MountObserverOptions = {}) {
         super();
@@ -43,23 +66,89 @@ export class MountObserver extends EventTarget implements IMountObserver {
         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(): void {
+        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(): void {
+        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(): Promise<void> {
         if (!this.#matchesWhereAttrFn) {
             const { matchesWhereAttr } = await import('./whereAttr.js');
@@ -69,6 +158,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> {
@@ -94,10 +196,26 @@ export class MountObserver extends EventTarget implements IMountObserver {
         return this.#abortController.signal;
     }
 
+    getNotifier(element: Element): EventTarget {
+        // 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: Node): Promise<void> {
         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);
 
@@ -111,6 +229,11 @@ export class MountObserver extends EventTarget implements IMountObserver {
             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);
@@ -140,8 +263,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);
                     }
                 }
@@ -150,6 +273,22 @@ export class MountObserver extends EventTarget implements IMountObserver {
             // 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<Element, AttrChange[]>();
+                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));
+                    }
+                }
             }
         };
 
@@ -197,6 +336,26 @@ export class MountObserver extends EventTarget implements IMountObserver {
         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));
     }
 
@@ -231,6 +390,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)
@@ -246,9 +413,7 @@ export class MountObserver extends EventTarget implements IMountObserver {
         
         // 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);
@@ -258,12 +423,31 @@ export class MountObserver extends EventTarget implements IMountObserver {
             }
         }
         
+        // 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;
     }
 
     async #handleMatch(element: Element): Promise<void> {
-        if (this.#processedElements.has(element)) {
+        if (this.#processedDoForElement.has(element)) {
             return;
         }
 
@@ -272,8 +456,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) {
@@ -284,123 +473,138 @@ export class MountObserver extends EventTarget implements IMountObserver {
         const context: MountContext = {
             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);
+        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);
+                }
+            }
         }
 
-        // Call do callback
-        if (this.#init.do) {
-            if (typeof this.#init.do === 'function') {
-                this.#init.do(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: 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.#asgMtSource = 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);
+
+        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);
         }
-        
-        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) {
+                element.assignGingerly(config);
+                //assignGingerly(element, config);
             }
         }
-        
-        return changes;
     }
 
-    #handleRemoval(element: Element): void {
-        if (!this.#mountedElements.has(element)) {
+    async #handleRemoval(element: Element): Promise<void> {
+        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) {
@@ -411,28 +615,34 @@ export class MountObserver extends EventTarget implements IMountObserver {
         const context: MountContext = {
             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);
-                }
 
-                this.dispatchEvent(new DisconnectEvent(element, this.#init));
+                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);
+                }
             }
         }, 0);
     }