mount-observer 0.1.4 → 0.1.6

package/attrChanges.ts

@@ -1,90 +0,0 @@
-import type { AttrChange, MountInit } from './types.d.ts';
-
-/**
- * Checks for attribute changes on a mounted element.
- * This module is dynamically loaded only when whereAttr is configured.
- */
-export function checkAttrChanges(
-    element: Element,
-    mountInit: MountInit,
-    buildAttrCoordinateMapFn: (whereAttr: any, isCustomElement: boolean) => any,
-    elementAttrStates: WeakMap<Element, Map<string, string | null>>,
-    elementOnceAttrs: WeakMap<Element, Set<string>>
-): AttrChange[] {
-    if (!mountInit.whereAttr || !buildAttrCoordinateMapFn) {
-        return [];
-    }
-    
-    const isCustomElement = element.tagName.toLowerCase().includes('-');
-    const attrCoordMap = buildAttrCoordinateMapFn(mountInit.whereAttr, isCustomElement);
-    
-    // Get or create the attribute state for this element
-    let attrState = elementAttrStates.get(element);
-    if (!attrState) {
-        attrState = new Map<string, string | null>();
-        elementAttrStates.set(element, attrState);
-    }
-    
-    const changes: AttrChange[] = [];
-    const currentAttrs = new Set<string>();
-    
-    // Check all possible attributes from the coordinate map
-    for (const attrName of Object.keys(attrCoordMap)) {
-        const coordinate = attrCoordMap[attrName];
-        const currentValue = element.getAttribute(attrName);
-        const previousValue = attrState.get(attrName);
-        
-        if (currentValue !== null) {
-            currentAttrs.add(attrName);
-        }
-        
-        // Check if this attribute has "once: true" in its map entry
-        const mapEntry = mountInit.map?.[coordinate] || null;
-        const isOnce = mapEntry?.once === true;
-        
-        // If "once" is true, check if we've already seen this attribute
-        if (isOnce) {
-            let onceAttrs = elementOnceAttrs.get(element);
-            if (!onceAttrs) {
-                onceAttrs = new Set<string>();
-                elementOnceAttrs.set(element, onceAttrs);
-            }
-            
-            // If we've already seen this attribute, skip it
-            if (onceAttrs.has(attrName)) {
-                continue;
-            }
-            
-            // Mark this attribute as seen if it currently has a value
-            if (currentValue !== null) {
-                onceAttrs.add(attrName);
-            }
-        }
-        
-        // Include if: currently has value OR previously had value but now removed
-        if (currentValue !== null || (previousValue !== undefined && currentValue === null)) {
-            // Check if value changed
-            if (currentValue !== previousValue) {
-                const attrNode = currentValue !== null ? element.getAttributeNode(attrName) : null;
-                
-                changes.push({
-                    value: currentValue,
-                    attrNode,
-                    mapEntry,
-                    attrName,
-                    coordinate,
-                    element
-                });
-                
-                // Update state
-                if (currentValue !== null) {
-                    attrState.set(attrName, currentValue);
-                } else {
-                    attrState.delete(attrName);
-                }
-            }
-        }
-    }
-    
-    return changes;
-}

package/attrCoordinates.js

@@ -1,93 +0,0 @@
-/**
- * Builds a map of attribute names to their coordinates based on whereAttr config
- */
-export function buildAttrCoordinateMap(whereAttr, isCustomElement) {
-    const map = {};
-    const rootPrefixes = isCustomElement
-        ? (whereAttr.hasCERootIn || [])
-        : (whereAttr.hasBuiltInRootIn || []);
-    // Parse base attribute for custom delimiter
-    const { delimiter: baseDelimiter, name: baseName } = parseDelimiter(whereAttr.hasBase);
-    // Build attribute names for each prefix
-    for (const prefix of rootPrefixes) {
-        const baseAttrName = buildAttributeName(prefix, baseName, baseDelimiter);
-        // If no branches specified, just the base attribute
-        if (!whereAttr.hasBranchIn || whereAttr.hasBranchIn.length === 0) {
-            map[baseAttrName] = '0';
-            continue;
-        }
-        // Process each branch
-        for (let i = 0; i < whereAttr.hasBranchIn.length; i++) {
-            const branch = whereAttr.hasBranchIn[i];
-            if (branch === '') {
-                // Empty string means base attribute alone is valid
-                map[baseAttrName] = '0';
-                continue;
-            }
-            if (typeof branch === 'object') {
-                // Process branch object
-                processBranch(branch, baseAttrName, String(i), map);
-            }
-        }
-    }
-    return map;
-}
-/**
- * Recursively processes a branch object to build attribute-coordinate mappings
- */
-function processBranch(branch, parentAttrName, parentCoordinate, map) {
-    for (const [key, subBranches] of Object.entries(branch)) {
-        const { delimiter, name } = parseDelimiter(key);
-        const attrName = parentAttrName + delimiter + name;
-        // Process sub-branches
-        if (!subBranches || subBranches.length === 0) {
-            map[attrName] = parentCoordinate;
-            continue;
-        }
-        for (let i = 0; i < subBranches.length; i++) {
-            const subBranch = subBranches[i];
-            const coordinate = `${parentCoordinate}.${i}`;
-            if (subBranch === '') {
-                // Empty string means this level alone is valid
-                map[attrName] = parentCoordinate;
-                continue;
-            }
-            if (typeof subBranch === 'string') {
-                // Simple string sub-branch
-                const { delimiter: subDelimiter, name: subName } = parseDelimiter(subBranch);
-                const subAttrName = attrName + subDelimiter + subName;
-                map[subAttrName] = coordinate;
-                continue;
-            }
-            if (typeof subBranch === 'object') {
-                // Nested object - recursively process
-                processBranch(subBranch, attrName, coordinate, map);
-            }
-        }
-    }
-}
-/**
- * Parses a key to extract custom delimiter and name
- */
-function parseDelimiter(key) {
-    const match = key.match(/^\[(.+?)\](.+)$/);
-    if (match) {
-        return {
-            delimiter: match[1],
-            name: match[2]
-        };
-    }
-    return {
-        delimiter: '-',
-        name: key
-    };
-}
-/**
- * Builds the full attribute name from prefix, base name, and delimiter
- */
-function buildAttributeName(prefix, baseName, delimiter) {
-    if (prefix === '') {
-        return baseName;
-    }
-    return prefix + delimiter + baseName;
-}

package/attrCoordinates.ts

@@ -1,122 +0,0 @@
-import { WhereAttr, BranchValue } from './types.js';
-
-/**
- * Represents a mapping from attribute name to coordinate
- */
-export interface AttrCoordinateMap {
-    [attrName: string]: string;
-}
-
-/**
- * Builds a map of attribute names to their coordinates based on whereAttr config
- */
-export function buildAttrCoordinateMap(whereAttr: WhereAttr, isCustomElement: boolean): AttrCoordinateMap {
-    const map: AttrCoordinateMap = {};
-    const rootPrefixes = isCustomElement 
-        ? (whereAttr.hasCERootIn || [])
-        : (whereAttr.hasBuiltInRootIn || []);
-
-    // Parse base attribute for custom delimiter
-    const { delimiter: baseDelimiter, name: baseName } = parseDelimiter(whereAttr.hasBase);
-
-    // Build attribute names for each prefix
-    for (const prefix of rootPrefixes) {
-        const baseAttrName = buildAttributeName(prefix, baseName, baseDelimiter);
-
-        // If no branches specified, just the base attribute
-        if (!whereAttr.hasBranchIn || whereAttr.hasBranchIn.length === 0) {
-            map[baseAttrName] = '0';
-            continue;
-        }
-
-        // Process each branch
-        for (let i = 0; i < whereAttr.hasBranchIn.length; i++) {
-            const branch = whereAttr.hasBranchIn[i];
-            
-            if (branch === '') {
-                // Empty string means base attribute alone is valid
-                map[baseAttrName] = '0';
-                continue;
-            }
-
-            if (typeof branch === 'object') {
-                // Process branch object
-                processBranch(branch, baseAttrName, String(i), map);
-            }
-        }
-    }
-
-    return map;
-}
-
-/**
- * Recursively processes a branch object to build attribute-coordinate mappings
- */
-function processBranch(
-    branch: { [key: string]: BranchValue[] },
-    parentAttrName: string,
-    parentCoordinate: string,
-    map: AttrCoordinateMap
-): void {
-    for (const [key, subBranches] of Object.entries(branch)) {
-        const { delimiter, name } = parseDelimiter(key);
-        const attrName = parentAttrName + delimiter + name;
-
-        // Process sub-branches
-        if (!subBranches || subBranches.length === 0) {
-            map[attrName] = parentCoordinate;
-            continue;
-        }
-
-        for (let i = 0; i < subBranches.length; i++) {
-            const subBranch = subBranches[i];
-            const coordinate = `${parentCoordinate}.${i}`;
-
-            if (subBranch === '') {
-                // Empty string means this level alone is valid
-                map[attrName] = parentCoordinate;
-                continue;
-            }
-
-            if (typeof subBranch === 'string') {
-                // Simple string sub-branch
-                const { delimiter: subDelimiter, name: subName } = parseDelimiter(subBranch);
-                const subAttrName = attrName + subDelimiter + subName;
-                map[subAttrName] = coordinate;
-                continue;
-            }
-
-            if (typeof subBranch === 'object') {
-                // Nested object - recursively process
-                processBranch(subBranch, attrName, coordinate, map);
-            }
-        }
-    }
-}
-
-/**
- * Parses a key to extract custom delimiter and name
- */
-function parseDelimiter(key: string): { delimiter: string; name: string } {
-    const match = key.match(/^\[(.+?)\](.+)$/);
-    if (match) {
-        return {
-            delimiter: match[1],
-            name: match[2]
-        };
-    }
-    return {
-        delimiter: '-',
-        name: key
-    };
-}
-
-/**
- * Builds the full attribute name from prefix, base name, and delimiter
- */
-function buildAttributeName(prefix: string, baseName: string, delimiter: string): string {
-    if (prefix === '') {
-        return baseName;
-    }
-    return prefix + delimiter + baseName;
-}

package/whereAttr.js

@@ -1,174 +0,0 @@
-const selectorCache = new WeakMap();
-/**
- * Checks if an element matches the whereAttr configuration using CSS selector matching
- */
-export function matchesWhereAttr(element, whereAttr) {
-    // Get or build the CSS selectors for this whereAttr config
-    let selectors = selectorCache.get(whereAttr);
-    if (!selectors) {
-        selectors = {
-            builtIn: buildWhereAttrSelector(false, whereAttr),
-            custom: buildWhereAttrSelector(true, whereAttr)
-        };
-        selectorCache.set(whereAttr, selectors);
-    }
-    // Determine which selector to use based on element type
-    const isCustomElement = element.tagName.toLowerCase().includes('-');
-    const selector = isCustomElement ? selectors.custom : selectors.builtIn;
-    // Use native CSS matching - optimized in Chrome/Blink
-    return element.matches(selector);
-}
-/**
- * Builds a CSS selector string from the whereAttr configuration
- * @param isCustomElement - Whether to build selector for custom elements (true) or built-in elements (false)
- */
-function buildWhereAttrSelector(isCustomElement, whereAttr) {
-    const rootPrefixes = isCustomElement
-        ? (whereAttr.hasCERootIn || [])
-        : (whereAttr.hasBuiltInRootIn || []);
-    // Parse base attribute for custom delimiter
-    const { delimiter: baseDelimiter, name: baseName } = parseDelimiter(whereAttr.hasBase);
-    const selectors = [];
-    // Build selectors for each valid prefix
-    for (const prefix of rootPrefixes) {
-        const baseAttrName = buildAttributeName(prefix, baseName, baseDelimiter);
-        const escapedBaseAttr = escapeAttributeName(baseAttrName);
-        // If no branches specified, just having the base attribute is enough
-        if (!whereAttr.hasBranchIn || whereAttr.hasBranchIn.length === 0) {
-            selectors.push(`[${escapedBaseAttr}]`);
-            continue;
-        }
-        // Build selectors for each branch combination
-        for (const branch of whereAttr.hasBranchIn) {
-            if (branch === '') {
-                // Empty string means base attribute alone is valid (no branch attributes)
-                // This requires base attr AND none of the branch attrs
-                // For CSS, we can only check for base attr presence
-                // The "no branch attrs" check needs to be done separately
-                selectors.push(`[${escapedBaseAttr}]`);
-                continue;
-            }
-            if (typeof branch === 'object') {
-                // Build selectors for each branch path
-                for (const [key, subBranches] of Object.entries(branch)) {
-                    const branchSelectors = buildBranchSelectors(baseAttrName, key, subBranches);
-                    selectors.push(...branchSelectors);
-                }
-            }
-        }
-    }
-    // Join all selectors with comma (OR logic)
-    return selectors.join(',');
-}
-/**
- * Builds CSS selectors for a branch and its sub-branches
- */
-function buildBranchSelectors(baseAttrName, branchKey, subBranches) {
-    const { delimiter: branchDelimiter, name: branchName } = parseDelimiter(branchKey);
-    const branchAttrName = baseAttrName + branchDelimiter + branchName;
-    const escapedBranchAttr = escapeAttributeName(branchAttrName);
-    const selectors = [];
-    // If no sub-branches specified, just the branch attribute itself
-    if (!subBranches || subBranches.length === 0) {
-        selectors.push(`[${escapedBranchAttr}]`);
-        return selectors;
-    }
-    // Build selectors for each sub-branch - they form an OR condition
-    for (const subBranch of subBranches) {
-        if (subBranch === '') {
-            // Empty string means this branch level alone is valid
-            selectors.push(`[${escapedBranchAttr}]`);
-            continue;
-        }
-        if (typeof subBranch === 'string') {
-            // Simple string sub-branch - build the full path
-            const { delimiter: subDelimiter, name: subName } = parseDelimiter(subBranch);
-            const subAttrName = branchAttrName + subDelimiter + subName;
-            const escapedSubAttr = escapeAttributeName(subAttrName);
-            selectors.push(`[${escapedSubAttr}]`);
-            continue;
-        }
-        if (typeof subBranch === 'object') {
-            // Nested object sub-branch - recursively build deeper paths
-            for (const [key, nestedBranches] of Object.entries(subBranch)) {
-                const nestedSelectors = buildNestedBranchSelectors(branchAttrName, key, nestedBranches);
-                selectors.push(...nestedSelectors);
-            }
-        }
-    }
-    return selectors;
-}
-/**
- * Builds CSS selectors for nested branches recursively
- */
-function buildNestedBranchSelectors(parentAttrName, branchKey, subBranches) {
-    const { delimiter, name } = parseDelimiter(branchKey);
-    const attrName = parentAttrName + delimiter + name;
-    const escapedAttr = escapeAttributeName(attrName);
-    const selectors = [];
-    // If no sub-branches specified, just this attribute
-    if (!subBranches || subBranches.length === 0) {
-        selectors.push(`[${escapedAttr}]`);
-        return selectors;
-    }
-    // Build selectors for each sub-branch - they form an OR condition
-    for (const subBranch of subBranches) {
-        if (subBranch === '') {
-            // Empty string means this level alone is valid
-            selectors.push(`[${escapedAttr}]`);
-            continue;
-        }
-        if (typeof subBranch === 'string') {
-            // Simple string sub-branch - build the full path
-            const { delimiter: subDelimiter, name: subName } = parseDelimiter(subBranch);
-            const subAttrName = attrName + subDelimiter + subName;
-            const escapedSubAttr = escapeAttributeName(subAttrName);
-            selectors.push(`[${escapedSubAttr}]`);
-            continue;
-        }
-        if (typeof subBranch === 'object') {
-            // Nested object - recursively build deeper paths
-            for (const [key, nestedBranches] of Object.entries(subBranch)) {
-                const nestedSelectors = buildNestedBranchSelectors(attrName, key, nestedBranches);
-                selectors.push(...nestedSelectors);
-            }
-        }
-    }
-    return selectors;
-}
-/**
- * Escapes special characters in attribute names for CSS selectors
- * Uses CSS.escape() API which handles all special characters including :
- */
-function escapeAttributeName(attrName) {
-    // CSS.escape() is available in all modern browsers
-    // It properly escapes special characters like : . [ ] etc.
-    return CSS.escape(attrName);
-}
-/**
- * Parses a key to extract custom delimiter and name
- * Format: [delimiter]name
- * Example: "[_]my-custom" returns { delimiter: "_", name: "my-custom" }
- */
-function parseDelimiter(key) {
-    const match = key.match(/^\[(.+?)\](.+)$/);
-    if (match) {
-        return {
-            delimiter: match[1],
-            name: match[2]
-        };
-    }
-    return {
-        delimiter: '-',
-        name: key
-    };
-}
-/**
- * Builds the full attribute name from prefix, base name, and delimiter
- */
-function buildAttributeName(prefix, baseName, delimiter) {
-    if (prefix === '') {
-        return baseName;
-    }
-    return prefix + delimiter + baseName;
-}

package/whereAttr.ts

@@ -1,221 +0,0 @@
-import { WhereAttr } from './types.js';
-
-/**
- * Cache for compiled CSS selectors to avoid rebuilding them on every check
- * Stores both built-in and custom element selectors
- */
-interface CachedSelectors {
-    builtIn: string;
-    custom: string;
-}
-
-const selectorCache = new WeakMap<WhereAttr, CachedSelectors>();
-
-/**
- * Checks if an element matches the whereAttr configuration using CSS selector matching
- */
-export function matchesWhereAttr(element: Element, whereAttr: WhereAttr): boolean {
-    // Get or build the CSS selectors for this whereAttr config
-    let selectors = selectorCache.get(whereAttr);
-    if (!selectors) {
-        selectors = {
-            builtIn: buildWhereAttrSelector(false, whereAttr),
-            custom: buildWhereAttrSelector(true, whereAttr)
-        };
-        selectorCache.set(whereAttr, selectors);
-    }
-
-    // Determine which selector to use based on element type
-    const isCustomElement = element.tagName.toLowerCase().includes('-');
-    const selector = isCustomElement ? selectors.custom : selectors.builtIn;
-
-    // Use native CSS matching - optimized in Chrome/Blink
-    return element.matches(selector);
-}
-
-/**
- * Builds a CSS selector string from the whereAttr configuration
- * @param isCustomElement - Whether to build selector for custom elements (true) or built-in elements (false)
- */
-function buildWhereAttrSelector(isCustomElement: boolean, whereAttr: WhereAttr): string {
-    const rootPrefixes = isCustomElement 
-        ? (whereAttr.hasCERootIn || [])
-        : (whereAttr.hasBuiltInRootIn || []);
-
-    // Parse base attribute for custom delimiter
-    const { delimiter: baseDelimiter, name: baseName } = parseDelimiter(whereAttr.hasBase);
-
-    const selectors: string[] = [];
-
-    // Build selectors for each valid prefix
-    for (const prefix of rootPrefixes) {
-        const baseAttrName = buildAttributeName(prefix, baseName, baseDelimiter);
-        const escapedBaseAttr = escapeAttributeName(baseAttrName);
-
-        // If no branches specified, just having the base attribute is enough
-        if (!whereAttr.hasBranchIn || whereAttr.hasBranchIn.length === 0) {
-            selectors.push(`[${escapedBaseAttr}]`);
-            continue;
-        }
-
-        // Build selectors for each branch combination
-        for (const branch of whereAttr.hasBranchIn) {
-            if (branch === '') {
-                // Empty string means base attribute alone is valid (no branch attributes)
-                // This requires base attr AND none of the branch attrs
-                // For CSS, we can only check for base attr presence
-                // The "no branch attrs" check needs to be done separately
-                selectors.push(`[${escapedBaseAttr}]`);
-                continue;
-            }
-
-            if (typeof branch === 'object') {
-                // Build selectors for each branch path
-                for (const [key, subBranches] of Object.entries(branch)) {
-                    const branchSelectors = buildBranchSelectors(baseAttrName, key, subBranches);
-                    selectors.push(...branchSelectors);
-                }
-            }
-        }
-    }
-
-    // Join all selectors with comma (OR logic)
-    return selectors.join(',');
-}
-
-/**
- * Builds CSS selectors for a branch and its sub-branches
- */
-function buildBranchSelectors(
-    baseAttrName: string,
-    branchKey: string,
-    subBranches: any[]
-): string[] {
-    const { delimiter: branchDelimiter, name: branchName } = parseDelimiter(branchKey);
-    const branchAttrName = baseAttrName + branchDelimiter + branchName;
-    const escapedBranchAttr = escapeAttributeName(branchAttrName);
-
-    const selectors: string[] = [];
-
-    // If no sub-branches specified, just the branch attribute itself
-    if (!subBranches || subBranches.length === 0) {
-        selectors.push(`[${escapedBranchAttr}]`);
-        return selectors;
-    }
-
-    // Build selectors for each sub-branch - they form an OR condition
-    for (const subBranch of subBranches) {
-        if (subBranch === '') {
-            // Empty string means this branch level alone is valid
-            selectors.push(`[${escapedBranchAttr}]`);
-            continue;
-        }
-
-        if (typeof subBranch === 'string') {
-            // Simple string sub-branch - build the full path
-            const { delimiter: subDelimiter, name: subName } = parseDelimiter(subBranch);
-            const subAttrName = branchAttrName + subDelimiter + subName;
-            const escapedSubAttr = escapeAttributeName(subAttrName);
-            selectors.push(`[${escapedSubAttr}]`);
-            continue;
-        }
-
-        if (typeof subBranch === 'object') {
-            // Nested object sub-branch - recursively build deeper paths
-            for (const [key, nestedBranches] of Object.entries(subBranch)) {
-                const nestedSelectors = buildNestedBranchSelectors(branchAttrName, key, nestedBranches as any[]);
-                selectors.push(...nestedSelectors);
-            }
-        }
-    }
-
-    return selectors;
-}
-
-/**
- * Builds CSS selectors for nested branches recursively
- */
-function buildNestedBranchSelectors(
-    parentAttrName: string,
-    branchKey: string,
-    subBranches: any[]
-): string[] {
-    const { delimiter, name } = parseDelimiter(branchKey);
-    const attrName = parentAttrName + delimiter + name;
-    const escapedAttr = escapeAttributeName(attrName);
-
-    const selectors: string[] = [];
-
-    // If no sub-branches specified, just this attribute
-    if (!subBranches || subBranches.length === 0) {
-        selectors.push(`[${escapedAttr}]`);
-        return selectors;
-    }
-
-    // Build selectors for each sub-branch - they form an OR condition
-    for (const subBranch of subBranches) {
-        if (subBranch === '') {
-            // Empty string means this level alone is valid
-            selectors.push(`[${escapedAttr}]`);
-            continue;
-        }
-
-        if (typeof subBranch === 'string') {
-            // Simple string sub-branch - build the full path
-            const { delimiter: subDelimiter, name: subName } = parseDelimiter(subBranch);
-            const subAttrName = attrName + subDelimiter + subName;
-            const escapedSubAttr = escapeAttributeName(subAttrName);
-            selectors.push(`[${escapedSubAttr}]`);
-            continue;
-        }
-
-        if (typeof subBranch === 'object') {
-            // Nested object - recursively build deeper paths
-            for (const [key, nestedBranches] of Object.entries(subBranch)) {
-                const nestedSelectors = buildNestedBranchSelectors(attrName, key, nestedBranches as any[]);
-                selectors.push(...nestedSelectors);
-            }
-        }
-    }
-
-    return selectors;
-}
-
-/**
- * Escapes special characters in attribute names for CSS selectors
- * Uses CSS.escape() API which handles all special characters including :
- */
-function escapeAttributeName(attrName: string): string {
-    // CSS.escape() is available in all modern browsers
-    // It properly escapes special characters like : . [ ] etc.
-    return CSS.escape(attrName);
-}
-
-/**
- * Parses a key to extract custom delimiter and name
- * Format: [delimiter]name
- * Example: "[_]my-custom" returns { delimiter: "_", name: "my-custom" }
- */
-function parseDelimiter(key: string): { delimiter: string; name: string } {
-    const match = key.match(/^\[(.+?)\](.+)$/);
-    if (match) {
-        return {
-            delimiter: match[1],
-            name: match[2]
-        };
-    }
-    return {
-        delimiter: '-',
-        name: key
-    };
-}
-
-/**
- * Builds the full attribute name from prefix, base name, and delimiter
- */
-function buildAttributeName(prefix: string, baseName: string, delimiter: string): string {
-    if (prefix === '') {
-        return baseName;
-    }
-    return prefix + delimiter + baseName;
-}