mount-observer 0.1.1 → 0.1.3

package/SharedMutationObserver.js

@@ -14,6 +14,12 @@ const sharedObservers = new WeakMap();
 export function registerSharedObserver(rootNode, callback, config) {
     let sharedData = sharedObservers.get(rootNode);
     if (!sharedData) {
+        // Create shared data structure first
+        sharedData = {
+            observer: null, // Will be set immediately below
+            callbacks: new Set(),
+            config
+        };
         // Create new shared observer for this root node
         const observer = new MutationObserver((mutations) => {
             // Distribute mutations to all registered callbacks
@@ -22,13 +28,10 @@ export function registerSharedObserver(rootNode, callback, config) {
                 cb(mutations);
             }
         });
-        observer.observe(rootNode, config);
-        sharedData = {
-            observer,
-            callbacks: new Set(),
-            config
-        };
+        sharedData.observer = observer;
         sharedObservers.set(rootNode, sharedData);
+        // Start observing after everything is set up
+        observer.observe(rootNode, config);
     }
     else {
         // Verify config matches (for safety)

package/SharedMutationObserver.ts

@@ -29,6 +29,13 @@ export function registerSharedObserver(
     let sharedData = sharedObservers.get(rootNode);
     
     if (!sharedData) {
+        // Create shared data structure first
+        sharedData = {
+            observer: null as any, // Will be set immediately below
+            callbacks: new Set(),
+            config
+        };
+        
         // Create new shared observer for this root node
         const observer = new MutationObserver((mutations) => {
             // Distribute mutations to all registered callbacks
@@ -38,15 +45,11 @@ export function registerSharedObserver(
             }
         });
         
-        observer.observe(rootNode, config);
-        
-        sharedData = {
-            observer,
-            callbacks: new Set(),
-            config
-        };
-        
+        sharedData.observer = observer;
         sharedObservers.set(rootNode, sharedData);
+        
+        // Start observing after everything is set up
+        observer.observe(rootNode, config);
     } else {
         // Verify config matches (for safety)
         // In practice, all MountObservers should use the same config

package/arr.js

@@ -0,0 +1,13 @@
+/**
+ * Utility function to normalize a value to an array.
+ * - If undefined, returns empty array
+ * - If already an array, returns as-is
+ * - Otherwise, wraps the value in an array
+ *
+ * @param inp - Value to normalize to array
+ * @returns Array containing the value(s)
+ */
+export function arr(inp) {
+    return inp === undefined ? []
+        : Array.isArray(inp) ? inp : [inp];
+}

package/arr.ts

@@ -0,0 +1,13 @@
+/**
+ * Utility function to normalize a value to an array.
+ * - If undefined, returns empty array
+ * - If already an array, returns as-is
+ * - Otherwise, wraps the value in an array
+ * 
+ * @param inp - Value to normalize to array
+ * @returns Array containing the value(s)
+ */
+export function arr<T = any>(inp: T | T[] | undefined): T[] {
+    return inp === undefined ? []
+        : Array.isArray(inp) ? inp : [inp];
+}

package/attrChanges.js

@@ -0,0 +1,70 @@
+/**
+ * Checks for attribute changes on a mounted element.
+ * This module is dynamically loaded only when whereAttr is configured.
+ */
+export function checkAttrChanges(element, mountInit, buildAttrCoordinateMapFn, elementAttrStates, elementOnceAttrs) {
+    if (!mountInit.whereAttr || !buildAttrCoordinateMapFn) {
+        return [];
+    }
+    const isCustomElement = element.tagName.toLowerCase().includes('-');
+    const attrCoordMap = buildAttrCoordinateMapFn(mountInit.whereAttr, isCustomElement);
+    // Get or create the attribute state for this element
+    let attrState = elementAttrStates.get(element);
+    if (!attrState) {
+        attrState = new Map();
+        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 = mountInit.map?.[coordinate] || null;
+        const isOnce = mapEntry?.once === true;
+        // If "once" is true, check if we've already seen this attribute
+        if (isOnce) {
+            let onceAttrs = elementOnceAttrs.get(element);
+            if (!onceAttrs) {
+                onceAttrs = new Set();
+                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);
+                }
+            }
+        }
+    }
+    return changes;
+}

package/attrChanges.ts

@@ -0,0 +1,90 @@
+import type { AttrChange, MountInit } from './types.d.ts';
+
+/**
+ * Checks for attribute changes on a mounted element.
+ * This module is dynamically loaded only when whereAttr is configured.
+ */
+export function checkAttrChanges(
+    element: Element,
+    mountInit: MountInit,
+    buildAttrCoordinateMapFn: (whereAttr: any, isCustomElement: boolean) => any,
+    elementAttrStates: WeakMap<Element, Map<string, string | null>>,
+    elementOnceAttrs: WeakMap<Element, Set<string>>
+): AttrChange[] {
+    if (!mountInit.whereAttr || !buildAttrCoordinateMapFn) {
+        return [];
+    }
+    
+    const isCustomElement = element.tagName.toLowerCase().includes('-');
+    const attrCoordMap = buildAttrCoordinateMapFn(mountInit.whereAttr, isCustomElement);
+    
+    // Get or create the attribute state for this element
+    let attrState = elementAttrStates.get(element);
+    if (!attrState) {
+        attrState = new Map<string, string | null>();
+        elementAttrStates.set(element, attrState);
+    }
+    
+    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 = mountInit.map?.[coordinate] || null;
+        const isOnce = mapEntry?.once === true;
+        
+        // If "once" is true, check if we've already seen this attribute
+        if (isOnce) {
+            let onceAttrs = elementOnceAttrs.get(element);
+            if (!onceAttrs) {
+                onceAttrs = new Set<string>();
+                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);
+                }
+            }
+        }
+    }
+    
+    return changes;
+}

package/emitEvents.js

@@ -0,0 +1,103 @@
+/**
+ * Emits events from a mounted element based on the mountedElemEmits configuration.
+ * This module is dynamically loaded only when mountedElemEmits is configured.
+ */
+export async function emitMountedElementEvents(element, mountInit, processedEventsForElement) {
+    const configs = Array.isArray(mountInit.mountedElemEmits)
+        ? mountInit.mountedElemEmits
+        : [mountInit.mountedElemEmits];
+    for (const config of configs) {
+        await emitSingleEvent(element, mountInit, config, processedEventsForElement);
+    }
+}
+async function emitSingleEvent(element, mountInit, config, processedEventsForElement) {
+    // Check if this event should only fire once per element
+    if (config.oncePerMountedElement) {
+        const eventId = getEventId(config);
+        let processedEvents = processedEventsForElement.get(element);
+        if (!processedEvents) {
+            processedEvents = new Set();
+            processedEventsForElement.set(element, processedEvents);
+        }
+        if (processedEvents.has(eventId)) {
+            return; // Already emitted for this element
+        }
+        processedEvents.add(eventId);
+    }
+    // Resolve event constructor
+    const EventCtor = resolveEventConstructor(config.event);
+    // Process args with magic string substitution
+    const processedArgs = config.args !== undefined
+        ? processMagicStrings(config.args, element, mountInit)
+        : undefined;
+    // Construct the event
+    let event;
+    if (processedArgs === undefined) {
+        event = new EventCtor();
+    }
+    else if (Array.isArray(processedArgs)) {
+        // For array args, ensure bubbles is set if second arg is an options object
+        if (processedArgs.length === 2 && typeof processedArgs[0] === 'string' && typeof processedArgs[1] === 'object' && processedArgs[1] !== null) {
+            // Merge bubbles: true into the options object if not already set
+            const options = { bubbles: true, ...processedArgs[1] };
+            event = new EventCtor(processedArgs[0], options);
+        }
+        else {
+            event = new EventCtor(...processedArgs);
+        }
+    }
+    else {
+        // Single arg - if it's a string (event name), add bubbles: true by default
+        if (typeof processedArgs === 'string') {
+            event = new EventCtor(processedArgs, { bubbles: true });
+        }
+        else {
+            event = new EventCtor(processedArgs);
+        }
+    }
+    // Apply eventProps if specified
+    if (config.eventProps) {
+        const { assignGingerly } = await import('assign-gingerly/assignGingerly.js');
+        const processedProps = processMagicStrings(config.eventProps, element, mountInit);
+        assignGingerly(event, processedProps);
+    }
+    // Dispatch the event from the mounted element
+    element.dispatchEvent(event);
+}
+function resolveEventConstructor(event) {
+    if (typeof event === 'string') {
+        const EventCtor = globalThis[event];
+        if (!EventCtor || typeof EventCtor !== 'function') {
+            throw new Error(`Event constructor "${event}" not found in globalThis`);
+        }
+        return EventCtor;
+    }
+    return event;
+}
+function getEventId(config) {
+    const eventName = typeof config.event === 'string' ? config.event : config.event.name;
+    const argsStr = JSON.stringify(config.args || '');
+    return `${eventName}:${argsStr}`;
+}
+function processMagicStrings(value, element, mountInit) {
+    if (typeof value === 'string') {
+        if (value === '{{mountedElement}}') {
+            return element;
+        }
+        if (value === '{{mountInit}}') {
+            return mountInit;
+        }
+        return value;
+    }
+    if (Array.isArray(value)) {
+        return value.map(item => processMagicStrings(item, element, mountInit));
+    }
+    if (value && typeof value === 'object') {
+        const processed = {};
+        for (const [key, val] of Object.entries(value)) {
+            processed[key] = processMagicStrings(val, element, mountInit);
+        }
+        return processed;
+    }
+    return value;
+}

package/emitEvents.ts

@@ -0,0 +1,126 @@
+import type { EventConfig, EventConstructor, MountInit } from './types.d.ts';
+
+/**
+ * Emits events from a mounted element based on the mountedElemEmits configuration.
+ * This module is dynamically loaded only when mountedElemEmits is configured.
+ */
+export async function emitMountedElementEvents(
+    element: Element,
+    mountInit: MountInit,
+    processedEventsForElement: WeakMap<Element, Set<string>>
+): Promise<void> {
+    const configs = Array.isArray(mountInit.mountedElemEmits) 
+        ? mountInit.mountedElemEmits 
+        : [mountInit.mountedElemEmits!];
+
+    for (const config of configs) {
+        await emitSingleEvent(element, mountInit, config, processedEventsForElement);
+    }
+}
+
+async function emitSingleEvent(
+    element: Element,
+    mountInit: MountInit,
+    config: EventConfig,
+    processedEventsForElement: WeakMap<Element, Set<string>>
+): Promise<void> {
+    // Check if this event should only fire once per element
+    if (config.oncePerMountedElement) {
+        const eventId = getEventId(config);
+        let processedEvents = processedEventsForElement.get(element);
+        
+        if (!processedEvents) {
+            processedEvents = new Set<string>();
+            processedEventsForElement.set(element, processedEvents);
+        }
+        
+        if (processedEvents.has(eventId)) {
+            return; // Already emitted for this element
+        }
+        
+        processedEvents.add(eventId);
+    }
+
+    // Resolve event constructor
+    const EventCtor = resolveEventConstructor(config.event);
+
+    // Process args with magic string substitution
+    const processedArgs = config.args !== undefined 
+        ? processMagicStrings(config.args, element, mountInit)
+        : undefined;
+
+    // Construct the event
+    let event: Event;
+    if (processedArgs === undefined) {
+        event = new EventCtor();
+    } else if (Array.isArray(processedArgs)) {
+        // For array args, ensure bubbles is set if second arg is an options object
+        if (processedArgs.length === 2 && typeof processedArgs[0] === 'string' && typeof processedArgs[1] === 'object' && processedArgs[1] !== null) {
+            // Merge bubbles: true into the options object if not already set
+            const options = { bubbles: true, ...processedArgs[1] };
+            event = new EventCtor(processedArgs[0], options);
+        } else {
+            event = new EventCtor(...processedArgs);
+        }
+    } else {
+        // Single arg - if it's a string (event name), add bubbles: true by default
+        if (typeof processedArgs === 'string') {
+            event = new EventCtor(processedArgs, { bubbles: true });
+        } else {
+            event = new EventCtor(processedArgs);
+        }
+    }
+
+    // Apply eventProps if specified
+    if (config.eventProps) {
+        const { assignGingerly } = await import('assign-gingerly/assignGingerly.js');
+        const processedProps = processMagicStrings(config.eventProps, element, mountInit);
+        assignGingerly(event, processedProps);
+    }
+
+    // Dispatch the event from the mounted element
+    element.dispatchEvent(event);
+}
+
+function resolveEventConstructor(event: string | EventConstructor): EventConstructor {
+    if (typeof event === 'string') {
+        const EventCtor = (globalThis as any)[event];
+        if (!EventCtor || typeof EventCtor !== 'function') {
+            throw new Error(`Event constructor "${event}" not found in globalThis`);
+        }
+        return EventCtor;
+    }
+    return event;
+}
+
+function getEventId(config: EventConfig): string {
+    const eventName = typeof config.event === 'string' ? config.event : config.event.name;
+    const argsStr = JSON.stringify(config.args || '');
+    return `${eventName}:${argsStr}`;
+}
+
+function processMagicStrings(value: any, element: Element, mountInit: MountInit): any {
+    if (typeof value === 'string') {
+        if (value === '{{mountedElement}}') {
+            return element;
+        }
+        if (value === '{{mountInit}}') {
+            return mountInit;
+        }
+        return value;
+    }
+
+    if (Array.isArray(value)) {
+        return value.map(item => processMagicStrings(item, element, mountInit));
+    }
+
+    if (value && typeof value === 'object') {
+        const processed: any = {};
+        for (const [key, val] of Object.entries(value)) {
+            processed[key] = processMagicStrings(val, element, mountInit);
+        }
+        return processed;
+    }
+
+    return value;
+}

package/index.js

@@ -1,3 +1,15 @@
 // Main entry point for MountObserver v2
 export { MountObserver } from './MountObserver.js';
-export { mountEventName, dismountEventName, disconnectEventName, loadEventName } from './constants.js';
+export { whereOutside } from './whereOutside.js';
+export { emitMountedElementEvents } from './emitEvents.js';
+export { checkAttrChanges } from './attrChanges.js';
+export { arr } from './arr.js';
+export { EvtRt } from './EvtRt.js';
+export { DefineCustomElementHandler } from './DefineCustomElementHandler.js';
+export { mountEventName, dismountEventName, disconnectEventName, loadEventName, attrchangeEventName, mediamatchEventName, mediaunmatchEventName } from './Events.js';
+// Register built-in handlers
+import { MountObserver } from './MountObserver.js';
+import { EvtRt } from './EvtRt.js';
+import { DefineCustomElementHandler } from './DefineCustomElementHandler.js';
+MountObserver.define('builtIns.logToConsole', EvtRt);
+MountObserver.define('builtIns.defineCustomElement', DefineCustomElementHandler);

package/index.ts

@@ -1,12 +1,17 @@
 // Main entry point for MountObserver v2
 export { MountObserver } from './MountObserver.js';
+export { whereOutside } from './whereOutside.js';
+export { emitMountedElementEvents } from './emitEvents.js';
+export { checkAttrChanges } from './attrChanges.js';
+export { arr } from './arr.js';
+export { EvtRt } from './EvtRt.js';
+export { DefineCustomElementHandler } from './DefineCustomElementHandler.js';
 export type {
     MountInit,
     MountObserverOptions,
     IMountObserver,
     MountContext,
     DoCallback,
-    DoCallbacks,
     ImportSpec,
     IMountEvent,
     IDismountEvent
@@ -20,3 +25,11 @@ export {
     mediamatchEventName,
     mediaunmatchEventName
 } from './Events.js';
+
+// Register built-in handlers
+import { MountObserver } from './MountObserver.js';
+import { EvtRt } from './EvtRt.js';
+import { DefineCustomElementHandler } from './DefineCustomElementHandler.js';
+
+MountObserver.define('builtIns.logToConsole', EvtRt);
+MountObserver.define('builtIns.defineCustomElement', DefineCustomElementHandler);

package/loadImports.js

@@ -1,7 +1,8 @@
 // Dynamic import loading utilities
 // Only loaded when MountInit.import is specified
+import { arr } from './arr.js';
 export async function loadImports(imports) {
-    const importArray = Array.isArray(imports) ? imports : [imports];
+    const importArray = arr(imports);
     const promises = importArray.map(imp => loadSingleImport(imp));
     return Promise.all(promises);
 }

package/loadImports.ts

@@ -2,11 +2,12 @@
 // Only loaded when MountInit.import is specified
 
 import { ImportSpec } from './types.js';
+import { arr } from './arr.js';
 
 export async function loadImports(
     imports: string | ImportSpec | Array<string | ImportSpec | [string, any]>
 ): Promise<any[]> {
-    const importArray = Array.isArray(imports) ? imports : [imports];
+    const importArray = arr(imports);
     const promises = importArray.map(imp => loadSingleImport(imp));
     return Promise.all(promises);
 }

package/mediaQuery.js

@@ -48,28 +48,26 @@ export function setupMediaQuery(init, rootNodeRef, mountedElements, modules, obs
         const context = {
             modules,
             observer: observer,
-            observeInfo: {
-                rootNode
-            }
+            rootNode,
+            mountInit: init
         };
-        // Get all mounted elements (we need to iterate through the DOM to find them)
+        // Get all mounted elements from the WeakDual setWeak
         const mountedElementsList = [];
-        const collectMountedElements = (node) => {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-                const element = node;
-                if (mountedElements.has(element)) {
-                    mountedElementsList.push(element);
-                }
+        for (const ref of mountedElements.setWeak) {
+            const element = ref.deref();
+            if (element) {
+                mountedElementsList.push(element);
             }
-            node.childNodes.forEach(child => collectMountedElements(child));
-        };
-        collectMountedElements(rootNode);
+        }
         // Dismount each element
         for (const element of mountedElementsList) {
-            mountedElements.delete(element);
-            // Call dismount callback
-            if (init.do && typeof init.do !== 'function' && init.do.dismount) {
-                init.do.dismount(element, context);
+            // Remove from both structures
+            mountedElements.weakSet.delete(element);
+            for (const ref of mountedElements.setWeak) {
+                if (ref.deref() === element) {
+                    mountedElements.setWeak.delete(ref);
+                    break;
+                }
             }
             // Dispatch dismount event with reason
             observer.dispatchEvent(new DismountEvent(element, 'media-query-failed', init));

package/mediaQuery.ts

@@ -1,11 +1,11 @@
 // Media query handling for MountObserver
-import type { MountInit, MountContext } from './types.js';
+import type { MountInit, MountContext, WeakDual } from './types.js';
 import { MediaMatchEvent, MediaUnmatchEvent, DismountEvent } from './Events.js';
 
 export function setupMediaQuery(
     init: MountInit,
     rootNodeRef: WeakRef<Node>,
-    mountedElements: WeakSet<Element>,
+    mountedElements: WeakDual<Element>,
     modules: any[],
     observer: EventTarget,
     processNode: (node: Node) => void
@@ -69,33 +69,31 @@ export function setupMediaQuery(
         const context: MountContext = {
             modules,
             observer: observer as any,
-            observeInfo: {
-                rootNode
-            }
+            rootNode,
+            mountInit: init
         };
         
-        // Get all mounted elements (we need to iterate through the DOM to find them)
+        // Get all mounted elements from the WeakDual setWeak
         const mountedElementsList: Element[] = [];
-        const collectMountedElements = (node: Node) => {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-                const element = node as Element;
-                if (mountedElements.has(element)) {
-                    mountedElementsList.push(element);
-                }
+        for (const ref of mountedElements.setWeak) {
+            const element = ref.deref();
+            if (element) {
+                mountedElementsList.push(element);
             }
-            node.childNodes.forEach(child => collectMountedElements(child));
-        };
-        collectMountedElements(rootNode);
+        }
         
         // Dismount each element
         for (const element of mountedElementsList) {
-            mountedElements.delete(element);
-            
-            // Call dismount callback
-            if (init.do && typeof init.do !== 'function' && init.do.dismount) {
-                init.do.dismount(element, context);
+            // Remove from both structures
+            mountedElements.weakSet.delete(element);
+            for (const ref of mountedElements.setWeak) {
+                if (ref.deref() === element) {
+                    mountedElements.setWeak.delete(ref);
+                    break;
+                }
             }
             
+            
             // Dispatch dismount event with reason
             observer.dispatchEvent(new DismountEvent(element, 'media-query-failed', init));
         }