mount-observer 0.1.2 → 0.1.3

package/MountObserver.js

@@ -1,7 +1,16 @@
+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;
@@ -22,30 +31,81 @@ export class MountObserver extends EventTarget {
     #checkAttrChangesFn = null;
     #mediaQueryCleanup;
     #mediaMatches = true;
-    #assignGingerlySource;
+    #asgMtSource;
+    #asgDisMtSource;
+    #elementNotifiers = new WeakMap();
+    #notifierMountedElements = new WeakSet();
     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);
+        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');
@@ -75,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) {
@@ -88,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);
@@ -124,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 = {
@@ -161,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) {
@@ -209,15 +318,28 @@ 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;
     }
@@ -243,26 +365,55 @@ export class MountObserver extends EventTarget {
         const context = {
             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);
-        }
-        // 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');
@@ -273,37 +424,48 @@ export class MountObserver extends EventTarget {
             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));
+                }
             }
         }
     }
     async assignGingerly(config) {
         // 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) {
+    async #handleRemoval(element) {
         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) {
@@ -312,6 +474,10 @@ export class MountObserver extends EventTarget {
                 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
@@ -320,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);
     }