mount-observer 0.0.15 → 0.0.17

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);
@@ -213,35 +221,23 @@ 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);
-                    }
+                const attrParts = this.#attrParts;
+                const attrChangeInfos = [];
+                for (let idx = 0, ii = fullListOfAttrs.length; idx < ii; idx++) {
+                    const name = fullListOfAttrs[idx];
+                    const oldValue = null;
+                    const newValue = match.getAttribute(name);
+                    const parts = attrParts[idx];
+                    attrChangeInfos.push({
+                        idx,
+                        newValue,
+                        oldValue,
+                        parts
+                    });
                 }
-                // 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++;
-                // }
+                this.dispatchEvent(new AttrChangeEvent(match, attrChangeInfos));
             }
             this.#mountedList?.push(new WeakRef(match));
-            //if(this.#unmounted.has(match)) this.#unmounted.delete(match);
         }
     }
     async #dismount(unmatching) {
@@ -342,12 +338,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/README.md

@@ -284,9 +284,9 @@ So let's say we want to insist that on custom elements, we must have the data- p
 
 And we want to support an alternative, more semantic sounding prefix to data, say enh-*, endorsed by [this proposal](https://github.com/WICG/webcomponents/issues/1000).
 
-Here's what the api provides:
+Here's what the api **doesn't** provide:
 
-## Option 1 -- The carpal syndrome syntax
+## Rejected option -- The carpal syndrome syntax
 
 ```JavaScript
 import {MountObserver} from '../MountObserver.js';
@@ -320,7 +320,7 @@ const mo = new MountObserver({
 });
 ```
 
-## Option 2 -- The DRY Way
+## Supported -- The DRY Way
 
 ```JavaScript
 import {MountObserver} from '../MountObserver.js';
@@ -360,16 +360,18 @@ MountObserver provides a breakdown of the matching attribute when encountered:
       console.log(e);
       // {
       //    matchingElement,
-      //    attrChangeInfo:{
-      //       name: 'data-my-enhancement-first-aspect-wow-this-is-deep'
-      //       root: 'data',
-      //       base: 'my-enhancement',
-      //       branch: 'first-aspect',
-      //       leaf: 'wow-this-is-deep',
-      //       oldValue: null,
-      //       newValue: 'good-bye'
+      //    attrChangeInfo:[{
       //       idx: 0,
-      //    }
+      //       oldValue: null,
+      //       newValue: 'good-bye',
+      //       parts:{
+      //          name: 'data-my-enhancement-first-aspect-wow-this-is-deep'
+      //          root: 'data',
+      //          base: 'my-enhancement',
+      //          branch: 'first-aspect',
+      //          leaf: 'wow-this-is-deep',
+      //       }
+      //    }]
       // }
    });
    mo.observe(div);

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,55 @@ export function getWhereAttrSelector(whereAttr, withoutAttrs) {
         else {
             branches = hasBranchIn;
         }
-        prefixLessMatches = branches.map(x => `${baseSelector}${baseToBranchDelimiter}x`);
+        prefixLessMatches = branches.map(x => ({
+            rootToBaseDelimiter,
+            base: baseSelector,
+            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;
+            for (const prefixLessMatch of prefixLessMatches) {
+                const { base, baseToBranchDelimiter, branch } = prefixLessMatch;
+                const startAndRootToBaseDelimiter = start ? `${start}${rootToBaseDelimiter}` : '';
+                if (branch) {
+                    const name = `${startAndRootToBaseDelimiter}${base}${baseToBranchDelimiter}${branch}`;
+                    fullListOfAttrs.push(name);
+                    partitionedAttrs.push({
+                        root: start,
+                        name,
+                        base,
+                        branch,
+                        rootCnfg
+                    });
+                }
+                else {
+                    const name = `${startAndRootToBaseDelimiter}${base}`;
+                    fullListOfAttrs.push(name);
+                    partitionedAttrs.push({
+                        root: start,
+                        name,
+                        base,
+                        rootCnfg
+                    });
+                }
+            }
         }
     }
     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.15",
+  "version": "0.0.17",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",

package/types.d.ts

@@ -5,7 +5,7 @@ export interface MountInit{
     readonly whereAttr?: WhereAttr,  
     readonly whereElementIntersectsWith?: IntersectionObserverInit,
     readonly whereMediaMatches?: MediaQuery,
-    readonly whereInstanceOf?: Array<typeof Node>, //[TODO] What's the best way to type this?,
+    readonly whereInstanceOf?: Array<{new(): Element}>,
     readonly whereSatisfies?: PipelineProcessor<boolean>,
     readonly import?: ImportString | [ImportString, ImportAssertions] | PipelineProcessor,
     readonly do?: {
@@ -21,13 +21,18 @@ export interface MountInit{
     //  */
     // readonly ignoreInitialMatches?: boolean,
 }
+
+export interface RootCnfg{
+    start: string,
+    context: 'BuiltIn' | 'CustomElement' | 'Both'
+}
+
+//export type RootAttrOptions = Array<string | RootCnfg>;
+export type delimiter = string;
 export interface WhereAttr{
-    hasBase: string | [string, string],
-    hasBranchIn?: Array<string> | [string, Array<string>],
-    hasRootIn?: Array<string | {
-        path: string,
-        context: 'BuiltIn' | 'CustomElement' | 'Both'
-    }>,
+    hasBase: string | [delimiter, string],
+    hasBranchIn?: Array<string> | [delimiter, Array<string>],
+    hasRootIn?: Array<RootCnfg>,
 }
 type CSSMatch = string;
 type ImportString = string;
@@ -70,15 +75,20 @@ export interface AddMutationEventListener {
 }
 //#endregion
 
-interface AttrChangeInfo{
+interface AttrParts{
     name: string,
     root?: string,
     base?: string,
     branch?: string,
     leaf?: string, //TODO
+    rootCnfg?: RootCnfg
+}
+
+interface AttrChangeInfo{
     oldValue: string | null,
     newValue: string | null,
     idx: number,
+    parts: AttrParts,
     //parsedNewValue?: any,
 }
 
@@ -123,7 +133,7 @@ export interface AddDisconnectEventListener {
 //#region attribute change event
 export type attrChangeEventName = 'attr-change';
 export interface IAttrChangeEvent extends IMountEvent {
-    attrChangeInfo: AttrChangeInfo,
+    attrChangeInfos: Array<AttrChangeInfo>,
 }
 export type attrChangeEventHandler = (e: IAttrChangeEvent) => void;
 export interface AddAttrChangeEventListener{

package/doWhereAttr.js

@@ -1,43 +0,0 @@
-import { AttrChangeEvent } from "./MountObserver.js";
-export function doWhereAttr(whereAttr, attributeName, target, oldValue, mo) {
-    const { hasRootIn, hasBase, hasBranchIn } = whereAttr;
-    const name = attributeName;
-    let restOfName = name;
-    let root;
-    let branch;
-    let idx = 0;
-    const hasBaseIsString = typeof hasBase === 'string';
-    const baseSelector = hasBaseIsString ? hasBase : hasBase[1];
-    const rootToBaseDelimiter = hasBaseIsString ? '-' : hasBase[0];
-    if (hasRootIn !== undefined) {
-        for (const rootTest in hasRootIn) {
-            if (restOfName.startsWith(rootTest)) {
-                root = rootTest;
-                restOfName = restOfName.substring(root.length + rootToBaseDelimiter.length);
-                break;
-            }
-        }
-    }
-    if (!restOfName.startsWith(baseSelector))
-        return;
-    restOfName = restOfName.substring(hasBase.length);
-    if (hasBranchIn) {
-        for (const branchTest in hasBranchIn) {
-            if (restOfName.startsWith(branchTest)) {
-                branch = branchTest;
-                break;
-            }
-        }
-    }
-    const newValue = target.getAttribute(attributeName);
-    const attrChangeInfo = {
-        name,
-        root,
-        base: baseSelector,
-        branch,
-        oldValue,
-        newValue,
-        idx
-    };
-    mo.dispatchEvent(new AttrChangeEvent(target, attrChangeInfo));
-}