mount-observer 0.1.0 → 0.1.2

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/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,
@@ -15,5 +18,9 @@ export {
     mountEventName,
     dismountEventName,
     disconnectEventName,
-    loadEventName
-} from './constants.js';
+    loadEventName,
+    attrchangeEventName,
+    mediamatchEventName,
+    mediaunmatchEventName
+} from './Events.js';
+

package/mediaQuery.js

@@ -0,0 +1,89 @@
+import { MediaMatchEvent, MediaUnmatchEvent, DismountEvent } from './Events.js';
+export function setupMediaQuery(init, rootNodeRef, mountedElements, modules, observer, processNode) {
+    const { whereMediaMatches } = init;
+    // Create or use MediaQueryList
+    let mediaQueryList;
+    if (typeof whereMediaMatches === 'string') {
+        mediaQueryList = window.matchMedia(whereMediaMatches);
+    }
+    else {
+        mediaQueryList = whereMediaMatches;
+    }
+    // Track current state
+    let mediaMatches = mediaQueryList.matches;
+    // Set up change listener
+    const mediaChangeHandler = (e) => {
+        const previousMatches = mediaMatches;
+        mediaMatches = e.matches;
+        if (e.matches && !previousMatches) {
+            // Media query now matches - wake up and process elements
+            handleMediaMatch();
+        }
+        else if (!e.matches && previousMatches) {
+            // Media query no longer matches - dismount all elements
+            handleMediaUnmatch();
+        }
+    };
+    function handleMediaMatch() {
+        // Dispatch mediamatch event if requested
+        if (init.getPlayByPlay) {
+            observer.dispatchEvent(new MediaMatchEvent(init));
+        }
+        // Process all elements in the observed node
+        const rootNode = rootNodeRef.deref();
+        if (rootNode) {
+            processNode(rootNode);
+        }
+    }
+    function handleMediaUnmatch() {
+        // Dispatch mediaunmatch event if requested
+        if (init.getPlayByPlay) {
+            observer.dispatchEvent(new MediaUnmatchEvent(init));
+        }
+        // Dismount all currently mounted elements
+        const rootNode = rootNodeRef.deref();
+        if (!rootNode) {
+            return;
+        }
+        const context = {
+            modules,
+            observer: observer,
+            observeInfo: {
+                rootNode
+            }
+        };
+        // Get all mounted elements from the WeakDual setWeak
+        const mountedElementsList = [];
+        for (const ref of mountedElements.setWeak) {
+            const element = ref.deref();
+            if (element) {
+                mountedElementsList.push(element);
+            }
+        }
+        // Dismount each element
+        for (const element of mountedElementsList) {
+            // 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);
+            }
+            // Dispatch dismount event with reason
+            observer.dispatchEvent(new DismountEvent(element, 'media-query-failed', init));
+        }
+    }
+    mediaQueryList.addEventListener('change', mediaChangeHandler);
+    return {
+        mediaQueryList,
+        mediaMatches,
+        cleanup: () => {
+            mediaQueryList.removeEventListener('change', mediaChangeHandler);
+        }
+    };
+}

package/mediaQuery.ts

@@ -0,0 +1,116 @@
+// Media query handling for MountObserver
+import type { MountInit, MountContext, WeakDual } from './types.js';
+import { MediaMatchEvent, MediaUnmatchEvent, DismountEvent } from './Events.js';
+
+export function setupMediaQuery(
+    init: MountInit,
+    rootNodeRef: WeakRef<Node>,
+    mountedElements: WeakDual<Element>,
+    modules: any[],
+    observer: EventTarget,
+    processNode: (node: Node) => void
+): {
+    mediaQueryList: MediaQueryList;
+    mediaMatches: boolean;
+    cleanup: () => void;
+} {
+    const { whereMediaMatches } = init;
+    
+    // Create or use MediaQueryList
+    let mediaQueryList: MediaQueryList;
+    if (typeof whereMediaMatches === 'string') {
+        mediaQueryList = window.matchMedia(whereMediaMatches);
+    } else {
+        mediaQueryList = whereMediaMatches!;
+    }
+    
+    // Track current state
+    let mediaMatches = mediaQueryList.matches;
+    
+    // Set up change listener
+    const mediaChangeHandler = (e: MediaQueryListEvent) => {
+        const previousMatches = mediaMatches;
+        mediaMatches = e.matches;
+        
+        if (e.matches && !previousMatches) {
+            // Media query now matches - wake up and process elements
+            handleMediaMatch();
+        } else if (!e.matches && previousMatches) {
+            // Media query no longer matches - dismount all elements
+            handleMediaUnmatch();
+        }
+    };
+    
+    function handleMediaMatch(): void {
+        // Dispatch mediamatch event if requested
+        if (init.getPlayByPlay) {
+            observer.dispatchEvent(new MediaMatchEvent(init));
+        }
+        
+        // Process all elements in the observed node
+        const rootNode = rootNodeRef.deref();
+        if (rootNode) {
+            processNode(rootNode);
+        }
+    }
+    
+    function handleMediaUnmatch(): void {
+        // Dispatch mediaunmatch event if requested
+        if (init.getPlayByPlay) {
+            observer.dispatchEvent(new MediaUnmatchEvent(init));
+        }
+        
+        // Dismount all currently mounted elements
+        const rootNode = rootNodeRef.deref();
+        if (!rootNode) {
+            return;
+        }
+        
+        const context: MountContext = {
+            modules,
+            observer: observer as any,
+            observeInfo: {
+                rootNode
+            }
+        };
+        
+        // Get all mounted elements from the WeakDual setWeak
+        const mountedElementsList: Element[] = [];
+        for (const ref of mountedElements.setWeak) {
+            const element = ref.deref();
+            if (element) {
+                mountedElementsList.push(element);
+            }
+        }
+        
+        // Dismount each element
+        for (const element of mountedElementsList) {
+            // 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);
+            }
+            
+            // Dispatch dismount event with reason
+            observer.dispatchEvent(new DismountEvent(element, 'media-query-failed', init));
+        }
+    }
+    
+    mediaQueryList.addEventListener('change', mediaChangeHandler);
+    
+    return {
+        mediaQueryList,
+        mediaMatches,
+        cleanup: () => {
+            mediaQueryList.removeEventListener('change', mediaChangeHandler);
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
@@ -13,22 +13,37 @@
   },
   "exports": {
     ".": {
+      "default": "./index.js",
+      "types": "./index.ts"
+    },
+    "./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": [
     "*.js",
     "*.ts"
   ],
-  "types": "./ts-refs/mount-observer/types.d.ts",
+  "types": "./types.d.ts",
   "scripts": {
     "serve": "node ./node_modules/spa-ssi/serve.js",
     "test": "playwright test",
     "safari": "npx playwright wk http://localhost:8000",
     "update": "ncu -u && npm install"
   },
-  "author": "",
+  "author": "Bruce B. Anderson <anderson.bruce.b@gmail.com>",
   "license": "MIT"
 }