mount-observer 0.1.12 → 0.1.14

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

@@ -47,7 +47,7 @@ export function setupConnectionMonitor(init, rootNodeRef, mountedElements, modul
             modules,
             observer: observer,
             rootNode,
-            MountConfig: init
+            mountConfig: init
         };
         // Get all mounted elements from the WeakDual setWeak
         const mountedElementsList = [];

package/connectionMonitor.ts

@@ -82,7 +82,7 @@ export function setupConnectionMonitor(
             modules,
             observer: observer as any,
             rootNode,
-            MountConfig: init
+            mountConfig: init
         };
         
         // Get all mounted elements from the WeakDual setWeak

package/{getRootRegistryContainer.js → getRegistryRoot.js}

@@ -6,7 +6,7 @@
  * @param node - The starting node to check
  * @returns The highest node with matching customElementRegistry, or null if node is invalid
  */
-export function getRootRegistryContainer(node) {
+export function getRegistryRoot(node) {
     if (!node) {
         return null;
     }

package/{getRootRegistryContainer.ts → getRegistryRoot.ts}

@@ -6,7 +6,7 @@
  * @param node - The starting node to check
  * @returns The highest node with matching customElementRegistry, or null if node is invalid
  */
-export function getRootRegistryContainer(node: Node): Node | null {
+export function getRegistryRoot(node: Node): Node | null {
     if (!node) {
         return null;
     }

package/index.js

@@ -4,15 +4,20 @@ export { withScopePerimeter } from './withScopePerimeter.js';
 export { emitMountedElementEvents } from './emitEvents.js';
 export { arr } from './arr.js';
 export { EvtRt } from './EvtRt.js';
-export { DefineCustomElementHandler } from './DefineCustomElementHandler.js';
-export { EnhanceMountedElementHandler } from './EnhanceMountedElementHandler.js';
+export { DefineCustomElementHandler, DefineScopedCustomElementHandler } from './handlers/DefineCustomElement.js';
+export { EnhanceMountedElementHandler } from './handlers/EnhanceMountedElement.js';
+export { ScriptExportHandler } from './handlers/ScriptExport.js';
+export { MountObserverScriptHandler } from './handlers/MountObserverScript.js';
+export { HoistTemplateHandler } from './handlers/HoistTemplate.js';
+export { HTMLIncludeHandler } from './handlers/HTMLInclude.js';
+export { upShadowSearch } from './upShadowSearch.js';
 export { mountEventName, dismountEventName, disconnectEventName, loadEventName, mediamatchEventName, mediaunmatchEventName } from './Events.js';
 // Register built-in handlers
-import { MountObserver } from './MountObserver.js';
-import { EvtRt } from './EvtRt.js';
-import { DefineCustomElementHandler, DefineScopedCustomElementHandler } from './DefineCustomElementHandler.js';
-import { EnhanceMountedElementHandler } from './EnhanceMountedElementHandler.js';
-MountObserver.define('builtIns.logToConsole', EvtRt);
-MountObserver.define('builtIns.defineCustomElement', DefineCustomElementHandler);
-MountObserver.define('buildIns.defineScopedCustomElement', DefineScopedCustomElementHandler);
-MountObserver.define('builtIns.enhanceMountedElement', EnhanceMountedElementHandler);
+import './EvtRt.js';
+import './handlers/DefineCustomElement.js';
+import './handlers/EnhanceMountedElement.js';
+import './handlers/GenIds.js'; // Temporarily disabled due to missing dependency
+import './handlers/ScriptExport.js';
+import './handlers/MountObserverScript.js';
+import './handlers/HoistTemplate.js';
+import './handlers/HTMLInclude.js';

package/index.ts

@@ -4,8 +4,13 @@ export { withScopePerimeter } from './withScopePerimeter.js';
 export { emitMountedElementEvents } from './emitEvents.js';
 export { arr } from './arr.js';
 export { EvtRt } from './EvtRt.js';
-export { DefineCustomElementHandler } from './DefineCustomElementHandler.js';
-export { EnhanceMountedElementHandler } from './EnhanceMountedElementHandler.js';
+export { DefineCustomElementHandler, DefineScopedCustomElementHandler } from './handlers/DefineCustomElement.js';
+export { EnhanceMountedElementHandler } from './handlers/EnhanceMountedElement.js';
+export { ScriptExportHandler } from './handlers/ScriptExport.js';
+export { MountObserverScriptHandler } from './handlers/MountObserverScript.js';
+export { HoistTemplateHandler } from './handlers/HoistTemplate.js';
+export { HTMLIncludeHandler } from './handlers/HTMLInclude.js';
+export { upShadowSearch } from './upShadowSearch.js';
 export type {
     MountConfig,
     MountObserverOptions,
@@ -26,12 +31,12 @@ export {
 } from './Events.js';
 
 // Register built-in handlers
-import { MountObserver } from './MountObserver.js';
-import { EvtRt } from './EvtRt.js';
-import { DefineCustomElementHandler, DefineScopedCustomElementHandler } from './DefineCustomElementHandler.js';
-import { EnhanceMountedElementHandler } from './EnhanceMountedElementHandler.js';
+import './EvtRt.js';
+import './handlers/DefineCustomElement.js';
+import './handlers/EnhanceMountedElement.js';
+import './handlers/GenIds.js'; // Temporarily disabled due to missing dependency
+import './handlers/ScriptExport.js';
+import './handlers/MountObserverScript.js';
+import './handlers/HoistTemplate.js';
+import './handlers/HTMLInclude.js';
 
-MountObserver.define('builtIns.logToConsole', EvtRt);
-MountObserver.define('builtIns.defineCustomElement', DefineCustomElementHandler);
-MountObserver.define('buildIns.defineScopedCustomElement', DefineScopedCustomElementHandler);
-MountObserver.define('builtIns.enhanceMountedElement', EnhanceMountedElementHandler);

package/mediaQuery.js

@@ -49,7 +49,7 @@ export function setupMediaQuery(init, rootNodeRef, mountedElements, modules, obs
             modules,
             observer: observer,
             rootNode,
-            MountConfig: init
+            mountConfig: init
         };
         // Get all mounted elements from the WeakDual setWeak
         const mountedElementsList = [];

package/mediaQuery.ts

@@ -70,7 +70,7 @@ export function setupMediaQuery(
             modules,
             observer: observer as any,
             rootNode,
-            MountConfig: init
+            mountConfig: init
         };
         
         // Get all mounted elements from the WeakDual setWeak

package/observedRootHas.js

@@ -1,87 +1,87 @@
-import { DismountEvent } from './Events.js';
-export function setupObservedRootHas(init, rootNodeRef, mountedElements, modules, observer, processNode) {
-    const { whereObservedRootHas } = init;
-    if (!whereObservedRootHas) {
-        throw new Error('whereObservedRootHas is required');
-    }
-    const rootNode = rootNodeRef.deref();
-    if (!rootNode) {
-        throw new Error('Root node has been garbage collected');
-    }
-    // Get the element to query against
-    const rootElement = rootNode instanceof Element
-        ? rootNode
-        : rootNode.documentElement || rootNode.host;
-    if (!rootElement) {
-        throw new Error('Could not determine root element for whereObservedRootHas');
-    }
-    // Track current state
-    let conditionMatches = !!rootElement.querySelector(whereObservedRootHas);
-    // Set up mutation observer to watch for changes
-    const mutationObserver = new MutationObserver(() => {
-        const previousMatches = conditionMatches;
-        conditionMatches = !!rootElement.querySelector(whereObservedRootHas);
-        if (conditionMatches && !previousMatches) {
-            // Condition now matches - process elements
-            handleConditionMatch();
-        }
-        else if (!conditionMatches && previousMatches) {
-            // Condition 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, 'observed-root-has-failed', init));
-        }
-    }
-    // Observe the root element for changes
-    mutationObserver.observe(rootElement, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        attributeOldValue: false
-    });
-    return {
-        conditionMatches,
-        cleanup: () => {
-            mutationObserver.disconnect();
-        }
-    };
-}
+import { DismountEvent } from './Events.js';
+export function setupObservedRootHas(init, rootNodeRef, mountedElements, modules, observer, processNode) {
+    const { whereObservedRootHas } = init;
+    if (!whereObservedRootHas) {
+        throw new Error('whereObservedRootHas is required');
+    }
+    const rootNode = rootNodeRef.deref();
+    if (!rootNode) {
+        throw new Error('Root node has been garbage collected');
+    }
+    // Get the element to query against
+    const rootElement = rootNode instanceof Element
+        ? rootNode
+        : rootNode.documentElement || rootNode.host;
+    if (!rootElement) {
+        throw new Error('Could not determine root element for whereObservedRootHas');
+    }
+    // Track current state
+    let conditionMatches = !!rootElement.querySelector(whereObservedRootHas);
+    // Set up mutation observer to watch for changes
+    const mutationObserver = new MutationObserver(() => {
+        const previousMatches = conditionMatches;
+        conditionMatches = !!rootElement.querySelector(whereObservedRootHas);
+        if (conditionMatches && !previousMatches) {
+            // Condition now matches - process elements
+            handleConditionMatch();
+        }
+        else if (!conditionMatches && previousMatches) {
+            // Condition 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, 'observed-root-has-failed', init));
+        }
+    }
+    // Observe the root element for changes
+    mutationObserver.observe(rootElement, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeOldValue: false
+    });
+    return {
+        conditionMatches,
+        cleanup: () => {
+            mutationObserver.disconnect();
+        }
+    };
+}