mount-observer 0.0.8 → 0.0.10

package/MountObserver.js

@@ -3,13 +3,14 @@ const mutationObserverLookup = new WeakMap();
 const refCount = new WeakMap();
 export class MountObserver extends EventTarget {
     #mountInit;
-    #rootMutObs;
+    //#rootMutObs: RootMutObs | undefined;
     #abortController;
     #mounted;
     #mountedList;
     #disconnected;
     //#unmounted: WeakSet<Element>;
     #isComplex;
+    #observe;
     constructor(init) {
         super();
         const { on, whereElementIntersectsWith, whereMediaMatches } = init;
@@ -44,6 +45,93 @@ export class MountObserver extends EventTarget {
         this.#calculatedSelector = calculatedSelector;
         return this.#calculatedSelector;
     }
+    async #birtualizeFragment(fragment, level) {
+        const bis = Array.from(fragment.querySelectorAll(biQry));
+        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 targets = Array.from(clone.querySelectorAll(`slot[name="${name}"]`));
+            for (const target of targets) {
+                const slotClone = slot.cloneNode(true);
+                target.after(slotClone);
+                target.remove();
+            }
+        }
+        this.#birtualizeFragment(clone, level + 1);
+        if (level === 0) {
+            const slotMap = el.getAttribute('slotmap');
+            let map = slotMap === null ? undefined : JSON.parse(slotMap);
+            const slots = Array.from(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();
+    }
+    #templLookUp = new Map();
+    #findByID(id, fragment) {
+        if (this.#templLookUp.has(id))
+            return this.#templLookUp.get(id);
+        let templ = fragment.getElementById(id);
+        if (templ === null) {
+            let rootToSearchOutwardFrom = ((fragment.isConnected ? fragment.getRootNode() : this.#mountInit.withTargetShadowRoot) || document);
+            templ = rootToSearchOutwardFrom.getElementById(id);
+            while (templ === null && rootToSearchOutwardFrom !== document) {
+                rootToSearchOutwardFrom = (rootToSearchOutwardFrom.host || rootToSearchOutwardFrom).getRootNode();
+                templ = rootToSearchOutwardFrom.getElementById(id);
+            }
+        }
+        if (templ !== null)
+            this.#templLookUp.set(id, templ);
+        return templ;
+    }
     unobserve(within) {
         const nodeToMonitor = this.#isComplex ? (within instanceof ShadowRoot ? within : within.getRootNode()) : within;
         const currentCount = refCount.get(nodeToMonitor);
@@ -70,6 +158,7 @@ export class MountObserver extends EventTarget {
         }
     }
     async observe(within) {
+        this.#observe = new WeakRef(within);
         const nodeToMonitor = this.#isComplex ? (within instanceof ShadowRoot ? within : within.getRootNode()) : within;
         if (!mutationObserverLookup.has(nodeToMonitor)) {
             mutationObserverLookup.set(nodeToMonitor, new RootMutObs(nodeToMonitor));
@@ -271,14 +360,21 @@ export class MountObserver extends EventTarget {
             }
             return true;
         });
+        for (const elToMount of elsToMount) {
+            if (elToMount.matches(biQry)) {
+                await this.#birtalizeMatch(elToMount, 0);
+            }
+        }
         this.#mount(elsToMount, initializing);
     }
     async #inspectWithin(within, initializing) {
+        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 biQry = 'template[href^="#"]:not([hidden])';
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
 /**
  * The `mutation-event` event represents something that happened.
@@ -320,4 +416,12 @@ 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,7 +11,7 @@ Author:  Bruce B. Anderson
 
 Issues / pr's / polyfill:  [mount-observer](https://github.com/bahrus/mount-observer)
 
-Last Update: 2024-2-14
+Last Update: 2024-2-18
 
 ## Benefits of this API
 
@@ -153,7 +153,9 @@ const observer = new MountObserver({
 })
 ```
 
-Callbacks like we see above are useful for tight coupling, and probably are unmatched in terms of performance.  However, since these rules may be of interest to multiple parties, it is useful to also provide the ability for multiple parties to subscribe to these css rules.  This can be done via:
+Callbacks like we see above are useful for tight coupling, and probably are unmatched in terms of performance.  The expression that the "do" field points to could also be a (stateful) user defined class instance.  
+
+However, since these rules may be of interest to multiple parties, it is useful to also provide the ability for multiple parties to subscribe to these css rules.  This can be done via:
 
 ## Subscribing
 
@@ -304,7 +306,7 @@ const mo = new MountObserver({
             builtIn: true
          },
          {
-            name: 'my-enhancement-first-attr',
+            name: 'my-enhancement-first-aspect',
             builtIn: true
          },
          {
@@ -339,7 +341,7 @@ MountObserver provides a breakdown of the matching attribute when encountered:
 
 ```html
 <div id=div>
-   <section class=hello my-enhancement-first-attr-wow-this-is-deep="hello"></section>
+   <section class=hello my-enhancement-first-aspect-wow-this-is-deep="hello"></section>
 </div>
 <script type=module>
    import {MountObserver} from '../MountObserver.js';
@@ -348,9 +350,9 @@ MountObserver provides a breakdown of the matching attribute when encountered:
       whereAttr:{
          hasRootIn: ['data', 'enh', 'data-enh'],
          hasBase: 'my-enhancement',
-         hasBranchIn: ['first-attr', 'second-attr', ''],
+         hasBranchIn: ['first-aspect', 'second-aspect', ''],
          hasLeafIn: {
-            'first-attr': ['wow-this-is-deep', 'have-you-considered-using-json-for-this'],
+            'first-aspect': ['wow-this-is-deep', 'have-you-considered-using-json-for-this'],
          }
       }
    });
@@ -362,7 +364,7 @@ MountObserver provides a breakdown of the matching attribute when encountered:
       //       name: 'data-my-enhancement-first-aspect-wow-this-is-deep'
       //       root: 'data',
       //       base: 'my-enhancement',
-      //       branch: 'first-attr',
+      //       branch: 'first-aspect',
       //       leaf: 'wow-this-is-deep',
       //       oldValue: null,
       //       newValue: 'good-bye'
@@ -395,7 +397,7 @@ Possibly some libraries may prefer to mix it up a bit:
 </div>
 ```
 
-To support, specify the delimiter thusly:
+To support such syntax, specify the delimiter thusly:
 
 ```JavaScript
 const mo = new MountObserver({
@@ -403,9 +405,9 @@ const mo = new MountObserver({
    whereAttr:{
       hasRootIn: ['data', 'enh', 'data-enh'],
       hasBase: ['-', 'my-enhancement'],
-      hasBranchIn: [':', ['first-attr', 'second-attr', '']],
+      hasBranchIn: [':', ['first-aspect', 'second-aspect', '']],
       hasLeafIn: {
-         'first-attr': ['--', ['wow-this-is-deep', 'have-you-considered-using-json-for-this']],
+         'first-aspect': ['--', ['wow-this-is-deep', 'have-you-considered-using-json-for-this']],
       }
    }
 });
@@ -437,3 +439,51 @@ 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
+
+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 #:
+
+```html
+<template href=#id-of-source-template></template>
+```
+
+For example:
+
+```html
+<div>Some prior stuff</div>
+<template href=#id-of-source-template>
+   <div slot=slot1>hello</div>
+   <div slot=slot2>goodbye<div>
+</template>
+<div>Some additional stuff</div>
+```
+
+When it encounters such a thing, it searches "upwardly" through the chain of ShadowRoots for a template with id=id-of-source-template (in this case), and caches them as it finds them. 
+
+Let's say the source template looks as follows:
+
+```html
+<template id=id-of-source-template>
+   This is an example of a snippet of HTML that appears repeatedly.
+   <slot name=slot1></slot>
+   <slot name=slot2></slot>
+</template>
+```
+
+What we would end up with is:
+
+
+```html
+<div>Some prior stuff</div>
+This is an example of a snippet of HTML that appears repeatedly.
+<div>hello</div>
+<div>goodbye</div>
+<div>Some additional stuff</div>
+```
+
+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.

package/package.json

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

package/types.d.ts

@@ -1,6 +1,7 @@
 export interface MountInit{
     readonly on?: CSSMatch,
     //readonly attribMatches?: Array<AttribMatch>,
+    readonly withTargetShadowRoot?: ShadowRoot, 
     readonly whereAttr?: WhereAttr,  
     readonly whereElementIntersectsWith?: IntersectionObserverInit,
     readonly whereMediaMatches?: MediaQuery,
@@ -124,9 +125,20 @@ export type attrChangeEventName = 'attr-change';
 export interface IAttrChangeEvent extends IMountEvent {
     attrChangeInfo: AttrChangeInfo,
 }
-export type attrChangeEventHander = (e: IAttrChangeEvent) => void;
-export interface AddAttrChangeEventistener{
-    addEventListener(eventName: attrChangeEventName, handler: attrChangeEventHander, options?: AddEventListenerOptions): void;
+export type attrChangeEventHandler = (e: IAttrChangeEvent) => void;
+export interface AddAttrChangeEventListener{
+    addEventListener(eventName: attrChangeEventName, handler: attrChangeEventHandler, options?: AddEventListenerOptions): void;
+}
+//#endregion
+
+//#region load event
+export type loadEventName = 'load';
+export interface ILoadEvent {
+    clone: DocumentFragment
+}
+export type loadEventHandler = (e: ILoadEvent) => void;
+export interface AddLoadEventListener{
+    addEventListener(eventName: loadEventName, handler: loadEventHandler, options?: AddEventListenerOptions): void
 }
 //#endregion