mount-observer 0.0.111 → 0.1.0

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

package/Newish.ts

@@ -1,169 +0,0 @@
-import { BindishOptions, HasIsh, Ishcycle } from './ts-refs/mount-observer/types.js';
-
-export {waitForEvent} from './waitForEvent.js';
-import {ObsAttr} from './ObsAttr.js';
-import {splitRefs} from './refid/splitRefs.js';
-import {getIsh} from './refid/getIsh.js';
-import {arr} from './refid/secretKeys.js';
-export const attached = Symbol.for('xyyspnstnU+CDrNVa0VnxA');
-export class Newish implements EventListenerObject {
-    queue: Array<any> = [];
-    isResolved = false;
-    #ce: Ishcycle | undefined;
-    #ref: WeakRef<Element>;
-
-    #options: BindishOptions;
-    #args: [enhancedElement: Element, target: Node, itemscope: string] | undefined;
-    constructor(
-        enhancedElement: Element,
-        target: Node,
-        itemscope: string, 
-        options?: BindishOptions
-    ){
-        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((<any>enhancedElement)[attached] === true) return;
-        (<any>enhancedElement)[attached] = true;
-        const options = this.#options;
-        const {initPropVals, ctr} = options;
-        let ce: Ishcycle;
-        if(ctr === undefined){
-            const foundCtr = await getIsh(enhancedElement.isConnected ? enhancedElement :target, itemscope)! as any;
-
-            const initPropVals =  (<any>enhancedElement)['ish'];
-
-            const resolvedConstructor = foundCtr.constructor.name === 'AsyncFunction' ? await foundCtr() : foundCtr;
-            const isInstance = initPropVals instanceof resolvedConstructor
-            ce = isInstance ? initPropVals : new resolvedConstructor() as Ishcycle;
-            if(initPropVals !== undefined && !isInstance) this.queue.push(initPropVals);
-        }else{
-            ce = new (ctr as any)();
-            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: any){
-                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 as HasIsh & Element, 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<Element>;
-
-    async #attachItemrefs(enhancedElement: Element){
-        //TODO:  watch for already attached itemrefs to be removed and remove them from the set
-        // and call outOfScopeCallback on them
-        if('<inScope>' in (<any>this.#ce) && enhancedElement.hasAttribute('itemref')){
-            await import('./refid/via.js');
-            const itemref = (<any>enhancedElement).via.itemref
-            const refs = itemref.children as Element[];
-            for(const ref of refs){
-                if(this.#alreadyAttached.has(ref)) continue;
-                (<any>this.#ce)['<inScope>'](this.#ce, ref, this.#options);
-            }
-            itemref.addEventListener('change', this);
-
-        }
-
-    }
-
-    async #assignGingerly(fromDo: boolean){
-        const actions = new Set<Action>();
-        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 as any | undefined;
-                if(hasArrFilter){
-                    filtered = await (ce['arr=>']!)(ce, fi, ref! as HasIsh & Element, this.#options);
-                }
-                (<any>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! as HasIsh &  Element, this.#options);
-            if(filtered !== undefined){
-                (<any>ce)[arr] = filtered;
-                actions.add('ishListAssigned');
-            }
-        }
-        
-        if(ref){
-            ref.dispatchEvent(new IshEvent(Array.from(actions)));
-        }   
-    }
-
-}
-
-type Action = 
-    | 'attached' 
-    | 'ishAssigned'
-    | 'ishListAssigned'
-
-interface IIshEvent{
-    actions: Array<Action>;
-}
-
-export class IshEvent extends Event implements IIshEvent{
-    static eventName = 'ish';
-
-    constructor(public actions: Array<Action>){
-        super(IshEvent.eventName);
-    }
-}

package/ObsAttr.js

@@ -1,18 +0,0 @@
-export function ObsAttr(element, attr) {
-    const eventTarget = new EventTarget();
-    const obs = new MutationObserver((mutations) => {
-        eventTarget.dispatchEvent(new Event('attr-changed'));
-        // for(const mutation of mutations){
-        //     if(mutation.type === 'attributes' && mutation.attributeName === attr){
-        //         obs.disconnect();
-        //         eventTarget.dispatchEvent(new Event('obsAttr'));
-        //         break;
-        //     }
-        // }
-    });
-    obs.observe(element, {
-        attributes: true,
-        attributeFilter: [attr],
-    });
-    return eventTarget;
-}

package/ObsAttr.ts

@@ -1,18 +0,0 @@
-export function ObsAttr(element: Element, attr: string): EventTarget{
-    const eventTarget = new EventTarget();
-    const obs = new MutationObserver((mutations) => {
-        eventTarget.dispatchEvent(new Event('attr-changed'));
-        // for(const mutation of mutations){
-        //     if(mutation.type === 'attributes' && mutation.attributeName === attr){
-        //         obs.disconnect();
-        //         eventTarget.dispatchEvent(new Event('obsAttr'));
-        //         break;
-        //     }
-        // }
-    });
-    obs.observe(element, {
-        attributes: true,
-        attributeFilter: [attr],
-    });
-    return eventTarget;
-}

package/RootMutObs.js

@@ -1,49 +0,0 @@
-export class RootMutObs extends EventTarget {
-    #idleTimeout; //TODO: make this configurable
-    #idlePointer = 0;
-    constructor(rootNode, options) {
-        super();
-        this.#idleTimeout = options?.idleTimeout ?? 30;
-        this.#mutationObserver = new MutationObserver(mutationRecords => {
-            this.dispatchEvent(new MutationEvent(mutationRecords));
-            this.#triggerIsIdle();
-        });
-        this.#mutationObserver.observe(rootNode, {
-            subtree: true,
-            childList: true,
-            attributes: true,
-            attributeOldValue: true,
-        });
-        this.#triggerIsIdle();
-    }
-    #isIdle = false;
-    get isIdle() {
-        return this.#isIdle;
-    }
-    #triggerIsIdle() {
-        this.#isIdle = false;
-        clearTimeout(this.#idlePointer);
-        this.#idlePointer = setTimeout(() => {
-            this.#isIdle = true;
-            this.dispatchEvent(new Event('is-idle'));
-        }, this.#idleTimeout);
-    }
-    #mutationObserver;
-    disconnect() {
-        this.#mutationObserver.disconnect();
-    }
-}
-// https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
-/**
- * The `mutation-event` event represents something that happened.
- * We can document it here.
- */
-export class MutationEvent extends Event {
-    mutationRecords;
-    static eventName = 'mutation-event';
-    constructor(mutationRecords) {
-        // Since these are hard-coded, dispatchers can't get them wrong
-        super(MutationEvent.eventName);
-        this.mutationRecords = mutationRecords;
-    }
-}