mount-observer 0.1.2 → 0.1.4

package/MountObserver.ts

@@ -6,8 +6,10 @@ import {
     AttrChange,
     WeakDual,
     EventConfig,
-    EventConstructor
+    EventConstructor,
+    Constructor
 } from './types.js';
+import { arr } from './arr.js';
 import {
     MountEvent,
     DismountEvent,
@@ -23,6 +25,16 @@ import {
 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;
@@ -43,7 +55,10 @@ export class MountObserver extends EventTarget implements IMountObserver {
     #checkAttrChangesFn: ((element: Element) => AttrChange[]) | null = null;
     #mediaQueryCleanup?: () => void;
     #mediaMatches: boolean = true;
-    #assignGingerlySource: Record<string, any> | undefined;
+    #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();
@@ -51,9 +66,16 @@ 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);
+        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) {
@@ -62,17 +84,71 @@ export class MountObserver extends EventTarget implements IMountObserver {
             });
         }
 
+        // 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');
@@ -120,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);
 
@@ -137,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);
@@ -176,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));
+                    }
+                }
             }
         };
 
@@ -223,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));
     }
 
@@ -237,8 +370,8 @@ export class MountObserver extends EventTarget implements IMountObserver {
         }
 
         // Process children
-        if (node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.DOCUMENT_NODE) {
-            const root = node as Element | Document;
+        if ('querySelectorAll' in node) {
+            const root = node as DocumentFragment;
             
             // Get all elements matching the CSS selector first
             root.querySelectorAll(this.#init.whereElementMatches).forEach(child => {
@@ -280,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);
@@ -292,6 +423,25 @@ 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;
     }
@@ -323,28 +473,62 @@ 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.#assignGingerlySource) {
-            const { assignGingerly } = await import('assign-gingerly/index.js');
-            assignGingerly(element, this.#assignGingerlySource);
+        if (this.#asgMtSource) {
+            element.assignGingerly(this.#asgMtSource);
         }
 
-        // 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);
+        // 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 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) {
@@ -357,6 +541,12 @@ export class MountObserver extends EventTarget implements IMountObserver {
             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));
+                }
             }
         }
     }
@@ -364,35 +554,43 @@ export class MountObserver extends EventTarget implements IMountObserver {
     async assignGingerly(config: Record<string, any> | undefined): Promise<void> {
         // Handle undefined case
         if (config === undefined) {
-            this.#assignGingerlySource = undefined;
+            this.#asgMtSource = undefined;
             return;
         }
 
-        const { assignGingerly } = await import('assign-gingerly/index.js');
+        await import('assign-gingerly/object-extension.js');
 
         // Update the source config for future mounted elements
-        if (this.#assignGingerlySource === undefined) {
+        if (this.#asgMtSource === undefined) {
             // No existing config, just clone the passed in object
-            this.#assignGingerlySource = structuredClone(config);
+            this.#asgMtSource = structuredClone(config);
         } else {
             // Merge into existing config using assignGingerly
-            assignGingerly(this.#assignGingerlySource, config);
+            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) {
-                assignGingerly(element, config);
+                element.assignGingerly(config);
+                //assignGingerly(element, config);
             }
         }
     }
 
-    #handleRemoval(element: Element): void {
+    async #handleRemoval(element: Element): Promise<void> {
         if (!this.#mountedElements.weakSet.has(element)) {
             return;
         }
 
+        
+
+        // 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) {
@@ -401,6 +599,12 @@ export class MountObserver extends EventTarget implements IMountObserver {
                 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);
     }