mount-observer 0.0.14 → 0.0.16

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,97 +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);
-        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();
+        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);
@@ -177,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));
@@ -238,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, {});
@@ -250,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) {
@@ -279,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':
@@ -387,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.
@@ -435,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.
 
@@ -284,9 +284,9 @@ So let's say we want to insist that on custom elements, we must have the data- p
 
 And we want to support an alternative, more semantic sounding prefix to data, say enh-*, endorsed by [this proposal](https://github.com/WICG/webcomponents/issues/1000).
 
-Here's what the api provides:
+Here's what the api **doesn't** provide:
 
-## Option 1 -- The carpal syndrome syntax
+## Rejected option -- The carpal syndrome syntax
 
 ```JavaScript
 import {MountObserver} from '../MountObserver.js';
@@ -320,7 +320,7 @@ const mo = new MountObserver({
 });
 ```
 
-## Option 2 -- The DRY Way
+## Supported -- The DRY Way
 
 ```JavaScript
 import {MountObserver} from '../MountObserver.js';
@@ -360,16 +360,18 @@ MountObserver provides a breakdown of the matching attribute when encountered:
       console.log(e);
       // {
       //    matchingElement,
-      //    attrChangeInfo:{
-      //       name: 'data-my-enhancement-first-aspect-wow-this-is-deep'
-      //       root: 'data',
-      //       base: 'my-enhancement',
-      //       branch: 'first-aspect',
-      //       leaf: 'wow-this-is-deep',
-      //       oldValue: null,
-      //       newValue: 'good-bye'
+      //    attrChangeInfo:[{
       //       idx: 0,
-      //    }
+      //       oldValue: null,
+      //       newValue: 'good-bye',
+      //       parts:{
+      //          name: 'data-my-enhancement-first-aspect-wow-this-is-deep'
+      //          root: 'data',
+      //          base: 'my-enhancement',
+      //          branch: 'first-aspect',
+      //          leaf: 'wow-this-is-deep',
+      //       }
+      //    }]
       // }
    });
    mo.observe(div);
@@ -443,9 +445,9 @@ So what this does is only check for the presence of an element with tag name "my
 
 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.
 
-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?
+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 a template tags with an href attribute starting with #:
+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>
@@ -487,7 +489,7 @@ 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.
+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

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.14",
+  "version": "0.0.16",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",

package/types.d.ts

@@ -5,7 +5,7 @@ export interface MountInit{
     readonly whereAttr?: WhereAttr,  
     readonly whereElementIntersectsWith?: IntersectionObserverInit,
     readonly whereMediaMatches?: MediaQuery,
-    readonly whereInstanceOf?: Array<typeof Node>, //[TODO] What's the best way to type this?,
+    readonly whereInstanceOf?: Array<{new(): Element}>,
     readonly whereSatisfies?: PipelineProcessor<boolean>,
     readonly import?: ImportString | [ImportString, ImportAssertions] | PipelineProcessor,
     readonly do?: {
@@ -21,13 +21,18 @@ export interface MountInit{
     //  */
     // readonly ignoreInitialMatches?: boolean,
 }
+
+export interface RootCnfg{
+    start: string,
+    context: 'BuiltIn' | 'CustomElement' | 'Both'
+}
+
+//export type RootAttrOptions = Array<string | RootCnfg>;
+export type delimiter = string;
 export interface WhereAttr{
-    hasBase: string | [string, string],
-    hasBranchIn?: Array<string> | [string, Array<string>],
-    hasRootIn?: Array<string | {
-        path: string,
-        context: 'BuiltIn' | 'CustomElement' | 'Both'
-    }>,
+    hasBase: string | [delimiter, string],
+    hasBranchIn?: Array<string> | [delimiter, Array<string>],
+    hasRootIn?: Array<RootCnfg>,
 }
 type CSSMatch = string;
 type ImportString = string;
@@ -70,15 +75,20 @@ export interface AddMutationEventListener {
 }
 //#endregion
 
-interface AttrChangeInfo{
+interface AttrParts{
     name: string,
     root?: string,
     base?: string,
     branch?: string,
     leaf?: string, //TODO
+    rootCnfg?: RootCnfg
+}
+
+interface AttrChangeInfo{
     oldValue: string | null,
     newValue: string | null,
     idx: number,
+    parts: AttrParts,
     //parsedNewValue?: any,
 }
 
@@ -123,7 +133,7 @@ export interface AddDisconnectEventListener {
 //#region attribute change event
 export type attrChangeEventName = 'attr-change';
 export interface IAttrChangeEvent extends IMountEvent {
-    attrChangeInfo: AttrChangeInfo,
+    attrChangeInfos: Array<AttrChangeInfo>,
 }
 export type attrChangeEventHandler = (e: IAttrChangeEvent) => void;
 export interface AddAttrChangeEventListener{

package/doWhereAttr.js

@@ -1,43 +0,0 @@
-import { AttrChangeEvent } from "./MountObserver.js";
-export function doWhereAttr(whereAttr, attributeName, target, oldValue, mo) {
-    const { hasRootIn, hasBase, hasBranchIn } = whereAttr;
-    const name = attributeName;
-    let restOfName = name;
-    let root;
-    let branch;
-    let idx = 0;
-    const hasBaseIsString = typeof hasBase === 'string';
-    const baseSelector = hasBaseIsString ? hasBase : hasBase[1];
-    const rootToBaseDelimiter = hasBaseIsString ? '-' : hasBase[0];
-    if (hasRootIn !== undefined) {
-        for (const rootTest in hasRootIn) {
-            if (restOfName.startsWith(rootTest)) {
-                root = rootTest;
-                restOfName = restOfName.substring(root.length + rootToBaseDelimiter.length);
-                break;
-            }
-        }
-    }
-    if (!restOfName.startsWith(baseSelector))
-        return;
-    restOfName = restOfName.substring(hasBase.length);
-    if (hasBranchIn) {
-        for (const branchTest in hasBranchIn) {
-            if (restOfName.startsWith(branchTest)) {
-                branch = branchTest;
-                break;
-            }
-        }
-    }
-    const newValue = target.getAttribute(attributeName);
-    const attrChangeInfo = {
-        name,
-        root,
-        base: baseSelector,
-        branch,
-        oldValue,
-        newValue,
-        idx
-    };
-    mo.dispatchEvent(new AttrChangeEvent(target, attrChangeInfo));
-}