mount-observer 0.0.45 → 0.0.47

package/MountObserver.js

@@ -58,17 +58,21 @@ export class MountObserver extends EventTarget {
         return this.#calculatedSelector;
     }
     async composeFragment(fragment, level) {
-        const bis = fragment.querySelectorAll(inclTemplQry);
+        const bis = fragment.querySelectorAll(`${inclTemplQry},${itemscopeQry}`);
         for (const bi of bis) {
             await this.#compose(bi, level);
         }
     }
     async #compose(el, level) {
-        if (!el.hasAttribute('src')) {
-            return;
+        if (el.hasAttribute('src')) {
+            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);
         }
-        const { compose } = await import('./compose.js');
-        await compose(this, el, level);
     }
     #templLookUp = new Map();
     findByID(id, fragment) {
@@ -393,7 +397,7 @@ export class MountObserver extends EventTarget {
         return returnSet;
     }
     async #filterAndMount(els, checkMatch, initializing) {
-        const { whereSatisfies, whereInstanceOf } = this.#mountInit;
+        const { whereSatisfies, whereInstanceOf, assigner } = this.#mountInit;
         const match = await this.#selector();
         const elsToMount = els.filter(x => {
             if (checkMatch) {
@@ -415,6 +419,12 @@ 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);
+            }
+        }
         this.#mount(elsToMount, initializing);
     }
     async #inspectWithin(within, initializing) {
@@ -425,6 +435,7 @@ 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

@@ -69,18 +69,23 @@ export class MountObserver extends EventTarget implements IMountObserver{
     }
 
     async composeFragment(fragment: DocumentFragment, level: number){
-        const bis = fragment.querySelectorAll(inclTemplQry) as NodeListOf<HTMLTemplateElement>;
+        const bis = fragment.querySelectorAll(`${inclTemplQry},${itemscopeQry}`) as NodeListOf<HTMLTemplateElement>;
         for(const bi of bis){
             await this.#compose(bi, level);
         }
     }
 
+
     async #compose(el: HTMLTemplateElement, level: number){
-        if(!el.hasAttribute('src')){
-            return;
+        if(el.hasAttribute('src')){
+            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);
         }
-        const {compose} = await import('./compose.js');
-        await compose(this, el, level);
     }
     #templLookUp: Map<string, HTMLElement> = new Map();
     findByID(id: string, fragment: DocumentFragment): HTMLElement | null{
@@ -410,7 +415,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
     }
 
     async #filterAndMount(els: Array<Element>, checkMatch: boolean, initializing: boolean){
-        const {whereSatisfies, whereInstanceOf} = this.#mountInit;
+        const {whereSatisfies, whereInstanceOf, assigner} = this.#mountInit;
         const match = await this.#selector();
         const elsToMount = els.filter(x => {
             if(checkMatch){
@@ -428,6 +433,13 @@ export class MountObserver extends EventTarget implements IMountObserver{
             if(elToMount.matches(inclTemplQry)){
                 await this.#compose(elToMount as HTMLTemplateElement, 0)
             }
+            
+        }
+        for(const el of els){
+            if(el.matches(itemscopeQry)){
+                const {Newish} = await import('./Newish.js');
+                new Newish(el, el.getAttribute('itemscope')!, assigner);
+            }
         }
         this.#mount(elsToMount, initializing);
     }
@@ -444,6 +456,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
 
 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.js

@@ -0,0 +1,69 @@
+export { waitForEvent } from './waitForEvent.js';
+export class Newish {
+    queue = [];
+    isResolved = false;
+    #ce;
+    #assigner = undefined;
+    constructor(enhancedElement, itemscope, assigner) {
+        this.#assigner = assigner;
+        this.#do(enhancedElement, itemscope);
+    }
+    async #do(enhancedElement, itemscope) {
+        //if(Object.hasOwn(enhancedElement, 'host')) return;
+        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);
+            }
+            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();
+        }
+        this.isResolved = true;
+        enhancedElement.dispatchEvent(new Event('ishAttached'));
+    }
+    async #assignGingerly() {
+        let ce = this.#ce;
+        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)) {
+                ce.$ = fi;
+            }
+            else {
+                if (this.#assigner !== undefined) {
+                    await this.#assigner(ce, fi);
+                }
+                else {
+                    Object.assign(ce, fi);
+                }
+            }
+        }
+    }
+}

package/Newish.ts

@@ -0,0 +1,73 @@
+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;
+
+    constructor(enhancedElement: Element, itemscope: string, assigner?: (target: any, source: any) => Promise<void>){
+        this.#assigner = assigner;
+        this.#do(enhancedElement, itemscope);
+    }
+
+    async #do(enhancedElement: Element, itemscope: string){
+        //if(Object.hasOwn(enhancedElement, 'host')) return;
+        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)
+            }
+            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();
+        }
+        
+        this.isResolved = true;
+        enhancedElement.dispatchEvent(new Event('ishAttached'));
+    }
+
+    async #assignGingerly(){
+        let ce = this.#ce!;
+        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);
+                }
+            }
+            
+        }
+    }
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
@@ -17,6 +17,10 @@
       "default": "./MountObserver.js",
       "types": "./MountObserver.ts"
     },
+    "./Newish.js": {
+      "default": "./Newish.js",
+      "types": "./Newish.ts"
+    },
     "./Synthesizer.js": {
       "default": "./Synthesizer.js",
       "types": "./Synthesizer.ts"
@@ -24,6 +28,14 @@
     "./compose.js": {
       "default": "./compose.js",
       "types": "./compose.ts"
+    },
+    "./waitForEvent.js": {
+      "default": "./waitForEvent.js",
+      "types": "./waitForEvent.ts"
+    },
+    "./waitForIsh.js": {
+      "default": "./waitForIsh.js",
+      "types": "./waitForIsh.ts"
     }
   },
   "files": [

package/ts-refs/be-flashy/types.d.ts

@@ -0,0 +1,27 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+import {StringWithAutocompleteOptions} from '../trans-render/types';
+
+export interface EndUserProps extends IEnhancement{
+    duration: number,
+    attr: StringWithAutocompleteOptions<
+        |'value'
+        |'textContent'
+        |'innerHTML'
+        |'shadowRoot'
+    >,
+    css: string,
+}
+
+export interface AllProps extends EndUserProps{}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps;
+
+export interface Actions{
+    hydrate(self: BAP): ProPAP;
+}

package/ts-refs/be-joining/types.d.ts

@@ -0,0 +1,26 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+import {AllProps as XPAsAllProps} from '../xp-as/types';
+
+export interface EndUserProps extends IEnhancement{
+    xpAsAttr: string;
+}
+
+export interface AllProps extends EndUserProps{
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps;
+
+export interface Actions {
+    hydrate(self: BAP): ProPAP;
+}
+
+export interface Factor{
+    NameOfProp: string,
+    xpAs: XPAsAllProps,
+}

package/ts-refs/be-observing/types.d.ts

@@ -46,8 +46,16 @@ export interface ObservingParameters{
     punt: boolean,
     mappings?: Array<AndIfThen>,
     aggKey: StringWithAutocompleteOptions<aggKeys>,
+    interpolatingExpr: string,
     JSExpr: string,
     ONExpr: string,
+    action: 
+        | 'set' 
+        | 'toggle' 
+        | 'increment' 
+        | 'decrement'
+        | 'set-class' 
+        | 'set-part'
     //aggregateRemoteVals?: 'Union' | 'Conjunction' | 'ObjectAssign' | 'Sum' | 'Product' | 'ArrayPush'
 }
 

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

@@ -24,7 +24,8 @@ export interface MountInit extends JSONSerializableMountInit{
     readonly withTargetShadowRoot?: ShadowRoot, 
     readonly whereInstanceOf?: Array<{new(): Element}>,
     readonly whereSatisfies?: PipelineProcessor<boolean>,
-    readonly do?: MountObserverCallbacks
+    readonly do?: MountObserverCallbacks,
+    readonly assigner?: (target: any, source: any) => Promise<void>,
     // /**
     //  * 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/trans-render/asmr/types.d.ts

@@ -72,6 +72,14 @@ export interface ASMROptions<TProp = any>{
 export interface SetOptions<TProp = any> extends ASMROptions<TProp>{
     valToDisplay?: (v: TProp) => string;
     allowUnsafe?: boolean;
+    action?: 
+        |'set' 
+        |'toggle' 
+        |'increment' 
+        |'decrement' 
+        |'set-class'
+        |'set-part'
+    ;
 }
 
 export interface AbsOptions<TProp = any> {

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

@@ -25,6 +25,10 @@ export type DirectionalScopeSigils =
      * modulo
      */
     |'%'
+    /**
+     * itemscoped host
+     */
+    |'$'
     ;
 
 export type AttrSigils =
@@ -51,6 +55,16 @@ export type asOptions =
     | 'boolean|number'
 ;
 
+export interface $copeDetail{
+    ceName?: string,
+    itemProp?: string,
+}
+
+export interface $ScopeHierarchy {
+    home: Element;
+    satellites?: Array<Element>;
+}
+
 export interface Specifier {
     /** Directional Scope Sigil */
     dss?: DirectionalScopeSigils,
@@ -106,9 +120,21 @@ export interface Specifier {
     
     as?: asOptions
         
-    
+    /**
+     * is a scope query within the aria-[row|col|row]index[text]
+     */
     isModulo?: boolean;
+    /**
+     * Specify which aria-[?]index to use
+     */
     modulo?: Modulo;
+
+    /**
+     * itemscope hierarchy domain specifier
+     */
+    is$cope?: boolean;
+
+    $copeDetail?: $copeDetail
 }
 
 export type Modulo = 'aria-rowindex' | 'aria-colindex' | 'aria-rowindextext'
@@ -126,7 +152,7 @@ export type CSSSelector = string;
 
 /**
  * starts with a dash, typically all kebab case 
- * inferrered prop name will be camel cased based on this.
+ * inferred prop name will be camel cased based on this.
  */
 export type MarkerString = string;
 
@@ -156,4 +182,8 @@ export interface PIP<TProp = any, TElement = Element> extends EventListenerObjec
     disconnect();
     toString(nv: TProp): string;
     readonly outEvtName: string;
+}
+
+export interface HasIshList extends HTMLElement{
+    ishList: Array<any>;
 }

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

@@ -319,7 +319,7 @@ export interface PropInfo{
     ip?: boolean;
 }
 
-export type ConstString = String;
+export type ConstString = string;
 
 export type NameOfProp = string;
 

package/ts-refs/xp-as/types.d.ts

@@ -0,0 +1,20 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+
+export interface EndUserProps extends IEnhancement{
+}
+
+export interface AllProps extends EndUserProps{
+    props: EventTarget;
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps;
+
+export interface Actions {
+
+}

package/waitForEvent.js

@@ -0,0 +1,12 @@
+export function waitForEvent(et, eventName, failureEventName) {
+    return new Promise((resolved, rejected) => {
+        et.addEventListener(eventName, e => {
+            resolved(e);
+        }, { once: true });
+        if (failureEventName !== undefined) {
+            et.addEventListener(failureEventName, e => {
+                rejected(e);
+            }, { once: true });
+        }
+    });
+}

package/waitForEvent.ts

@@ -0,0 +1,13 @@
+export function waitForEvent<TEvent extends Event = Event>(et: EventTarget, eventName: string, failureEventName?: string): Promise<TEvent>{
+    return new Promise((resolved, rejected) => {
+        et.addEventListener(eventName, e => {
+            resolved(e as TEvent);
+        }, {once: true});
+        if(failureEventName !== undefined){
+            et.addEventListener(failureEventName, e => {
+                rejected(e as TEvent);
+            },  {once: true});
+        }
+
+    });
+}

package/waitForIsh.js

@@ -0,0 +1,20 @@
+export function waitForIsh(el) {
+    return new Promise((resolve, reject) => {
+        const ish = el['ish'];
+        if (ish) {
+            resolve(ish);
+        }
+        else {
+            // If the element is not yet defined, wait for it to be defined
+            el.addEventListener('ishAttached', () => {
+                const ish = el['ish'];
+                if (ish) {
+                    resolve(ish);
+                }
+                else {
+                    reject(new Error('ish not found'));
+                }
+            }, { once: true });
+        }
+    });
+}

package/waitForIsh.ts

@@ -0,0 +1,19 @@
+export function waitForIsh(el: Element){
+    return new Promise((resolve, reject) => {
+        const ish = (<any>el)['ish'];
+        if (ish) {
+            resolve(ish);
+        } else {
+            // If the element is not yet defined, wait for it to be defined
+            el.addEventListener('ishAttached', () => {
+                const ish = (<any>el)['ish'];
+                if (ish) {
+                    resolve(ish);
+                } else {
+                    reject(new Error('ish not found'));
+                }
+            }, { once: true });
+            
+        }
+    });
+}