mount-observer 0.1.11 → 0.1.13

package/rootSizeObserver.ts

@@ -0,0 +1,157 @@
+// Root size observation with container query matching for MountObserver
+import type { MountConfig, MountContext, WeakDual } from './types/mount-observer/types.js';
+import { DismountEvent } from './Events.js';
+
+export function setupRootSizeObserver(
+    init: MountConfig,
+    rootNodeRef: WeakRef<Node>,
+    mountedElements: WeakDual<Element>,
+    modules: any[],
+    observer: EventTarget,
+    processNode: (node: Node) => void
+): {
+    conditionMatches: boolean;
+    cleanup: () => void;
+} {
+    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 as Document).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 as Element, containerQuery);
+            
+            if (conditionMatches && !previousMatches) {
+                // Condition now matches - process elements
+                handleConditionMatch();
+            } else if (!conditionMatches && previousMatches) {
+                // Condition 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, '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: Element, query: string): boolean {
+    // 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;
+    }
+}

package/upShadowSearch.js

@@ -0,0 +1,64 @@
+/**
+ * Searches for an element by ID, traversing up through shadow DOM boundaries.
+ *
+ * This function searches for an element with the specified ID starting from the reference
+ * element's root node and continuing up through shadow DOM boundaries until the element
+ * is found or the document root is reached.
+ *
+ * Search order:
+ * 1. Check current root node using getElementById
+ * 2. If in shadow root, check host element's properties for the ID
+ * 3. Continue up to parent shadow root or document
+ * 4. Handle disconnected fragments via targetFragment property
+ *
+ * @param ref - The reference element to start searching from
+ * @param id - The ID of the element to find
+ * @returns The found element, or null if not found
+ *
+ * @example
+ * ```typescript
+ * const template = document.querySelector('template[src="#myId"]');
+ * const source = upShadowSearch(template, 'myId');
+ * if (source) {
+ *   const clone = source.cloneNode(true);
+ * }
+ * ```
+ */
+export function upShadowSearch(ref, id) {
+    let rn = ref.getRootNode();
+    while (rn) {
+        // Try getElementById on current root
+        if ('getElementById' in rn) {
+            const test = rn.getElementById(id);
+            if (test)
+                return test;
+        }
+        // If in shadow root, check host element
+        if ('host' in rn && rn.host) {
+            // Check if host has a property with this ID
+            const hostProp = rn.host[id];
+            if (hostProp instanceof HTMLElement)
+                return hostProp;
+            // Move up to host's root
+            rn = rn.host.getRootNode();
+        }
+        else if (rn === document) {
+            // Reached document root without finding element
+            return null;
+        }
+        else if (!('isConnected' in rn) || !rn.isConnected) {
+            // Handle disconnected fragments
+            if (rn.targetFragment) {
+                rn = rn.targetFragment;
+            }
+            else {
+                rn = document;
+            }
+        }
+        else {
+            // No more parents to check
+            return null;
+        }
+    }
+    return null;
+}

package/upShadowSearch.ts

@@ -0,0 +1,62 @@
+/**
+ * Searches for an element by ID, traversing up through shadow DOM boundaries.
+ * 
+ * This function searches for an element with the specified ID starting from the reference
+ * element's root node and continuing up through shadow DOM boundaries until the element
+ * is found or the document root is reached.
+ * 
+ * Search order:
+ * 1. Check current root node using getElementById
+ * 2. If in shadow root, check host element's properties for the ID
+ * 3. Continue up to parent shadow root or document
+ * 4. Handle disconnected fragments via targetFragment property
+ * 
+ * @param ref - The reference element to start searching from
+ * @param id - The ID of the element to find
+ * @returns The found element, or null if not found
+ * 
+ * @example
+ * ```typescript
+ * const template = document.querySelector('template[src="#myId"]');
+ * const source = upShadowSearch(template, 'myId');
+ * if (source) {
+ *   const clone = source.cloneNode(true);
+ * }
+ * ```
+ */
+export function upShadowSearch(ref: Element, id: string): Element | null {
+    let rn = ref.getRootNode() as DocumentFragment | ShadowRoot | Document;
+    
+    while (rn) {
+        // Try getElementById on current root
+        if ('getElementById' in rn) {
+            const test = rn.getElementById(id);
+            if (test) return test;
+        }
+        
+        // If in shadow root, check host element
+        if ('host' in rn && rn.host) {
+            // Check if host has a property with this ID
+            const hostProp = (rn.host as any)[id];
+            if (hostProp instanceof HTMLElement) return hostProp;
+            
+            // Move up to host's root
+            rn = rn.host.getRootNode() as DocumentFragment | ShadowRoot | Document;
+        } else if (rn === document) {
+            // Reached document root without finding element
+            return null;
+        } else if (!('isConnected' in rn) || !(rn as any).isConnected) {
+            // Handle disconnected fragments
+            if ((rn as any).targetFragment) {
+                rn = (rn as any).targetFragment;
+            } else {
+                rn = document;
+            }
+        } else {
+            // No more parents to check
+            return null;
+        }
+    }
+    
+    return null;
+}

package/DefineCustomElementHandler.ts

@@ -1,116 +0,0 @@
-import { EvtRt } from './EvtRt.js';
-import { MountConfig, MountContext } from './types/mount-observer/types.js';
-
-export class DefineCustomElementHandler extends EvtRt {
-    mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext): void {
-        // Check if modules are specified
-        if (!context.modules || context.modules.length === 0) {
-            throw new Error('Must specify an ES Module');
-        }
-        
-        const module = context.modules[0];
-        const tagName = mountedElement.localName;
-        
-        // Check if already defined
-        if (customElements.get(tagName)) {
-            return;
-        }
-        
-        // Find suitable class
-        const ElementClass = this.findSuitableClass(module);
-        
-        // Validate that ElementClass is a constructor
-        if (typeof ElementClass !== 'function') {
-            throw new Error(`Found class is not a constructor: ${typeof ElementClass}`);
-        }
-        
-        // Create wrapper class to allow reuse
-        // Use anonymous class expression which works across all browsers
-        const WrapperClass = class extends ElementClass {};
-        
-        // Define the custom element using the define method
-        this.define(tagName, WrapperClass, mountedElement);
-    }
-    
-    /**
-     * Define the custom element in the appropriate registry.
-     * Override this method in subclasses to use scoped registries.
-     * @param tagName - The custom element tag name
-     * @param ElementClass - The element class constructor
-     * @param mountedElement - The mounted element (used for scoped registry access)
-     */
-    protected define(tagName: string, ElementClass: CustomElementConstructor, mountedElement: Element): void {
-        customElements.define(tagName, ElementClass);
-    }
-    
-    private findSuitableClass(module: any): typeof HTMLElement {
-        // Check default export first
-        const defaultExport = module.default;
-        
-        if (defaultExport && this.extendsHTMLElement(defaultExport)) {
-            return defaultExport;
-        }
-        
-        // Find all exports that extend HTMLElement
-        const htmlElementClasses = Object.values(module)
-            .filter(exp => typeof exp === 'function' && this.extendsHTMLElement(exp));
-        
-        if (htmlElementClasses.length === 0) {
-            throw new Error('No suitable class found in module');
-        }
-        
-        if (htmlElementClasses.length > 1) {
-            throw new Error('More than one class found in module');
-        }
-        
-        return htmlElementClasses[0] as typeof HTMLElement;
-    }
-    
-    private extendsHTMLElement(cls: any): boolean {
-        try {
-            // Must be a function
-            if (typeof cls !== 'function') {
-                return false;
-            }
-            // Handle direct HTMLElement export
-            if (cls === HTMLElement) {
-                return true;
-            }
-            // Check if it has a prototype and extends HTMLElement
-            if (cls.prototype && cls.prototype instanceof HTMLElement) {
-                return true;
-            }
-            return false;
-        } catch {
-            return false;
-        }
-    }
-}
-
-/**
- * Handler for defining custom elements in scoped registries.
- * Uses the element's customElementRegistry property to define elements
- * in the appropriate scoped registry instead of the global registry.
- */
-export class DefineScopedCustomElementHandler extends DefineCustomElementHandler {
-    /**
-     * Define the custom element in the element's scoped registry.
-     * @param tagName - The custom element tag name
-     * @param ElementClass - The element class constructor
-     * @param mountedElement - The mounted element with customElementRegistry
-     */
-    protected define(tagName: string, ElementClass: CustomElementConstructor, mountedElement: Element): void {
-        const registry = (mountedElement as any).customElementRegistry;
-        
-        if (!registry) {
-            throw new Error('Element does not have a customElementRegistry. Scoped registries require Chrome 146+ or latest WebKit/Safari.');
-        }
-        
-        // Check if already defined in this scoped registry
-        if (registry.get(tagName)) {
-            return;
-        }
-        
-        registry.define(tagName, ElementClass);
-    }
-}

package/EnhanceMountedElementHandler.ts

@@ -1,110 +0,0 @@
-import { EvtRt } from './EvtRt.js';
-import {EnhancementConfig} from './types/assign-gingerly/types.js';
-import { MountConfig, MountContext } from './types/mount-observer/types.js';
-//import { buildCSSQuery } from 'assign-gingerly/buildCSSQuery.js';
-import 'assign-gingerly/object-extension.js';
-
-/**
- * Handler for automatically enhancing mounted elements using assign-gingerly.
- * Searches the first imported module for an export with a "spawn" property
- * and uses element.enh.get() to spawn the enhancement.
- */
-export class EnhanceMountedElementHandler extends EvtRt {
-    async mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext){
-        // Check if modules are specified
-        if (!context.modules || context.modules.length === 0) {
-            throw new Error('Must specify an ES Module with import property');
-        }
-        
-        const module = context.modules[0];
-        
-        // Find registry item (object with spawn property)
-        const registryItem = await this._findRegistryItem(module, mountedElement);
-        
-        if (!registryItem) {
-            throw new Error('No registry item found in module. Expected an export with a "spawn" property.');
-        }
-        
-        // Validate spawn is a constructor
-        if (typeof registryItem.spawn !== 'function') {
-            throw new Error('Registry item "spawn" property must be a constructor function');
-        }
-        
-        // Spawn the enhancement
-        this._spawnEnhancement(mountedElement, registryItem, context);
-    }
-    
-    /**
-     * Spawn the enhancement using element.enh.get().
-     * Polyfills customElementRegistry if needed for browsers without scoped registry support.
-     */
-    protected _spawnEnhancement(element: Element, registryItem: any, context: MountContext): void {
-        // Polyfill element.customElementRegistry if it doesn't exist (for browsers without scoped registries)
-        if (!(element as any).customElementRegistry) {
-            Object.defineProperty(element, 'customElementRegistry', {
-                value: customElements,
-                writable: true,
-                enumerable: false,
-                configurable: true
-            });
-        }
-        
-        // Use element.enh.get() to spawn the enhancement
-        const enh = (element as any).enh;
-        if (!enh || typeof enh.get !== 'function') {
-            throw new Error('Element does not have enh.get() method. Make sure assign-gingerly/object-extension.js is loaded.');
-        }
-        
-        enh.get(registryItem, context);
-    }
-    
-    /**
-     * Find a registry item in the module exports.
-     * A registry item is an object with a "spawn" property.
-     * @param module - The imported module
-     * @returns The registry item or null if not found
-     */
-    protected async _findRegistryItem(module: any, el: Element): Promise<any | null> {
-        // Check default export first
-        if (module.default && await this._isRegistryItem(module.default, el)) {
-            return module.default;
-        }
-        
-        // Search all exports for a registry item
-        const exports = Object.values(module);
-        const registryItems = [];
-        for(const e of exports){
-            const isRegistryItem = await this._isRegistryItem(e, el);
-            if(isRegistryItem) registryItems.push(e);
-        }
-        
-        if (registryItems.length === 0) {
-            return null;
-        }
-        
-        if (registryItems.length > 1) {
-            throw new Error('More than one registry item found in module. Expected exactly one export with a "spawn" property.');
-        }
-        
-        return registryItems[0];
-    }
-    
-    /**
-     * Check if an export is a registry item (has a spawn property).
-     * @param exp - The export to check
-     * @returns True if the export is a registry item
-     */
-    protected async  _isRegistryItem(exp: any, mountedElement: Element): Promise<boolean> {
-        let test = exp !== null 
-            && typeof exp === 'object' 
-            && 'spawn' in exp 
-            && typeof exp.spawn === 'function';
-        if(!test) return false;
-        const emc = exp as EnhancementConfig;
-        if(emc.withAttrs !== undefined){
-            const cssQuery = (await import('assign-gingerly/buildCSSQuery.js')).buildCSSQuery(emc);
-            return mountedElement.matches(cssQuery);
-        }
-        return true;
-    }
-}