mount-observer 0.0.68 → 0.0.70

package/MountObserver.js

@@ -1,6 +1,7 @@
 import { RootMutObs } from './RootMutObs.js';
 import { bindish, bindishIt } from './bindish.js';
 export const guid = '5Pv6bHOVH0ae07opRZ8N/g';
+export const wasItemReffed = Symbol.for('8aA6xB8+PkScmivaslBk5Q');
 export const mutationObserverLookup = new WeakMap();
 const refCount = new WeakMap();
 export class MountObserver extends EventTarget {
@@ -72,10 +73,10 @@ export class MountObserver extends EventTarget {
         }
     }
     #templLookUp = new Map();
-    findByID(id, fragment) {
+    async findByID(id, fragment) {
         if (this.#templLookUp.has(id))
             return this.#templLookUp.get(id);
-        let templ = fragment.getElementById(id);
+        let templ = fragment.querySelector(`#${id}`);
         if (templ === null) {
             let rootToSearchOutwardFrom = ((fragment.isConnected ? fragment.getRootNode() : this.#mountInit.withTargetShadowRoot) || document);
             templ = rootToSearchOutwardFrom.getElementById(id);
@@ -84,8 +85,34 @@ export class MountObserver extends EventTarget {
                 templ = rootToSearchOutwardFrom.getElementById(id);
             }
         }
-        if (templ !== null)
+        if (templ !== null) {
+            if (!(templ instanceof HTMLTemplateElement)) {
+                const newTempl = document.createElement('template');
+                const { getAdjRefs } = await import('./refid/getAdjRefs.js');
+                const adjRefs = getAdjRefs(templ);
+                // if(adjRefs.length > 1){
+                //     (<any>newTempl)[wasItemReffed] = true;
+                //     adjRefs[0].setAttribute('itemref', '<autogen>');
+                // }
+                const fragment = document.createDocumentFragment();
+                let first = true;
+                for (const adjRef of adjRefs) {
+                    const clone = adjRef.cloneNode(true);
+                    if (first && adjRefs.length > 1) {
+                        clone.setAttribute('itemref', '<autogen>');
+                        newTempl[wasItemReffed] = true;
+                        first = false;
+                    }
+                    clone.removeAttribute('id');
+                    fragment.appendChild(clone);
+                }
+                const { doCleanup } = await import('./doCleanup.js');
+                doCleanup(templ, fragment);
+                newTempl.content.appendChild(fragment);
+                templ = newTempl;
+            }
             this.#templLookUp.set(id, templ);
+        }
         return templ;
     }
     disconnect(within) {

package/MountObserver.ts

@@ -10,6 +10,7 @@ import {RootMutObs} from './RootMutObs.js';
 import {bindish, bindishIt} from './bindish.js';
 export {MOSE} from './ts-refs/mount-observer/types';
 export const guid = '5Pv6bHOVH0ae07opRZ8N/g';
+export const wasItemReffed = Symbol.for('8aA6xB8+PkScmivaslBk5Q');
 
 export const mutationObserverLookup = new WeakMap<Node, RootMutObs>();
 const refCount = new WeakMap<Node, number>();
@@ -87,9 +88,9 @@ export class MountObserver extends EventTarget implements IMountObserver{
 
     }
     #templLookUp: Map<string, HTMLElement> = new Map();
-    findByID(id: string, fragment: DocumentFragment): HTMLElement | null{
+    async findByID(id: string, fragment: DocumentFragment): Promise<HTMLElement | null>{
         if(this.#templLookUp.has(id)) return this.#templLookUp.get(id)!;
-        let templ = fragment.getElementById(id);
+        let templ = fragment.querySelector(`#${id}`);
         if(templ === null){
             let rootToSearchOutwardFrom = ((fragment.isConnected ? fragment.getRootNode() : this.#mountInit.withTargetShadowRoot) || document) as any;
             templ = rootToSearchOutwardFrom.getElementById(id);
@@ -98,8 +99,35 @@ export class MountObserver extends EventTarget implements IMountObserver{
                 templ = rootToSearchOutwardFrom.getElementById(id);
             }
         }
-        if(templ !== null) this.#templLookUp.set(id, templ);
-        return templ;
+        if(templ !== null) {
+            if(!(templ instanceof HTMLTemplateElement)){
+                const newTempl = document.createElement('template');
+                const {getAdjRefs} = await import('./refid/getAdjRefs.js');
+                const adjRefs = getAdjRefs(templ);
+                // if(adjRefs.length > 1){
+                //     (<any>newTempl)[wasItemReffed] = true;
+                //     adjRefs[0].setAttribute('itemref', '<autogen>');
+                // }
+                const fragment = document.createDocumentFragment();
+                let first = true;
+                for(const adjRef of adjRefs){
+                    const clone = adjRef.cloneNode(true) as HTMLElement;
+                    if(first && adjRefs.length > 1){
+                        clone.setAttribute('itemref', '<autogen>');
+                        (<any>newTempl)[wasItemReffed] = true;
+                        first = false;
+                    }
+                    clone.removeAttribute('id');
+                    fragment.appendChild(clone);
+                }
+                const {doCleanup} = await import('./doCleanup.js');
+                doCleanup(templ as HTMLElement, fragment);
+                newTempl.content.appendChild(fragment);
+                templ = newTempl;
+            }
+            this.#templLookUp.set(id, templ as HTMLTemplateElement);
+        }
+        return templ as HTMLTemplateElement;
     }
 
     disconnect(within: Node){

package/Newish.js

@@ -45,9 +45,9 @@ export class Newish {
             if (initPropVals !== undefined)
                 this.queue.push(initPropVals);
         }
-        if ('tbd' in ce && typeof ce['tbd'] === 'function') {
-            await ce['tbd'](ce, enhancedElement, this.#options);
-        }
+        // if('tbd' in ce && typeof ce['tbd'] === 'function'){
+        //     await ce['tbd'](ce, enhancedElement, this.#options);
+        // }
         this.#ce = ce;
         const self = this;
         Object.defineProperty(enhancedElement, 'ish', {
@@ -121,12 +121,15 @@ export class Newish {
                 actions.add('ishListAssigned');
             }
             else {
-                const { assigner } = this.#options;
+                let { assigner } = this.#options;
+                if (assigner === undefined) {
+                    assigner = Object.assign;
+                }
                 await assigner(ce, fi);
                 actions.add('ishAssigned');
             }
         }
-        if (fromDo && !foundArray) {
+        if (fromDo && !foundArray && hasArrFilter) {
             const filtered = await (ce['arr=>'])(ce, undefined, ref, this.#options);
             if (filtered !== undefined) {
                 ce[arr] = filtered;

package/Newish.ts

@@ -51,9 +51,9 @@ export class Newish implements EventListenerObject {
             ce = new (ctr as any)();
             if(initPropVals !== undefined) this.queue.push(initPropVals);
         }
-        if('tbd' in ce && typeof ce['tbd'] === 'function'){
-            await ce['tbd'](ce, enhancedElement, this.#options);
-        }
+        // if('tbd' in ce && typeof ce['tbd'] === 'function'){
+        //     await ce['tbd'](ce, enhancedElement, this.#options);
+        // }
 
         this.#ce = ce;
         const self = this;
@@ -130,13 +130,16 @@ export class Newish implements EventListenerObject {
                 (<any>ce)[arr] = filtered;
                 actions.add('ishListAssigned');
             }else{
-                const {assigner} = this.#options;
+                let {assigner} = this.#options;
+                if(assigner === undefined){
+                    assigner = Object.assign;
+                }
                 await assigner!(ce, fi);
                 actions.add('ishAssigned');
             }
             
         }
-        if(fromDo && !foundArray){
+        if(fromDo && !foundArray && hasArrFilter){
             const filtered = await (ce['arr=>']!)(ce, undefined, ref! as HasIsh &  Element, this.#options);
             if(filtered !== undefined){
                 (<any>ce)[arr] = filtered;

package/README.md

@@ -295,6 +295,7 @@ const observer = new MountObserver({
    on: 'div > p + p ~ span[class$="name"]',
    whereMediaMatches: '(max-width: 1250px)',
    whereSizeOfContainerMatches: '(min-width: 700px)',
+   whereContainerHas: '[itemprop=isActive][value="true"]',
    whereInstanceOf: [HTMLMarqueeElement], //or ['HTMLMarqueeElement']
    whereLangIn: ['en-GB'],
    whereConnection:{
@@ -850,10 +851,53 @@ This proposal (and polyfill) also supports the option to utilize ShadowDOM / slo
 <compose src="#productCard"></compose>
 ```
 
-The discussion there leads to an open question whether a processing instruction would be better.  I think the compose tag would make much more sense, vs a processing instruction, as it could then support slotted children (behaving similar to the Beatles' example above).  Or maybe another tag should be introduced that is the equivalent of the slot, to avoid confusion. But I strongly suspect that could significantly reduce the payload size of some documents, if we can reuse blocks of HTML, inserting sections of customized content for each instance.
+The discussion there leads to an open question whether a processing instruction would be better.  I think the compose tag would make much more sense, vs a processing instruction, as it could then support slotted children (behaving similar to the Beatles' example above).  Or maybe another tag should be introduced that is the equivalent of the slot, to avoid confusion. But I strongly suspect supporting intra document HTML imports could significantly reduce the payload size of some documents, if we can reuse blocks of HTML, inserting sections of customized content for each instance.
 
 The [add src attribute to template to load a template from file](https://github.com/whatwg/html/issues/10571) and an interesting proposal that is [coming from](https://github.com/htmlcomponents/declarative-shadow-imports/blob/main/examples/02-explainer-proposal/02-html.html) the Edge team [seem quite compatible](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md#proposal-inline-declarative-css-module-scripts) with this idea.
 
+## Lazy Loading / Conditionally loading intra document imports [WIP specification]
+
+Just as it is useful to be able lazy load external imports when needed, it would also be useful to do the same for intra document HTML imports.  The most straightforward way this could be done seems to be as follows, either introducing some attribute like "type=conditional", or defining a new element that inherits from the HTMLTemplateElement, for example:
+
+```html
+<template id=source-template type=conditional>
+
+   <template mount='{
+      "on": ":not([defer-loading])",
+      "loadingEagerness": "eager",
+      "whereMediaMatches": "(min-width: 700px)",
+      "whereLangIn": ["en-GB"],
+   }'>
+      <div>I don't know why you say <slot name=slot2></slot> I say <slot name=slot1></slot></div>
+   </template>
+
+   <template mount='{
+      "on": ":not([defer-loading])",
+      "loadingEagerness": "lazy",
+      "whereMediaMatches": "(max-width: 700px)",
+      "whereLangIn": ["fr"],
+   }'>
+      <div>Je ne sais pas pourquoi tu dis  <slot name=slot2></slot> je dis  <slot name=slot1></slot></div>
+   </template>
+   
+</template>
+
+...
+<template src=#source-template>
+   <span slot=slot1>hello</span>
+   <span slot=slot2>goodbye<span>
+</template>
+
+<!-- or, alternatively: -->
+
+<compose src=#source-template>
+   <span slot=slot1>hello</span>
+   <span slot=slot2>goodbye<span>
+</compose>
+```
+
+
+
 ## Creating "frameworks" that revolve around MOSEs.
 
 Often, we will want to define a large number of "mount observer script elements (MOSEs)" programmatically, and we need it to be done in a generic way, that can be published and easily referenced.  

package/compose.js

@@ -1,20 +1,53 @@
-import { inclTemplQry } from './MountObserver.js';
+import { inclTemplQry, wasItemReffed } from './MountObserver.js';
 export const childRefsKey = Symbol.for('Wr0WPVh84k+O93miuENdMA');
 export const cloneKey = Symbol.for('LD97VKZYc02CQv23DT/6fQ');
+const autogenKey = Symbol.for('YpP5EP0i1UKcBBBH9tsm0w');
 export async function compose(self, el, level) {
-    if (!el.hasAttribute('src')) {
-        return;
-    }
     const src = el.getAttribute('src');
+    if (src === null)
+        return;
     el.removeAttribute('src');
     const templID = src.substring(1);
     const fragment = self.objNde?.deref();
     if (fragment === undefined)
         return;
-    const templ = self.findByID(templID, fragment);
+    const templ = await self.findByID(templID, fragment);
     if (!(templ instanceof HTMLTemplateElement))
         throw 404;
     const clone = templ.content.cloneNode(true);
+    const dataLd = el.dataset.ld;
+    const wasReffed = templ[wasItemReffed];
+    if (wasReffed || dataLd) {
+        const firstElement = clone.firstElementChild;
+        if (wasReffed) {
+            let ns = firstElement.nextElementSibling;
+            const ids = [];
+            let count = window[autogenKey];
+            if (count === undefined) {
+                count = 0;
+            }
+            else {
+                count++;
+            }
+            window[autogenKey] = count;
+            while (ns !== null) {
+                const id = ns.id = `mount-observer-${count}`;
+                ids.push(id);
+                ns = ns.nextElementSibling;
+            }
+            firstElement.setAttribute('itemref', ids.join(' '));
+        }
+        if (dataLd) {
+            const parsed = JSON.parse(dataLd);
+            let type = parsed['@type'];
+            const itemscopeAttr = firstElement.getAttribute('itemscope');
+            if (type && !itemscopeAttr) {
+                firstElement.setAttribute('itemscope', type);
+            }
+            firstElement['ish'] = parsed;
+            delete el.dataset.ld;
+        }
+    }
     const slots = el.content.querySelectorAll(`[slot]`);
     for (const slot of slots) {
         const name = slot.getAttribute('slot');

package/compose.ts

@@ -1,25 +1,56 @@
 import { ILoadEvent, loadEventName } from './ts-refs/mount-observer/types';
-import { MountObserver, inclTemplQry } from './MountObserver.js';
+import { MountObserver, inclTemplQry, wasItemReffed } from './MountObserver.js';
 
 export const childRefsKey = Symbol.for('Wr0WPVh84k+O93miuENdMA');
 export const cloneKey = Symbol.for('LD97VKZYc02CQv23DT/6fQ');
-
+const autogenKey = Symbol.for('YpP5EP0i1UKcBBBH9tsm0w');
 export async function compose(
     self: MountObserver, 
     el: HTMLTemplateElement, 
     level: number
 ){
-    if(!el.hasAttribute('src')){
-        return;
-    }
-    const src = el.getAttribute('src');
+    const src = el.getAttribute('src'); if(src === null) return;
     el.removeAttribute('src');
     const templID = src!.substring(1);
     const fragment = self.objNde?.deref() as DocumentFragment;
     if(fragment === undefined) return;
-    const templ = self.findByID(templID, fragment);
+    const templ = await self.findByID(templID, fragment);
     if(!(templ instanceof HTMLTemplateElement)) throw 404;
     const clone = templ.content.cloneNode(true) as DocumentFragment;
+    const dataLd = el.dataset.ld;
+    const wasReffed = (<any>templ)[wasItemReffed];
+    if(wasReffed || dataLd){
+        const firstElement = clone.firstElementChild!;
+        if(wasReffed){
+            let ns = firstElement.nextElementSibling;
+            const ids = [];
+            let count = (<any>window)[autogenKey];
+            if(count === undefined){
+                count = 0;
+            }else{
+                count++;
+            }
+            (<any>window)[autogenKey] = count;
+            while(ns !== null){
+                const id = ns.id = `mount-observer-${count}`;
+                ids.push(id);
+                ns = ns.nextElementSibling;
+            }
+            firstElement.setAttribute('itemref', ids.join(' '));
+        }
+        
+        if(dataLd){
+            const parsed = JSON.parse(dataLd);
+            let type = parsed['@type'];
+            const itemscopeAttr = firstElement.getAttribute('itemscope');
+            if(type && !itemscopeAttr){
+                firstElement.setAttribute('itemscope', type);
+            }
+            (<any>firstElement)['ish'] = parsed;
+            delete el.dataset.ld;
+        }
+        
+    }
     const slots = el.content.querySelectorAll(`[slot]`);
 
     for(const slot of slots){

package/doCleanup.js

@@ -0,0 +1,31 @@
+export function doCleanup(htmlSrc, clone, options = {
+    removeInner: '[itemprop]:not([itemscope])',
+    removeOuter: '[itemprop][itemscope]'
+}) {
+    const removeInner = htmlSrc.getAttribute('remove-inner') || options.removeInner;
+    if (removeInner) {
+        const removeInnerEls = clone.querySelectorAll(removeInner);
+        for (const removeInnerEl of removeInnerEls) {
+            if ('href' in removeInnerEl) {
+                removeInnerEl.href = '';
+            }
+            else if ('value' in removeInnerEl) {
+                removeInnerEl.value = '';
+            }
+            else if ('datetime' in removeInnerEl) {
+                removeInnerEl.datetime = '';
+            }
+            else {
+                //any other exceptions?                       
+                removeInnerEl.textContent = '';
+            }
+        }
+    }
+    const removeOuter = htmlSrc.getAttribute('remove-outer') || options.removeOuter;
+    if (removeOuter) {
+        const removeOuterEls = clone.querySelectorAll(removeOuter);
+        for (const removeOuterEl of removeOuterEls) {
+            removeOuterEl.remove();
+        }
+    }
+}

package/doCleanup.ts

@@ -0,0 +1,34 @@
+interface doCleanUpOptions {
+    removeInner?: string;
+    removeOuter?: string;
+}
+
+export function doCleanup(htmlSrc: HTMLElement, clone: DocumentFragment, options: doCleanUpOptions = {
+    removeInner: '[itemprop]:not([itemscope])',
+    removeOuter: '[itemprop][itemscope]'
+}){
+    const removeInner = htmlSrc.getAttribute('remove-inner') || options.removeInner;
+    if(removeInner){
+        const removeInnerEls = clone.querySelectorAll(removeInner);
+        for(const removeInnerEl of removeInnerEls){
+            if('href' in removeInnerEl){
+                removeInnerEl.href = '';
+            } else if ('value' in removeInnerEl){
+                removeInnerEl.value = '';
+            }else if('datetime' in removeInnerEl){
+                removeInnerEl.datetime = '';
+            }else{ 
+                //any other exceptions?                       
+                removeInnerEl.textContent = '';
+            }
+        }
+    }
+    const removeOuter = htmlSrc.getAttribute('remove-outer') || options.removeOuter;
+    if(removeOuter){
+        const removeOuterEls = clone.querySelectorAll(removeOuter);
+        for(const removeOuterEl of removeOuterEls){
+            removeOuterEl.remove();
+        }
+    }
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
@@ -37,6 +37,10 @@
       "default": "./compose.js",
       "types": "./compose.ts"
     },
+    "./doCleanup.js": {
+      "default": "./doCleanup.js",
+      "types": "./doCleanup.ts"
+    },
     "./waitForEvent.js": {
       "default": "./waitForEvent.js",
       "types": "./waitForEvent.ts"
@@ -45,6 +49,10 @@
       "default": "./waitForIsh.js",
       "types": "./waitForIsh.ts"
     },
+    "./refid/getAdjRefs.js": {
+      "default": "./refid/getAdjRefs.js",
+      "types": "./refid/getAdjRefs.ts"
+    },
     "./refid/regIsh.js": {
       "default": "./refid/regIsh.js",
       "types": "./refid/regIsh.js"
@@ -52,13 +60,18 @@
     "./refid/splitRefs.js": {
       "default": "./refid/splitRefs.js",
       "types": "./refid/splitRefs.ts"
+    },
+    "./slotkin/beKindred.js": {
+      "default": "./slotkin/beKindred.js",
+      "types": "./slotkin/beKindred.ts"
     }
   },
   "files": [
     "*.js",
     "*.ts",
     "./ts-refs/*",
-    "./refid/*"
+    "./refid/*",
+    "./slotkin/*"
   ],
   "types": "./ts-refs/mount-observer/types.d.ts",
   "scripts": {

package/refid/getAdjRefs.js

@@ -0,0 +1,16 @@
+import { splitRefs } from './splitRefs.js';
+export function getAdjRefs(el) {
+    const returnArr = [el];
+    const itemref = el.getAttribute('itemref');
+    if (itemref === null)
+        return returnArr;
+    const itemrefList = splitRefs(itemref); // itemref.split(' ').map((id) => id.trim()).filter((id) => id.length > 0);
+    if (itemrefList.length === 0)
+        return returnArr;
+    let ns = el.nextElementSibling;
+    while (ns !== null && itemrefList.includes(ns.id)) {
+        returnArr.push(ns);
+        ns = ns.nextElementSibling;
+    }
+    return returnArr;
+}

package/refid/getAdjRefs.ts

@@ -0,0 +1,16 @@
+import { splitRefs } from './splitRefs.js';
+export function getAdjRefs(el: Element): Array<Element>{
+    const returnArr = [el];
+    const itemref = el.getAttribute('itemref');
+    if(itemref === null) return returnArr;
+    const itemrefList = splitRefs(itemref);// itemref.split(' ').map((id) => id.trim()).filter((id) => id.length > 0);
+    if(itemrefList.length === 0) return returnArr;
+    let ns = el.nextElementSibling;
+    while(ns !== null && itemrefList.includes(ns.id)){
+        returnArr.push(ns);
+        ns = ns.nextElementSibling;
+    }
+    return returnArr;
+}
+
+

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

package/ts-refs/be-imbued/types.d.ts

@@ -0,0 +1,30 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+import {Specifier} from '../trans-render/dss/types';
+
+export interface EndUserProps extends IEnhancement<HTMLTemplateElement>{
+
+}
+
+export interface AllProps extends EndUserProps{
+    nodesToImbue: Element[],
+    imbueRules: Array<ImbueRule>,
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps;
+
+export interface Actions{
+    hydrate(self: BAP): Promise<PAP>;
+    imbue(self: BAP): void;
+}
+
+export interface ImbueRule {
+    remoteSpecifierString?: string,
+    remoteSpecifier: Specifier,
+}
+

package/ts-refs/be-included/types.d.ts

@@ -0,0 +1,20 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+
+export interface EndUserProps extends IEnhancement<HTMLTemplateElement>{
+    in: string,
+}
+
+export interface AllProps extends EndUserProps{
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps;
+
+export interface Actions{
+    hydrate(self: BAP): void;
+}