mount-observer 0.0.111 → 0.1.0

package/MountObserver.ts

@@ -1,615 +1,354 @@
-import {MountInit, IMountObserver, AddMutationEventListener, 
-    MutationEvent, dismountEventName, mountEventName, IMountEvent, IDismountEvent,
-    disconnectedEventName, IDisconnectEvent, IAttrChangeEvent, attrChangeEventName, AttrChangeInfo, loadEventName, ILoadEvent,
-    AttrParts,
-    MOSE, WeakDual,
+import {
+    MountInit,
     MountObserverOptions,
-    Assigner,
-    RefType
-} from './ts-refs/mount-observer/types';
-import {RootMutObs} from './RootMutObs.js';
-import {bindish, bindishIt} from './bindish.js';
-import './refid/hostish.js';  // gets embedded even if not used
-export {MOSE} from './ts-refs/mount-observer/types';
-export const guid = '5Pv6bHOVH0ae07opRZ8N/g';
-export const wasItemReffed = Symbol.for('8aA6xB8+PkScmivaslBk5Q');
-
-export const mutationObserverLookup = new WeakMap<Node, RootMutObs>();
-const refCount = new WeakMap<Node, number>();
-export class MountObserver extends EventTarget implements IMountObserver{
-    
-    #mountInit: MountInit;
-    #options: MountObserverOptions | undefined;
-    //#rootMutObs: RootMutObs | undefined;
+    IMountObserver,
+    MountContext,
+    AttrChange
+} from './types.js';
+import {
+    MountEvent,
+    DismountEvent,
+    DisconnectEvent,
+    LoadEvent,
+    AttrChangeEvent
+} from './Events.js';
+
+export class MountObserver extends EventTarget implements IMountObserver {
+    #init: MountInit;
+    #options: MountObserverOptions;
     #abortController: AbortController;
-    mountedElements: WeakDual<Element>;
-    #mountedList: Array<WeakRef<Element>> | undefined;
-    #disconnected: WeakSet<Element>;
-    //#unmounted: WeakSet<Element>;
-    #isComplex: boolean;
-    objNde: WeakRef<Node> | undefined;
-
-    constructor(init: MountInit){
+    #modules: any[] = [];
+    #mountedElements = new WeakSet<Element>();
+    #processedElements = new WeakSet<Element>();
+    #mutationObserver: MutationObserver | undefined;
+    #rootNode: WeakRef<Node> | undefined;
+    #importsLoaded = false;
+    #elementAttrStates = new WeakMap<Element, Map<string, string | null>>();
+    #matchesWhereAttrFn: ((element: Element, whereAttr: any) => boolean) | null = null;
+    #buildAttrCoordinateMapFn: ((whereAttr: any, isCustomElement: boolean) => any) | null = null;
+
+    constructor(init: MountInit, options: MountObserverOptions = {}) {
         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: string | undefined;
-    #attrParts: Array<AttrParts> | undefined;
-    
-    #fullListOfEnhancementAttrs: Array<string> | undefined;
-    async observedAttrs(){
-        await this.#selector();
-        return this.#fullListOfEnhancementAttrs;
-    }
-    //get #attrVals
-    async #selector() : Promise<string>{
-        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: DocumentFragment, level: number){
-        const bis = fragment.querySelectorAll(`${inclTemplQry}`) as NodeListOf<HTMLTemplateElement>;
-        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: HTMLTemplateElement, level: number){
-        //[TODO]: load async, not used often
-        const src = el.getAttribute('src');
-        if(src === null || src.length < 2) return;
-        const refType = src[0] as RefType;
-        if(!['!', '#'].includes(refType)) return;
-        const {compose} = await import('./compose.js');
-        await compose(this, el, level, src.substring(1), refType);
-        
+        // Preload whereAttr utilities if needed
+        if (init.whereAttr) {
+            this.#preloadWhereAttrUtilities();
+        }
 
-    }
-    #templLookUp: Map<string, HTMLElement> = new Map();
-    #searchForComment(refName: string, fragment: Node){
-        //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;
-        }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: string, fragment: DocumentFragment, 
-        refType: RefType): Promise<HTMLElement | DocumentFragment | null>{
-        if(this.#templLookUp.has(refName)) return this.#templLookUp.get(refName)!;
-        let templ: Node | null = null;
-        templ = refType === '#' ? fragment.querySelector(`#${refName}`) : this.#searchForComment(refName, fragment);
-        if(templ === null){
-            let rootToSearchOutwardFrom = ((fragment.isConnected ? fragment.getRootNode() : this.#mountInit.withTargetShadowRoot) || document) as any;
-            templ = refType === '#' ? rootToSearchOutwardFrom.getElementById(refName) : this.#searchForComment(refName, rootToSearchOutwardFrom);
-            while(templ === null && rootToSearchOutwardFrom !== (document as any as DocumentFragment) ){
-                rootToSearchOutwardFrom = (rootToSearchOutwardFrom.host || rootToSearchOutwardFrom).getRootNode() as DocumentFragment;
-                templ = refType === '#' ? rootToSearchOutwardFrom.getElementById(refName) : this.#searchForComment(refName, rootToSearchOutwardFrom);
-            }
+    
+    async #preloadWhereAttrUtilities(): Promise<void> {
+        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) as HTMLElement;
-                    if(refType === '#' && clone instanceof Element){
-                        if(first && adjRefs.length > 1){
-                            clone.setAttribute('itemref', '<autogen>');
-                            (<any>newTempl)[wasItemReffed] = true;
-                            first = false;
-                        }
-                        clone.removeAttribute('id');
-                    }
-                    
-                    fragment.appendChild(clone);
-                }
-                if(templ instanceof Element){
-                    const {doCleanup} = await import('./doCleanup.js');
-                    doCleanup(templ as HTMLElement, fragment);
-                    
-                }else{
-                    //TODO: cleanup
-                }
-                newTempl.content.appendChild(fragment);
-                templ = newTempl;
-                
-            }
-            this.#templLookUp.set(refName, templ as HTMLTemplateElement);
+        if (!this.#buildAttrCoordinateMapFn) {
+            const { buildAttrCoordinateMap } = await import('./attrCoordinates.js');
+            this.#buildAttrCoordinateMapFn = buildAttrCoordinateMap;
         }
-        return templ as HTMLTemplateElement;
     }
 
-    disconnect(within: Node){
-        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'));
-                
+    get disconnectedSignal(): AbortSignal {
+        return this.#abortController.signal;
     }
 
-    async observe(within: Node, options?: MountObserverOptions){
-        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);  
+    async observe(rootNode: Node): Promise<void> {
+        if (this.#rootNode) {
+            throw new Error('Already observing');
         }
-        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();
-                }
-            }
-        });
-    }
 
-    async #observe2(within: Node){
-        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);
-        }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 as any as AddMutationEventListener).addEventListener('mutation-event', async (e: MutationEvent) => {
-            //TODO:  disconnected
-            if(this.#isComplex){
-                this.#inspectWithin(within, false);
-                return;
-            }
-            const {mutationRecords} = e;
-            const elsToInspect: Array<Element> = [];
-            //const elsToDisconnect: Array<Element> = [];
-            const doDisconnect = this.#mountInit.do?.disconnect;
-            let attrChangeInfosMap: Map<Element, Array<AttrChangeInfo>> | undefined;
-            for(const mutationRecord of mutationRecords){
-                const {addedNodes, type, removedNodes} = mutationRecord;
-                const addedElements = Array.from(addedNodes).filter(x => x instanceof Element) as Array<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: 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: AttrChange[] = [];
+            
+            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 as Element);
-                }
-
-                const deletedElements = Array.from(removedNodes).filter(x => x instanceof Element) as Array<Element>;
-                const {DisconnectEvent} = await import('./Events.js');
-                for(const deletedElement of deletedElements){
-                    this.#disconnected.add(deletedElement);
-                    if(doDisconnect !== undefined){
-                        doDisconnect(deletedElement, this, {});
+                    mutation.removedNodes.forEach(node => {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            this.#handleRemoval(node as Element);
+                        }
+                    });
+                } else if (mutation.type === 'attributes' && mutation.target.nodeType === Node.ELEMENT_NODE) {
+                    // Handle attribute changes for mounted elements
+                    const element = mutation.target as Element;
+                    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))
                 }
             }
-            this.#filterAndMount(elsToInspect, within, true, false);
-            for(const el of elsToInspect){
-                await this.#inspectWithin(el, false);
+            
+            // Batch and dispatch attribute changes
+            if (attrChanges.length > 0) {
+                this.dispatchEvent(new AttrChangeEvent(attrChanges));
             }
-        }, {signal: this.#abortController.signal});
+        });
+
+        const observerConfig: MutationObserverInit = {
+            childList: true,
+            subtree: true
+        };
         
-        await this.#inspectWithin(within, 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: Document | ShadowRoot, customElement: {new(): HTMLElement}, mose: 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(): void {
+        if (this.#mutationObserver) {
+            this.#mutationObserver.disconnect();
+            this.#mutationObserver = undefined;
         }
-        instance.appendChild(mose);
+        this.#abortController.abort();
+        this.#rootNode = undefined;
     }
 
-    #confirmInstanceOf(el: Element, whereInstanceOf: Array<{new(): Element}>){
-        for(const test of whereInstanceOf){
-            if(el instanceof test) return true;
+    async #loadImports(): Promise<void> {
+        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: Array<Element>, initializing: boolean){
-        //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
-                }) 
-            }
-            if(options?.leaveBreadcrumb){
-                if((<any>match)[guid] === undefined){
-                    (<any>match)[guid] = new Set();
-                }
-                (<any>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
+    #processNode(node: Node): void {
+        // If it's an element node, check if it matches
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node as Element;
             
-            this.#mountedList?.push(new WeakRef(match));
+            if (this.#matchesSelector(element)) {
+                this.#handleMatch(element);
+            }
         }
-    }
 
-    readAttrs(match: Element, branchIndexes?: Set<number>){
-        //TODO:  externalize
-        const fullListOfAttrs = this.#fullListOfEnhancementAttrs;
-        const attrChangeInfos: Array<AttrChangeInfo> = [];
-        const oldValue = null;
-        if(fullListOfAttrs !== undefined){
-            const attrParts = this.#attrParts
+        // Process children
+        if (node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.DOCUMENT_NODE) {
+            const root = node as Element | Document;
             
-            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
+            // 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: string | undefined;
-                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: Array<Element>){
-        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: Element): boolean {
+        // 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) return;
-        this.#dismount(mounted.map(x => x.deref()).filter(x => x !== undefined) as Array<Element>);
-    }
-
-    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(): Promise<Set<Element>>{
-        const returnSet = new Set<Element>();
-        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;
-            }) as Array<Element>;
-            this.#dismount(elsToUnMount);
+    async #handleMatch(element: Element): Promise<void> {
+        if (this.#processedElements.has(element)) {
+            return;
         }
-        this.#mountedList = Array.from(returnSet).map(x => new WeakRef(x));
-        return returnSet;
-    }
 
-    #outsideCheck(oElement: Element, matchCandidate: Element, outside: string){
-        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: Array<Element>, target: Node, checkMatch: boolean, initializing: boolean){
-        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;
+        this.#processedElements.add(element);
+        this.#mountedElements.add(element);
 
-                //TODO:  check for outside
-            }
-            if(outside !== undefined){
-                if(!this.#outsideCheck(this.objNde!.deref() as Element, x, outside)) return false;
-            }
-            if(whereSatisfies !== undefined){
-                if(!whereSatisfies(x, this, {stage: 'Inspecting', initializing})) return false;
-            }
-            if(whereInstanceOf !== undefined){
-                if(!this.#confirmInstanceOf(x, whereInstanceOf)) return false;
-            }
-            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 as HTMLTemplateElement, 0);
-                }
-                
-            }
-            
+        const rootNode = this.#rootNode?.deref();
+        if (!rootNode) {
+            // Root node was garbage collected
+            return;
         }
-        await bindishIt(els, target, {assigner});
-        if(elsToMount.length === 0) return;
-        this.#mount(elsToMount, initializing);
-    }
 
-    async #inspectWithin(within: Node, initializing: boolean){
-        //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 as DocumentFragment).querySelectorAll('[-id]'))
-        if(idGenerators[0]){
-            const {genIds} = await import('./refid/genIds.js');
-            for(const el of idGenerators){
-                genIds(el);
-                el.removeAttribute('-id');
+        const context: MountContext = {
+            modules: this.#modules,
+            observer: this,
+            observeInfo: {
+                rootNode
             }
-        }
-        bindish(within as DocumentFragment, within, {assigner: this.#mountInit.assigner});
-        await this.composeFragment(within as DocumentFragment, 0);
-        const match = await this.#selector();
-        const els = Array.from((within as Element).querySelectorAll(match));
-        this.#filterAndMount(els, within, false, initializing);
+        };
 
-    }
+        // 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);
+            } else if (this.#init.do.mount) {
+                this.#init.do.mount(element, context);
+            }
+        }
 
-//ToDO:  make external
-export function waitForIdleNodes(nodes: Array<Node>, idleTimeout?: number): Promise<void>{
-    const mountInit: MountInit = {
-        idleTimeout
-    };
-    return new Promise((resolve) => {
-        const mutObservers: Array<RootMutObs> = [];
-        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);
+        // 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));
             }
         }
-        if(areAllIdle(mutObservers)){
-            resolve();
+    }
+    
+    #checkAttrChanges(element: Element): AttrChange[] {
+        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<string, string | null>();
+            this.#elementAttrStates.set(element, attrState);
         }
-        for(const obs of mutObservers){
-            obs.addEventListener('is-idle', () => {
-                if(areAllIdle(mutObservers)){
-                    resolve();
+        
+        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);
+            }
+            
+            // 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);
+                    }
                 }
-            });
+            }
         }
-    });
-}
-
-//make external
-function areAllIdle(mutObs: Array<RootMutObs>){
-    for(const mo of mutObs){
-        if(!mo.isIdle) return false;
+        
+        return changes;
     }
-    return true;
-}   
 
+    #handleRemoval(element: Element): void {
+        if (!this.#mountedElements.has(element)) {
+            return;
+        }
 
-const refCountErr = 'mount-observer ref count mismatch';
-export const inclTemplQry = 'template[src^="#"]:not([hidden]),template[src^="!"]:not([hidden])';
-
-export interface MountObserver extends IMountObserver{}
+        this.#mountedElements.delete(element);
 
+        const rootNode = this.#rootNode?.deref();
+        if (!rootNode) {
+            // Root node was garbage collected
+            return;
+        }
 
+        const context: MountContext = {
+            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);
+        }
 
+        // Dispatch dismount event
+        this.dispatchEvent(new DismountEvent(element));
 
-//const hasRootInDefault =  ['data', 'enh', 'data-enh']
+        // 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);
+    }
+}