mount-observer 0.1.11 → 0.1.12

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;
+}

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/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,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",

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;
+    }
+}

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;
+    }
+}