mount-observer 0.0.111 → 0.1.0

package/MountObserver.js

@@ -1,574 +1,289 @@
-import { RootMutObs } from './RootMutObs.js';
-import { bindish, bindishIt } from './bindish.js';
-import './refid/hostish.js'; // gets embedded even if not used
-export const guid = '5Pv6bHOVH0ae07opRZ8N/g';
-export const wasItemReffed = Symbol.for('8aA6xB8+PkScmivaslBk5Q');
-export const mutationObserverLookup = new WeakMap();
-const refCount = new WeakMap();
+import { MountEvent, DismountEvent, DisconnectEvent, LoadEvent, AttrChangeEvent } from './Events.js';
 export class MountObserver extends EventTarget {
-    #mountInit;
+    #init;
     #options;
-    //#rootMutObs: RootMutObs | undefined;
     #abortController;
-    mountedElements;
-    #mountedList;
-    #disconnected;
-    //#unmounted: WeakSet<Element>;
-    #isComplex;
-    objNde;
-    constructor(init) {
+    #modules = [];
+    #mountedElements = new WeakSet();
+    #processedElements = new WeakSet();
+    #mutationObserver;
+    #rootNode;
+    #importsLoaded = false;
+    #elementAttrStates = new WeakMap();
+    #matchesWhereAttrFn = null;
+    #buildAttrCoordinateMapFn = null;
+    constructor(init, options = {}) {
         super();
-        const { on, whereElementIntersectsWith, whereMediaMatches } = init;
-        let isComplex = false;
-        //TODO:  study this problem further.  Starting to think this is basically not polyfillable
-        if (on !== undefined) {
-            const reducedMatch = on.replaceAll(':not(', '');
-            isComplex = reducedMatch.includes(' ') || (reducedMatch.includes(':') && reducedMatch.includes('('));
-        }
-        this.#isComplex = isComplex;
-        if (whereElementIntersectsWith)
-            throw 'NI'; //not implemented
-        this.#mountInit = init;
+        this.#init = init;
+        this.#options = options;
         this.#abortController = new AbortController();
-        this.mountedElements = {
-            weakSet: new WeakSet(),
-            setWeak: new Set(),
-        };
-        this.#disconnected = new WeakSet();
-        //this.#unmounted = new WeakSet();
-    }
-    #calculatedSelector;
-    #attrParts;
-    #fullListOfEnhancementAttrs;
-    async observedAttrs() {
-        await this.#selector();
-        return this.#fullListOfEnhancementAttrs;
-    }
-    //get #attrVals
-    async #selector() {
-        if (this.#calculatedSelector !== undefined)
-            return this.#calculatedSelector;
-        const { on, whereAttr } = this.#mountInit;
-        const withoutAttrs = on || '*';
-        if (whereAttr === undefined)
-            return withoutAttrs;
-        const { getWhereAttrSelector } = await import('./getWhereAttrSelector.js');
-        const info = await getWhereAttrSelector(whereAttr, withoutAttrs);
-        const { fullListOfAttrs, calculatedSelector, partitionedAttrs } = info;
-        this.#fullListOfEnhancementAttrs = fullListOfAttrs;
-        this.#attrParts = partitionedAttrs;
-        this.#calculatedSelector = calculatedSelector;
-        return this.#calculatedSelector;
-    }
-    //This method is called publicly from outside mount-observer -- keep it public
-    async composeFragment(fragment, level) {
-        const bis = fragment.querySelectorAll(`${inclTemplQry}`);
-        for (const bi of bis) {
-            if (bi.getAttribute('rel') === 'preload') {
-                (await import('./preloadContent.js')).preloadContent(bi);
-            }
-            else {
-                await this.#compose(bi, level);
-            }
+        if (options.disconnectedSignal) {
+            options.disconnectedSignal.addEventListener('abort', () => {
+                this.disconnect();
+            });
         }
-    }
-    async #compose(el, level) {
-        //[TODO]: load async, not used often
-        const src = el.getAttribute('src');
-        if (src === null || src.length < 2)
-            return;
-        const refType = src[0];
-        if (!['!', '#'].includes(refType))
-            return;
-        const { compose } = await import('./compose.js');
-        await compose(this, el, level, src.substring(1), refType);
-    }
-    #templLookUp = new Map();
-    #searchForComment(refName, fragment) {
-        //get rid of
-        const iterator = document.evaluate(`//comment()[.="${refName}"]`, fragment, null, XPathResult.ANY_TYPE, null);
-        //console.log({xpathResult})
-        try {
-            let thisNode = iterator.iterateNext();
-            return thisNode;
+        // Preload whereAttr utilities if needed
+        if (init.whereAttr) {
+            this.#preloadWhereAttrUtilities();
         }
-        catch (e) {
-            return null;
+        // Start loading imports if eager
+        if (init.loadingEagerness === 'eager' && init.import) {
+            this.#loadImports();
         }
     }
-    async findByID(
-    //[TODO]: make external, not always used
-    refName, fragment, refType) {
-        if (this.#templLookUp.has(refName))
-            return this.#templLookUp.get(refName);
-        let templ = null;
-        templ = refType === '#' ? fragment.querySelector(`#${refName}`) : this.#searchForComment(refName, fragment);
-        if (templ === null) {
-            let rootToSearchOutwardFrom = ((fragment.isConnected ? fragment.getRootNode() : this.#mountInit.withTargetShadowRoot) || document);
-            templ = refType === '#' ? rootToSearchOutwardFrom.getElementById(refName) : this.#searchForComment(refName, rootToSearchOutwardFrom);
-            while (templ === null && rootToSearchOutwardFrom !== document) {
-                rootToSearchOutwardFrom = (rootToSearchOutwardFrom.host || rootToSearchOutwardFrom).getRootNode();
-                templ = refType === '#' ? rootToSearchOutwardFrom.getElementById(refName) : this.#searchForComment(refName, rootToSearchOutwardFrom);
-            }
+    async #preloadWhereAttrUtilities() {
+        if (!this.#matchesWhereAttrFn) {
+            const { matchesWhereAttr } = await import('./whereAttr.js');
+            this.#matchesWhereAttrFn = matchesWhereAttr;
         }
-        if (templ !== null) {
-            if (!(templ instanceof HTMLTemplateElement)) {
-                const newTempl = document.createElement('template');
-                const { getAdjRefs } = await import('./refid/getAdjRefs.js');
-                const adjRefs = getAdjRefs(templ);
-                // if(adjRefs.length > 1){
-                //     (<any>newTempl)[wasItemReffed] = true;
-                //     adjRefs[0].setAttribute('itemref', '<autogen>');
-                // }
-                const fragment = document.createDocumentFragment();
-                let first = true;
-                for (const adjRef of adjRefs) {
-                    const clone = adjRef.cloneNode(true);
-                    if (refType === '#' && clone instanceof Element) {
-                        if (first && adjRefs.length > 1) {
-                            clone.setAttribute('itemref', '<autogen>');
-                            newTempl[wasItemReffed] = true;
-                            first = false;
-                        }
-                        clone.removeAttribute('id');
-                    }
-                    fragment.appendChild(clone);
-                }
-                if (templ instanceof Element) {
-                    const { doCleanup } = await import('./doCleanup.js');
-                    doCleanup(templ, fragment);
-                }
-                else {
-                    //TODO: cleanup
-                }
-                newTempl.content.appendChild(fragment);
-                templ = newTempl;
-            }
-            this.#templLookUp.set(refName, templ);
+        if (!this.#buildAttrCoordinateMapFn) {
+            const { buildAttrCoordinateMap } = await import('./attrCoordinates.js');
+            this.#buildAttrCoordinateMapFn = buildAttrCoordinateMap;
         }
-        return templ;
     }
-    disconnect(within) {
-        const nodeToMonitor = this.#isComplex ? (within instanceof ShadowRoot ? within : within.getRootNode()) : within;
-        const currentCount = refCount.get(nodeToMonitor);
-        if (currentCount !== undefined) {
-            if (currentCount <= 1) {
-                const observer = mutationObserverLookup.get(nodeToMonitor);
-                if (observer === undefined) {
-                    console.warn(refCountErr);
-                }
-                else {
-                    observer.disconnect();
-                    mutationObserverLookup.delete(nodeToMonitor);
-                    refCount.delete(nodeToMonitor);
-                }
-            }
-            else {
-                refCount.set(nodeToMonitor, currentCount + 1);
-            }
-        }
-        else {
-            if (mutationObserverLookup.has(nodeToMonitor)) {
-                console.warn(refCountErr);
-            }
-        }
-        this.dispatchEvent(new Event('disconnectedCallback'));
-    }
-    async observe(within, options) {
-        this.#options = options;
-        const init = this.#mountInit;
-        const { whereMediaMatches } = init;
-        if (whereMediaMatches === undefined) {
-            await this.#observe2(within);
-            return;
-        }
-        const mql = window.matchMedia(whereMediaMatches);
-        if (mql.matches) {
-            await this.#observe2(within);
-        }
-        mql.addEventListener('change', async (e) => {
-            if (e.matches) {
-                if (this.objNde === undefined) {
-                    await this.#observe2(within);
-                }
-                else {
-                    await this.#mountAll();
-                }
-            }
-            else {
-                if (this.objNde !== undefined) {
-                    await this.#dismountAll();
-                }
-            }
-        });
+    get disconnectedSignal() {
+        return this.#abortController.signal;
     }
-    async #observe2(within) {
-        await this.#selector();
-        this.objNde = new WeakRef(within);
-        const nodeToMonitor = this.#isComplex ? (within instanceof ShadowRoot ? within : within.getRootNode()) : within;
-        if (!mutationObserverLookup.has(nodeToMonitor)) {
-            mutationObserverLookup.set(nodeToMonitor, new RootMutObs(nodeToMonitor, this.#mountInit));
-            refCount.set(nodeToMonitor, 1);
+    async observe(rootNode) {
+        if (this.#rootNode) {
+            throw new Error('Already observing');
         }
-        else {
-            const currentCount = refCount.get(nodeToMonitor);
-            if (currentCount === undefined) {
-                console.warn(refCountErr);
-            }
-            else {
-                refCount.set(nodeToMonitor, currentCount + 1);
-            }
+        this.#rootNode = new WeakRef(rootNode);
+        // Wait for whereAttr utilities to load if needed
+        if (this.#init.whereAttr && !this.#matchesWhereAttrFn) {
+            await this.#preloadWhereAttrUtilities();
         }
-        const rootMutObs = mutationObserverLookup.get(within);
-        const fullListOfAttrs = this.#fullListOfEnhancementAttrs;
-        rootMutObs.addEventListener('mutation-event', async (e) => {
-            //TODO:  disconnected
-            if (this.#isComplex) {
-                this.#inspectWithin(within, false);
-                return;
-            }
-            const { mutationRecords } = e;
-            const elsToInspect = [];
-            //const elsToDisconnect: Array<Element> = [];
-            const doDisconnect = this.#mountInit.do?.disconnect;
-            let attrChangeInfosMap;
-            for (const mutationRecord of mutationRecords) {
-                const { addedNodes, type, removedNodes } = mutationRecord;
-                const addedElements = Array.from(addedNodes).filter(x => x instanceof Element);
-                addedElements.forEach(x => elsToInspect.push(x));
-                if (type === 'attributes') {
-                    const { target, attributeName, oldValue } = mutationRecord;
-                    if (target instanceof Element && attributeName !== null /*&& this.#mounted.has(target)*/) {
-                        if (fullListOfAttrs !== undefined) {
-                            const idx = fullListOfAttrs.indexOf(attributeName);
-                            if (idx !== -1) {
-                                if (attrChangeInfosMap === undefined)
-                                    attrChangeInfosMap = new Map();
-                                let attrChangeInfos = attrChangeInfosMap.get(target);
-                                if (attrChangeInfos === undefined) {
-                                    attrChangeInfos = [];
-                                    attrChangeInfosMap.set(target, attrChangeInfos);
-                                }
-                                const newValue = target.getAttribute(attributeName);
-                                const parts = this.#attrParts[idx];
-                                const attrChangeInfo = {
-                                    isSOfTAttr: false,
-                                    oldValue,
-                                    name: attributeName,
-                                    newValue,
-                                    idx,
-                                    parts
-                                };
-                                attrChangeInfos.push(attrChangeInfo);
-                            }
+        // Process existing elements
+        this.#processNode(rootNode);
+        // Set up mutation observer
+        this.#mutationObserver = new MutationObserver((mutations) => {
+            const attrChanges = [];
+            for (const mutation of mutations) {
+                if (mutation.type === 'childList') {
+                    for (const node of mutation.addedNodes) {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            this.#processNode(node);
                         }
                     }
-                    elsToInspect.push(target);
+                    mutation.removedNodes.forEach(node => {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            this.#handleRemoval(node);
+                        }
+                    });
                 }
-                const deletedElements = Array.from(removedNodes).filter(x => x instanceof Element);
-                const { DisconnectEvent } = await import('./Events.js');
-                for (const deletedElement of deletedElements) {
-                    this.#disconnected.add(deletedElement);
-                    if (doDisconnect !== undefined) {
-                        doDisconnect(deletedElement, this, {});
+                else if (mutation.type === 'attributes' && mutation.target.nodeType === Node.ELEMENT_NODE) {
+                    // Handle attribute changes for mounted elements
+                    const element = mutation.target;
+                    if (this.#mountedElements.has(element) && this.#init.whereAttr) {
+                        const changes = this.#checkAttrChanges(element);
+                        attrChanges.push(...changes);
                     }
-                    this.dispatchEvent(new DisconnectEvent(deletedElement));
                 }
             }
-            if (attrChangeInfosMap !== undefined) {
-                const { AttrChangeEvent } = await import('./Events.js');
-                for (const [key, value] of attrChangeInfosMap) {
-                    this.dispatchEvent(new AttrChangeEvent(key, value));
-                }
+            // Batch and dispatch attribute changes
+            if (attrChanges.length > 0) {
+                this.dispatchEvent(new AttrChangeEvent(attrChanges));
             }
-            this.#filterAndMount(elsToInspect, within, true, false);
-            for (const el of elsToInspect) {
-                await this.#inspectWithin(el, false);
-            }
-        }, { signal: this.#abortController.signal });
-        await this.#inspectWithin(within, true);
+        });
+        const observerConfig = {
+            childList: true,
+            subtree: true
+        };
+        // Add attribute observation if whereAttr is configured
+        if (this.#init.whereAttr) {
+            observerConfig.attributes = true;
+            observerConfig.attributeOldValue = true;
+        }
+        this.#mutationObserver.observe(rootNode, observerConfig);
     }
-    static synthesize(within, customElement, mose) {
-        //TODO:  make external
-        mose.type = 'mountobserver';
-        const name = customElements.getName(customElement);
-        if (name === null)
-            throw 400;
-        let instance = within.querySelector(name);
-        if (instance === null) {
-            instance = new customElement();
-            if (within === document) {
-                within.head.appendChild(instance);
-            }
-            else {
-                within.appendChild(instance);
-            }
+    disconnect() {
+        if (this.#mutationObserver) {
+            this.#mutationObserver.disconnect();
+            this.#mutationObserver = undefined;
         }
-        instance.appendChild(mose);
+        this.#abortController.abort();
+        this.#rootNode = undefined;
     }
-    #confirmInstanceOf(el, whereInstanceOf) {
-        for (const test of whereInstanceOf) {
-            if (el instanceof test)
-                return true;
+    async #loadImports() {
+        if (this.#importsLoaded || !this.#init.import) {
+            return;
         }
-        return false;
+        // Dynamically load the import utilities only when needed
+        const { loadImports } = await import('./loadImports.js');
+        this.#modules = await loadImports(this.#init.import);
+        this.#importsLoaded = true;
+        this.dispatchEvent(new LoadEvent(this.#modules));
     }
-    async #mount(matching, initializing) {
-        //first unmount non matching
-        const alreadyMounted = await this.#filterAndDismount();
-        const mount = this.#mountInit.do?.mount;
-        const { import: imp } = this.#mountInit;
-        const me = this.mountedElements;
-        const options = this.#options;
-        for (const match of matching) {
-            if (alreadyMounted.has(match))
-                continue;
-            if (!me.weakSet.has(match)) {
-                me.setWeak.add(new WeakRef(match));
-                me.weakSet.add(match);
-            }
-            if (imp !== undefined) {
-                switch (typeof imp) {
-                    case 'string':
-                        this.module = await import(imp);
-                        break;
-                    case 'object':
-                        if (Array.isArray(imp)) {
-                            throw 'NI: Firefox';
-                        }
-                        break;
-                    case 'function':
-                        this.module = await imp(match, this, {
-                            stage: 'Import',
-                            initializing
-                        });
-                        break;
-                }
-            }
-            if (mount !== undefined) {
-                mount(match, this, {
-                    stage: 'PostImport',
-                    initializing
-                });
+    #processNode(node) {
+        // If it's an element node, check if it matches
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node;
+            if (this.#matchesSelector(element)) {
+                this.#handleMatch(element);
             }
-            if (options?.leaveBreadcrumb) {
-                if (match[guid] === undefined) {
-                    match[guid] = new Set();
-                }
-                match[guid].add(this);
-            }
-            const { MountEvent } = await import('./Events.js');
-            this.dispatchEvent(new MountEvent(match, initializing));
-            //should we automatically call readAttrs?
-            //the thinking is it might make more sense to call that after mounting
-            this.#mountedList?.push(new WeakRef(match));
         }
-    }
-    readAttrs(match, branchIndexes) {
-        //TODO:  externalize
-        const fullListOfAttrs = this.#fullListOfEnhancementAttrs;
-        const attrChangeInfos = [];
-        const oldValue = null;
-        if (fullListOfAttrs !== undefined) {
-            const attrParts = this.#attrParts;
-            for (let idx = 0, ii = fullListOfAttrs.length; idx < ii; idx++) {
-                const parts = attrParts[idx];
-                const { branchIdx } = parts;
-                if (branchIndexes !== undefined) {
-                    if (!branchIndexes.has(branchIdx))
-                        continue;
-                }
-                const name = fullListOfAttrs[idx];
-                const newValue = match.getAttribute(name);
-                attrChangeInfos.push({
-                    idx,
-                    isSOfTAttr: false,
-                    newValue,
-                    oldValue,
-                    name,
-                    parts
+        // Process children
+        if (node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.DOCUMENT_NODE) {
+            const root = node;
+            // If whereAttr is specified, we need to check all elements
+            // since we can't use querySelectorAll for complex attribute matching
+            if (this.#init.whereAttr) {
+                // Get all elements matching the CSS selector first
+                root.querySelectorAll(this.#init.whereElementMatches).forEach(child => {
+                    if (this.#matchesSelector(child)) {
+                        this.#handleMatch(child);
+                    }
                 });
             }
-        }
-        const { observedAttrsWhenMounted } = this.#mountInit;
-        if (observedAttrsWhenMounted !== undefined) {
-            for (const observedAttr of observedAttrsWhenMounted) {
-                const attrIsString = typeof observedAttr === 'string';
-                const name = attrIsString ? observedAttr : observedAttr.name;
-                let mapsTo;
-                let newValue = match.getAttribute(name);
-                if (!attrIsString) {
-                    const { customParser, instanceOf, mapsTo: mt, valIfNull } = observedAttr;
-                    if (instanceOf || customParser)
-                        throw 'NI';
-                    if (newValue === null)
-                        newValue = valIfNull;
-                    mapsTo = mt;
-                }
-                attrChangeInfos.push({
-                    isSOfTAttr: true,
-                    newValue,
-                    oldValue,
-                    name,
-                    mapsTo
+            else {
+                // Optimize: use querySelectorAll directly when no whereAttr
+                root.querySelectorAll(this.#init.whereElementMatches).forEach(child => {
+                    this.#handleMatch(child);
                 });
             }
         }
-        return attrChangeInfos;
     }
-    async #dismount(unmatching) {
-        const onDismount = this.#mountInit.do?.dismount;
-        const { DismountEvent } = await import('./Events.js');
-        for (const unmatch of unmatching) {
-            if (onDismount !== undefined) {
-                onDismount(unmatch, this, {});
-            }
-            this.dispatchEvent(new DismountEvent(unmatch));
+    #matchesSelector(element) {
+        // Check whereElementMatches condition
+        const matchesElement = element.matches(this.#init.whereElementMatches);
+        // If whereAttr is not specified, only check whereElementMatches
+        if (!this.#init.whereAttr) {
+            return matchesElement;
+        }
+        // Use cached function (should be loaded by now from constructor)
+        if (!this.#matchesWhereAttrFn) {
+            console.warn('whereAttr utilities not loaded yet');
+            return false;
         }
+        // Both conditions must be true (AND logic)
+        return matchesElement && this.#matchesWhereAttrFn(element, this.#init.whereAttr);
     }
-    async #dismountAll() {
-        const mounted = this.#mountedList;
-        if (mounted === undefined)
+    async #handleMatch(element) {
+        if (this.#processedElements.has(element)) {
             return;
-        this.#dismount(mounted.map(x => x.deref()).filter(x => x !== undefined));
-    }
-    async #mountAll() {
-        //TODO:  copilot created, check if needed
-        const { whereSatisfies, whereInstanceOf } = this.#mountInit;
-        const match = await this.#selector();
-        const els = Array.from(document.querySelectorAll(match));
-        this.#filterAndMount(els, document.body, false, true);
-    }
-    async #filterAndDismount() {
-        const returnSet = new Set();
-        if (this.#mountedList !== undefined) {
-            const previouslyMounted = this.#mountedList.map(x => x.deref());
-            const { whereSatisfies, whereInstanceOf } = this.#mountInit;
-            const match = await this.#selector();
-            const elsToUnMount = previouslyMounted.filter(x => {
-                if (x === undefined)
-                    return false;
-                if (!x.matches(match))
-                    return true;
-                //TODO:  add check for outside
-                if (whereSatisfies !== undefined) {
-                    if (!whereSatisfies(x, this, { stage: 'Inspecting', initializing: false }))
-                        return true;
-                }
-                returnSet.add(x);
-                return false;
-            });
-            this.#dismount(elsToUnMount);
         }
-        this.#mountedList = Array.from(returnSet).map(x => new WeakRef(x));
-        return returnSet;
-    }
-    #outsideCheck(oElement, matchCandidate, outside) {
-        const elementsToExclude = Array.from(oElement.querySelectorAll(outside));
-        for (const elementToExclude of elementsToExclude) {
-            if (elementToExclude === matchCandidate || elementToExclude.contains(matchCandidate))
-                return false;
+        // Load imports if not already loaded
+        if (!this.#importsLoaded && this.#init.import) {
+            await this.#loadImports();
         }
-        return true;
-    }
-    async #filterAndMount(els, target, checkMatch, initializing) {
-        const { whereSatisfies, whereInstanceOf, assigner, outside } = this.#mountInit;
-        const match = await this.#selector();
-        const elsToMount = els.filter(x => {
-            if (checkMatch) {
-                if (!x.matches(match))
-                    return false;
-                //TODO:  check for outside
-            }
-            if (outside !== undefined) {
-                if (!this.#outsideCheck(this.objNde.deref(), x, outside))
-                    return false;
+        this.#processedElements.add(element);
+        this.#mountedElements.add(element);
+        const rootNode = this.#rootNode?.deref();
+        if (!rootNode) {
+            // Root node was garbage collected
+            return;
+        }
+        const context = {
+            modules: this.#modules,
+            observer: this,
+            observeInfo: {
+                rootNode
             }
-            if (whereSatisfies !== undefined) {
-                if (!whereSatisfies(x, this, { stage: 'Inspecting', initializing }))
-                    return false;
+        };
+        // Apply assignGingerly if specified
+        if (this.#init.assignGingerly) {
+            const { assignGingerly } = await import('assign-gingerly/index.js');
+            assignGingerly(element, this.#init.assignGingerly);
+        }
+        // Call do callback
+        if (this.#init.do) {
+            if (typeof this.#init.do === 'function') {
+                this.#init.do(element, context);
             }
-            if (whereInstanceOf !== undefined) {
-                if (!this.#confirmInstanceOf(x, whereInstanceOf))
-                    return false;
+            else if (this.#init.do.mount) {
+                this.#init.do.mount(element, context);
             }
-            return true;
-        });
-        for (const elToMount of elsToMount) {
-            if (elToMount.matches(inclTemplQry)) {
-                if (elToMount instanceof HTMLTemplateElement && elToMount.getAttribute('rel') === 'preload') {
-                    (await import('./preloadContent.js')).preloadContent(elToMount /*, this.#mountInit.withTargetShadowRoot*/);
-                }
-                else {
-                    await this.#compose(elToMount, 0);
-                }
+        }
+        // Dispatch mount event
+        this.dispatchEvent(new MountEvent(element, this.#modules));
+        // Check for initial attribute changes if whereAttr is configured
+        if (this.#init.whereAttr) {
+            const changes = this.#checkAttrChanges(element);
+            if (changes.length > 0) {
+                this.dispatchEvent(new AttrChangeEvent(changes));
             }
         }
-        await bindishIt(els, target, { assigner });
-        if (elsToMount.length === 0)
-            return;
-        this.#mount(elsToMount, initializing);
     }
-    async #inspectWithin(within, initializing) {
-        //the line below had an await for bindish, consistent with the rest of the code, but it was
-        //getting into a catch-22 scenario frequently, blocking the code for resuming.
-        //This was observed with per-each package, demo/ScopeScript.html, clicking refresh a few times
-        //one will see the inconsistent behavior if await is added below.
-        const idGenerators = Array.from(within.querySelectorAll('[-id]'));
-        if (idGenerators[0]) {
-            const { genIds } = await import('./refid/genIds.js');
-            for (const el of idGenerators) {
-                genIds(el);
-                el.removeAttribute('-id');
+    #checkAttrChanges(element) {
+        if (!this.#init.whereAttr || !this.#buildAttrCoordinateMapFn) {
+            return [];
+        }
+        const isCustomElement = element.tagName.toLowerCase().includes('-');
+        const attrCoordMap = this.#buildAttrCoordinateMapFn(this.#init.whereAttr, isCustomElement);
+        // Get or create the attribute state for this element
+        let attrState = this.#elementAttrStates.get(element);
+        if (!attrState) {
+            attrState = new Map();
+            this.#elementAttrStates.set(element, attrState);
+        }
+        const changes = [];
+        const currentAttrs = new Set();
+        // 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);
+            }
+            // 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;
+                    const mapEntry = this.#init.map?.[coordinate] || null;
+                    changes.push({
+                        value: currentValue,
+                        attrNode,
+                        mapEntry,
+                        attrName,
+                        coordinate,
+                        element
+                    });
+                    // Update state
+                    if (currentValue !== null) {
+                        attrState.set(attrName, currentValue);
+                    }
+                    else {
+                        attrState.delete(attrName);
+                    }
+                }
             }
         }
-        bindish(within, within, { assigner: this.#mountInit.assigner });
-        await this.composeFragment(within, 0);
-        const match = await this.#selector();
-        const els = Array.from(within.querySelectorAll(match));
-        this.#filterAndMount(els, within, false, initializing);
+        return changes;
     }
-}
-//ToDO:  make external
-export function waitForIdleNodes(nodes, idleTimeout) {
-    const mountInit = {
-        idleTimeout
-    };
-    return new Promise((resolve) => {
-        const mutObservers = [];
-        for (const node of nodes) {
-            const mutObs = mutationObserverLookup.get(node);
-            if (mutObs !== undefined) {
-                mutObservers.push(mutObs);
-            }
-            else {
-                const currentCount = refCount.get(node) || 0;
-                const newMutObs = new RootMutObs(node, mountInit);
-                mutationObserverLookup.set(node, newMutObs);
-                refCount.set(node, currentCount + 1);
-                mutObservers.push(newMutObs);
-            }
+    #handleRemoval(element) {
+        if (!this.#mountedElements.has(element)) {
+            return;
         }
-        if (areAllIdle(mutObservers)) {
-            resolve();
+        this.#mountedElements.delete(element);
+        const rootNode = this.#rootNode?.deref();
+        if (!rootNode) {
+            // Root node was garbage collected
+            return;
         }
-        for (const obs of mutObservers) {
-            obs.addEventListener('is-idle', () => {
-                if (areAllIdle(mutObservers)) {
-                    resolve();
-                }
-            });
+        const context = {
+            modules: this.#modules,
+            observer: this,
+            observeInfo: {
+                rootNode
+            }
+        };
+        // Call dismount callback
+        if (this.#init.do && typeof this.#init.do !== 'function' && this.#init.do.dismount) {
+            this.#init.do.dismount(element, context);
         }
-    });
-}
-//make external
-function areAllIdle(mutObs) {
-    for (const mo of mutObs) {
-        if (!mo.isIdle)
-            return false;
+        // Dispatch dismount event
+        this.dispatchEvent(new DismountEvent(element));
+        // Check if element is being moved within the same root
+        // If it's truly disconnected, dispatch disconnect event
+        setTimeout(() => {
+            if (!rootNode.contains(element)) {
+                if (this.#init.do && typeof this.#init.do !== 'function' && this.#init.do.disconnect) {
+                    this.#init.do.disconnect(element, context);
+                }
+                this.dispatchEvent(new DisconnectEvent(element));
+            }
+        }, 0);
     }
-    return true;
 }
-const refCountErr = 'mount-observer ref count mismatch';
-export const inclTemplQry = 'template[src^="#"]:not([hidden]),template[src^="!"]:not([hidden])';
-//const hasRootInDefault =  ['data', 'enh', 'data-enh']