mount-observer 0.1.1 → 0.1.2

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/index.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/index.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.ts

@@ -1,5 +1,8 @@
 // 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 type {
     MountInit,
     MountObserverOptions,
@@ -20,3 +23,4 @@ export {
     mediamatchEventName,
     mediaunmatchEventName
 } from './Events.js';
+

package/mediaQuery.js

@@ -52,21 +52,24 @@ export function setupMediaQuery(init, rootNodeRef, mountedElements, modules, obs
                 rootNode
             }
         };
-        // 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);
+            // Remove from both structures
+            mountedElements.weakSet.delete(element);
+            for (const ref of mountedElements.setWeak) {
+                if (ref.deref() === element) {
+                    mountedElements.setWeak.delete(ref);
+                    break;
+                }
+            }
             // Call dismount callback
             if (init.do && typeof init.do !== 'function' && init.do.dismount) {
                 init.do.dismount(element, context);

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
@@ -74,22 +74,25 @@ export function setupMediaQuery(
             }
         };
         
-        // 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);
+            // Remove from both structures
+            mountedElements.weakSet.delete(element);
+            for (const ref of mountedElements.setWeak) {
+                if (ref.deref() === element) {
+                    mountedElements.setWeak.delete(ref);
+                    break;
+                }
+            }
             
             // Call dismount callback
             if (init.do && typeof init.do !== 'function' && init.do.dismount) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
@@ -19,6 +19,18 @@
     "./MountObserver.js": {
       "default": "./MountObserver.js",
       "types": "./MountObserver.ts"
+    },
+    "./whereOutside.js": {
+      "default": "./whereOutside.js",
+      "types": "./whereOutside.ts"
+    },
+    "./emitEvents.js": {
+      "default": "./emitEvents.js",
+      "types": "./emitEvents.ts"
+    },
+    "./attrChanges.js": {
+      "default": "./attrChanges.js",
+      "types": "./attrChanges.ts"
     }
   },
   "files": [

package/types.d.ts

@@ -2,6 +2,15 @@
 
 export type Constructor = new (...args: any[]) => any;
 
+export type EventConstructor = {new(...args: any[]): Event};
+
+export interface EventConfig {
+    event: string | EventConstructor;
+    args?: any | any[];
+    eventProps?: Record<string, any>;
+    oncePerMountedElement?: boolean;
+}
+
 export type DismountReason = 
     | 'media-query-failed'
     | 'where-element-matches-failed';
@@ -11,12 +20,14 @@ export interface MountInit {
     whereAttr?: WhereAttr;
     whereInstanceOf?: Constructor | Constructor[];
     whereMediaMatches?: string | MediaQueryList;
+    whereOutside?: string;
     import?: string | ImportSpec | Array<string | ImportSpec>;
     do?: DoCallback | DoCallbacks;
     loadingEagerness?: 'eager' | 'lazy';
     assignGingerly?: Record<string, any>;
     map?: MapConfig;
     getPlayByPlay?: boolean;
+    mountedElemEmits?: EventConfig | EventConfig[];
 }
 
 export interface MapConfig {
@@ -71,10 +82,16 @@ export interface MountObserverOptions {
     disconnectedSignal?: AbortSignal;
 }
 
+export interface WeakDual<T extends Object>{
+    weakSet: WeakSet<T>,
+    setWeak: Set<WeakRef<T>>
+}
+
 export interface IMountObserver extends EventTarget {
     observe(rootNode: Node): Promise<void>;
     disconnect(): void;
     disconnectedSignal: AbortSignal;
+    assignGingerly(config: Record<string, any> | undefined): Promise<void>;
 }
 
 export interface IMountEvent extends Event {

package/whereOutside.js

@@ -0,0 +1,19 @@
+/**
+ * Check if an element is outside (not inside) any ancestor matching a selector.
+ * This implements "donut hole" scoping.
+ *
+ * @param rootNode - The root node to stop traversal at (not checked against selector)
+ * @param matchCandidate - The element to check
+ * @param outside - CSS selector for excluding ancestors
+ * @returns true if element is outside all matching ancestors, false otherwise
+ */
+export function whereOutside(rootNode, matchCandidate, outside) {
+    let current = matchCandidate.parentElement;
+    while (current && current !== rootNode) {
+        if (current.matches(outside)) {
+            return false; // Found an excluding ancestor
+        }
+        current = current.parentElement;
+    }
+    return true; // No excluding ancestors found
+}

package/whereOutside.ts

@@ -0,0 +1,25 @@
+/**
+ * Check if an element is outside (not inside) any ancestor matching a selector.
+ * This implements "donut hole" scoping.
+ * 
+ * @param rootNode - The root node to stop traversal at (not checked against selector)
+ * @param matchCandidate - The element to check
+ * @param outside - CSS selector for excluding ancestors
+ * @returns true if element is outside all matching ancestors, false otherwise
+ */
+export function whereOutside(
+    rootNode: Node,
+    matchCandidate: Element,
+    outside: string
+): boolean {
+    let current = matchCandidate.parentElement;
+    
+    while (current && current !== rootNode) {
+        if (current.matches(outside)) {
+            return false;  // Found an excluding ancestor
+        }
+        current = current.parentElement;
+    }
+    
+    return true;  // No excluding ancestors found
+}