mount-observer 0.0.5 → 0.0.6

package/MountObserver.js

@@ -1,5 +1,6 @@
 import { RootMutObs } from './RootMutObs.js';
 const mutationObserverLookup = new WeakMap();
+const refCount = new WeakMap();
 export class MountObserver extends EventTarget {
     #mountInit;
     #rootMutObs;
@@ -44,17 +45,52 @@ export class MountObserver extends EventTarget {
         this.#calculatedSelector = matches.join(',');
         return this.#calculatedSelector;
     }
+    unobserve(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);
+            }
+        }
+    }
     async observe(within) {
         const nodeToMonitor = this.#isComplex ? (within instanceof ShadowRoot ? within : within.getRootNode()) : within;
         if (!mutationObserverLookup.has(nodeToMonitor)) {
             mutationObserverLookup.set(nodeToMonitor, new RootMutObs(nodeToMonitor));
+            refCount.set(nodeToMonitor, 1);
+        }
+        else {
+            const currentCount = refCount.get(nodeToMonitor);
+            if (currentCount === undefined) {
+                console.warn(refCountErr);
+            }
+            else {
+                refCount.set(nodeToMonitor, currentCount + 1);
+            }
         }
         const rootMutObs = mutationObserverLookup.get(within);
         const { attribMatches } = this.#mountInit;
         rootMutObs.addEventListener('mutation-event', (e) => {
             //TODO:  disconnected
             if (this.#isComplex) {
-                this.#inspectWithin(within);
+                this.#inspectWithin(within, false);
                 return;
             }
             const { mutationRecords } = e;
@@ -109,9 +145,11 @@ export class MountObserver extends EventTarget {
                     this.dispatchEvent(new DisconnectEvent(deletedElement));
                 }
             }
-            this.#filterAndMount(elsToInspect, true);
+            this.#filterAndMount(elsToInspect, true, false);
         }, { signal: this.#abortController.signal });
-        await this.#inspectWithin(within);
+        //if(ignoreInitialMatches !== true){
+        await this.#inspectWithin(within, true);
+        //}
     }
     #confirmInstanceOf(el, whereInstanceOf) {
         for (const test of whereInstanceOf) {
@@ -120,7 +158,7 @@ export class MountObserver extends EventTarget {
         }
         return false;
     }
-    async #mount(matching) {
+    async #mount(matching, initializing) {
         //first unmount non matching
         const alreadyMounted = this.#filterAndDismount();
         const onMount = this.#mountInit.do?.onMount;
@@ -141,13 +179,20 @@ export class MountObserver extends EventTarget {
                         }
                         break;
                     case 'function':
-                        this.module = await imp(match, this, 'Import');
+                        this.module = await imp(match, this, {
+                            stage: 'Import',
+                            initializing
+                        });
                         break;
                 }
             }
-            if (onMount !== undefined)
-                onMount(match, this, 'PostImport');
-            this.dispatchEvent(new MountEvent(match));
+            if (onMount !== undefined) {
+                onMount(match, this, {
+                    stage: 'PostImport',
+                    initializing
+                });
+            }
+            this.dispatchEvent(new MountEvent(match, initializing));
             if (attribMatches !== undefined) {
                 let idx = 0;
                 for (const attribMatch of attribMatches) {
@@ -178,7 +223,7 @@ export class MountObserver extends EventTarget {
         const onDismount = this.#mountInit.do?.onDismount;
         for (const unmatch of unmatching) {
             if (onDismount !== undefined) {
-                onDismount(unmatch, this);
+                onDismount(unmatch, this, {});
             }
             this.dispatchEvent(new DismountEvent(unmatch));
         }
@@ -195,7 +240,7 @@ export class MountObserver extends EventTarget {
                 if (!x.matches(match))
                     return true;
                 if (whereSatisfies !== undefined) {
-                    if (!whereSatisfies(x, this, 'Inspecting'))
+                    if (!whereSatisfies(x, this, { stage: 'Inspecting', initializing: false }))
                         return true;
                 }
                 returnSet.add(x);
@@ -206,7 +251,7 @@ export class MountObserver extends EventTarget {
         this.#mountedList = Array.from(returnSet).map(x => new WeakRef(x));
         return returnSet;
     }
-    async #filterAndMount(els, checkMatch) {
+    async #filterAndMount(els, checkMatch, initializing) {
         const { whereSatisfies, whereInstanceOf } = this.#mountInit;
         const match = this.#selector;
         const elsToMount = els.filter(x => {
@@ -215,7 +260,7 @@ export class MountObserver extends EventTarget {
                     return false;
             }
             if (whereSatisfies !== undefined) {
-                if (!whereSatisfies(x, this, 'Inspecting'))
+                if (!whereSatisfies(x, this, { stage: 'Inspecting', initializing }))
                     return false;
             }
             if (whereInstanceOf !== undefined) {
@@ -224,16 +269,14 @@ export class MountObserver extends EventTarget {
             }
             return true;
         });
-        this.#mount(elsToMount);
+        this.#mount(elsToMount, initializing);
     }
-    async #inspectWithin(within) {
+    async #inspectWithin(within, initializing) {
         const els = Array.from(within.querySelectorAll(this.#selector));
-        this.#filterAndMount(els, false);
-    }
-    unobserve(within) {
-        //mutationObserverLookup
+        this.#filterAndMount(els, false, initializing);
     }
 }
+const refCountErr = 'mount-observer ref count mismatch';
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
 /**
  * The `mutation-event` event represents something that happened.
@@ -241,10 +284,12 @@ export class MountObserver extends EventTarget {
  */
 export class MountEvent extends Event {
     mountedElement;
+    initializing;
     static eventName = 'mount';
-    constructor(mountedElement) {
+    constructor(mountedElement, initializing) {
         super(MountEvent.eventName);
         this.mountedElement = mountedElement;
+        this.initializing = initializing;
     }
 }
 export class DismountEvent extends Event {

package/RootMutObs.js

@@ -12,6 +12,9 @@ export class RootMutObs extends EventTarget {
         });
     }
     #mutationObserver;
+    disconnect() {
+        this.#mutationObserver.disconnect();
+    }
 }
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
 /**

package/package.json

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

package/types.d.ts

@@ -13,7 +13,11 @@ export interface MountInit{
         readonly onReconfirmed?: PipelineProcessor,
         readonly onOutsideRootNode?: PipelineProcessor,
     }
-    
+    // /**
+    //  * Purpose -- there are scenarios where we may only want to affect changes that occur after the initial 
+    //  * server rendering, so we only want to mount elements that appear 
+    //  */
+    // readonly ignoreInitialMatches?: boolean,
 }
 type CSSMatch = string;
 type ImportString = string;
@@ -27,7 +31,7 @@ export interface AttribMatch{
     // validator?: (v: any) => boolean;
 }
 
-export interface MountContext {
+export interface IMountObserver {
     // readonly mountInit: MountInit,
     // readonly mountedRefs:  WeakRef<Element>[],
     // readonly dismountedRefs: WeakRef<Element>[],
@@ -36,8 +40,13 @@ export interface MountContext {
     module?: any;
 } 
 
-type PipelineStage = 'Inspecting' | 'PreImport' | 'PostImport' | 'Import'
-export type PipelineProcessor<ReturnType = void> = (matchingElement: Element, ctx: MountContext, stage?: PipelineStage) => Promise<ReturnType>;
+export interface MountContext{
+    stage?: PipelineStage,
+    initializing?: boolean,
+}
+
+type PipelineStage = 'Inspecting' | 'PreImport' | 'PostImport' | 'Import' 
+export type PipelineProcessor<ReturnType = void> = (matchingElement: Element, observer: IMountObserver, ctx: MountContext) => Promise<ReturnType>;
 
 //#region mutation event
 export type mutationEventName = 'mutation-event';