mount-observer 0.0.1 → 0.0.2

package/MountObserver.js

@@ -12,7 +12,7 @@ export class MountObserver extends EventTarget {
     constructor(init) {
         super();
         const { match, whereElementIntersectsWith, whereMediaMatches } = init;
-        this.#isComplex = match.includes(' ') || match.includes(':');
+        this.#isComplex = match !== undefined && (match.includes(' ') || match.includes(':'));
         if (whereElementIntersectsWith || whereMediaMatches)
             throw 'NI'; //not implemented
         this.#mountInit = init;
@@ -21,12 +21,31 @@ export class MountObserver extends EventTarget {
         this.#disconnected = new WeakSet();
         //this.#unmounted = new WeakSet();
     }
+    #calculatedSelector;
+    get #selector() {
+        if (this.#calculatedSelector !== undefined)
+            return this.#calculatedSelector;
+        const { match, attribMatches } = this.#mountInit;
+        const base = match || '*';
+        if (attribMatches === undefined)
+            return base;
+        const matches = [];
+        attribMatches.forEach(x => {
+            const { names } = x;
+            names.forEach(y => {
+                matches.push(`${base}[${y}]`);
+            });
+        });
+        this.#calculatedSelector = matches.join(',');
+        return this.#calculatedSelector;
+    }
     async observe(within) {
         const nodeToMonitor = this.#isComplex ? (within instanceof ShadowRoot ? within : within.getRootNode()) : within;
         if (!mutationObserverLookup.has(nodeToMonitor)) {
             mutationObserverLookup.set(nodeToMonitor, new RootMutObs(nodeToMonitor));
         }
         const rootMutObs = mutationObserverLookup.get(within);
+        const { attribMatches } = this.#mountInit;
         rootMutObs.addEventListener('mutation-event', (e) => {
             //TODO:  disconnected
             if (this.#isComplex) {
@@ -39,11 +58,38 @@ export class MountObserver extends EventTarget {
             const doDisconnect = this.#mountInit.do?.onDisconnect;
             for (const mutationRecord of mutationRecords) {
                 const { addedNodes, type, removedNodes } = mutationRecord;
-                //console.log({target, 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 } = mutationRecord;
+                    const { target, attributeName, oldValue } = mutationRecord;
+                    if (target instanceof Element && attributeName !== null && attribMatches !== undefined && this.#mounted.has(target)) {
+                        let idx = 0;
+                        for (const attrMatch of attribMatches) {
+                            const { names } = attrMatch;
+                            if (names.includes(attributeName)) {
+                                const newValue = target.getAttribute(attributeName);
+                                // let parsedNewValue = undefined;
+                                // switch(type){
+                                //     case 'boolean':
+                                //         parsedNewValue = newValue === 'true' ? true : newValue === 'false' ? false : null;
+                                //         break;
+                                //     case 'date':
+                                //         parsedNewValue = newValue === null ? null : new Date(newValue);
+                                //         break;
+                                //     case ''
+                                // }
+                                const attrChangeInfo = {
+                                    name: attributeName,
+                                    oldValue,
+                                    newValue,
+                                    idx
+                                };
+                                this.dispatchEvent(new AttrChangeEvent(target, attrChangeInfo));
+                            }
+                            idx++;
+                        }
+                    }
                     elsToInspect.push(target);
                 }
                 const deletedElements = Array.from(removedNodes).filter(x => x instanceof Element);
@@ -73,7 +119,7 @@ export class MountObserver extends EventTarget {
         //first unmount non matching
         const alreadyMounted = this.#filterAndDismount();
         const onMount = this.#mountInit.do?.onMount;
-        const imp = this.#mountInit.import;
+        const { import: imp, attribMatches } = this.#mountInit;
         for (const match of matching) {
             if (alreadyMounted.has(match))
                 continue;
@@ -96,6 +142,28 @@ export class MountObserver extends EventTarget {
             if (onMount !== undefined)
                 onMount(match, this, 'PostImport');
             this.dispatchEvent(new MountEvent(match));
+            if (attribMatches !== undefined) {
+                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 = {
+                        oldValue: null,
+                        newValue,
+                        idx,
+                        name: nonNullName
+                    };
+                    this.dispatchEvent(new AttrChangeEvent(match, attribInfo));
+                    idx++;
+                }
+            }
             this.#mountedList?.push(new WeakRef(match));
             //if(this.#unmounted.has(match)) this.#unmounted.delete(match);
         }
@@ -113,7 +181,8 @@ export class MountObserver extends EventTarget {
         const returnSet = new Set();
         if (this.#mountedList !== undefined) {
             const previouslyMounted = this.#mountedList.map(x => x.deref());
-            const { match, whereSatisfies, whereInstanceOf } = this.#mountInit;
+            const { whereSatisfies, whereInstanceOf } = this.#mountInit;
+            const match = this.#selector;
             const elsToUnMount = previouslyMounted.filter(x => {
                 if (x === undefined)
                     return false;
@@ -132,7 +201,8 @@ export class MountObserver extends EventTarget {
         return returnSet;
     }
     async #filterAndMount(els, checkMatch) {
-        const { match, whereSatisfies, whereInstanceOf } = this.#mountInit;
+        const { whereSatisfies, whereInstanceOf } = this.#mountInit;
+        const match = this.#selector;
         const elsToMount = els.filter(x => {
             if (checkMatch) {
                 if (!x.matches(match))
@@ -151,8 +221,7 @@ export class MountObserver extends EventTarget {
         this.#mount(elsToMount);
     }
     async #inspectWithin(within) {
-        const { match } = this.#mountInit;
-        const els = Array.from(within.querySelectorAll(match));
+        const els = Array.from(within.querySelectorAll(this.#selector));
         this.#filterAndMount(els, false);
     }
     unobserve() {
@@ -188,3 +257,13 @@ export class DisconnectEvent extends Event {
         this.disconnectedElement = disconnectedElement;
     }
 }
+export class AttrChangeEvent extends Event {
+    mountedElement;
+    attrChangeInfo;
+    static eventName = 'attr-change';
+    constructor(mountedElement, attrChangeInfo) {
+        super(AttrChangeEvent.eventName);
+        this.mountedElement = mountedElement;
+        this.attrChangeInfo = attrChangeInfo;
+    }
+}

package/MountObserver.ts

@@ -1,6 +1,6 @@
 import {MountInit, MountContext, AddMutationEventListener, 
     MutationEvent, dismountEventName, mountEventName, IMountEvent, IDismountEvent,
-    disconnectedEventName, IDisconnectEvent
+    disconnectedEventName, IDisconnectEvent, IAttrChangeEvent, attrChangeEventName, AttrChangeInfo
 } from './types';
 import {RootMutObs} from './RootMutObs.js';
 
@@ -20,7 +20,7 @@ export class MountObserver extends EventTarget implements MountContext{
     constructor(init: MountInit){
         super();
         const {match, whereElementIntersectsWith, whereMediaMatches} = init;
-        this.#isComplex = match.includes(' ') || match.includes(':')
+        this.#isComplex = match !== undefined && (match.includes(' ') || match.includes(':'));
         if(whereElementIntersectsWith || whereMediaMatches) throw 'NI'; //not implemented
         this.#mountInit = init;
         this.#abortController = new AbortController();
@@ -29,12 +29,30 @@ export class MountObserver extends EventTarget implements MountContext{
         //this.#unmounted = new WeakSet();
     }
 
+    #calculatedSelector: string | undefined;
+    get #selector(){
+        if(this.#calculatedSelector !== undefined) return this.#calculatedSelector;
+        const {match, attribMatches} = this.#mountInit;
+        const base = match || '*';
+        if(attribMatches === undefined) return base;
+        const matches: Array<string> = [];
+        attribMatches.forEach(x => {
+            const {names} = x;
+            names.forEach(y => {
+                matches.push(`${base}[${y}]`)
+            });
+        });
+        this.#calculatedSelector = matches.join(',');
+        return this.#calculatedSelector;
+    }
+
     async observe(within: Node){
         const nodeToMonitor = this.#isComplex ? (within instanceof ShadowRoot ? within : within.getRootNode()) : within; 
         if(!mutationObserverLookup.has(nodeToMonitor)){
             mutationObserverLookup.set(nodeToMonitor, new RootMutObs(nodeToMonitor));
         }
         const rootMutObs = mutationObserverLookup.get(within)!;
+        const {attribMatches} = this.#mountInit;
         (rootMutObs as any as AddMutationEventListener).addEventListener('mutation-event', (e: MutationEvent) => {
             //TODO:  disconnected
             if(this.#isComplex){
@@ -47,11 +65,39 @@ export class MountObserver extends EventTarget implements MountContext{
             const doDisconnect = this.#mountInit.do?.onDisconnect;
             for(const mutationRecord of mutationRecords){
                 const {addedNodes, type, removedNodes} = mutationRecord;
-                //console.log({target, mutationRecord});
+                console.log(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} = mutationRecord;
+                    const {target, attributeName, oldValue} = mutationRecord;
+                    if(target instanceof Element && attributeName !== null &&  attribMatches !== undefined && this.#mounted.has(target)){
+                        let idx = 0;
+                        for(const attrMatch of attribMatches){
+                            const {names} = attrMatch;
+                            if(names.includes(attributeName)){
+                                const newValue = target.getAttribute(attributeName);
+                                // let parsedNewValue = undefined;
+                                // switch(type){
+                                //     case 'boolean':
+                                //         parsedNewValue = newValue === 'true' ? true : newValue === 'false' ? false : null;
+                                //         break;
+                                //     case 'date':
+                                //         parsedNewValue = newValue === null ? null : new Date(newValue);
+                                //         break;
+                                //     case ''
+
+                                // }
+                                const attrChangeInfo: AttrChangeInfo = {
+                                    name: attributeName,
+                                    oldValue,
+                                    newValue,
+                                    idx
+                                };
+                                this.dispatchEvent(new AttrChangeEvent(target, attrChangeInfo));
+                            }
+                            idx++;
+                        }
+                    }
                     elsToInspect.push(target as Element);
                 }
                 const deletedElements = Array.from(removedNodes).filter(x => x instanceof Element) as Array<Element>;
@@ -83,7 +129,7 @@ export class MountObserver extends EventTarget implements MountContext{
         //first unmount non matching
         const alreadyMounted = this.#filterAndDismount();
         const onMount = this.#mountInit.do?.onMount; 
-        const imp = this.#mountInit.import;
+        const {import: imp, attribMatches} = this.#mountInit;
         for(const match of matching){
             if(alreadyMounted.has(match)) continue;
             this.#mounted.add(match);
@@ -104,6 +150,27 @@ export class MountObserver extends EventTarget implements MountContext{
             }
             if(onMount !== undefined) onMount(match, this, 'PostImport');
             this.dispatchEvent(new MountEvent(match));
+            if(attribMatches !== undefined){
+                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.#mountedList?.push(new WeakRef(match));
             //if(this.#unmounted.has(match)) this.#unmounted.delete(match);
         }
@@ -123,7 +190,8 @@ export class MountObserver extends EventTarget implements MountContext{
         const returnSet = new Set<Element>();
         if(this.#mountedList !== undefined){
             const previouslyMounted = this.#mountedList.map(x => x.deref());
-            const {match, whereSatisfies, whereInstanceOf} = this.#mountInit;
+            const {whereSatisfies, whereInstanceOf} = this.#mountInit;
+            const match = this.#selector;
             const elsToUnMount = previouslyMounted.filter(x => {
                 if(x === undefined) return false;
                 if(!x.matches(match)) return true;
@@ -140,7 +208,8 @@ export class MountObserver extends EventTarget implements MountContext{
     }
 
     async #filterAndMount(els: Array<Element>, checkMatch: boolean){
-        const {match, whereSatisfies, whereInstanceOf} = this.#mountInit;
+        const {whereSatisfies, whereInstanceOf} = this.#mountInit;
+        const match = this.#selector;
         const elsToMount = els.filter(x => {
             if(checkMatch){
                 if(!x.matches(match)) return false;
@@ -157,8 +226,7 @@ export class MountObserver extends EventTarget implements MountContext{
     }
 
     async #inspectWithin(within: Node){
-        const {match} = this.#mountInit;
-        const els = Array.from((within as Element).querySelectorAll(match));
+        const els = Array.from((within as Element).querySelectorAll(this.#selector));
         this.#filterAndMount(els, false);
     }
 
@@ -200,3 +268,10 @@ export class DisconnectEvent extends Event implements IDisconnectEvent{
     }
 }
 
+export class AttrChangeEvent extends Event implements IAttrChangeEvent{
+    static eventName: attrChangeEventName = 'attr-change';
+    constructor(public mountedElement: Element, public attrChangeInfo: AttrChangeInfo){
+        super(AttrChangeEvent.eventName);
+    }
+}
+

package/README.md

@@ -135,8 +135,6 @@ const observer = new MountObserver({
 })
 ```
 
-
-
 ## Subscribing
 
 Subscribing can be done via:
@@ -181,6 +179,10 @@ If an element that is in "mounted" state according to a MountObserver instance i
 4)  If the new place it was added remains within the original rootNode and remains either dismounted or mounted, the MountObserver instance dispatches event "reconfirmed".
 5)  If the element no longer satisfies the criteria of the MountObserver instance, the MountObserver instance will dispatch event "dismount".  The same is done in reverse for moved elements that started out in a "dismounted" state. 
 
+## Special support for attributes
+
+Extra support is provided for monitoring attributes.
+
 ## Preemptive downloading
 
 There are two significant steps to imports, each of which imposes a cost:  

package/RootMutObs.js

@@ -8,6 +8,7 @@ export class RootMutObs extends EventTarget {
             subtree: true,
             childList: true,
             attributes: true,
+            attributeOldValue: true,
         });
     }
     #mutationObserver;

package/RootMutObs.ts

@@ -10,6 +10,7 @@ export class RootMutObs extends EventTarget{
             subtree: true,
             childList: true,
             attributes: true,
+            attributeOldValue: true,
         });
     }
     #mutationObserver: MutationObserver;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
   "main": "MountObserver.js",
   "module": "MountObserver.js",

package/tests/test6.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div id=div>
+        <span id=span></span>
+    </div>
+    <div id=target></div>
+    <script type=module>
+        import {MountObserver} from '../MountObserver.js';
+        const mo = new MountObserver({
+            match: '#span',
+            attribMatches:[
+                {
+                    names: ['test-1']
+                }
+            ],
+            do:{
+                onDisconnect: (el, ctx) => {
+                    console.log({el, ctx});
+                    
+                }
+            }
+        });
+        mo.addEventListener('attr-change', e => {
+            console.log(e);
+            target.setAttribute('mark', 'good');
+        });
+        mo.observe(div);
+        setTimeout(() => {
+            span.setAttribute('test-1', 'hello')
+        }, 1000);
+    </script>
+</body>
+</html>

package/tests/test6.spec.mjs

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+test('test1', async ({ page }) => {
+    await page.goto('./tests/test6.html');
+    // wait for 1 second
+    await page.waitForTimeout(1000);
+    const editor = page.locator('#target');
+    await expect(editor).toHaveAttribute('mark', 'good');
+});

package/types.d.ts

@@ -1,9 +1,10 @@
 export interface MountInit{
-    readonly match: CSSMatch,
-    readonly whereElementIntersectsWith: IntersectionObserverInit,
-    readonly whereMediaMatches: MediaQuery,
+    readonly match?: CSSMatch,
+    readonly attribMatches?: Array<AttribMatch>,  
+    readonly whereElementIntersectsWith?: IntersectionObserverInit,
+    readonly whereMediaMatches?: MediaQuery,
     readonly whereInstanceOf?: Array<typeof Node>, //[TODO] What's the best way to type this?,
-    readonly whereSatisfies: PipelineProcessor<boolean>,
+    readonly whereSatisfies?: PipelineProcessor<boolean>,
     readonly import?: ImportString | [ImportString, ImportAssertions] | PipelineProcessor,
     readonly do?: {
         readonly onMount: PipelineProcessor,
@@ -18,6 +19,14 @@ type CSSMatch = string;
 type ImportString = string;
 type MediaQuery = string;
 
+export interface AttribMatch{
+    names: string[],
+    //for boolean, support true/false/mixed
+    // type?: 'number' | 'string' | 'date' | 'json-object' | 'boolean',
+    // valConverter?: (s: string) => any,
+    // validator?: (v: any) => boolean;
+}
+
 export interface MountContext {
     // readonly mountInit: MountInit,
     // readonly mountedRefs:  WeakRef<Element>[],
@@ -42,10 +51,18 @@ export interface AddMutationEventListener {
 }
 //#endregion
 
+interface AttrChangeInfo{
+    name: string,
+    oldValue: string | null,
+    newValue: string | null,
+    idx: number,
+    //parsedNewValue?: any,
+}
+
 //#region mount event
 export type mountEventName = 'mount';
 export interface IMountEvent{
-    mountedElement: Element
+    mountedElement: Element,
 }
 export type mountEventHandler = (e: IMountEvent) => void;
 
@@ -80,3 +97,14 @@ export interface AddDisconnectEventListener {
 }
 //endregion
 
+//#region attribute change event
+export type attrChangeEventName = 'attr-change';
+export interface IAttrChangeEvent extends IMountEvent {
+    attrChangeInfo: AttrChangeInfo,
+}
+export type attrChangeEventHander = (e: IAttrChangeEvent) => void;
+export interface AddAttrChangeEventistener{
+    addEventListener(eventName: attrChangeEventName, handler: attrChangeEventHander, options?: AddEventListenerOptions): void;
+}
+//#endregion
+