mount-observer 0.0.44 → 0.0.45

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.45",
   "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": {

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-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/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

@@ -74,7 +74,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/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,
@@ -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/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];