mount-observer 0.0.104 → 0.0.106

package/Events.js

@@ -0,0 +1,42 @@
+//TODO:  make thes external
+// https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
+/**
+ * The `mutation-event` event represents something that happened.
+ * We can document it here.
+ */
+export class MountEvent extends Event {
+    mountedElement;
+    initializing;
+    static eventName = 'mount';
+    constructor(mountedElement, initializing) {
+        super(MountEvent.eventName);
+        this.mountedElement = mountedElement;
+        this.initializing = initializing;
+    }
+}
+export class DismountEvent extends Event {
+    dismountedElement;
+    static eventName = 'dismount';
+    constructor(dismountedElement) {
+        super(DismountEvent.eventName);
+        this.dismountedElement = dismountedElement;
+    }
+}
+export class DisconnectEvent extends Event {
+    disconnectedElement;
+    static eventName = 'disconnect';
+    constructor(disconnectedElement) {
+        super(DisconnectEvent.eventName);
+        this.disconnectedElement = disconnectedElement;
+    }
+}
+export class AttrChangeEvent extends Event {
+    mountedElement;
+    attrChangeInfos;
+    static eventName = 'attrChange';
+    constructor(mountedElement, attrChangeInfos) {
+        super(AttrChangeEvent.eventName);
+        this.mountedElement = mountedElement;
+        this.attrChangeInfos = attrChangeInfos;
+    }
+}

package/Events.ts

@@ -0,0 +1,45 @@
+import {MountInit, IMountObserver, AddMutationEventListener, 
+    MutationEvent, dismountEventName, mountEventName, IMountEvent, IDismountEvent,
+    disconnectedEventName, IDisconnectEvent, IAttrChangeEvent, attrChangeEventName, AttrChangeInfo, loadEventName, ILoadEvent,
+    AttrParts,
+    MOSE, WeakDual,
+    MountObserverOptions,
+    Assigner,
+    RefType
+} from './ts-refs/mount-observer/types';
+//TODO:  make thes external
+// https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
+/**
+ * The `mutation-event` event represents something that happened.
+ * We can document it here.
+ */
+export class MountEvent extends Event implements IMountEvent {
+    static eventName: mountEventName = 'mount';
+  
+    constructor(public mountedElement: Element, public initializing: boolean) {
+      super(MountEvent.eventName);
+    }
+}
+
+export class DismountEvent extends Event implements IDismountEvent{
+    static eventName: dismountEventName = 'dismount';
+
+    constructor(public dismountedElement: Element){
+        super(DismountEvent.eventName);
+    }
+}
+
+export class DisconnectEvent extends Event implements IDisconnectEvent{
+    static eventName: disconnectedEventName = 'disconnect';
+
+    constructor(public disconnectedElement: Element){
+        super(DisconnectEvent.eventName);
+    }
+}
+
+export class AttrChangeEvent extends Event implements IAttrChangeEvent{
+    static eventName: attrChangeEventName = 'attrChange';
+    constructor(public mountedElement: Element, public attrChangeInfos: Array<AttrChangeInfo>){
+        super(AttrChangeEvent.eventName);
+    }
+}

package/MountObserver.js

@@ -1,6 +1,6 @@
 import { RootMutObs } from './RootMutObs.js';
 import { bindish, bindishIt } from './bindish.js';
-import './refid/hostish.js';
+import './refid/hostish.js'; // gets embedded even if not used
 export const guid = '5Pv6bHOVH0ae07opRZ8N/g';
 export const wasItemReffed = Symbol.for('8aA6xB8+PkScmivaslBk5Q');
 export const mutationObserverLookup = new WeakMap();
@@ -73,6 +73,7 @@ export class MountObserver extends EventTarget {
         }
     }
     async #compose(el, level) {
+        //[TODO]: load async, not used often
         const src = el.getAttribute('src');
         if (src === null || src.length < 2)
             return;
@@ -84,6 +85,7 @@ export class MountObserver extends EventTarget {
     }
     #templLookUp = new Map();
     #searchForComment(refName, fragment) {
+        //get rid of
         const iterator = document.evaluate(`//comment()[.="${refName}"]`, fragment, null, XPathResult.ANY_TYPE, null);
         //console.log({xpathResult})
         try {
@@ -94,7 +96,9 @@ export class MountObserver extends EventTarget {
             return null;
         }
     }
-    async findByID(refName, fragment, refType) {
+    async findByID(
+    //[TODO]: make external, not always used
+    refName, fragment, refType) {
         if (this.#templLookUp.has(refName))
             return this.#templLookUp.get(refName);
         let templ = null;
@@ -262,6 +266,7 @@ export class MountObserver extends EventTarget {
                     elsToInspect.push(target);
                 }
                 const deletedElements = Array.from(removedNodes).filter(x => x instanceof Element);
+                const { DisconnectEvent } = await import('./Events.js');
                 for (const deletedElement of deletedElements) {
                     this.#disconnected.add(deletedElement);
                     if (doDisconnect !== undefined) {
@@ -271,6 +276,7 @@ export class MountObserver extends EventTarget {
                 }
             }
             if (attrChangeInfosMap !== undefined) {
+                const { AttrChangeEvent } = await import('./Events.js');
                 for (const [key, value] of attrChangeInfosMap) {
                     this.dispatchEvent(new AttrChangeEvent(key, value));
                 }
@@ -283,6 +289,7 @@ export class MountObserver extends EventTarget {
         await this.#inspectWithin(within, true);
     }
     static synthesize(within, customElement, mose) {
+        //TODO:  make external
         mose.type = 'mountobserver';
         const name = customElements.getName(customElement);
         if (name === null)
@@ -350,65 +357,65 @@ export class MountObserver extends EventTarget {
                 }
                 match[guid].add(this);
             }
+            const { MountEvent } = await import('./Events.js');
             this.dispatchEvent(new MountEvent(match, initializing));
             //should we automatically call readAttrs?
             //the thinking is it might make more sense to call that after mounting
             this.#mountedList?.push(new WeakRef(match));
         }
     }
-    readAttrs(match, branchIndexes) {
-        const fullListOfAttrs = this.#fullListOfEnhancementAttrs;
-        const attrChangeInfos = [];
-        const oldValue = null;
-        if (fullListOfAttrs !== undefined) {
-            const attrParts = this.#attrParts;
-            for (let idx = 0, ii = fullListOfAttrs.length; idx < ii; idx++) {
-                const parts = attrParts[idx];
-                const { branchIdx } = parts;
-                if (branchIndexes !== undefined) {
-                    if (!branchIndexes.has(branchIdx))
-                        continue;
-                }
-                const name = fullListOfAttrs[idx];
-                const newValue = match.getAttribute(name);
-                attrChangeInfos.push({
-                    idx,
-                    isSOfTAttr: false,
-                    newValue,
-                    oldValue,
-                    name,
-                    parts
-                });
-            }
-        }
-        const { observedAttrsWhenMounted } = this.#mountInit;
-        if (observedAttrsWhenMounted !== undefined) {
-            for (const observedAttr of observedAttrsWhenMounted) {
-                const attrIsString = typeof observedAttr === 'string';
-                const name = attrIsString ? observedAttr : observedAttr.name;
-                let mapsTo;
-                let newValue = match.getAttribute(name);
-                if (!attrIsString) {
-                    const { customParser, instanceOf, mapsTo: mt, valIfNull } = observedAttr;
-                    if (instanceOf || customParser)
-                        throw 'NI';
-                    if (newValue === null)
-                        newValue = valIfNull;
-                    mapsTo = mt;
-                }
-                attrChangeInfos.push({
-                    isSOfTAttr: true,
-                    newValue,
-                    oldValue,
-                    name,
-                    mapsTo
-                });
-            }
-        }
-        return attrChangeInfos;
-    }
+    // readAttrs(match: Element, branchIndexes?: Set<number>){
+    //     //TODO:  externalize
+    //     const fullListOfAttrs = this.#fullListOfEnhancementAttrs;
+    //     const attrChangeInfos: Array<AttrChangeInfo> = [];
+    //     const oldValue = null;
+    //     if(fullListOfAttrs !== undefined){
+    //         const attrParts = this.#attrParts
+    //         for(let idx = 0, ii = fullListOfAttrs.length; idx < ii; idx++){
+    //             const parts = attrParts![idx];
+    //             const {branchIdx} = parts;
+    //             if(branchIndexes !== undefined){
+    //                 if(!branchIndexes.has(branchIdx)) continue;
+    //             }
+    //             const name = fullListOfAttrs[idx];
+    //             const newValue = match.getAttribute(name);
+    //             attrChangeInfos.push({
+    //                 idx,
+    //                 isSOfTAttr: false,
+    //                 newValue,
+    //                 oldValue,
+    //                 name,
+    //                 parts
+    //             });
+    //         }
+    //     }
+    //     const {observedAttrsWhenMounted} = this.#mountInit;
+    //     if(observedAttrsWhenMounted !== undefined){
+    //         for(const observedAttr of observedAttrsWhenMounted){
+    //             const attrIsString = typeof observedAttr === 'string';
+    //             const name = attrIsString ? observedAttr : observedAttr.name;
+    //             let mapsTo: string | undefined;
+    //             let newValue = match.getAttribute(name);
+    //             if(!attrIsString){
+    //                 const {customParser, instanceOf, mapsTo: mt, valIfNull} = observedAttr;
+    //                 if(instanceOf || customParser) throw 'NI';
+    //                 if(newValue === null) newValue = valIfNull;
+    //                 mapsTo = mt;
+    //             }
+    //             attrChangeInfos.push({
+    //                 isSOfTAttr: true,
+    //                 newValue,
+    //                 oldValue,
+    //                 name,
+    //                 mapsTo
+    //             });
+    //         }
+    //     }
+    //     return attrChangeInfos;
+    // }
     async #dismount(unmatching) {
         const onDismount = this.#mountInit.do?.dismount;
+        const { DismountEvent } = await import('./Events.js');
         for (const unmatch of unmatching) {
             if (onDismount !== undefined) {
                 onDismount(unmatch, this, {});
@@ -519,6 +526,7 @@ export class MountObserver extends EventTarget {
         this.#filterAndMount(els, within, false, initializing);
     }
 }
+//ToDO:  make external
 export function waitForIdleNodes(nodes, idleTimeout) {
     const mountInit = {
         idleTimeout
@@ -550,6 +558,7 @@ export function waitForIdleNodes(nodes, idleTimeout) {
         }
     });
 }
+//make external
 function areAllIdle(mutObs) {
     for (const mo of mutObs) {
         if (!mo.isIdle)
@@ -559,45 +568,4 @@ function areAllIdle(mutObs) {
 }
 const refCountErr = 'mount-observer ref count mismatch';
 export const inclTemplQry = 'template[src^="#"]:not([hidden]),template[src^="!"]:not([hidden])';
-// https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
-/**
- * The `mutation-event` event represents something that happened.
- * We can document it here.
- */
-export class MountEvent extends Event {
-    mountedElement;
-    initializing;
-    static eventName = 'mount';
-    constructor(mountedElement, initializing) {
-        super(MountEvent.eventName);
-        this.mountedElement = mountedElement;
-        this.initializing = initializing;
-    }
-}
-export class DismountEvent extends Event {
-    dismountedElement;
-    static eventName = 'dismount';
-    constructor(dismountedElement) {
-        super(DismountEvent.eventName);
-        this.dismountedElement = dismountedElement;
-    }
-}
-export class DisconnectEvent extends Event {
-    disconnectedElement;
-    static eventName = 'disconnect';
-    constructor(disconnectedElement) {
-        super(DisconnectEvent.eventName);
-        this.disconnectedElement = disconnectedElement;
-    }
-}
-export class AttrChangeEvent extends Event {
-    mountedElement;
-    attrChangeInfos;
-    static eventName = 'attrChange';
-    constructor(mountedElement, attrChangeInfos) {
-        super(AttrChangeEvent.eventName);
-        this.mountedElement = mountedElement;
-        this.attrChangeInfos = attrChangeInfos;
-    }
-}
 //const hasRootInDefault =  ['data', 'enh', 'data-enh']

package/MountObserver.ts

@@ -9,7 +9,7 @@ import {MountInit, IMountObserver, AddMutationEventListener,
 } from './ts-refs/mount-observer/types';
 import {RootMutObs} from './RootMutObs.js';
 import {bindish, bindishIt} from './bindish.js';
-import './refid/hostish.js';
+import './refid/hostish.js';  // gets embedded even if not used
 export {MOSE} from './ts-refs/mount-observer/types';
 export const guid = '5Pv6bHOVH0ae07opRZ8N/g';
 export const wasItemReffed = Symbol.for('8aA6xB8+PkScmivaslBk5Q');
@@ -88,6 +88,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
 
 
     async #compose(el: HTMLTemplateElement, level: number){
+        //[TODO]: load async, not used often
         const src = el.getAttribute('src');
         if(src === null || src.length < 2) return;
         const refType = src[0] as RefType;
@@ -99,6 +100,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
     }
     #templLookUp: Map<string, HTMLElement> = new Map();
     #searchForComment(refName: string, fragment: Node){
+        //get rid of
         const iterator = document.evaluate(
         `//comment()[.="${refName}"]`,
         fragment,
@@ -115,6 +117,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
         }
     }
     async findByID(
+        //[TODO]: make external, not always used
         refName: string, fragment: DocumentFragment, 
         refType: RefType): Promise<HTMLElement | DocumentFragment | null>{
         if(this.#templLookUp.has(refName)) return this.#templLookUp.get(refName)!;
@@ -288,6 +291,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
                 }
 
                 const deletedElements = Array.from(removedNodes).filter(x => x instanceof Element) as Array<Element>;
+                const {DisconnectEvent} = await import('./Events.js');
                 for(const deletedElement of deletedElements){
                     this.#disconnected.add(deletedElement);
                     if(doDisconnect !== undefined){
@@ -298,6 +302,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
 
             }
             if(attrChangeInfosMap !== undefined){
+                const {AttrChangeEvent} = await import('./Events.js');
                 for(const [key, value] of attrChangeInfosMap){
                     this.dispatchEvent(new AttrChangeEvent(key, value))
                 }
@@ -312,6 +317,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
     }
 
     static synthesize(within: Document | ShadowRoot, customElement: {new(): HTMLElement}, mose: MOSE){
+        //TODO:  make external
         mose.type = 'mountobserver';
         const name = customElements.getName(customElement);
         if(name === null) throw 400;
@@ -377,6 +383,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
                 }
                 (<any>match)[guid].add(this);
             }
+            const {MountEvent} = await import('./Events.js');
             this.dispatchEvent(new MountEvent(match, initializing));
             //should we automatically call readAttrs?
             //the thinking is it might make more sense to call that after mounting
@@ -385,62 +392,64 @@ export class MountObserver extends EventTarget implements IMountObserver{
         }
     }
 
-    readAttrs(match: Element, branchIndexes?: Set<number>){
-        const fullListOfAttrs = this.#fullListOfEnhancementAttrs;
-        const attrChangeInfos: Array<AttrChangeInfo> = [];
-        const oldValue = null;
-        if(fullListOfAttrs !== undefined){
-            const attrParts = this.#attrParts
+    // readAttrs(match: Element, branchIndexes?: Set<number>){
+    //     //TODO:  externalize
+    //     const fullListOfAttrs = this.#fullListOfEnhancementAttrs;
+    //     const attrChangeInfos: Array<AttrChangeInfo> = [];
+    //     const oldValue = null;
+    //     if(fullListOfAttrs !== undefined){
+    //         const attrParts = this.#attrParts
             
-            for(let idx = 0, ii = fullListOfAttrs.length; idx < ii; idx++){
-                const parts = attrParts![idx];
-                const {branchIdx} = parts;
-                if(branchIndexes !== undefined){
-                    if(!branchIndexes.has(branchIdx)) continue;
-                }
-                const name = fullListOfAttrs[idx];
+    //         for(let idx = 0, ii = fullListOfAttrs.length; idx < ii; idx++){
+    //             const parts = attrParts![idx];
+    //             const {branchIdx} = parts;
+    //             if(branchIndexes !== undefined){
+    //                 if(!branchIndexes.has(branchIdx)) continue;
+    //             }
+    //             const name = fullListOfAttrs[idx];
                 
-                const newValue = match.getAttribute(name);
+    //             const newValue = match.getAttribute(name);
                 
-                attrChangeInfos.push({
-                    idx,
-                    isSOfTAttr: false,
-                    newValue,
-                    oldValue,
-                    name,
-                    parts
-                });
-            }
-
-        }
-        const {observedAttrsWhenMounted} = this.#mountInit;
-        if(observedAttrsWhenMounted !== undefined){
-            for(const observedAttr of observedAttrsWhenMounted){
-                const attrIsString = typeof observedAttr === 'string';
-                const name = attrIsString ? observedAttr : observedAttr.name;
-                let mapsTo: string | undefined;
-                let newValue = match.getAttribute(name);
-                if(!attrIsString){
-                    const {customParser, instanceOf, mapsTo: mt, valIfNull} = observedAttr;
-                    if(instanceOf || customParser) throw 'NI';
-                    if(newValue === null) newValue = valIfNull;
-                    mapsTo = mt;
-                }
-                attrChangeInfos.push({
-                    isSOfTAttr: true,
-                    newValue,
-                    oldValue,
-                    name,
-                    mapsTo
-                });
-            }
-        }
-
-        return attrChangeInfos;
-    }
+    //             attrChangeInfos.push({
+    //                 idx,
+    //                 isSOfTAttr: false,
+    //                 newValue,
+    //                 oldValue,
+    //                 name,
+    //                 parts
+    //             });
+    //         }
+
+    //     }
+    //     const {observedAttrsWhenMounted} = this.#mountInit;
+    //     if(observedAttrsWhenMounted !== undefined){
+    //         for(const observedAttr of observedAttrsWhenMounted){
+    //             const attrIsString = typeof observedAttr === 'string';
+    //             const name = attrIsString ? observedAttr : observedAttr.name;
+    //             let mapsTo: string | undefined;
+    //             let newValue = match.getAttribute(name);
+    //             if(!attrIsString){
+    //                 const {customParser, instanceOf, mapsTo: mt, valIfNull} = observedAttr;
+    //                 if(instanceOf || customParser) throw 'NI';
+    //                 if(newValue === null) newValue = valIfNull;
+    //                 mapsTo = mt;
+    //             }
+    //             attrChangeInfos.push({
+    //                 isSOfTAttr: true,
+    //                 newValue,
+    //                 oldValue,
+    //                 name,
+    //                 mapsTo
+    //             });
+    //         }
+    //     }
+
+    //     return attrChangeInfos;
+    // }
 
     async #dismount(unmatching: Array<Element>){
-        const onDismount = this.#mountInit.do?.dismount
+        const onDismount = this.#mountInit.do?.dismount;
+        const {DismountEvent} = await import('./Events.js');
         for(const unmatch of unmatching){
             if(onDismount !== undefined){
                 onDismount(unmatch, this, {});
@@ -552,6 +561,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
 
 }
 
+//ToDO:  make external
 export function waitForIdleNodes(nodes: Array<Node>, idleTimeout?: number): Promise<void>{
     const mountInit: MountInit = {
         idleTimeout
@@ -583,6 +593,7 @@ export function waitForIdleNodes(nodes: Array<Node>, idleTimeout?: number): Prom
     });
 }
 
+//make external
 function areAllIdle(mutObs: Array<RootMutObs>){
     for(const mo of mutObs){
         if(!mo.isIdle) return false;
@@ -596,41 +607,6 @@ export const inclTemplQry = 'template[src^="#"]:not([hidden]),template[src^="!"]
 
 export interface MountObserver extends IMountObserver{}
 
-// https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
-/**
- * The `mutation-event` event represents something that happened.
- * We can document it here.
- */
-export class MountEvent extends Event implements IMountEvent {
-    static eventName: mountEventName = 'mount';
-  
-    constructor(public mountedElement: Element, public initializing: boolean) {
-      super(MountEvent.eventName);
-    }
-}
-
-export class DismountEvent extends Event implements IDismountEvent{
-    static eventName: dismountEventName = 'dismount';
-
-    constructor(public dismountedElement: Element){
-        super(DismountEvent.eventName);
-    }
-}
-
-export class DisconnectEvent extends Event implements IDisconnectEvent{
-    static eventName: disconnectedEventName = 'disconnect';
-
-    constructor(public disconnectedElement: Element){
-        super(DisconnectEvent.eventName);
-    }
-}
-
-export class AttrChangeEvent extends Event implements IAttrChangeEvent{
-    static eventName: attrChangeEventName = 'attrChange';
-    constructor(public mountedElement: Element, public attrChangeInfos: Array<AttrChangeInfo>){
-        super(AttrChangeEvent.eventName);
-    }
-}
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.104",
+  "version": "0.0.106",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
@@ -69,6 +69,10 @@
       "default": "./refid/getCount.js",
       "types": "./refid/getCount.ts"
     },
+    "./refid/ism.js": {
+      "default": "./refid/ism.js",
+      "types": "./refid/ism.ts"
+    },
     "./refid/itemprops.js": {
       "default": "./refid/itemprops.js",
       "types": "./refid/itemprops.ts"

package/readAttrs.ts

@@ -0,0 +1,60 @@
+import { AttrChangeInfo, AttrParts, MountInit } from "./ts-refs/mount-observer/types";
+
+export function readAttrs(
+    match: Element, mountInit: MountInit, branchIndexes?: Set<number>,
+    fullListOfEnhancementAttrs?: string[],
+    attrParts?: AttrParts[],
+){
+        //TODO:  externalize
+        const fullListOfAttrs = fullListOfEnhancementAttrs;
+        const attrChangeInfos: Array<AttrChangeInfo> = [];
+        const oldValue = null;
+        if(fullListOfAttrs !== undefined){
+            
+            
+            for(let idx = 0, ii = fullListOfAttrs.length; idx < ii; idx++){
+                const parts = attrParts![idx];
+                const {branchIdx} = parts;
+                if(branchIndexes !== undefined){
+                    if(!branchIndexes.has(branchIdx)) continue;
+                }
+                const name = fullListOfAttrs[idx];
+                
+                const newValue = match.getAttribute(name);
+                
+                attrChangeInfos.push({
+                    idx,
+                    isSOfTAttr: false,
+                    newValue,
+                    oldValue,
+                    name,
+                    parts
+                });
+            }
+
+        }
+        const {observedAttrsWhenMounted} = mountInit;
+        if(observedAttrsWhenMounted !== undefined){
+            for(const observedAttr of observedAttrsWhenMounted){
+                const attrIsString = typeof observedAttr === 'string';
+                const name = attrIsString ? observedAttr : observedAttr.name;
+                let mapsTo: string | undefined;
+                let newValue = match.getAttribute(name);
+                if(!attrIsString){
+                    const {customParser, instanceOf, mapsTo: mt, valIfNull} = observedAttr;
+                    if(instanceOf || customParser) throw 'NI';
+                    if(newValue === null) newValue = valIfNull;
+                    mapsTo = mt;
+                }
+                attrChangeInfos.push({
+                    isSOfTAttr: true,
+                    newValue,
+                    oldValue,
+                    name,
+                    mapsTo
+                });
+            }
+        }
+
+        return attrChangeInfos;
+    }