mount-observer 0.0.13 → 0.0.15

package/MountObserver.js

@@ -10,7 +10,7 @@ export class MountObserver extends EventTarget {
     #disconnected;
     //#unmounted: WeakSet<Element>;
     #isComplex;
-    #observe;
+    objNde;
     constructor(init) {
         super();
         const { on, whereElementIntersectsWith, whereMediaMatches } = init;
@@ -45,86 +45,18 @@ export class MountObserver extends EventTarget {
         this.#calculatedSelector = calculatedSelector;
         return this.#calculatedSelector;
     }
-    async #birtualizeFragment(fragment, level) {
+    async birtualizeFragment(fragment, level) {
         const bis = fragment.querySelectorAll(inclTemplQry);
         for (const bi of bis) {
             await this.#birtalizeMatch(bi, level);
         }
     }
     async #birtalizeMatch(el, level) {
-        const href = el.getAttribute('href');
-        el.removeAttribute('href');
-        const templID = href.substring(1);
-        const fragment = this.#observe?.deref();
-        if (fragment === undefined)
-            return;
-        const templ = this.#findByID(templID, fragment);
-        if (!(templ instanceof HTMLTemplateElement))
-            throw 404;
-        const clone = templ.content.cloneNode(true);
-        const slots = el.content.querySelectorAll(`[slot]`);
-        for (const slot of slots) {
-            const name = slot.getAttribute('slot');
-            const slotQry = `slot[name="${name}"]`;
-            const targets = Array.from(clone.querySelectorAll(slotQry));
-            const innerTempls = clone.querySelectorAll(inclTemplQry);
-            for (const innerTempl of innerTempls) {
-                const innerSlots = innerTempl.content.querySelectorAll(slotQry);
-                for (const innerSlot of innerSlots) {
-                    targets.push(innerSlot);
-                }
-            }
-            for (const target of targets) {
-                const slotClone = slot.cloneNode(true);
-                target.after(slotClone);
-                target.remove();
-            }
-        }
-        await this.#birtualizeFragment(clone, level + 1);
-        if (level === 0) {
-            const slotMap = el.getAttribute('slotmap');
-            let map = slotMap === null ? undefined : JSON.parse(slotMap);
-            const slots = clone.querySelectorAll('[slot]');
-            for (const slot of slots) {
-                if (map !== undefined) {
-                    const slotName = slot.slot;
-                    for (const key in map) {
-                        if (slot.matches(key)) {
-                            const targetAttSymbols = map[key];
-                            for (const sym of targetAttSymbols) {
-                                switch (sym) {
-                                    case '|':
-                                        slot.setAttribute('itemprop', slotName);
-                                        break;
-                                    case '$':
-                                        slot.setAttribute('itemscope', '');
-                                        slot.setAttribute('itemprop', slotName);
-                                        break;
-                                    case '@':
-                                        slot.setAttribute('name', slotName);
-                                        break;
-                                    case '.':
-                                        slot.classList.add(slotName);
-                                        break;
-                                    case '%':
-                                        slot.part.add(slotName);
-                                        break;
-                                }
-                            }
-                        }
-                    }
-                }
-                slot.removeAttribute('slot');
-            }
-            el.dispatchEvent(new LoadEvent(clone));
-            //console.log('dispatched')
-        }
-        el.after(clone);
-        if (level !== 0 || slots.length === 0)
-            el.remove();
+        const { birtualizeMatch } = await import('./birtualizeMatch.js');
+        await birtualizeMatch(this, el, level);
     }
     #templLookUp = new Map();
-    #findByID(id, fragment) {
+    findByID(id, fragment) {
         if (this.#templLookUp.has(id))
             return this.#templLookUp.get(id);
         let templ = fragment.getElementById(id);
@@ -166,7 +98,7 @@ export class MountObserver extends EventTarget {
         }
     }
     async observe(within) {
-        this.#observe = new WeakRef(within);
+        this.objNde = new WeakRef(within);
         const nodeToMonitor = this.#isComplex ? (within instanceof ShadowRoot ? within : within.getRootNode()) : within;
         if (!mutationObserverLookup.has(nodeToMonitor)) {
             mutationObserverLookup.set(nodeToMonitor, new RootMutObs(nodeToMonitor));
@@ -227,9 +159,6 @@ export class MountObserver extends EventTarget {
                 }
                 const deletedElements = Array.from(removedNodes).filter(x => x instanceof Element);
                 for (const deletedElement of deletedElements) {
-                    // if(!this.#mounted.has(deletedElement)) continue;
-                    // this.#mounted.delete(deletedElement);
-                    // this.#mountedList = this.#mountedList?.filter(x => x.deref() !== deletedElement);
                     this.#disconnected.add(deletedElement);
                     if (doDisconnect !== undefined) {
                         doDisconnect(deletedElement, this, {});
@@ -239,9 +168,7 @@ export class MountObserver extends EventTarget {
             }
             this.#filterAndMount(elsToInspect, true, false);
         }, { signal: this.#abortController.signal });
-        //if(ignoreInitialMatches !== true){
         await this.#inspectWithin(within, true);
-        //}
     }
     #confirmInstanceOf(el, whereInstanceOf) {
         for (const test of whereInstanceOf) {
@@ -268,7 +195,6 @@ export class MountObserver extends EventTarget {
                     case 'object':
                         if (Array.isArray(imp)) {
                             throw 'NI: Firefox';
-                            //this.module = await import(imp[0], imp[1]);
                         }
                         break;
                     case 'function':
@@ -376,13 +302,13 @@ export class MountObserver extends EventTarget {
         this.#mount(elsToMount, initializing);
     }
     async #inspectWithin(within, initializing) {
-        await this.#birtualizeFragment(within, 0);
+        await this.birtualizeFragment(within, 0);
         const els = Array.from(within.querySelectorAll(await this.#selector()));
         this.#filterAndMount(els, false, initializing);
     }
 }
 const refCountErr = 'mount-observer ref count mismatch';
-const inclTemplQry = 'template[href^="#"]:not([hidden])';
+export const inclTemplQry = 'template[href^="#"]:not([hidden])';
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
 /**
  * The `mutation-event` event represents something that happened.
@@ -424,12 +350,4 @@ export class AttrChangeEvent extends Event {
         this.attrChangeInfo = attrChangeInfo;
     }
 }
-export class LoadEvent extends Event {
-    clone;
-    static eventName = 'load';
-    constructor(clone) {
-        super(LoadEvent.eventName);
-        this.clone = clone;
-    }
-}
 //const hasRootInDefault =  ['data', 'enh', 'data-enh']

package/README.md

@@ -11,13 +11,13 @@ Author:  Bruce B. Anderson
 
 Issues / pr's / polyfill:  [mount-observer](https://github.com/bahrus/mount-observer)
 
-Last Update: 2024-2-18
+Last Update: 2024-2-20
 
 ## Benefits of this API
 
 What follows is a far more ambitious alternative to the [lazy custom element proposal](https://github.com/w3c/webcomponents/issues/782).  The goals of the MountObserver api are more encompassing, and less focused on registering custom elements.  In fact, this proposal addresses numerous use cases in one api.  It is basically mapping common filtering conditions in the DOM, to mounting a "campaign" of some sort, like importing a resource, and/or progressively enhancing an element, and/or "binding from a distance".
 
-["Binding from a distance"](https://github.com/WICG/webcomponents/issues/1035#issuecomment-1806393525) refers to empowering the developer to essentially manage their own "stylesheets" -- but rather than for purposes of styling, using these rules to attach behaviors, set property values, etc, to the HTML as it streams in.  Libraries that take this approach include [Corset](https://corset.dev/) and [trans-render](https://github.com/bahrus/trans-render).  The concept has been promoted by a [number](https://bkardell.com/blog/CSSLike.html) [of](https://www.w3.org/TR/NOTE-AS)  prominent voices in the community. 
+["Binding from a distance"](https://github.com/WICG/webcomponents/issues/1035#issuecomment-1806393525) refers to empowering the developer to essentially manage their own "stylesheets" -- but rather than for purposes of styling, using these rules to attach behaviors, set property values, etc, to the HTML as it streams in.  Libraries that take this approach include [Corset](https://corset.dev/) and [trans-render](https://github.com/bahrus/trans-render).  The concept has been promoted by a [number](https://bkardell.com/blog/CSSLike.html) [of](https://www.w3.org/TR/NOTE-AS)  [prominent](https://www.xanthir.com/blog/b4K_0) voices in the community. 
 
 The underlying theme is this api is meant to make it easy for the developer to do the right thing, by encouraging lazy loading and smaller footprints. It rolls up most all the other observer api's into one.
 
@@ -439,11 +439,13 @@ const observer = new MountObserver({
 
 So what this does is only check for the presence of an element with tag name "my-element", and it starts downloading the resource, even before the element has "mounted" based on other criteria.
 
-## Birtual Inclusions
+## Intra document html imports
 
 This proposal "sneaks in" one more feature, that perhaps should stand separately as its own proposal.  Because the MountObserver api allows us to attach behaviors on the fly based on css matching, and because the MountObserver would provide developers the "first point of contact" for such functionality, the efficiency argument seemingly "screams out" for this feature.
 
-The mount-observer is always on the lookout for a template tags with an href attribute starting with #:
+Also, this proposal is partly focused on better management of importing resources "from a distance", in particular via imports carried out via http.  Is it such a stretch to look closely at scenarios where that distance happens to be shorter, i.e. found somewhere [in the document tree structure](https://github.com/tc39/proposal-module-expressions)?
+
+The mount-observer is always on the lookout for template tags with an href attribute starting with #:
 
 ```html
 <template href=#id-of-source-template></template>
@@ -485,5 +487,49 @@ This is an example of a snippet of HTML that appears repeatedly.
 
 Some significant differences with genuine slot support as used with (ShadowDOM'd) custom elements
 
-1.  There is no mechanism for updating the slots.  That is something under investigation with this userland [custom enhancement](https://github.com/bahrus/be-inclusive), that could possibly lead to a future implementation request tied to template instantiation.
-2.  ShadowDOM's slots act on a "many to one" basis.  Multiple light children with identical slot identifiers all get merged into a single (first?) matching slot within the Shadow DOM.  These birtual inclusions, instead, follow the opposite approach -- a single element with a slot identifier can get cloned into multiple slot targets as it weaves itself into the templates as they get merged together.
+1.  There is no mechanism for updating the slots.  That is something under investigation with this userland [custom enhancement](https://github.com/bahrus/be-inclusive), that could possibly lead to a future implementation request tied to template instantiation.  It takes the approach of morphing from slots to a JS host object model that binds to where all the slots were "from a distance".
+2.  ShadowDOM's slots act on a "many to one" basis.  Multiple light children with identical slot identifiers all get merged into a single (first?) matching slot within the Shadow DOM.  These "birtual" (birth-only, virtual) inclusions, instead, follow the opposite approach -- a single element with a slot identifier can get cloned into multiple slot targets as it weaves itself into the templates as they get merged together.
+
+## Intra document html imports with Shadow DOM support
+
+This proposal (and polyfill) also supports the option to utilize ShadowDOM / slot updates:
+
+```html
+<template id=chorus>
+   <template href=#beautiful>
+      <span slot=subjectIs>
+            <slot name=subjectIs1></slot>
+      </span>
+   </template>
+
+   <div>No matter what they say</div>
+   <div prop-pronoun>Words
+      <slot name=verb1></slot> bring
+      <slot name=pronoun1></slot> down</div>
+   <div>Oh no</div>
+   <template href=#beautiful>
+      <span slot=subjectIs>
+            <slot name=subjectIs2></slot>
+      </span>
+   </template>
+   <div>In every single way</div>
+   <div>Yes words
+      <slot name=verb2></slot> bring
+      <slot name=pronoun2></slot> down
+   </div>
+   <div>Oh no</div>
+
+   <template href=#down></template>
+</template>
+
+<div class=chorus>
+   <template href=#chorus shadowRootModeOnLoad=open></template>
+   <span slot=verb1>can't</span>
+   <span slot=verb2>can't</span>
+   <span slot=pronoun1>me</span>
+   <span slot=pronoun2>me</span>
+   <span slot=subjectIs1>I am</span>
+   <span slot=subjectIs2>I am</span>
+</div>
+```
+

package/birtualizeMatch.js

@@ -0,0 +1,92 @@
+import { inclTemplQry } from './MountObserver.js';
+export async function birtualizeMatch(self, el, level) {
+    const href = el.getAttribute('href');
+    el.removeAttribute('href');
+    const templID = href.substring(1);
+    const fragment = self.objNde?.deref();
+    if (fragment === undefined)
+        return;
+    const templ = self.findByID(templID, fragment);
+    if (!(templ instanceof HTMLTemplateElement))
+        throw 404;
+    const clone = templ.content.cloneNode(true);
+    const slots = el.content.querySelectorAll(`[slot]`);
+    for (const slot of slots) {
+        const name = slot.getAttribute('slot');
+        const slotQry = `slot[name="${name}"]`;
+        const targets = Array.from(clone.querySelectorAll(slotQry));
+        const innerTempls = clone.querySelectorAll(inclTemplQry);
+        for (const innerTempl of innerTempls) {
+            const innerSlots = innerTempl.content.querySelectorAll(slotQry);
+            for (const innerSlot of innerSlots) {
+                targets.push(innerSlot);
+            }
+        }
+        for (const target of targets) {
+            const slotClone = slot.cloneNode(true);
+            target.after(slotClone);
+            target.remove();
+        }
+    }
+    await self.birtualizeFragment(clone, level + 1);
+    const shadowRootModeOnLoad = el.getAttribute('shadowRootModeOnLoad');
+    if (shadowRootModeOnLoad === null && level === 0) {
+        const slotMap = el.getAttribute('slotmap');
+        let map = slotMap === null ? undefined : JSON.parse(slotMap);
+        const slots = clone.querySelectorAll('[slot]');
+        for (const slot of slots) {
+            if (map !== undefined) {
+                const slotName = slot.slot;
+                for (const key in map) {
+                    if (slot.matches(key)) {
+                        const targetAttSymbols = map[key];
+                        for (const sym of targetAttSymbols) {
+                            switch (sym) {
+                                case '|':
+                                    slot.setAttribute('itemprop', slotName);
+                                    break;
+                                case '$':
+                                    slot.setAttribute('itemscope', '');
+                                    slot.setAttribute('itemprop', slotName);
+                                    break;
+                                case '@':
+                                    slot.setAttribute('name', slotName);
+                                    break;
+                                case '.':
+                                    slot.classList.add(slotName);
+                                    break;
+                                case '%':
+                                    slot.part.add(slotName);
+                                    break;
+                            }
+                        }
+                    }
+                }
+            }
+            slot.removeAttribute('slot');
+        }
+        el.dispatchEvent(new LoadEvent(clone));
+        //console.log('dispatched')
+    }
+    if (shadowRootModeOnLoad !== null) {
+        const parent = el.parentElement;
+        if (parent === null)
+            throw 404;
+        if (parent.shadowRoot === null)
+            parent.attachShadow({ mode: shadowRootModeOnLoad });
+        parent.shadowRoot?.append(clone);
+    }
+    else {
+        el.after(clone);
+    }
+    if (level !== 0 || slots.length === 0)
+        el.remove();
+}
+export class LoadEvent extends Event {
+    clone;
+    static eventName = 'load';
+    constructor(clone) {
+        super(LoadEvent.eventName);
+        this.clone = clone;
+    }
+}

package/package.json

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