mount-observer 0.0.4 → 0.0.5

package/MountObserver.js

@@ -230,8 +230,8 @@ export class MountObserver extends EventTarget {
         const els = Array.from(within.querySelectorAll(this.#selector));
         this.#filterAndMount(els, false);
     }
-    unobserve() {
-        throw 'NI';
+    unobserve(within) {
+        //mutationObserverLookup
     }
 }
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080

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/package.json

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

package/types.d.ts

@@ -7,11 +7,11 @@ 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,
     }
     
 }
@@ -32,7 +32,7 @@ export interface MountContext {
     // readonly mountedRefs:  WeakRef<Element>[],
     // readonly dismountedRefs: WeakRef<Element>[],
     observe(within: Node): void;
-    unobserve(): void;
+    unobserve(within: Node): void;
     module?: any;
 }