mount-observer 0.0.49 → 0.0.51

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) {
@@ -224,6 +220,9 @@ export class MountObserver extends EventTarget {
                 }
             }
             this.#filterAndMount(elsToInspect, true, false);
+            for (const el of elsToInspect) {
+                await this.#inspectWithin(el, false);
+            }
         }, { signal: this.#abortController.signal });
         await this.#inspectWithin(within, true);
     }
@@ -420,23 +419,19 @@ 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()));
+        const match = await this.#selector();
+        const els = Array.from(within.querySelectorAll(match));
         this.#filterAndMount(els, false, initializing);
     }
 }
 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{
@@ -237,6 +235,9 @@ export class MountObserver extends EventTarget implements IMountObserver{
                 }
             }
             this.#filterAndMount(elsToInspect, true, false);
+            for(const el of elsToInspect){
+                await this.#inspectWithin(el, false);
+            }
         }, {signal: this.#abortController.signal});
         
         await this.#inspectWithin(within, true);
@@ -436,28 +437,25 @@ 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()));
+        const match = await this.#selector();
+        const els = Array.from((within as Element).querySelectorAll(match));
         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.51",
   "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 

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

@@ -1,4 +1,5 @@
 import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+import { HasIshList } from '../trans-render/dss/types';
 
 export interface EndUserProps extends IEnhancement{
     statement: string;
@@ -7,6 +8,8 @@ export interface EndUserProps extends IEnhancement{
 export interface AllProps extends EndUserProps{
     listProp: string;
     itemProp: string;
+    ish: EventTarget & HasIshList;
+    //updateCnt: number;
 }
 
 export type AP = AllProps;
@@ -19,6 +22,7 @@ export type BAP = AP & BEAllProps;
 
 export interface Actions{
     parse(self: BAP): PAP;
-    hydrate(self: BAP): ProPAP;
+    init(self: BAP): ProPAP;
+    hydrate(self: BAP)
 }
 

package/ts-refs/trans-render/dss/types.d.ts

@@ -184,6 +184,11 @@ export interface PIP<TProp = any, TElement = Element> extends EventListenerObjec
     readonly outEvtName: string;
 }
 
-export interface HasIshList extends HTMLElement{
+//TODO:  move to mount observer
+export interface HasIsh {
+    ish: EventTarget;
+}
+
+export interface HasIshList {
     ishList: Array<any>;
 }

package/ts-refs/trans-render/froop/types.d.ts

@@ -1,6 +1,7 @@
 import { IMountObserver } from '../../mount-observer/types';
 import { Scope} from '../lib/types';
 import { WrapperConfig } from '../XV/types';
+import {XForm} from '../types';
 
 export interface IEventConfig<MCProps = any, MCActions = MCProps, TAction = Action>{
     on?: string,
@@ -215,7 +216,7 @@ export type Compacts<TProps = any, TActions = TProps> =
     | Partial<{[key in `pass_length_of_${keyof TProps & string}_to_${keyof TProps & string}`]: number}>
     | Partial<{[key in `echo_${keyof TProps & string}_to_${keyof TProps & string}`]: number}>
     | Partial<{[key in `echo_${keyof TProps & string}_to_${keyof TProps & string}_after`]: keyof TProps}>
-    | Partial<{[key in `when_${keyof TProps & string}_changes_invoke_${keyof TActions & string}`]: number}>
+    | Partial<{[key in `when_${keyof TProps & string}_changes_call_${keyof TActions & string}`]: number}>
     | Partial<{[key in `when_${keyof TProps & string}_changes_toggle_${keyof TProps & string}`]: number}>
     | Partial<{[key in `when_${keyof TProps & string}_changes_inc_${keyof TProps & string}_by`]: number}>
 ;
@@ -454,7 +455,7 @@ export interface ICompact{
 interface CompactStatement {
     srcKey: string,
     destKey: string,
-    op: 'toggle' | 'negate' | 'invoke' | 'pass_length' | 'echo' | 'inc',
+    op: 'toggle' | 'negate' | 'call' | 'pass_length' | 'echo' | 'inc',
     rhsIsDynamic: boolean
 }
 

package/waitForIsh.js

@@ -2,7 +2,7 @@ export function waitForIsh(el) {
     return new Promise((resolve, reject) => {
         const ish = el['ish']; // [TODO] should we make this something that can
         // be passed in, more generic function -- waitForProperty?
-        if (ish) {
+        if (ish instanceof EventTarget) {
             resolve(ish);
         }
         else {

package/waitForIsh.ts

@@ -2,7 +2,7 @@ export function waitForIsh(el: Element){
     return new Promise((resolve, reject) => {
         const ish = (<any>el)['ish']; // [TODO] should we make this something that can
         // be passed in, more generic function -- waitForProperty?
-        if (ish) {
+        if (ish instanceof EventTarget) {
             resolve(ish);
         } else {
             // If the element is not yet defined, wait for it to be defined