mount-observer 0.0.44 → 0.0.46

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) {
@@ -414,6 +418,10 @@ export class MountObserver extends EventTarget {
             if (elToMount.matches(inclTemplQry)) {
                 await this.#compose(elToMount, 0);
             }
+            if (elToMount.matches(itemscopeQry)) {
+                const { Newish } = await import('./Newish.js');
+                new Newish(elToMount, elToMount.getAttribute('itemscope'), assigner);
+            }
         }
         this.#mount(elsToMount, initializing);
     }
@@ -425,6 +433,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,10 @@ export class MountObserver extends EventTarget implements IMountObserver{
             if(elToMount.matches(inclTemplQry)){
                 await this.#compose(elToMount as HTMLTemplateElement, 0)
             }
+            if(elToMount.matches(itemscopeQry)){
+                const {Newish} = await import('./Newish.js');
+                new Newish(elToMount, elToMount.getAttribute('itemscope')!, assigner);
+            }
         }
         this.#mount(elsToMount, initializing);
     }
@@ -444,6 +453,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,70 @@
+export { waitForEvent } from './waitForEvent.js';
+export class Newish extends EventTarget {
+    queue = [];
+    isResolved = false;
+    #ce;
+    #assigner = undefined;
+    constructor(enhancedElement, itemscope, assigner) {
+        super();
+        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;
+        this.dispatchEvent(new Event('resolved'));
+    }
+    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,74 @@
+export {waitForEvent} from './waitForEvent.js';
+export class Newish extends EventTarget{
+    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>){
+        super();
+        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;
+        this.dispatchEvent(new Event('resolved'));
+    }
+
+    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/compose.js

@@ -70,6 +70,7 @@ export async function compose(self, el, level) {
             }
             slot.removeAttribute('slot');
         }
+        el.dispatchEvent(new LoadEvent(clone));
     }
     if (level === 0) {
         const refs = [];
@@ -98,9 +99,11 @@ export async function compose(self, el, level) {
             el.after(clone);
         }
     }
-    if (level === 0) {
-        el.dispatchEvent(new LoadEvent(clone));
-    }
+    //moving the code down here broke be-inclusive Example2.html (but maybe it caused something else to work, so will need to revisit)
+    //check to make sure the progresive loading of css-charts works as before.
+    // if(level === 0){
+    //     el.dispatchEvent(new LoadEvent(clone));
+    // }
     if (!cloneStashed) {
         if (level !== 0 || (slots.length === 0 && el.attributes.length === 0))
             el.remove();

package/compose.ts

@@ -77,7 +77,7 @@ export async function compose(
             }
             slot.removeAttribute('slot');
         }
-        
+        el.dispatchEvent(new LoadEvent(clone));
     }
     if(level === 0){
         const refs: Array<WeakRef<Element>> = [];
@@ -85,6 +85,7 @@ export async function compose(
             refs.push(new WeakRef(child));
         }
         (<any>el)[childRefsKey] = refs;
+        
     }
     //if template has itemscope attribute, assume want to do some data binding before instantiating into
     //DOM fragment.
@@ -102,9 +103,11 @@ export async function compose(
             el.after(clone);
         }
     }
-    if(level === 0){
-        el.dispatchEvent(new LoadEvent(clone));
-    }
+    //moving the code down here broke be-inclusive Example2.html (but maybe it caused something else to work, so will need to revisit)
+    //check to make sure the progresive loading of css-charts works as before.
+    // if(level === 0){
+    //     el.dispatchEvent(new LoadEvent(clone));
+    // }
     
     if(!cloneStashed){
         if(level !== 0 || (slots.length === 0 && el.attributes.length === 0)) el.remove();

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "mount-observer",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
   "devDependencies": {
-    "@playwright/test": "1.50.0",
+    "@playwright/test": "1.51.1",
     "ssi-server": "0.0.1"
   },
   "exports": {
@@ -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,10 @@
     "./compose.js": {
       "default": "./compose.js",
       "types": "./compose.ts"
+    },
+    "./waitForEvent.js": {
+      "default": "./waitForEvent.js",
+      "types": "./waitForEvent.ts"
     }
   },
   "files": [

package/ts-refs/be-a-beacon/types.d.ts

@@ -3,6 +3,7 @@ import {IEnhancement, BEAllProps} from '../trans-render/be/types';
 export interface EndUserProps extends IEnhancement{
     eventName: string, //TODO
 }
+
 export interface AllProps extends EndUserProps{}
 
 export type AP = AllProps;

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

@@ -27,5 +27,6 @@ export interface BEConfig<TProps = any, TActions = TProps, ETProps = TProps>{
     handlers?: Handlers<ETProps, TActions>;
     positractions?: Positractions<TProps, TActions>;
     watchedBranches?: Set<number>;
+    isSleepless?: boolean;
 }
 

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-inclusive/types.d.ts

@@ -0,0 +1,28 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+import { XForm } from "../trans-render/types";
+
+export interface EndUserProps<TProps, TMethods, TElement = {}> extends IEnhancement<HTMLTemplateElement>{
+    of: string,
+    xform: XForm<TProps, TMethods, TElement>,
+    initModel?: TProps & TMethods,
+    slotMap?: any,
+}
+
+export interface AllProps<TProps, TMethods, TElement = {}> extends EndUserProps<TProps, TMethods, TElement>{
+    isParsed?: boolean,
+    model?: TProps & TMethods,
+}
+
+export type AP = AllProps<any, any, any>;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps;
+
+
+export interface Actions{
+    onInitModel(self: BAP): ProPAP;
+    startWeaving(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/css-charts/types.d.ts

@@ -0,0 +1,38 @@
+import { ITransformer } from "../trans-render/types";
+
+export interface EndUserProps {
+    chartType: 'area' | 'bar' | 'column' | 'line' | 'pie',
+    showLabels: boolean,
+    showPrimaryAxis: boolean,
+    showDataAxes: boolean,
+    hideData: boolean,
+    show2SecondaryAxes: boolean,
+}
+
+export interface AllProps extends EndUserProps{
+    $slot: HTMLSlotElement,
+    slotChangeCount: number,
+    data: Array<DataItem>,
+    isArea: boolean,
+    isBar: boolean,
+    isColumn: boolean,
+    isLine: boolean,
+    isPie: boolean,
+}
+
+export interface DataItem {
+    key: string, 
+    value: number, 
+    scaledVal: number,
+    start: number,
+    end: number,
+}
+
+export type PAP = Partial<AllProps>;
+
+export type ProPAP = Promise<PAP>;
+
+export interface Actions {
+    extractData(self: AllProps): ProPAP;
+    classify(self: AllProps): PAP;
+}

package/ts-refs/css-echarts/types.d.ts

@@ -0,0 +1,13 @@
+import {AllProps as BaseAllProps, EndUserProps as BaseEndUserProps, Actions as BaseActions} from '../css-charts/types';
+import {EChartsOption} from 'echarts';
+export interface EndUserProps extends BaseEndUserProps {
+    options: EChartsOption;
+}
+
+export interface AllProps extends EndUserProps, BaseAllProps {
+}
+
+export interface Actions extends BaseActions {
+    hydrateECharts(self: AllProps): Promise<void>;
+}
+

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 
@@ -74,7 +75,7 @@ export interface AttribMatch{
     // validator?: (v: any) => boolean;
 }
 
-export interface WeakDual<T>{
+export interface WeakDual<T extends Object>{
     weakSet: WeakSet<T>,
     setWeak: Set<WeakRef<T>>
 }

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

@@ -68,10 +68,10 @@ export interface IPropRegistrar extends IResolvableService{
     nonDryProps: Set<string>,
 }
 
-export interface IDefine extends IResolvableService{
-    custElClass: {new(): HTMLElement};
-    resolveInstanceSvcs(args: CEArgs, instance: any): Promise<void>;
-}
+// export interface IDefine extends IResolvableService{
+//     custElClass: {new(): HTMLElement};
+//     resolveInstanceSvcs(args: CEArgs, instance: any): Promise<void>;
+// }
 
 export interface IPropSvc extends IResolvableService{
     createPropBag(instance: Element): void;
@@ -114,12 +114,12 @@ export interface INewPropagator {
 
 
 
-export interface CEArgs<TProps = any, TActions = TProps, TPropInfo = PropInfo, TAction extends Action<TProps> = Action<TProps>> extends DefineArgs<TProps, TActions, TPropInfo, TAction>{
-    definer?: IDefine,
-    servers?: CEServiceClasses
-    services?: CEServices,
-    asides?: any
-}
+// export interface CEArgs<TProps = any, TActions = TProps, TPropInfo = PropInfo, TAction extends Action<TProps> = Action<TProps>> extends DefineArgs<TProps, TActions, TPropInfo, TAction>{
+//     definer?: IDefine,
+//     servers?: CEServiceClasses
+//     services?: CEServices,
+//     asides?: any
+// }
 
 export interface DynamicTransform {
     scope?: Scope,
@@ -319,7 +319,7 @@ export interface PropInfo{
     ip?: boolean;
 }
 
-export type ConstString = String;
+export type ConstString = string;
 
 export type NameOfProp = string;
 
@@ -349,7 +349,7 @@ export type Checks<TProps = any, TActions = TProps> =
     Partial<{[key in keyof TActions & string]: SetLogicOps<TProps>}>
 
 export type roundaboutOptions<TProps = any, TActions = TProps, ETProps = TProps> = {
-    vm?: TProps & TActions & RoundaboutReady | WeakRef<TProps & TActions & RoundaboutReady>,
+    vm?: TProps & TActions & RoundaboutReady,
     //for enhanced elements, pass in the container, referenced via $0.
     container?: EventTarget,
     propagate?: keyof TProps & string | Array<keyof TProps & string>,
@@ -403,7 +403,9 @@ export interface RoundaboutReady{
      * 
      * https://github.com/whatwg/dom/issues/1296
      */
-    readonly disconnectedSignal: AbortSignal
+    //readonly disconnectedSignal: AbortSignal
+
+    RAController: AbortController;
 
     /**
      * During this time, queues/buses continue to perform "bookkeeping"
@@ -413,11 +415,11 @@ export interface RoundaboutReady{
      */  
     readonly sleep?: number,
 
-    async awake(): void;
+    awake(): Promise<void>;
 
-    async nudge(): void;
+    nudge(): void;
 
-    async rock(): void;
+    rock(): void;
 }
 
 

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

@@ -1,4 +1,4 @@
-import { MountContext, PipelineStage } from "mount-observer/types";
+import { MountContext, PipelineStage } from "../mount-observer/types";
 import { ConvertOptions, Scope } from "./lib/types";
 import { EMC} from './be/types';
 
@@ -458,6 +458,11 @@ export interface TransRenderMethods{
 import {OConfig} from './froop/types';
 export interface MntCfg<TProps = any, TActions = TProps, ETProps = TProps> extends OConfig<TProps, TActions, ETProps>{
     mainTemplate: string | HTMLTemplateElement,
+    /**
+     * Only set to true if shadow dom is used and the light children play a critical role as far as 
+     * progressive enhancement.
+     */
+    appendOnClone?: boolean,
     /**
      * transform within ShadowRoot if applicable
      */

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/ts-refs/xtal-frappe-chart/types.d.ts

@@ -0,0 +1,193 @@
+//import {SimpleWCInfo} from 'may-it-be/SimpleWCInfo';
+
+declare interface WeakRef<S>{}
+
+export interface SelectedElement {
+    label: string;
+    values: any[];
+    index: number;
+}
+
+export interface SelectedElementEventDetail {
+    value: SelectedElement
+}
+
+export interface XtalFrappeChartEventNameMap {
+    'selected-element-changed': SelectedElementEventDetail;
+}
+
+export interface IAddDataPointParams {
+    label: string;
+    valueFromEachDataset: number[];
+    index?: number;
+}
+
+export interface XtalFrappeChartProps{
+    /**
+     * Data to be displayed in chart (JSON string for attribute)
+     */
+    data: HeatMapData | TabularData;
+    selectedElement: object,
+    value: object,
+    mainTemplate: HTMLTemplateElement | string,
+    clonedTemplate: DocumentFragment | undefined,
+    target: HTMLDivElement,
+    //refs: any,
+
+    /**
+     * Add new data point to chart
+     * 
+     */
+    newDataPoint: IAddDataPointParams;
+
+    /**
+     * Remove data point from chart
+    */
+    staleDataPoint: number;
+
+    /**
+     * Title of chart
+     */
+    chartTitle: string;
+
+    /**
+     * Height of chart
+     */
+    height: number;
+
+    /**
+     * Colors to be used in chart
+     */
+    colors: string[];
+
+    /**
+     * Type of chart to be displayed
+     */
+    type: ChartType;
+
+    /**
+     * Whether or not chart is navigable
+     */
+    isNavigable: boolean;
+
+    toolTipOptions: any;
+
+    isC: boolean;
+
+    chartContainerPart: WeakRef<HTMLDivElement>[];
+
+}
+
+export interface AllProps extends XtalFrappeChartProps{}
+
+
+export interface XtalFrappeChartActions{
+    createChart(self: XtalFrappeChartProps): void;
+    handleDataSelect(e: Event): void;
+}
+export type ChartType = 'axis-mixed' | 'bar' | 'line' | 'scatter' | 'pie' | 'percentage';
+
+export interface ChartOptions{
+    data?: HeatMapData | TabularData,
+    title?: string,
+    height?: number,
+    colors?: string[],
+    type?: ChartType,
+    toolTipOptions: any,
+    isNavigable: boolean,
+    
+}
+
+export interface ChartData{
+    tooltipOptions: TooltipOptions,
+    valuesOverPoints: OneOrZero,
+}
+
+export interface HeatMapData extends ChartData{
+    dataPoints: {[key: string]: number},
+    start: Date,
+    end: Date
+}
+//type TabularDataChartTypes = 'bar' | 'line';
+export interface DataSet{
+    name?: string,
+    values: number[]
+}
+export interface TabularData extends ChartData{
+    //type?: TabularDataChartTypes,
+    labels?: string[],
+    datasets?: any[],
+    yMarkers?: Marker[],
+    yRegions?: Region[],
+}
+
+export interface BarOptions{
+    spaceRatio: number,
+}
+
+export type OneOrZero = 0 | 1;
+
+export interface LineOptions{
+    dotSize: number,
+    regionFill: OneOrZero,
+    hideDots: OneOrZero,
+    hideLine: OneOrZero
+    heatLine: OneOrZero,
+
+}
+
+export type AxisMode = 'span' | 'tick'
+
+export interface AxisOptions{
+    xAxisMode?: AxisMode,
+    xIsSeries?: boolean,
+}
+
+export interface BarChartData extends TabularData{
+    barOptions?: BarOptions,
+    axisOptions?: AxisOptions
+}
+export interface LineChartData extends TabularData{
+    axisOptions?: AxisOptions,
+    lineOptions?: LineOptions
+}
+
+export type LeftRight = 'left' | 'right';
+
+export interface MarkerOptions{
+    labelPos?: LeftRight
+}
+
+export interface Marker{
+    label?: string,
+    value?: number,
+    options?: MarkerOptions
+}
+
+export interface RegionOptions{
+    labelPos?: LeftRight
+}
+
+export interface Region{
+    label?: string,
+    start?: number,
+    end?: number,
+    options?: RegionOptions,
+}
+
+export interface TooltipOptions{
+    formatTooltipX: (d: any) => string,
+    formatTooltipY: (d: any) => string,
+}
+
+/**
+ * Web component wrapper around the cool Frappe chart (https://frappe.io/charts) library.
+ */
+export abstract class XtalFrappeChartInfo{ //implements SimpleWCInfo<XtalFrappeChartProps>{
+    src: './xtal-frappe-chart.js';
+    tagName: 'xtal-frappe-chart';
+    props:  XtalFrappeChartProps;
+    methods: XtalFrappeChartActions;
+}
+
+export type Package = [XtalFrappeChartInfo];

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});
+        }
+
+    })
+}