mount-observer 0.0.69 → 0.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.69",
+  "version": "0.0.71",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
@@ -70,7 +70,8 @@
     "*.js",
     "*.ts",
     "./ts-refs/*",
-    "./refid/*"
+    "./refid/*",
+    "./slotkin/*"
   ],
   "types": "./ts-refs/mount-observer/types.d.ts",
   "scripts": {

package/slotkin/beKindred.js

@@ -0,0 +1,37 @@
+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 elFragment = new DocumentFragment();
+    const clone = el.cloneNode(true);
+    for (const child of clone.childNodes) {
+        elFragment.appendChild(child);
+    }
+    const insertAttrs = el.getAttribute('-i');
+    let map = null;
+    if (insertAttrs !== null) {
+        const attrs = splitRefs(insertAttrs);
+        map = {};
+        for (const attr of attrs) {
+            map[attr] = el.getAttribute(attr);
+        }
+    }
+    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

@@ -0,0 +1,45 @@
+import {toQuery} from './toQuery.js';
+import {splitRefs} from '../refid/splitRefs.js';
+import {MountObserver} from '../MountObserver.js';
+
+export function beKindred(
+    fragment: DocumentFragment | Element, 
+    el: Element,
+    //beVigilant: boolean = false
+){
+    const qry = toQuery(el);
+    
+    const elFragment = new DocumentFragment();
+    const clone = el.cloneNode(true);
+    for(const child of clone.childNodes){
+        elFragment.appendChild(child);
+    }
+    const insertAttrs = el.getAttribute('-i');
+    let map: {[key: string]: string} | null = null;
+    if(insertAttrs !== null){
+        const attrs = splitRefs(insertAttrs);
+        map = {};
+        for(const attr of attrs){
+            map[attr] = el.getAttribute(attr)!;
+        }
+    }
+
+    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;
+
+}

package/slotkin/toQuery.js

@@ -0,0 +1,12 @@
+export function toQuery(el) {
+    //from the element el, create a selector that matches all the classes and parts of the element el, as 
+    //well as the values of all the attributes of el.
+    const classes = Array.from(el.classList).map(c => `.${c}`).join('');
+    const parts = Array.from(el.part).map(p => `[part~="${p}"`).join('');
+    const attributes = Array.from(el.attributes)
+        .filter(attr => attr.name !== '-i')
+        .map(attr => `[${attr.name}="${attr.value}"]`)
+        .join('');
+    const { localName } = el;
+    return `${localName}${classes}${parts}${attributes}`;
+}

package/slotkin/toQuery.ts

@@ -0,0 +1,13 @@
+
+export function toQuery(el: Element): string {
+    //from the element el, create a selector that matches all the classes and parts of the element el, as 
+    //well as the values of all the attributes of el.
+    const classes = Array.from(el.classList).map(c => `.${c}`).join('');
+    const parts = Array.from(el.part).map(p => `[part~="${p}"`).join('');
+    const attributes = Array.from(el.attributes)
+        .filter(attr => attr.name !== '-i')
+        .map(attr => `[${attr.name}="${attr.value}"]`)
+        .join('');
+    const {localName} = el;
+    return `${localName}${classes}${parts}${attributes}`;
+}