mount-observer 0.0.52 → 0.0.53

package/MountObserver.js

@@ -1,7 +1,7 @@
 import { RootMutObs } from './RootMutObs.js';
 import { bindish, bindishIt } from './bindish.js';
 export const guid = '5Pv6bHOVH0ae07opRZ8N/g';
-const mutationObserverLookup = new WeakMap();
+export const mutationObserverLookup = new WeakMap();
 const refCount = new WeakMap();
 export class MountObserver extends EventTarget {
     #mountInit;
@@ -419,17 +419,52 @@ export class MountObserver extends EventTarget {
                 await this.#compose(elToMount, 0);
             }
         }
-        await bindishIt(els, assigner);
+        await bindishIt(els, { assigner });
         this.#mount(elsToMount, initializing);
     }
     async #inspectWithin(within, initializing) {
-        await bindish(within, this.#mountInit.assigner);
+        await bindish(within, { assigner: this.#mountInit.assigner });
         await this.composeFragment(within, 0);
         const match = await this.#selector();
         const els = Array.from(within.querySelectorAll(match));
         this.#filterAndMount(els, false, initializing);
     }
 }
+export function waitForIdleNodes(nodes) {
+    return new Promise((resolve) => {
+        const mutObservers = [];
+        for (const node of nodes) {
+            const mutObs = mutationObserverLookup.get(node);
+            if (mutObs !== undefined) {
+                mutObservers.push(mutObs);
+            }
+            else {
+                const currentCount = refCount.get(node) || 0;
+                const newMutObs = new RootMutObs(node);
+                mutationObserverLookup.set(node, newMutObs);
+                refCount.set(node, currentCount + 1);
+                mutObservers.push(newMutObs);
+            }
+        }
+        if (areAllIdle(mutObservers)) {
+            resolve();
+        }
+        for (const obs of mutObservers) {
+            obs.addEventListener('is-idle', () => {
+                if (areAllIdle(mutObservers)) {
+                    resolve();
+                }
+            });
+        }
+    });
+}
+function areAllIdle(mutObs) {
+    for (const mo of mutObs) {
+        if (!mo.isIdle)
+            return false;
+    }
+    return true;
+}
 const refCountErr = 'mount-observer ref count mismatch';
 export const inclTemplQry = 'template[src^="#"]:not([hidden])';
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080

package/MountObserver.ts

@@ -11,7 +11,7 @@ import {bindish, bindishIt} from './bindish.js';
 export {MOSE} from './ts-refs/mount-observer/types';
 export const guid = '5Pv6bHOVH0ae07opRZ8N/g';
 
-const mutationObserverLookup = new WeakMap<Node, RootMutObs>();
+export const mutationObserverLookup = new WeakMap<Node, RootMutObs>();
 const refCount = new WeakMap<Node, number>();
 export class MountObserver extends EventTarget implements IMountObserver{
     
@@ -437,12 +437,12 @@ export class MountObserver extends EventTarget implements IMountObserver{
             }
             
         }
-        await bindishIt(els, assigner);
+        await bindishIt(els, {assigner});
         this.#mount(elsToMount, initializing);
     }
 
     async #inspectWithin(within: Node, initializing: boolean){
-        await bindish(within as DocumentFragment, this.#mountInit.assigner);
+        await bindish(within as DocumentFragment, {assigner: this.#mountInit.assigner});
         await this.composeFragment(within as DocumentFragment, 0);
         const match = await this.#selector();
         const els = Array.from((within as Element).querySelectorAll(match));
@@ -451,6 +451,40 @@ export class MountObserver extends EventTarget implements IMountObserver{
 
 }
 
+export function waitForIdleNodes(nodes: Array<Node>): Promise<void>{
+    return new Promise((resolve) => {
+        const mutObservers: Array<RootMutObs> = [];
+        for(const node of nodes){
+            const mutObs = mutationObserverLookup.get(node);
+            if(mutObs !== undefined){
+                mutObservers.push(mutObs);
+            }else{
+                const currentCount = refCount.get(node) || 0;
+                const newMutObs = new RootMutObs(node);
+                mutationObserverLookup.set(node, newMutObs);
+                refCount.set(node, currentCount + 1);
+                mutObservers.push(newMutObs);
+            }
+        }
+        if(areAllIdle(mutObservers)){
+            resolve();
+        }
+        for(const obs of mutObservers){
+            obs.addEventListener('is-idle', () => {
+                if(areAllIdle(mutObservers)){
+                    resolve();
+                }
+            });
+        }
+    });
+}
+
+function areAllIdle(mutObs: Array<RootMutObs>){
+    for(const mo of mutObs){
+        if(!mo.isIdle) return false;
+    }
+    return true;
+}   
 
 
 const refCountErr = 'mount-observer ref count mismatch';

package/Newish.js

@@ -1,46 +1,47 @@
 export { waitForEvent } from './waitForEvent.js';
+export const attached = Symbol.for('xyyspnstnU+CDrNVa0VnxA');
 export class Newish {
     queue = [];
     isResolved = false;
     #ce;
-    #assigner = undefined;
-    constructor(enhancedElement, itemscope, assigner) {
-        this.#assigner = assigner;
+    //#assigner: undefined | Assigner = undefined;
+    #options;
+    constructor(enhancedElement, itemscope, options) {
+        this.#options = options || { assigner: Object.assign };
         this.#do(enhancedElement, itemscope);
     }
     async #do(enhancedElement, itemscope) {
-        //if(Object.hasOwn(enhancedElement, 'host')) return;
+        if (enhancedElement[attached] === true)
+            return;
+        enhancedElement[attached] = true;
         await customElements.whenDefined(itemscope);
         const initPropVals = enhancedElement['ish'];
-        //check to make sure it didn't already get attached while waiting
-        if (initPropVals === undefined || customElements.getName(initPropVals.constructor) !== itemscope) {
-            if (enhancedElement instanceof HTMLElement) {
-                if (enhancedElement.dataset.ish) {
-                    const parsedHostProps = JSON.parse(enhancedElement.dataset.ish);
-                    this.queue.push(parsedHostProps);
-                }
-            }
-            if (initPropVals !== undefined)
-                this.queue.push(initPropVals);
-            const ce = document.createElement(itemscope);
-            if ('attachedCallback' in ce && typeof ce.attachedCallback === 'function') {
-                await ce.attachedCallback(enhancedElement);
+        if (enhancedElement instanceof HTMLElement) {
+            if (enhancedElement.dataset.ish) {
+                const parsedHostProps = JSON.parse(enhancedElement.dataset.ish);
+                this.queue.push(parsedHostProps);
             }
-            this.#ce = ce;
-            const self = this;
-            Object.defineProperty(enhancedElement, 'ish', {
-                get() {
-                    return self.#ce;
-                },
-                set(nv) {
-                    self.queue.push(nv);
-                    self.#assignGingerly();
-                },
-                enumerable: true,
-                configurable: true,
-            });
-            this.#assignGingerly();
         }
+        if (initPropVals !== undefined)
+            this.queue.push(initPropVals);
+        const ce = document.createElement(itemscope);
+        if ('attachedCallback' in ce && typeof ce.attachedCallback === 'function') {
+            await ce.attachedCallback(enhancedElement);
+        }
+        this.#ce = ce;
+        const self = this;
+        Object.defineProperty(enhancedElement, 'ish', {
+            get() {
+                return self.#ce;
+            },
+            set(nv) {
+                self.queue.push(nv);
+                self.#assignGingerly();
+            },
+            enumerable: true,
+            configurable: true,
+        });
+        this.#assignGingerly();
         //attach any itemref references
         if (enhancedElement.hasAttribute('itemref')) {
             const itemref = enhancedElement.getAttribute('itemref');
@@ -68,7 +69,6 @@ export class Newish {
         if (ce === undefined) {
             throw 500;
         }
-        //const {assignGingerly} = await import('../lib/assignGingerly.js');
         while (this.queue.length > 0) {
             const fi = this.queue.shift();
             //TODO: Provide support for a virtual slice of a very large list
@@ -76,12 +76,8 @@ export class Newish {
                 ce.$ = fi;
             }
             else {
-                if (this.#assigner !== undefined) {
-                    await this.#assigner(ce, fi);
-                }
-                else {
-                    Object.assign(ce, fi);
-                }
+                const { assigner } = this.#options;
+                await assigner(ce, fi);
             }
         }
     }

package/Newish.ts

@@ -1,50 +1,50 @@
-import { Assigner } from './ts-refs/mount-observer/types.js';
+import { Assigner, BindishOptions } from './ts-refs/mount-observer/types.js';
 
 export {waitForEvent} from './waitForEvent.js';
+export const attached = Symbol.for('xyyspnstnU+CDrNVa0VnxA');
 export class Newish{
     queue: Array<any> = [];
     isResolved = false;
     #ce: HTMLElement | undefined;
 
-    #assigner: undefined | Assigner = undefined;
+    //#assigner: undefined | Assigner = undefined;
+    #options: BindishOptions;
 
-    constructor(enhancedElement: Element, itemscope: string, assigner?: Assigner){
-        this.#assigner = assigner;
+    constructor(enhancedElement: Element, itemscope: string, options?: BindishOptions){
+        this.#options = options || {assigner: Object.assign};
         this.#do(enhancedElement, itemscope);
     }
 
     async #do(enhancedElement: Element, itemscope: string){
-        //if(Object.hasOwn(enhancedElement, 'host')) return;
+        if((<any>enhancedElement)[attached] === true) return;
+        (<any>enhancedElement)[attached] = true;
         await customElements.whenDefined(itemscope);
         const initPropVals = (<any>enhancedElement)['ish'];
-        //check to make sure it didn't already get attached while waiting
-        if(initPropVals === undefined ||  customElements.getName(initPropVals.constructor) !== itemscope){
-            if(enhancedElement instanceof HTMLElement){
-                if(enhancedElement.dataset.ish){
-                    const parsedHostProps = JSON.parse(enhancedElement.dataset.ish);
-                    this.queue.push(parsedHostProps);
-                }
-            }
-            if(initPropVals !== undefined) this.queue.push(initPropVals);
-            const ce = document.createElement(itemscope);
-            if('attachedCallback' in ce && typeof ce.attachedCallback === 'function'){
-                await ce.attachedCallback(enhancedElement)
+        if(enhancedElement instanceof HTMLElement){
+            if(enhancedElement.dataset.ish){
+                const parsedHostProps = JSON.parse(enhancedElement.dataset.ish);
+                this.queue.push(parsedHostProps);
             }
-            this.#ce = ce;
-            const self = this;
-            Object.defineProperty(enhancedElement, 'ish', {
-                get(){
-                    return self.#ce;
-                },
-                set(nv: any){
-                    self.queue.push(nv);
-                    self.#assignGingerly();
-                },
-                enumerable: true,
-                configurable: true,
-            });
-            this.#assignGingerly();
         }
+        if(initPropVals !== undefined) this.queue.push(initPropVals);
+        const ce = document.createElement(itemscope);
+        if('attachedCallback' in ce && typeof ce.attachedCallback === 'function'){
+            await ce.attachedCallback(enhancedElement)
+        }
+        this.#ce = ce;
+        const self = this;
+        Object.defineProperty(enhancedElement, 'ish', {
+            get(){
+                return self.#ce;
+            },
+            set(nv: any){
+                self.queue.push(nv);
+                self.#assignGingerly();
+            },
+            enumerable: true,
+            configurable: true,
+        });
+        this.#assignGingerly();
         //attach any itemref references
         if(enhancedElement.hasAttribute('itemref')){
             const itemref = enhancedElement.getAttribute('itemref')!;
@@ -72,18 +72,15 @@ export class Newish{
         if(ce === undefined){
             throw 500;
         }
-        //const {assignGingerly} = await import('../lib/assignGingerly.js');
         while(this.queue.length > 0 ){
             const fi = this.queue.shift();
             //TODO: Provide support for a virtual slice of a very large list
             if(Array.isArray(fi)){
                 (<any>ce).$ = fi;
             }else{
-                if(this.#assigner !== undefined){
-                    await this.#assigner(ce, fi);
-                }else{
-                    Object.assign(ce, fi);
-                }
+                const {assigner} = this.#options;
+                await assigner!(ce, fi);
+
             }
             
         }

package/RootMutObs.js

@@ -1,8 +1,11 @@
 export class RootMutObs extends EventTarget {
+    #idleTimeout = 20; //TODO: make this configurable
+    #idlePointer = 0;
     constructor(rootNode) {
         super();
         this.#mutationObserver = new MutationObserver(mutationRecords => {
             this.dispatchEvent(new MutationEvent(mutationRecords));
+            this.#triggerIsIdle();
         });
         this.#mutationObserver.observe(rootNode, {
             subtree: true,
@@ -10,6 +13,19 @@ export class RootMutObs extends EventTarget {
             attributes: true,
             attributeOldValue: true,
         });
+        this.#triggerIsIdle();
+    }
+    #isIdle = false;
+    get isIdle() {
+        return this.#isIdle;
+    }
+    #triggerIsIdle() {
+        this.#isIdle = false;
+        clearTimeout(this.#idlePointer);
+        this.#idlePointer = setTimeout(() => {
+            this.#isIdle = true;
+            this.dispatchEvent(new Event('is-idle'));
+        }, this.#idleTimeout);
     }
     #mutationObserver;
     disconnect() {

package/RootMutObs.ts

@@ -1,17 +1,34 @@
 import {mutationEventName, AddMutationEventListener} from './ts-refs/mount-observer/types';
 
 export class RootMutObs extends EventTarget{
+    #idleTimeout = 20; //TODO: make this configurable
+    #idlePointer = 0;
     constructor(rootNode: Node ){
         super();
+        
         this.#mutationObserver = new MutationObserver(mutationRecords => {
-            this.dispatchEvent(new MutationEvent(mutationRecords))
-        })
+            this.dispatchEvent(new MutationEvent(mutationRecords));
+            this.#triggerIsIdle();
+        });
         this.#mutationObserver.observe(rootNode, {
             subtree: true,
             childList: true,
             attributes: true,
             attributeOldValue: true,
         });
+        this.#triggerIsIdle();
+    }
+    #isIdle = false;
+    get isIdle(){
+        return this.#isIdle;
+    }
+    #triggerIsIdle(){
+        this.#isIdle = false;
+        clearTimeout(this.#idlePointer);
+        this.#idlePointer = setTimeout(()=>{
+            this.#isIdle = true;
+            this.dispatchEvent(new Event('is-idle'));
+        }, this.#idleTimeout)
     }
     #mutationObserver: MutationObserver;
     disconnect(){
@@ -38,3 +55,4 @@ export class MutationEvent extends Event implements MutationEvent {
 
 
 
+

package/bindish.js

@@ -1,14 +1,14 @@
 export const itemscopeQry = '[itemscope*="-"]';
-export async function bindish(fragment, assigner) {
+export async function bindish(fragment, options) {
     const scopes = Array.from(fragment.querySelectorAll(`${itemscopeQry}`));
-    await bindishIt(scopes, assigner);
+    await bindishIt(scopes, options);
 }
-export async function bindishIt(scopes, assigner) {
+export async function bindishIt(scopes, options) {
     for (const scope of scopes) {
         const itemscope = scope.getAttribute('itemscope');
         if (itemscope && itemscope.includes('-') && !(scope.ish instanceof HTMLElement)) {
             const { Newish } = await import('./Newish.js');
-            new Newish(scope, itemscope, assigner);
+            new Newish(scope, itemscope, options);
         }
     }
 }

package/bindish.ts

@@ -1,17 +1,17 @@
-import { Assigner } from './ts-refs/mount-observer/types.js';
+import { Assigner, BindishOptions } from './ts-refs/mount-observer/types.js';
 
 export const itemscopeQry = '[itemscope*="-"]';
-export async function bindish(fragment: DocumentFragment, assigner?: Assigner){
+export async function bindish(fragment: DocumentFragment, options?: BindishOptions){
     const scopes = Array.from(fragment.querySelectorAll(`${itemscopeQry}`));
-    await bindishIt(scopes, assigner);
+    await bindishIt(scopes, options);
 }
 
-export async function bindishIt(scopes: Array<Element>, assigner?: Assigner){
+export async function bindishIt(scopes: Array<Element>, options?: BindishOptions){
     for(const scope of scopes){
         const itemscope = scope.getAttribute('itemscope');
         if(itemscope && itemscope.includes('-') && !((<any>scope).ish instanceof HTMLElement)){
             const {Newish} = await import('./Newish.js');
-            new Newish(scope, itemscope, assigner);
+            new Newish(scope, itemscope, options);
         }
     }
 }

package/package.json

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

package/ts-refs/mount-observer/types.d.ts

@@ -1,4 +1,3 @@
-//import { MountObserver } from "./MountObserver";
 
 export interface JSONSerializableMountInit{
     readonly on?: CSSMatch,
@@ -208,6 +207,11 @@ export interface MOSE<TSynConfig=any>
 
 }
 
+export interface BindishOptions{
+    assigner?: Assigner,
+    waitFor?: string,
+}
+
 //#endregion
 
 

package/ts-refs/per-each/types.d.ts

@@ -11,6 +11,8 @@ export interface AllProps extends EndUserProps{
     listProp: string;
     itemProp: string;
     ish: EventTarget & HasIshList;
+    itemTemplate: HTMLTemplateElement;
+    emc: any;
     //updateCnt: number;
 }