mount-observer 0.1.11 → 0.1.13

package/elementIntersection.ts

@@ -0,0 +1,96 @@
+// Element intersection observation for MountObserver
+import type { MountConfig, WeakDual } from './types/mount-observer/types.js';
+import { DismountEvent } from './Events.js';
+
+export function setupElementIntersection(
+    init: MountConfig,
+    rootNodeRef: WeakRef<Node>,
+    mountedElements: WeakDual<Element>,
+    modules: any[],
+    observer: EventTarget,
+    matchesSelector: (element: Element) => boolean,
+    handleMatch: (element: Element) => void
+): {
+    intersectionObserver: IntersectionObserver;
+    observeElement: (element: Element) => void;
+    cleanup: () => void;
+} {
+    const { whereElementIntersectsWith } = init;
+    
+    if (!whereElementIntersectsWith) {
+        throw new Error('whereElementIntersectsWith is required');
+    }
+    
+    // Track which elements are currently intersecting
+    const intersectingElements = new WeakSet<Element>();
+    
+    // Create IntersectionObserver with the provided options
+    const intersectionObserver = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            const element = entry.target as Element;
+            
+            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: Element): void {
+        // 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: Element): void {
+        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: Element,
+    intersectionObserver: IntersectionObserver | undefined
+): boolean {
+    // 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;
+}

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 { ScriptNoModuleHandler } from './handlers/ScriptNoModule.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/ScriptNoModule.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 { ScriptNoModuleHandler } from './handlers/ScriptNoModule.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/ScriptNoModule.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

@@ -0,0 +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();
+        }
+    };
+}

package/package.json

@@ -1,61 +1,67 @@
-{
-  "name": "mount-observer",
-  "version": "0.1.11",
-  "description": "Observe and act on css matches.",
-  "main": "MountObserver.js",
-  "module": "MountObserver.js",
-  "dependencies": {
-    "assign-gingerly": "0.0.18"
-  },
-  "devDependencies": {
-    "@playwright/test": "1.58.2",
-    "spa-ssi": "0.0.27"
-  },
-  "exports": {
-    ".": {
-      "default": "./index.js",
-      "types": "./index.ts"
-    },
-    "./MountObserver.js": {
-      "default": "./MountObserver.js",
-      "types": "./MountObserver.ts"
-    },
-    "./withScopePerimeter.js": {
-      "default": "./withScopePerimeter.js",
-      "types": "./withScopePerimeter.ts"
-    },
-    "./emitEvents.js": {
-      "default": "./emitEvents.js",
-      "types": "./emitEvents.ts"
-    },
-    "./arr.js": {
-      "default": "./arr.js",
-      "types": "./arr.ts"
-    },
-    "./EvtRt.js": {
-      "default": "./EvtRt.js",
-      "types": "./EvtRt.ts"
-    },
-    "./DefineCustomElementHandler.js": {
-      "default": "./DefineCustomElementHandler.js",
-      "types": "./DefineCustomElementHandler.ts"
-    },
-    "./EnhanceMountedElementHandler.js": {
-      "default": "./EnhanceMountedElementHandler.js",
-      "types": "./EnhanceMountedElementHandler.ts"
-    }
-  },
-  "files": [
-    "*.js",
-    "*.ts"
-  ],
-  "types": "./types/mount-observer/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": "Bruce B. Anderson <anderson.bruce.b@gmail.com>",
-  "license": "MIT"
-}
+{
+  "name": "mount-observer",
+  "version": "0.1.13",
+  "description": "Observe and act on css matches.",
+  "main": "MountObserver.js",
+  "module": "MountObserver.js",
+  "dependencies": {
+    "assign-gingerly": "0.0.22",
+    "id-generation": "0.0.4"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.59.0-alpha-2026-02-28",
+    "spa-ssi": "0.0.27"
+  },
+  "exports": {
+    ".": {
+      "default": "./index.js",
+      "types": "./index.ts"
+    },
+    "./MountObserver.js": {
+      "default": "./MountObserver.js",
+      "types": "./MountObserver.ts"
+    },
+    "./withScopePerimeter.js": {
+      "default": "./withScopePerimeter.js",
+      "types": "./withScopePerimeter.ts"
+    },
+    "./emitEvents.js": {
+      "default": "./emitEvents.js",
+      "types": "./emitEvents.ts"
+    },
+    "./arr.js": {
+      "default": "./arr.js",
+      "types": "./arr.ts"
+    },
+    "./EvtRt.js": {
+      "default": "./EvtRt.js",
+      "types": "./EvtRt.ts"
+    },
+    "./DefineCustomElementHandler.js": {
+      "default": "./DefineCustomElementHandler.js",
+      "types": "./DefineCustomElementHandler.ts"
+    },
+    "./EnhanceMountedElementHandler.js": {
+      "default": "./EnhanceMountedElementHandler.js",
+      "types": "./EnhanceMountedElementHandler.ts"
+    },
+    "./upShadowSearch.js": {
+      "default": "./upShadowSearch.js",
+      "types": "./upShadowSearch.ts"
+    }
+  },
+  "files": [
+    "*.js",
+    "*.ts"
+  ],
+  "types": "./types/mount-observer/types.d.ts",
+  "scripts": {
+    "serve": "node ./node_modules/spa-ssi/serve.js",
+    "test": "playwright test",
+    "safari": "npx playwright wk http://localhost:8000",
+    "chrome": "npx playwright cr http://localhost:8000",
+    "update": "ncu -u && npm install"
+  },
+  "author": "Bruce B. Anderson <anderson.bruce.b@gmail.com>",
+  "license": "MIT"
+}

package/playwright.config.ts

@@ -1,6 +1,7 @@
 // playwright.config.ts
 import { PlaywrightTestConfig, devices } from '@playwright/test';
 const config: PlaywrightTestConfig = {
+  testIgnore: '**/experimentalCrossScopeRegistering/**',
   webServer: {
     command: 'npm run serve',
     url: 'http://localhost:8000/',

package/rootSizeObserver.js

@@ -0,0 +1,124 @@
+import { DismountEvent } from './Events.js';
+export function setupRootSizeObserver(init, rootNodeRef, mountedElements, modules, observer, processNode) {
+    const { whereObservedRootSizeMatches } = init;
+    if (!whereObservedRootSizeMatches) {
+        throw new Error('whereObservedRootSizeMatches is required');
+    }
+    const rootNode = rootNodeRef.deref();
+    if (!rootNode) {
+        throw new Error('Root node has been garbage collected');
+    }
+    // Get the element to observe
+    const rootElement = rootNode instanceof Element
+        ? rootNode
+        : rootNode.documentElement;
+    if (!rootElement) {
+        throw new Error('Could not determine root element for whereObservedRootSizeMatches');
+    }
+    // Parse the container query condition
+    // Container queries use the same syntax as media queries: (min-width: 700px)
+    const containerQuery = whereObservedRootSizeMatches;
+    // Check if condition currently matches
+    let conditionMatches = evaluateContainerQuery(rootElement, containerQuery);
+    // Set up ResizeObserver to watch for size changes
+    const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+            const previousMatches = conditionMatches;
+            conditionMatches = evaluateContainerQuery(entry.target, containerQuery);
+            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, 'root-size-failed', init));
+        }
+    }
+    // Start observing the root element
+    resizeObserver.observe(rootElement);
+    return {
+        conditionMatches,
+        cleanup: () => {
+            resizeObserver.disconnect();
+        }
+    };
+}
+/**
+ * Evaluate a container query condition against an element
+ * Supports: min-width, max-width, min-height, max-height
+ */
+function evaluateContainerQuery(element, query) {
+    // Parse container query: (min-width: 700px) or (max-height: 500px)
+    const match = query.match(/\(([^:]+):\s*([^)]+)\)/);
+    if (!match) {
+        console.warn(`Invalid container query format: ${query}`);
+        return false;
+    }
+    const [, property, valueStr] = match;
+    const prop = property.trim();
+    const value = parseFloat(valueStr);
+    if (isNaN(value)) {
+        console.warn(`Invalid container query value: ${valueStr}`);
+        return false;
+    }
+    // Get element dimensions
+    const rect = element.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+    // Evaluate condition
+    switch (prop) {
+        case 'min-width':
+            return width >= value;
+        case 'max-width':
+            return width <= value;
+        case 'min-height':
+            return height >= value;
+        case 'max-height':
+            return height <= value;
+        default:
+            console.warn(`Unsupported container query property: ${prop}`);
+            return false;
+    }
+}