mount-observer 0.0.4 → 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() {
-        throw 'NI';
+        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/README.md

@@ -3,13 +3,14 @@
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/mount-observer?style=for-the-badge)](https://bundlephobia.com/result?p=mount-observer)
 <img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/mount-observer?compression=gzip">
 
+
 # The MountObserver api.
 
 Author:  Bruce B. Anderson
 
 Issues / pr's / polyfill:  [mount-observer](https://github.com/bahrus/mount-observer)
 
-Last Update: 2023-11-18
+Last Update: 2023-11-23
 
 ## Benefits of this API
 
@@ -133,13 +134,16 @@ const observer = new MountObserver({
       },
       onDismount: ...,
       onDisconnect: ...,
+      onOutsideRootNode: ...,
       onReconnect: ...,
-      onReconfirm: ...
+      onReconfirm: ...,
       onOutOfScope: ...,
    }
 })
 ```
 
+Callbacks like we see above are useful for tight coupling, and probably are unmatched in terms of performance.  However, since these rules may be of interest to multiple parties, it is usesful to also provide the ability for multiple parties to subscribe to these css rules.  This can be done via:
+
 ## Subscribing
 
 Subscribing can be done via:
@@ -178,11 +182,11 @@ The moment a MountObserver instance's "observe" method is called (passing in a r
 
 If an element that is in "mounted" state according to a MountObserver instance is moved from one parent DOM element to another:
 
-1)  "disconnect" event is dispatched from the MountObserver instance the moment the element is disconnected from the DOM fragment.
+1)  "disconnect" event is dispatched from the MountObserver instance the moment the mounted element is disconnected from the DOM fragment.
 2)  If/when the element is added somewhere else in the DOM tree, the mountObserver instance will dispatch event "reconnect", regardless of where. [Note:  can't polyfill this very easily]
-3)  If the element is added outside the rootNode being observed, the mountObserver instance will dispatch event "outside-root-node", and the MountObserver instance will relinquish any further responsibility for this element.  Ideally this would also be dispatched when the platform garbage collects the element as well after all hard references are relinquished.
-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. 
+3)  If the mounted element is added outside the rootNode being observed, the mountObserver instance will dispatch event "outside-root-node", and the MountObserver instance will relinquish any further responsibility for this element.  Ideally this would also be dispatched when the platform garbage collects the element as well after all hard references are relinquished.
+4)  If the new place it was added remains within the original rootNode and remains 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".  
 
 ## Special support for observable attributes
 
@@ -206,6 +210,14 @@ Example:
    });
    mo.addEventListener('attr-change', e => {
       console.log(e);
+      // {
+      //    attrChangeInfo:{
+      //       name: 'test-1',
+      //       oldValue: null,
+      //       newValue: 'hello'
+      //       idx: 0,
+      //    }
+      // }
    });
    mo.observe(div);
    setTimeout(() => {

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.4",
+  "version": "0.0.6",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",

package/types.d.ts

@@ -7,13 +7,17 @@ export interface MountInit{
     readonly whereSatisfies?: PipelineProcessor<boolean>,
     readonly import?: ImportString | [ImportString, ImportAssertions] | PipelineProcessor,
     readonly do?: {
-        readonly onMount: PipelineProcessor,
-        readonly onDismount: PipelineProcessor,
-        readonly onDisconnect: PipelineProcessor,
-        readonly onReconfirmed: PipelineProcessor,
-        readonly onOutsideRootNode: PipelineProcessor,
+        readonly onMount?: PipelineProcessor,
+        readonly onDismount?: PipelineProcessor,
+        readonly onDisconnect?: PipelineProcessor,
+        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,17 +31,22 @@ export interface AttribMatch{
     // validator?: (v: any) => boolean;
 }
 
-export interface MountContext {
+export interface IMountObserver {
     // readonly mountInit: MountInit,
     // readonly mountedRefs:  WeakRef<Element>[],
     // readonly dismountedRefs: WeakRef<Element>[],
     observe(within: Node): void;
-    unobserve(): void;
+    unobserve(within: Node): void;
     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';