mount-observer 0.0.49 → 0.0.50

package/MountObserver.js

@@ -1,4 +1,5 @@
 import { RootMutObs } from './RootMutObs.js';
+import { bindish, bindishIt } from './bindish.js';
 export const guid = '5Pv6bHOVH0ae07opRZ8N/g';
 const mutationObserverLookup = new WeakMap();
 const refCount = new WeakMap();
@@ -59,7 +60,7 @@ export class MountObserver extends EventTarget {
     }
     //This method is called publicly from outside mount-observer -- keep it public
     async composeFragment(fragment, level) {
-        const bis = fragment.querySelectorAll(`${inclTemplQry},${itemscopeQry}`);
+        const bis = fragment.querySelectorAll(`${inclTemplQry}`);
         for (const bi of bis) {
             await this.#compose(bi, level);
         }
@@ -69,11 +70,6 @@ export class MountObserver extends EventTarget {
             const { compose } = await import('./compose.js');
             await compose(this, el, level);
         }
-        const itemscope = el.getAttribute('itemscope');
-        if (itemscope && itemscope.includes('-')) {
-            const { Newish } = await import('./Newish.js');
-            new Newish(el, itemscope, this.#mountInit.assigner);
-        }
     }
     #templLookUp = new Map();
     findByID(id, fragment) {
@@ -420,15 +416,11 @@ export class MountObserver extends EventTarget {
                 await this.#compose(elToMount, 0);
             }
         }
-        for (const el of els) {
-            if (el.matches(itemscopeQry)) {
-                const { Newish } = await import('./Newish.js');
-                new Newish(el, el.getAttribute('itemscope'), assigner);
-            }
-        }
+        await bindishIt(els, assigner);
         this.#mount(elsToMount, initializing);
     }
     async #inspectWithin(within, initializing) {
+        await bindish(within, this.#mountInit.assigner);
         await this.composeFragment(within, 0);
         const els = Array.from(within.querySelectorAll(await this.#selector()));
         this.#filterAndMount(els, false, initializing);
@@ -436,7 +428,6 @@ export class MountObserver extends EventTarget {
 }
 const refCountErr = 'mount-observer ref count mismatch';
 export const inclTemplQry = 'template[src^="#"]:not([hidden])';
-export const itemscopeQry = '[itemscope*="-"]';
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
 /**
  * The `mutation-event` event represents something that happened.

package/MountObserver.ts

@@ -3,9 +3,11 @@ import {MountInit, IMountObserver, AddMutationEventListener,
     disconnectedEventName, IDisconnectEvent, IAttrChangeEvent, attrChangeEventName, AttrChangeInfo, loadEventName, ILoadEvent,
     AttrParts,
     MOSE, WeakDual,
-    MountObserverOptions
+    MountObserverOptions,
+    Assigner
 } from './ts-refs/mount-observer/types';
 import {RootMutObs} from './RootMutObs.js';
+import {bindish, bindishIt} from './bindish.js';
 export {MOSE} from './ts-refs/mount-observer/types';
 export const guid = '5Pv6bHOVH0ae07opRZ8N/g';
 
@@ -70,7 +72,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
 
     //This method is called publicly from outside mount-observer -- keep it public
     async composeFragment(fragment: DocumentFragment, level: number){
-        const bis = fragment.querySelectorAll(`${inclTemplQry},${itemscopeQry}`) as NodeListOf<HTMLTemplateElement>;
+        const bis = fragment.querySelectorAll(`${inclTemplQry}`) as NodeListOf<HTMLTemplateElement>;
         for(const bi of bis){
             await this.#compose(bi, level);
         }
@@ -82,11 +84,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
             const {compose} = await import('./compose.js');
             await compose(this, el, level);
         }
-        const itemscope = el.getAttribute('itemscope');
-        if(itemscope && itemscope.includes('-')){
-            const {Newish} = await import('./Newish.js');
-            new Newish(el, itemscope, this.#mountInit.assigner);
-        }
+
     }
     #templLookUp: Map<string, HTMLElement> = new Map();
     findByID(id: string, fragment: DocumentFragment): HTMLElement | null{
@@ -436,28 +434,24 @@ export class MountObserver extends EventTarget implements IMountObserver{
             }
             
         }
-        for(const el of els){
-            if(el.matches(itemscopeQry)){
-                const {Newish} = await import('./Newish.js');
-                new Newish(el, el.getAttribute('itemscope')!, assigner);
-            }
-        }
+        await bindishIt(els, assigner);
         this.#mount(elsToMount, initializing);
     }
 
     async #inspectWithin(within: Node, initializing: boolean){
+        await bindish(within as DocumentFragment, this.#mountInit.assigner);
         await this.composeFragment(within as DocumentFragment, 0);
         const els = Array.from((within as Element).querySelectorAll(await this.#selector()));
         this.#filterAndMount(els, false, initializing);
     }
 
+}
 
 
-}
 
 const refCountErr = 'mount-observer ref count mismatch';
 export const inclTemplQry = 'template[src^="#"]:not([hidden])';
-export const itemscopeQry = '[itemscope*="-"]';
+
 export interface MountObserver extends IMountObserver{}
 
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080

package/Newish.ts

@@ -1,12 +1,14 @@
+import { Assigner } from './ts-refs/mount-observer/types.js';
+
 export {waitForEvent} from './waitForEvent.js';
 export class Newish{
     queue: Array<any> = [];
     isResolved = false;
     #ce: HTMLElement | undefined;
 
-    #assigner: undefined | ((target: any, source: any) => Promise<void>) = undefined;
+    #assigner: undefined | Assigner = undefined;
 
-    constructor(enhancedElement: Element, itemscope: string, assigner?: (target: any, source: any) => Promise<void>){
+    constructor(enhancedElement: Element, itemscope: string, assigner?: Assigner){
         this.#assigner = assigner;
         this.#do(enhancedElement, itemscope);
     }

package/bindish.js

@@ -0,0 +1,14 @@
+export const itemscopeQry = '[itemscope*="-"]';
+export async function bindish(fragment, assigner) {
+    const scopes = Array.from(fragment.querySelectorAll(`${itemscopeQry}`));
+    await bindishIt(scopes, assigner);
+}
+export async function bindishIt(scopes, assigner) {
+    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);
+        }
+    }
+}

package/bindish.ts

@@ -0,0 +1,17 @@
+import { Assigner } from './ts-refs/mount-observer/types.js';
+
+export const itemscopeQry = '[itemscope*="-"]';
+export async function bindish(fragment: DocumentFragment, assigner?: Assigner){
+    const scopes = Array.from(fragment.querySelectorAll(`${itemscopeQry}`));
+    await bindishIt(scopes, assigner);
+}
+
+export async function bindishIt(scopes: Array<Element>, assigner?: Assigner){
+    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);
+        }
+    }
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "mount-observer",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
   "devDependencies": {
-    "@playwright/test": "1.51.1",
+    "@playwright/test": "1.52.0",
     "ssi-server": "0.0.1"
   },
   "exports": {
@@ -25,6 +25,10 @@
       "default": "./Synthesizer.js",
       "types": "./Synthesizer.ts"
     },
+    "./bindish.js": {
+      "default": "./bindish.js",
+      "types": "./bindish.ts"
+    },
     "./compose.js": {
       "default": "./compose.js",
       "types": "./compose.ts"

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

@@ -19,13 +19,15 @@ export interface ObservedSourceOfTruthAttribute<TProps = any>  {
     customParser?: (newValue: string | null, oldValue: string | null, instance: Element) => any
 }
 
+export type Assigner = (target: any, source: any) => Promise<void> | void;
+
 export interface MountInit extends JSONSerializableMountInit{
     
     readonly withTargetShadowRoot?: ShadowRoot, 
     readonly whereInstanceOf?: Array<{new(): Element}>,
     readonly whereSatisfies?: PipelineProcessor<boolean>,
     readonly do?: MountObserverCallbacks,
-    readonly assigner?: (target: any, source: any) => Promise<void>,
+    readonly assigner?: Assigner,
     // /**
     //  * Purpose -- there are scenarios where we may only want to affect changes that occur after the initial 
     //  * server rendering, so we only want to mount elements that appear