mount-observer 0.0.69 → 0.0.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.69",
+  "version": "0.0.70",
   "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,30 @@
+import { toQuery } from './toQuery.js';
+import { splitRefs } from '../refid/splitRefs.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) {
+        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);
+        }
+    }
+    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);
+            }
+        }
+    }
+}

package/slotkin/beKindred.ts

@@ -0,0 +1,31 @@
+import {toQuery} from './toQuery.js';
+import {splitRefs} from '../refid/splitRefs.js';
+
+export function beKindred(fragment: DocumentFragment | Element, el: Element){
+    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){
+        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)!;
+        }
+    }
+    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);
+            }
+        }
+    }
+}

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}`;
+}