mount-observer 0.0.112 → 0.1.1

package/types.d.ts

@@ -0,0 +1,104 @@
+// Core types for MountObserver v2 - Polyfill Supported Scenario I
+
+export type Constructor = new (...args: any[]) => any;
+
+export type DismountReason = 
+    | 'media-query-failed'
+    | 'where-element-matches-failed';
+
+export interface MountInit {
+    whereElementMatches: string;
+    whereAttr?: WhereAttr;
+    whereInstanceOf?: Constructor | Constructor[];
+    whereMediaMatches?: string | MediaQueryList;
+    import?: string | ImportSpec | Array<string | ImportSpec>;
+    do?: DoCallback | DoCallbacks;
+    loadingEagerness?: 'eager' | 'lazy';
+    assignGingerly?: Record<string, any>;
+    map?: MapConfig;
+    getPlayByPlay?: boolean;
+}
+
+export interface MapConfig {
+    [coordinate: string]: MapEntry;
+}
+
+export interface MapEntry {
+    instanceOf?: string;
+    mapsTo?: string;
+    /**
+     * Only notify the presence of this attribute
+     * the first time it is seen
+     */
+    once?: boolean;
+    [key: string]: any;
+}
+
+export type BranchValue = string | { [key: string]: BranchValue[] };
+
+export interface WhereAttr {
+    hasBuiltInRootIn?: string[];
+    hasCERootIn?: string[];
+    hasBase: string;
+    hasBranchIn?: BranchValue[];
+}
+
+export interface ImportSpec {
+    url: string;
+    type?: 'js' | 'css' | 'json' | 'html';
+}
+
+export interface MountContext {
+    modules: any[];
+    observer: IMountObserver;
+    observeInfo: ObserveInfo;
+}
+
+export interface ObserveInfo {
+    rootNode: Node;
+}
+
+export type DoCallback = (matchingElement: Element, context: MountContext) => void;
+
+export interface DoCallbacks {
+    mount?: (matchingElement: Element, context: MountContext) => void;
+    dismount?: (matchingElement: Element, context: MountContext) => void;
+    disconnect?: (matchingElement: Element, context: MountContext) => void;
+    reconnect?: (matchingElement: Element, context: MountContext) => void;
+}
+
+export interface MountObserverOptions {
+    disconnectedSignal?: AbortSignal;
+}
+
+export interface IMountObserver extends EventTarget {
+    observe(rootNode: Node): Promise<void>;
+    disconnect(): void;
+    disconnectedSignal: AbortSignal;
+}
+
+export interface IMountEvent extends Event {
+    matchingElement: Element;
+    modules: any[];
+    mountInit: MountInit;
+}
+
+export interface IDismountEvent extends Event {
+    matchingElement: Element;
+    reason: DismountReason;
+    mountInit: MountInit;
+}
+
+export interface IAttrChangeEvent extends Event {
+    changes: AttrChange[];
+    mountInit: MountInit;
+}
+
+export interface AttrChange {
+    value: string | null;
+    attrNode: Attr | null;
+    mapEntry: MapEntry | null;
+    attrName: string;
+    coordinate: string;
+    element: Element;
+}

package/whereAttr.js

@@ -0,0 +1,174 @@
+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

@@ -0,0 +1,221 @@
+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;
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Bruce B. Anderson
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/Newish.js

@@ -1,145 +0,0 @@
-export { waitForEvent } from './waitForEvent.js';
-import { ObsAttr } from './ObsAttr.js';
-import { getIsh } from './refid/getIsh.js';
-import { arr } from './refid/secretKeys.js';
-export const attached = Symbol.for('xyyspnstnU+CDrNVa0VnxA');
-export class Newish {
-    queue = [];
-    isResolved = false;
-    #ce;
-    #ref;
-    #options;
-    #args;
-    constructor(enhancedElement, target, itemscope, options) {
-        this.#args = [enhancedElement, target, itemscope];
-        this.#options = options || { assigner: Object.assign };
-        this.#ref = new WeakRef(enhancedElement);
-    }
-    async handleEvent() {
-        const enhancedElement = this.#ref.deref();
-        if (!enhancedElement)
-            return;
-        await this.#attachItemrefs(enhancedElement);
-    }
-    async do() {
-        const [enhancedElement, target, itemscope] = this.#args;
-        this.#args = undefined;
-        if (enhancedElement[attached] === true)
-            return;
-        enhancedElement[attached] = true;
-        const options = this.#options;
-        const { initPropVals, ctr } = options;
-        let ce;
-        if (ctr === undefined) {
-            const foundCtr = await getIsh(enhancedElement.isConnected ? enhancedElement : target, itemscope);
-            const initPropVals = enhancedElement['ish'];
-            const resolvedConstructor = foundCtr.constructor.name === 'AsyncFunction' ? await foundCtr() : foundCtr;
-            const isInstance = initPropVals instanceof resolvedConstructor;
-            ce = isInstance ? initPropVals : new resolvedConstructor();
-            if (initPropVals !== undefined && !isInstance)
-                this.queue.push(initPropVals);
-        }
-        else {
-            ce = new ctr();
-            if (initPropVals !== undefined)
-                this.queue.push(initPropVals);
-        }
-        // if('tbd' in ce && typeof ce['tbd'] === 'function'){
-        //     await ce['tbd'](ce, enhancedElement, this.#options);
-        // }
-        this.#ce = ce;
-        const self = this;
-        Object.defineProperty(enhancedElement, 'ish', {
-            get() {
-                return self.#ce;
-            },
-            set(nv) {
-                if (self.#ce === nv)
-                    return;
-                self.queue.push(nv);
-                self.#assignGingerly(false);
-            },
-            enumerable: true,
-            configurable: true,
-        });
-        await this.#assignGingerly(true);
-        if ('<mount>' in ce && typeof ce['<mount>'] === 'function') {
-            await ce['<mount>'](ce, enhancedElement, this.#options);
-        }
-        //attach any itemref references
-        await this.#attachItemrefs(enhancedElement);
-        const et = ObsAttr(enhancedElement, 'itemref');
-        et.addEventListener('attr-changed', this);
-        this.isResolved = true;
-        return ce;
-    }
-    #alreadyAttached = new WeakSet;
-    async #attachItemrefs(enhancedElement) {
-        //TODO:  watch for already attached itemrefs to be removed and remove them from the set
-        // and call outOfScopeCallback on them
-        if ('<inScope>' in this.#ce && enhancedElement.hasAttribute('itemref')) {
-            await import('./refid/via.js');
-            const itemref = enhancedElement.via.itemref;
-            const refs = itemref.children;
-            for (const ref of refs) {
-                if (this.#alreadyAttached.has(ref))
-                    continue;
-                this.#ce['<inScope>'](this.#ce, ref, this.#options);
-            }
-            itemref.addEventListener('change', this);
-        }
-    }
-    async #assignGingerly(fromDo) {
-        const actions = new Set();
-        if (fromDo) {
-            actions.add('attached');
-        }
-        let ce = this.#ce;
-        if (ce === undefined) {
-            throw 500;
-        }
-        let foundArray = false;
-        const hasArrFilter = 'arr=>' in ce && typeof ce['arr=>'] === 'function';
-        const ref = this.#ref.deref();
-        while (this.queue.length > 0) {
-            const fi = this.queue.shift();
-            //TODO: Provide support for a virtual slice of a very large list
-            //TODO:  Maybe should check if iterable rather than an array?
-            if (Array.isArray(fi)) {
-                foundArray = true;
-                let filtered = fi;
-                if (hasArrFilter) {
-                    filtered = await (ce['arr=>'])(ce, fi, ref, this.#options);
-                }
-                ce[arr] = filtered;
-                actions.add('ishListAssigned');
-            }
-            else {
-                let { assigner } = this.#options;
-                if (assigner === undefined) {
-                    assigner = Object.assign;
-                }
-                await assigner(ce, fi);
-                actions.add('ishAssigned');
-            }
-        }
-        if (fromDo && !foundArray && hasArrFilter) {
-            const filtered = await (ce['arr=>'])(ce, undefined, ref, this.#options);
-            if (filtered !== undefined) {
-                ce[arr] = filtered;
-                actions.add('ishListAssigned');
-            }
-        }
-        if (ref) {
-            ref.dispatchEvent(new IshEvent(Array.from(actions)));
-        }
-    }
-}
-export class IshEvent extends Event {
-    actions;
-    static eventName = 'ish';
-    constructor(actions) {
-        super(IshEvent.eventName);
-        this.actions = actions;
-    }
-}