Define the dojo/diagnostics message

[edhager]

Define the structure of the message that will be used by dojo/diagnostics. The message will be used in postMessage calls as well as serialized through web sockets.

Because we are using it with postMessage, each message needs a property that can be used to identify it as a dojo/diagnostics message.

[rorticus]

Just some thoughts from today.

We're going to need a widget instance identifier. I talked to @agubler and it sounds like it might not have to be wrapped in our "has" check. If we just use a simple incrementing number (each widget gets a new number in the constructor) we'll be able to pass that value in our events to uniquely identify a widget instance.

Our method could simply be defined as a type with some info. Each event type is an interface so as to make the typing easier.

type DiagnosticsSimpleObject = string | number | DiagnosticsMessageInfo;

export interface DiagnosticsMessageInfo {
    [key: string]: DiagnosticsSimpleObject | DiagnosticsSimpleObject[];
}

type WidgetIdentifier = number;

export interface BaseWidgetEvent {
    widgetId: WidgetIdentifier;
}

export interface RenderWidgetEvent extends BaseWidgetEvent {
    vdom: any;
}

export interface DiagnosticEventTypes {
    'render.widget': RenderWidgetEvent;
    'invalidate.widget': BaseWidgetEvent;
}

function dlog<K extends keyof DiagnosticEventTypes>(eventId: K, info: DiagnosticEventTypes[K]);
function dlog(eventId: string, info: DiagnosticsMessageInfo) {
    window.postMessage({
        eventId,
        info
    }, '*');
}

And then to use it, say to log a widget render,

// render subtree render
// this message would let us know
//  - a projector has updated
//  - a widget subtree has rendered
dlog('render.widget', {
  widgetId: this.widgetId,
  vdom: dNode
});

Or a widget invalidation,

// invalidate log
// this message would let us know WHICH widget
// caused a re-render
dlog('invalidate.widget', {
    widgetId: ths.widgetId
});

[rorticus]

Tweaked the format a little bit, but for the most part, I think it's going to work :)

https://github.com/rorticus/widget-core/tree/diagnostics
https://github.com/rorticus/diagnostics
https://github.com/rorticus/cli-build-app/tree/diagnostics