mount-observer 0.0.16 → 0.0.18

package/MountObserver.js

@@ -29,6 +29,7 @@ export class MountObserver extends EventTarget {
         //this.#unmounted = new WeakSet();
     }
     #calculatedSelector;
+    #attrParts;
     #fullListOfAttrs;
     //get #attrVals
     async #selector() {
@@ -40,8 +41,9 @@ export class MountObserver extends EventTarget {
             return withoutAttrs;
         const { getWhereAttrSelector } = await import('./getWhereAttrSelector.js');
         const info = getWhereAttrSelector(whereAttr, withoutAttrs);
-        const { fullListOfAttrs, calculatedSelector } = info;
+        const { fullListOfAttrs, calculatedSelector, partitionedAttrs } = info;
         this.#fullListOfAttrs = fullListOfAttrs;
+        this.#attrParts = partitionedAttrs;
         this.#calculatedSelector = calculatedSelector;
         return this.#calculatedSelector;
     }
@@ -98,6 +100,7 @@ export class MountObserver extends EventTarget {
         }
     }
     async observe(within) {
+        await this.#selector();
         this.objNde = new WeakRef(within);
         const nodeToMonitor = this.#isComplex ? (within instanceof ShadowRoot ? within : within.getRootNode()) : within;
         if (!mutationObserverLookup.has(nodeToMonitor)) {
@@ -114,7 +117,6 @@ export class MountObserver extends EventTarget {
             }
         }
         const rootMutObs = mutationObserverLookup.get(within);
-        //const {whereAttr} = this.#mountInit;
         const fullListOfAttrs = this.#fullListOfAttrs;
         rootMutObs.addEventListener('mutation-event', async (e) => {
             //TODO:  disconnected
@@ -126,32 +128,33 @@ export class MountObserver extends EventTarget {
             const elsToInspect = [];
             //const elsToDisconnect: Array<Element> = [];
             const doDisconnect = this.#mountInit.do?.disconnect;
+            let attrChangeInfosMap;
             for (const mutationRecord of mutationRecords) {
                 const { addedNodes, type, removedNodes } = mutationRecord;
-                //console.log(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 (target instanceof Element && attributeName !== null /*&& this.#mounted.has(target)*/) {
                         if (fullListOfAttrs !== undefined) {
                             const idx = fullListOfAttrs.indexOf(attributeName);
-                            if (idx > -1) {
+                            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 = {
-                                    name: attributeName,
                                     oldValue,
                                     newValue,
-                                    idx
+                                    idx,
+                                    parts
                                 };
-                                this.dispatchEvent(new AttrChangeEvent(target, attrChangeInfo));
-                            }
-                        }
-                        else {
-                            const { whereAttr } = this.#mountInit;
-                            if (whereAttr !== undefined) {
-                                const { doWhereAttr } = await import('./doWhereAttr.js');
-                                doWhereAttr(whereAttr, attributeName, target, oldValue, this);
+                                attrChangeInfos.push(attrChangeInfo);
                             }
                         }
                     }
@@ -166,6 +169,11 @@ export class MountObserver extends EventTarget {
                     this.dispatchEvent(new DisconnectEvent(deletedElement));
                 }
             }
+            if (attrChangeInfosMap !== undefined) {
+                for (const [key, value] of attrChangeInfosMap) {
+                    this.dispatchEvent(new AttrChangeEvent(key, value));
+                }
+            }
             this.#filterAndMount(elsToInspect, true, false);
         }, { signal: this.#abortController.signal });
         await this.#inspectWithin(within, true);
@@ -182,7 +190,6 @@ export class MountObserver extends EventTarget {
         const alreadyMounted = await this.#filterAndDismount();
         const mount = this.#mountInit.do?.mount;
         const { import: imp } = this.#mountInit;
-        const fullListOfAttrs = this.#fullListOfAttrs;
         for (const match of matching) {
             if (alreadyMounted.has(match))
                 continue;
@@ -212,37 +219,36 @@ export class MountObserver extends EventTarget {
                 });
             }
             this.dispatchEvent(new MountEvent(match, initializing));
-            if (fullListOfAttrs !== undefined) {
-                const { whereAttr } = this.#mountInit;
-                for (const name of fullListOfAttrs) {
-                    if (whereAttr !== undefined) {
-                        const { doWhereAttr } = await import('./doWhereAttr.js');
-                        doWhereAttr(whereAttr, name, match, null, this);
-                    }
+            //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) {
+        const fullListOfAttrs = this.#fullListOfAttrs;
+        const attrChangeInfos = [];
+        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;
                 }
-                // let idx = 0;
-                // for(const attribMatch of attribMatches){
-                //     let newValue = null;
-                //     const {names} = attribMatch;
-                //     let nonNullName = names[0];
-                //     for(const name of names){
-                //         const attrVal = match.getAttribute(name);
-                //         if(attrVal !== null) nonNullName = name;
-                //         newValue = newValue || attrVal;
-                //     }
-                //     const attribInfo: AttrChangeInfo = {
-                //         oldValue: null,
-                //         newValue,
-                //         idx,
-                //         name: nonNullName
-                //     };
-                //     this.dispatchEvent(new AttrChangeEvent(match, attribInfo));
-                //     idx++;
-                // }
+                const name = fullListOfAttrs[idx];
+                const oldValue = null;
+                const newValue = match.getAttribute(name);
+                attrChangeInfos.push({
+                    idx,
+                    newValue,
+                    oldValue,
+                    parts
+                });
             }
-            this.#mountedList?.push(new WeakRef(match));
-            //if(this.#unmounted.has(match)) this.#unmounted.delete(match);
+            //this.dispatchEvent(new AttrChangeEvent(match, attrChangeInfos));
         }
+        return attrChangeInfos;
     }
     async #dismount(unmatching) {
         const onDismount = this.#mountInit.do?.dismount;
@@ -342,12 +348,12 @@ export class DisconnectEvent extends Event {
 }
 export class AttrChangeEvent extends Event {
     mountedElement;
-    attrChangeInfo;
+    attrChangeInfos;
     static eventName = 'attr-change';
-    constructor(mountedElement, attrChangeInfo) {
+    constructor(mountedElement, attrChangeInfos) {
         super(AttrChangeEvent.eventName);
         this.mountedElement = mountedElement;
-        this.attrChangeInfo = attrChangeInfo;
+        this.attrChangeInfos = attrChangeInfos;
     }
 }
 //const hasRootInDefault =  ['data', 'enh', 'data-enh']

package/birtualizeMatch.js

@@ -66,7 +66,6 @@ export async function birtualizeMatch(self, el, level) {
             slot.removeAttribute('slot');
         }
         el.dispatchEvent(new LoadEvent(clone));
-        //console.log('dispatched')
     }
     if (shadowRootModeOnLoad !== null) {
         const parent = el.parentElement;

package/getWhereAttrSelector.js

@@ -1,12 +1,15 @@
 export function getWhereAttrSelector(whereAttr, withoutAttrs) {
     const { hasBase, hasBranchIn, hasRootIn } = whereAttr;
+    const hasRootInGuaranteed = hasRootIn || [{
+            start: '',
+            context: 'Both'
+        }];
     const fullListOfAttrs = [];
-    //TODO:  share this block with doWhereAttr?
+    const partitionedAttrs = [];
+    let prefixLessMatches = [];
     const hasBaseIsString = typeof hasBase === 'string';
     const baseSelector = hasBaseIsString ? hasBase : hasBase[1];
     const rootToBaseDelimiter = hasBaseIsString ? '-' : hasBase[0];
-    //end TODO
-    let prefixLessMatches = [baseSelector];
     if (hasBranchIn !== undefined) {
         let baseToBranchDelimiter = '-';
         let branches;
@@ -17,19 +20,61 @@ export function getWhereAttrSelector(whereAttr, withoutAttrs) {
         else {
             branches = hasBranchIn;
         }
-        prefixLessMatches = branches.map(x => `${baseSelector}${baseToBranchDelimiter}x`);
+        prefixLessMatches = branches.map(x => ({
+            rootToBaseDelimiter,
+            base: baseSelector,
+            baseToBranchDelimiter: x ? baseToBranchDelimiter : '',
+            branch: x
+        }));
     }
-    const stems = hasRootIn || [''];
-    for (const stem of stems) {
-        const prefix = typeof stem === 'string' ? stem : stem.path;
-        for (const prefixLessMatch of prefixLessMatches) {
-            fullListOfAttrs.push(prefix.length === 0 ? prefixLessMatch : `${prefix}${rootToBaseDelimiter}${prefixLessMatch}`);
+    else {
+        prefixLessMatches.push({
+            rootToBaseDelimiter,
+            base: baseSelector,
+        });
+    }
+    for (const rootCnfg of hasRootInGuaranteed) {
+        const { start } = rootCnfg;
+        for (const match of prefixLessMatches) {
+            const { base, baseToBranchDelimiter, branch, rootToBaseDelimiter } = match;
+            let branchIdx = 0;
+            for (const prefixLessMatch of prefixLessMatches) {
+                const { base, baseToBranchDelimiter, branch } = prefixLessMatch;
+                const startAndRootToBaseDelimiter = start ? `${start}${rootToBaseDelimiter}` : '';
+                //TODO:  could probably reduce the size of the code below
+                if (branch) {
+                    //will always have branch?
+                    const name = `${startAndRootToBaseDelimiter}${base}${baseToBranchDelimiter}${branch}`;
+                    fullListOfAttrs.push(name);
+                    partitionedAttrs.push({
+                        root: start,
+                        name,
+                        base,
+                        branch,
+                        branchIdx,
+                        rootCnfg
+                    });
+                }
+                else {
+                    const name = `${startAndRootToBaseDelimiter}${base}`;
+                    fullListOfAttrs.push(name);
+                    partitionedAttrs.push({
+                        root: start,
+                        name,
+                        base,
+                        rootCnfg,
+                        branchIdx
+                    });
+                }
+                branchIdx++;
+            }
         }
     }
     const listOfSelectors = fullListOfAttrs.map(s => `${withoutAttrs}[${s}]`);
     const calculatedSelector = listOfSelectors.join(',');
     return {
         fullListOfAttrs,
-        calculatedSelector
+        calculatedSelector,
+        partitionedAttrs,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",

package/types.d.ts

@@ -80,7 +80,9 @@ interface AttrParts{
     root?: string,
     base?: string,
     branch?: string,
+    branchIdx: number,
     leaf?: string, //TODO
+    leafIdx?: number, //TODO
     rootCnfg?: RootCnfg
 }