mount-observer 0.0.70 → 0.0.71

package/package.json

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

package/slotkin/beKindred.js

@@ -1,8 +1,8 @@
 import { toQuery } from './toQuery.js';
 import { splitRefs } from '../refid/splitRefs.js';
+import { MountObserver } from '../MountObserver.js';
 export function beKindred(fragment, el) {
     const qry = toQuery(el);
-    const matches = Array.from(fragment.querySelectorAll(qry));
     const elFragment = new DocumentFragment();
     const clone = el.cloneNode(true);
     for (const child of clone.childNodes) {
@@ -17,14 +17,21 @@ export function beKindred(fragment, el) {
             map[attr] = el.getAttribute(attr);
         }
     }
-    for (const match of matches) {
-        const fragmentClone = elFragment.cloneNode(true);
-        match.replaceChildren(fragmentClone);
-        if (map !== null) {
-            for (const key in map) {
-                const value = map[key];
-                match.setAttribute(key, value);
+    const mo = new MountObserver({
+        on: qry,
+        do: {
+            mount: (matchingElement) => {
+                const fragmentClone = elFragment.cloneNode(true);
+                matchingElement.replaceChildren(fragmentClone);
+                if (map !== null) {
+                    for (const key in map) {
+                        const value = map[key];
+                        matchingElement.setAttribute(key, value);
+                    }
+                }
             }
         }
-    }
+    });
+    mo.observe(fragment);
+    return mo;
 }

package/slotkin/beKindred.ts

@@ -1,9 +1,14 @@
 import {toQuery} from './toQuery.js';
 import {splitRefs} from '../refid/splitRefs.js';
+import {MountObserver} from '../MountObserver.js';
 
-export function beKindred(fragment: DocumentFragment | Element, el: Element){
+export function beKindred(
+    fragment: DocumentFragment | Element, 
+    el: Element,
+    //beVigilant: boolean = false
+){
     const qry = toQuery(el);
-    const matches = Array.from(fragment.querySelectorAll(qry));
+    
     const elFragment = new DocumentFragment();
     const clone = el.cloneNode(true);
     for(const child of clone.childNodes){
@@ -18,14 +23,23 @@ export function beKindred(fragment: DocumentFragment | Element, el: Element){
             map[attr] = el.getAttribute(attr)!;
         }
     }
-    for(const match of matches){
-        const fragmentClone = elFragment.cloneNode(true) as DocumentFragment;
-        match.replaceChildren(fragmentClone);
-        if(map !== null){
-            for(const key in map){
-                const value = map[key]!;
-                match.setAttribute(key, value);
+
+    const mo = new MountObserver({
+        on: qry,
+        do: {
+            mount: (matchingElement) => {
+                const fragmentClone = elFragment.cloneNode(true) as DocumentFragment;
+                matchingElement.replaceChildren(fragmentClone);
+                if(map !== null){
+                    for(const key in map){
+                        const value = map[key]!;
+                        matchingElement.setAttribute(key, value);
+                    }
+                }
             }
         }
-    }
+    });
+    mo.observe(fragment);
+    return mo;
+
 }