mount-observer 0.1.11 → 0.1.13

package/RegistryMountCoordinator.js

@@ -0,0 +1,125 @@
+/**
+ * Coordinates MountObserver instances across multiple DOM scopes that share
+ * the same CustomElementRegistry. This enables "mutually assured observing"
+ * where all scopes with the same registry share mount observers.
+ */
+const regObsGuid = 'iqj6MOueu0OP4CQi1a_4Sw';
+/**
+ * Maps CustomElementRegistry -> Map<MountConfig, WeakMap<Node, ObserverEntry>>
+ * The MountConfig object itself is used as the key (object identity).
+ * The innermost WeakMap maps registry root nodes to their observer entries.
+ */
+export function getRegistryObservers() {
+    if (!globalThis[regObsGuid]) {
+        globalThis[regObsGuid] = new WeakMap();
+    }
+    return globalThis[regObsGuid];
+}
+const registryScopeId = 'pt9dS-V7U0SC3Yk708_5Ww';
+/**
+ * Tracks all registry root nodes for each CustomElementRegistry.
+ * Used to iterate over all scopes when a new config is added.
+ */
+export function getRegistryScopes() {
+    if (!globalThis[registryScopeId]) {
+        globalThis[registryScopeId] = new WeakMap();
+    }
+    return globalThis[registryScopeId];
+}
+// const registryScopes = new WeakMap<
+//     CustomElementRegistry, 
+//     WeakDual<Node>
+// >();
+// Note: assignGingerly.ts already has a polyfill for getOrInsertComputed.
+// If this code will already have imported assignGingerly, then no need for the duplicate polyfill below.
+// Polyfill for Map.prototype.getOrInsertComputed and WeakMap.prototype.getOrInsertComputed
+if (typeof Map.prototype.getOrInsertComputed !== 'function') {
+    Map.prototype.getOrInsertComputed = function (key, insert) {
+        if (this.has(key))
+            return this.get(key);
+        const value = insert();
+        this.set(key, value);
+        return value;
+    };
+}
+if (typeof WeakMap.prototype.getOrInsertComputed !== 'function') {
+    WeakMap.prototype.getOrInsertComputed = function (key, insert) {
+        if (this.has(key))
+            return this.get(key);
+        const value = insert();
+        this.set(key, value);
+        return value;
+    };
+}
+/**
+ * Helper to create an observer entry asynchronously.
+ * Separated to handle async operations cleanly.
+ */
+async function createObserverEntry(config, registryRoot) {
+    // Dynamically import to avoid circular dependency
+    const { MountObserver: MountObserverClass } = await import('./MountObserver.js');
+    const observer = new MountObserverClass(config);
+    await observer.observe(registryRoot);
+    return {
+        config,
+        registryRootRef: new WeakRef(registryRoot),
+        observer
+    };
+}
+/**
+ * Get or create a mount observer for a specific registry + config + registry root combination.
+ * This function ensures that:
+ * 1. The config is registered with the registry's mountConfigRegistry
+ * 2. An observer exists for this specific registry root
+ * 3. All other registry roots with the same registry get observers for this config
+ * 4. All other configs get observers for this registry root
+ *
+ * @returns The ObserverEntry for the requested combination
+ */
+export async function getOrInsertObserverEntry(registry, config, registryRoot) {
+    // Add config to the registry's config list (if not already there)
+    registry.mountConfigRegistry.push(config);
+    // Get or create the nested map structure
+    const mountConfigMap = (getRegistryObservers()).getOrInsertComputed(registry, () => new Map());
+    const nodeToObserverMap = mountConfigMap.getOrInsertComputed(config, () => new WeakMap());
+    // Get or create the observer for this specific registry root
+    let observerEntry = nodeToObserverMap.get(registryRoot);
+    if (!observerEntry) {
+        observerEntry = await createObserverEntry(config, registryRoot);
+        nodeToObserverMap.set(registryRoot, observerEntry);
+    }
+    // Track this registry root in the scopes set
+    const scopes = getRegistryScopes().getOrInsertComputed(registry, () => ({
+        weakSet: new WeakSet(),
+        setWeak: new Set()
+    }));
+    // Add to tracking sets if not already present
+    if (!scopes.weakSet.has(registryRoot)) {
+        scopes.weakSet.add(registryRoot);
+        scopes.setWeak.add(new WeakRef(registryRoot));
+    }
+    // Get all configs for this registry
+    const configs = registry.mountConfigRegistry.items;
+    // Iterate over all known registry roots for this registry
+    const arr = Array.from(scopes.setWeak);
+    for (const regRootRef of arr) {
+        const regRoot = regRootRef.deref();
+        if (regRoot === undefined)
+            continue;
+        // For each config, ensure an observer exists for this registry root
+        for (const conf of configs) {
+            // Skip if this is the same config + root we just created
+            if (conf === config && registryRoot === regRoot)
+                continue;
+            // Get or create observer for this conf + regRoot combination
+            // This won't cause infinite loop because we only create if missing
+            const confObserverMap = mountConfigMap.getOrInsertComputed(conf, () => new WeakMap());
+            let existingEntry = confObserverMap.get(regRoot);
+            if (!existingEntry) {
+                existingEntry = await createObserverEntry(conf, regRoot);
+                confObserverMap.set(regRoot, existingEntry);
+            }
+        }
+    }
+    return observerEntry;
+}

package/RegistryMountCoordinator.ts

@@ -0,0 +1,181 @@
+/**
+ * Coordinates MountObserver instances across multiple DOM scopes that share
+ * the same CustomElementRegistry. This enables "mutually assured observing"
+ * where all scopes with the same registry share mount observers.
+ */
+
+import type { MountConfig, WeakDual } from './types/mount-observer/types.js';
+import type { MountObserver } from './MountObserver.js';
+
+/**
+ * Represents a single MountObserver observing a specific registry root.
+ */
+type ObserverEntry = {
+    config: MountConfig;  // Store for reference
+    registryRootRef: WeakRef<Node>;
+    observer: MountObserver;
+};
+
+const regObsGuid = 'iqj6MOueu0OP4CQi1a_4Sw';
+
+export type CER2MC2N2OE = WeakMap<
+    CustomElementRegistry, 
+    Map<
+        MountConfig, 
+        WeakMap<Node, ObserverEntry>
+    >
+>
+
+/**
+ * Maps CustomElementRegistry -> Map<MountConfig, WeakMap<Node, ObserverEntry>>
+ * The MountConfig object itself is used as the key (object identity).
+ * The innermost WeakMap maps registry root nodes to their observer entries.
+ */
+export function getRegistryObservers(): CER2MC2N2OE{
+  if (!(globalThis as any)[regObsGuid]) {
+    (globalThis as any)[regObsGuid] = new WeakMap<CustomElementRegistry, 
+        Map<
+            MountConfig, 
+            WeakMap<Node, ObserverEntry>
+        >
+    >();
+  }
+  return (globalThis as any)[regObsGuid] as CER2MC2N2OE;
+}
+
+
+const registryScopeId = 'pt9dS-V7U0SC3Yk708_5Ww';
+
+export type CER2WD = WeakMap<
+    CustomElementRegistry, 
+    WeakDual<Node>
+>
+
+/**
+ * Tracks all registry root nodes for each CustomElementRegistry.
+ * Used to iterate over all scopes when a new config is added.
+ */
+export function getRegistryScopes(): CER2WD{
+    if (!(globalThis as any)[registryScopeId]) {
+    (globalThis as any)[registryScopeId] = new WeakMap<
+        CustomElementRegistry, 
+        WeakDual<Node>
+    >();
+  }
+  return (globalThis as any)[registryScopeId] as CER2WD;
+}
+
+
+// const registryScopes = new WeakMap<
+//     CustomElementRegistry, 
+//     WeakDual<Node>
+// >();
+
+// Note: assignGingerly.ts already has a polyfill for getOrInsertComputed.
+// If this code will already have imported assignGingerly, then no need for the duplicate polyfill below.
+
+// Polyfill for Map.prototype.getOrInsertComputed and WeakMap.prototype.getOrInsertComputed
+if (typeof Map.prototype.getOrInsertComputed !== 'function') {
+  (Map.prototype as any).getOrInsertComputed = function(key: any, insert: () => any) {
+    if (this.has(key)) return this.get(key);
+    const value = insert();
+    this.set(key, value);
+    return value;
+  };
+}
+if (typeof WeakMap.prototype.getOrInsertComputed !== 'function') {
+  (WeakMap.prototype as any).getOrInsertComputed = function(key: any, insert: () => any) {
+    if (this.has(key)) return this.get(key);
+    const value = insert();
+    this.set(key, value);
+    return value;
+  };
+}
+
+/**
+ * Helper to create an observer entry asynchronously.
+ * Separated to handle async operations cleanly.
+ */
+async function createObserverEntry(
+    config: MountConfig,
+    registryRoot: Node
+): Promise<ObserverEntry> {
+    // Dynamically import to avoid circular dependency
+    const { MountObserver: MountObserverClass } = await import('./MountObserver.js');
+    const observer = new MountObserverClass(config);
+    await observer.observe(registryRoot);
+    return {
+        config,
+        registryRootRef: new WeakRef(registryRoot),
+        observer
+    };
+}
+
+/**
+ * Get or create a mount observer for a specific registry + config + registry root combination.
+ * This function ensures that:
+ * 1. The config is registered with the registry's mountConfigRegistry
+ * 2. An observer exists for this specific registry root
+ * 3. All other registry roots with the same registry get observers for this config
+ * 4. All other configs get observers for this registry root
+ * 
+ * @returns The ObserverEntry for the requested combination
+ */
+export async function getOrInsertObserverEntry(
+    registry: CustomElementRegistry, 
+    config: MountConfig,
+    registryRoot: Node
+): Promise<ObserverEntry> {
+    // Add config to the registry's config list (if not already there)
+    (registry as any).mountConfigRegistry.push(config);
+    
+    // Get or create the nested map structure
+    const mountConfigMap = (getRegistryObservers()).getOrInsertComputed(registry, () => new Map());
+    const nodeToObserverMap = mountConfigMap.getOrInsertComputed(config, () => new WeakMap());
+    
+    // Get or create the observer for this specific registry root
+    let observerEntry = nodeToObserverMap.get(registryRoot);
+    if (!observerEntry) {
+        observerEntry = await createObserverEntry(config, registryRoot);
+        nodeToObserverMap.set(registryRoot, observerEntry);
+    }
+    
+    // Track this registry root in the scopes set
+    const scopes = getRegistryScopes().getOrInsertComputed(registry, () => ({
+        weakSet: new WeakSet<Node>(),
+        setWeak: new Set<WeakRef<Node>>()
+    }));
+    
+    // Add to tracking sets if not already present
+    if (!scopes.weakSet.has(registryRoot)) {
+        scopes.weakSet.add(registryRoot);
+        scopes.setWeak.add(new WeakRef(registryRoot));
+    }
+    
+    // Get all configs for this registry
+    const configs = (registry as any).mountConfigRegistry.items;
+    
+    // Iterate over all known registry roots for this registry
+    const arr = Array.from(scopes.setWeak) as WeakRef<Node>[];
+    for (const regRootRef of arr) {
+        const regRoot = regRootRef.deref();
+        if (regRoot === undefined) continue;
+        
+        // For each config, ensure an observer exists for this registry root
+        for (const conf of configs) {
+            // Skip if this is the same config + root we just created
+            if (conf === config && registryRoot === regRoot) continue;
+            
+            // Get or create observer for this conf + regRoot combination
+            // This won't cause infinite loop because we only create if missing
+            const confObserverMap = mountConfigMap.getOrInsertComputed(conf, () => new WeakMap());
+            let existingEntry = confObserverMap.get(regRoot);
+            if (!existingEntry) {
+                existingEntry = await createObserverEntry(conf, regRoot);
+                confObserverMap.set(regRoot, existingEntry);
+            }
+        }
+    }
+    
+    return observerEntry;
+}

package/connectionMonitor.js

@@ -0,0 +1,116 @@
+import { DismountEvent } from './Events.js';
+export function setupConnectionMonitor(init, rootNodeRef, mountedElements, modules, observer, processNode) {
+    const { whereConnectionHas } = init;
+    if (!whereConnectionHas) {
+        throw new Error('whereConnectionHas is required');
+    }
+    // Get connection object with vendor prefixes
+    const nav = navigator;
+    const connection = nav.connection || nav.mozConnection || nav.webkitConnection;
+    // If Network Information API is not supported, warn and pass the condition
+    if (!connection) {
+        console.warn('Network Information API is not supported in this browser. whereConnectionHas condition will be ignored.');
+        return {
+            conditionMatches: true,
+            cleanup: () => { }
+        };
+    }
+    // Check initial condition
+    let conditionMatches = evaluateConnectionCondition(connection, whereConnectionHas);
+    // Set up change listener
+    const changeHandler = () => {
+        const previousMatches = conditionMatches;
+        conditionMatches = evaluateConnectionCondition(connection, whereConnectionHas);
+        if (conditionMatches && !previousMatches) {
+            // Connection now matches - process elements
+            handleConditionMatch();
+        }
+        else if (!conditionMatches && previousMatches) {
+            // Connection no longer matches - dismount all elements
+            handleConditionUnmatch();
+        }
+    };
+    function handleConditionMatch() {
+        // Process all elements in the observed node
+        const rootNode = rootNodeRef.deref();
+        if (rootNode) {
+            processNode(rootNode);
+        }
+    }
+    function handleConditionUnmatch() {
+        // Dismount all currently mounted elements
+        const rootNode = rootNodeRef.deref();
+        if (!rootNode) {
+            return;
+        }
+        const context = {
+            modules,
+            observer: observer,
+            rootNode,
+            mountConfig: init
+        };
+        // 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;
+                }
+            }
+            // Dispatch dismount event with reason
+            observer.dispatchEvent(new DismountEvent(element, 'connection-failed', init));
+        }
+    }
+    // Listen for connection changes
+    connection.addEventListener('change', changeHandler);
+    return {
+        conditionMatches,
+        cleanup: () => {
+            connection.removeEventListener('change', changeHandler);
+        }
+    };
+}
+/**
+ * Evaluate if the current connection meets the specified conditions
+ */
+function evaluateConnectionCondition(connection, condition) {
+    // Check effectiveType (e.g., 'slow-2g', '2g', '3g', '4g')
+    if (condition.effectiveTypeIn && condition.effectiveTypeIn.length > 0) {
+        const effectiveType = connection.effectiveType;
+        if (!effectiveType || !condition.effectiveTypeIn.includes(effectiveType)) {
+            return false;
+        }
+    }
+    // Check downlink (bandwidth in Mbps)
+    if (condition.downlinkMin !== undefined) {
+        const downlink = connection.downlink;
+        if (downlink === undefined || downlink < condition.downlinkMin) {
+            return false;
+        }
+    }
+    if (condition.downlinkMax !== undefined) {
+        const downlink = connection.downlink;
+        if (downlink === undefined || downlink > condition.downlinkMax) {
+            return false;
+        }
+    }
+    // Check RTT (round-trip time in ms)
+    if (condition.rttMax !== undefined) {
+        const rtt = connection.rtt;
+        if (rtt === undefined || rtt > condition.rttMax) {
+            return false;
+        }
+    }
+    // All conditions passed
+    return true;
+}

package/connectionMonitor.ts

@@ -0,0 +1,164 @@
+// Network connection monitoring for MountObserver
+import type { MountConfig, MountContext, WeakDual, ConnectionCondition } from './types/mount-observer/types.js';
+import { DismountEvent } from './Events.js';
+
+// Extend Navigator type to include connection properties
+interface NetworkInformation extends EventTarget {
+    downlink?: number;
+    effectiveType?: string;
+    rtt?: number;
+    saveData?: boolean;
+}
+
+interface NavigatorWithConnection extends Navigator {
+    connection?: NetworkInformation;
+    mozConnection?: NetworkInformation;
+    webkitConnection?: NetworkInformation;
+}
+
+export function setupConnectionMonitor(
+    init: MountConfig,
+    rootNodeRef: WeakRef<Node>,
+    mountedElements: WeakDual<Element>,
+    modules: any[],
+    observer: EventTarget,
+    processNode: (node: Node) => void
+): {
+    conditionMatches: boolean;
+    cleanup: () => void;
+} {
+    const { whereConnectionHas } = init;
+    
+    if (!whereConnectionHas) {
+        throw new Error('whereConnectionHas is required');
+    }
+    
+    // Get connection object with vendor prefixes
+    const nav = navigator as NavigatorWithConnection;
+    const connection = nav.connection || nav.mozConnection || nav.webkitConnection;
+    
+    // If Network Information API is not supported, warn and pass the condition
+    if (!connection) {
+        console.warn('Network Information API is not supported in this browser. whereConnectionHas condition will be ignored.');
+        return {
+            conditionMatches: true,
+            cleanup: () => {}
+        };
+    }
+    
+    // Check initial condition
+    let conditionMatches = evaluateConnectionCondition(connection, whereConnectionHas);
+    
+    // Set up change listener
+    const changeHandler = () => {
+        const previousMatches = conditionMatches;
+        conditionMatches = evaluateConnectionCondition(connection, whereConnectionHas);
+        
+        if (conditionMatches && !previousMatches) {
+            // Connection now matches - process elements
+            handleConditionMatch();
+        } else if (!conditionMatches && previousMatches) {
+            // Connection no longer matches - dismount all elements
+            handleConditionUnmatch();
+        }
+    };
+    
+    function handleConditionMatch(): void {
+        // Process all elements in the observed node
+        const rootNode = rootNodeRef.deref();
+        if (rootNode) {
+            processNode(rootNode);
+        }
+    }
+    
+    function handleConditionUnmatch(): void {
+        // Dismount all currently mounted elements
+        const rootNode = rootNodeRef.deref();
+        if (!rootNode) {
+            return;
+        }
+        
+        const context: MountContext = {
+            modules,
+            observer: observer as any,
+            rootNode,
+            mountConfig: init
+        };
+        
+        // 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;
+                }
+            }
+            
+            // Dispatch dismount event with reason
+            observer.dispatchEvent(new DismountEvent(element, 'connection-failed', init));
+        }
+    }
+    
+    // Listen for connection changes
+    connection.addEventListener('change', changeHandler);
+    
+    return {
+        conditionMatches,
+        cleanup: () => {
+            connection.removeEventListener('change', changeHandler);
+        }
+    };
+}
+
+/**
+ * Evaluate if the current connection meets the specified conditions
+ */
+function evaluateConnectionCondition(
+    connection: NetworkInformation,
+    condition: ConnectionCondition
+): boolean {
+    // Check effectiveType (e.g., 'slow-2g', '2g', '3g', '4g')
+    if (condition.effectiveTypeIn && condition.effectiveTypeIn.length > 0) {
+        const effectiveType = connection.effectiveType;
+        if (!effectiveType || !condition.effectiveTypeIn.includes(effectiveType)) {
+            return false;
+        }
+    }
+    
+    // Check downlink (bandwidth in Mbps)
+    if (condition.downlinkMin !== undefined) {
+        const downlink = connection.downlink;
+        if (downlink === undefined || downlink < condition.downlinkMin) {
+            return false;
+        }
+    }
+    
+    if (condition.downlinkMax !== undefined) {
+        const downlink = connection.downlink;
+        if (downlink === undefined || downlink > condition.downlinkMax) {
+            return false;
+        }
+    }
+    
+    // Check RTT (round-trip time in ms)
+    if (condition.rttMax !== undefined) {
+        const rtt = connection.rtt;
+        if (rtt === undefined || rtt > condition.rttMax) {
+            return false;
+        }
+    }
+    
+    // All conditions passed
+    return true;
+}

package/elementIntersection.js

@@ -0,0 +1,67 @@
+import { DismountEvent } from './Events.js';
+export function setupElementIntersection(init, rootNodeRef, mountedElements, modules, observer, matchesSelector, handleMatch) {
+    const { whereElementIntersectsWith } = init;
+    if (!whereElementIntersectsWith) {
+        throw new Error('whereElementIntersectsWith is required');
+    }
+    // Track which elements are currently intersecting
+    const intersectingElements = new WeakSet();
+    // Create IntersectionObserver with the provided options
+    const intersectionObserver = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            const element = entry.target;
+            if (entry.isIntersecting) {
+                // Element is now intersecting
+                intersectingElements.add(element);
+                // Check if element matches all other conditions and mount if so
+                if (matchesSelector(element)) {
+                    handleMatch(element);
+                }
+            }
+            else {
+                // Element is no longer intersecting
+                intersectingElements.delete(element);
+                // Dismount if it was mounted
+                if (mountedElements.weakSet.has(element)) {
+                    dismountElement(element);
+                }
+            }
+        }
+    }, whereElementIntersectsWith);
+    function dismountElement(element) {
+        // Remove from mounted elements
+        mountedElements.weakSet.delete(element);
+        for (const ref of mountedElements.setWeak) {
+            if (ref.deref() === element) {
+                mountedElements.setWeak.delete(ref);
+                break;
+            }
+        }
+        // Dispatch dismount event
+        observer.dispatchEvent(new DismountEvent(element, 'intersection-failed', init));
+    }
+    function observeElement(element) {
+        intersectionObserver.observe(element);
+    }
+    return {
+        intersectionObserver,
+        observeElement,
+        cleanup: () => {
+            intersectionObserver.disconnect();
+        }
+    };
+}
+/**
+ * Check if an element is currently intersecting
+ * This is called from #matchesSelector to determine if intersection condition is met
+ */
+export function isElementIntersecting(element, intersectionObserver) {
+    // If no intersection observer is set up, consider all elements as intersecting
+    if (!intersectionObserver) {
+        return true;
+    }
+    // When intersection observer is active, we can't synchronously determine intersection state
+    // The element will be observed and the callback will handle mounting when it intersects
+    // Return false here to prevent immediate mounting
+    return false;
+}