@player-ui/metrics-plugin 0.0.1-next.1

package/dist/index.cjs.js

@@ -0,0 +1,374 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tapable = require('tapable');
+var beaconPlugin = require('@player-ui/beacon-plugin');
+
+const MetricsCorePluginSymbol = Symbol.for("MetricsCorePlugin");
+const MetricsViewBeaconPluginContextSymbol = Symbol.for("MetricsViewBeaconPluginContext");
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const defaultGetTime = typeof performance === "undefined" ? () => Date.now() : () => performance.now();
+const callbacks = [
+  "onFlowBegin",
+  "onFlowEnd",
+  "onInteractive",
+  "onNodeStart",
+  "onNodeEnd",
+  "onRenderStart",
+  "onRenderEnd",
+  "onUpdateStart",
+  "onUpdateEnd",
+  "onUpdate"
+];
+const _MetricsViewBeaconPlugin = class {
+  constructor(metricsPlugin) {
+    this.symbol = _MetricsViewBeaconPlugin.Symbol;
+    this.metricsPlugin = metricsPlugin;
+    this.metricsPlugin.hooks.onRenderEnd.tap("MetricsViewBeaconPlugin", (timing) => {
+      if (timing.completed && this.resolvePendingRenderTime) {
+        this.resolvePendingRenderTime(timing.duration);
+        this.resolvePendingRenderTime = void 0;
+      }
+    });
+  }
+  apply(beaconPlugin) {
+    beaconPlugin.hooks.buildBeacon.intercept({
+      context: true,
+      call: (context, beacon) => {
+        if (context && beacon.action === "viewed") {
+          context[this.symbol] = this.buildContext();
+        }
+      }
+    });
+  }
+  buildContext() {
+    return __async(this, null, function* () {
+      return {
+        renderTime: yield this.getRenderTime(),
+        requestTime: this.getRequestTime()
+      };
+    });
+  }
+  getRenderTime() {
+    return __async(this, null, function* () {
+      const { flow } = this.metricsPlugin.getMetrics();
+      if (flow) {
+        const lastItem = flow.timeline[flow.timeline.length - 1];
+        if ("render" in lastItem && lastItem.render.completed) {
+          return lastItem.render.duration;
+        }
+      }
+      return new Promise((resolve) => {
+        this.resolvePendingRenderTime = resolve;
+      });
+    });
+  }
+  getRequestTime() {
+    const { flow } = this.metricsPlugin.getMetrics();
+    return flow == null ? void 0 : flow.requestTime;
+  }
+};
+let MetricsViewBeaconPlugin = _MetricsViewBeaconPlugin;
+MetricsViewBeaconPlugin.Symbol = MetricsViewBeaconPluginContextSymbol;
+class RequestTimeWebPlugin {
+  constructor(getRequestTime) {
+    this.name = "RequestTimeWebPlugin";
+    this.getRequestTime = getRequestTime;
+  }
+  apply(metricsCorePlugin) {
+    metricsCorePlugin.hooks.resolveRequestTime.tap(this.name, () => {
+      return this.getRequestTime();
+    });
+  }
+}
+class MetricsCorePlugin {
+  constructor(options) {
+    this.name = "metrics";
+    this.symbol = MetricsCorePluginSymbol;
+    this.hooks = {
+      resolveRequestTime: new tapable.SyncBailHook(["requestTime"]),
+      onFlowBegin: new tapable.SyncHook(["update"]),
+      onFlowEnd: new tapable.SyncHook(["update"]),
+      onInteractive: new tapable.SyncHook([
+        "timing",
+        "update"
+      ]),
+      onNodeStart: new tapable.SyncHook([
+        "nodeMetrics",
+        "update"
+      ]),
+      onNodeEnd: new tapable.SyncHook([
+        "nodeMetrics",
+        "update"
+      ]),
+      onRenderStart: new tapable.SyncHook([
+        "timing",
+        "nodeMetrics",
+        "update"
+      ]),
+      onRenderEnd: new tapable.SyncHook([
+        "timing",
+        "nodeMetrics",
+        "update"
+      ]),
+      onUpdateStart: new tapable.SyncHook([
+        "timing",
+        "nodeMetrics",
+        "update"
+      ]),
+      onUpdateEnd: new tapable.SyncHook([
+        "timing",
+        "nodeMetrics",
+        "update"
+      ]),
+      onUpdate: new tapable.SyncHook(["update"])
+    };
+    this.metrics = {};
+    var _a, _b, _c;
+    this.trackRender = (_a = options == null ? void 0 : options.trackRenderTime) != null ? _a : false;
+    this.trackUpdate = (_b = options == null ? void 0 : options.trackUpdateTime) != null ? _b : false;
+    this.getTime = (_c = options == null ? void 0 : options.getTime) != null ? _c : defaultGetTime;
+    const callOnUpdate = () => {
+      this.hooks.onUpdate.call(this.metrics);
+    };
+    this.hooks.onFlowBegin.tap(this.name, callOnUpdate);
+    this.hooks.onFlowEnd.tap(this.name, callOnUpdate);
+    this.hooks.onInteractive.tap(this.name, callOnUpdate);
+    this.hooks.onNodeStart.tap(this.name, callOnUpdate);
+    this.hooks.onNodeEnd.tap(this.name, callOnUpdate);
+    this.hooks.onRenderStart.tap(this.name, callOnUpdate);
+    this.hooks.onRenderEnd.tap(this.name, callOnUpdate);
+    this.hooks.onUpdateStart.tap(this.name, callOnUpdate);
+    this.hooks.onUpdateEnd.tap(this.name, callOnUpdate);
+    callbacks.forEach((hookName) => {
+      if ((options == null ? void 0 : options[hookName]) !== void 0) {
+        this.hooks[hookName].tap("options", options == null ? void 0 : options[hookName]);
+      }
+    });
+  }
+  getMetrics() {
+    return this.metrics;
+  }
+  renderStart() {
+    var _a;
+    const timeline = (_a = this.metrics.flow) == null ? void 0 : _a.timeline;
+    if (!timeline || timeline.length === 0) {
+      return;
+    }
+    const lastItem = timeline[timeline.length - 1];
+    if ("updates" in lastItem) {
+      if (lastItem.updates.length > 0) {
+        const lastUpdate = lastItem.updates[lastItem.updates.length - 1];
+        if (lastUpdate.completed === false) {
+          return;
+        }
+      }
+      if (!lastItem.render.completed) {
+        return;
+      }
+      const update = {
+        completed: false,
+        startTime: defaultGetTime()
+      };
+      lastItem.updates.push(update);
+      this.hooks.onUpdateStart.call(update, lastItem, this.metrics);
+    } else {
+      const renderInfo = __spreadProps(__spreadValues({}, lastItem), {
+        render: {
+          completed: false,
+          startTime: defaultGetTime()
+        },
+        updates: []
+      });
+      timeline[timeline.length - 1] = renderInfo;
+      this.hooks.onRenderStart.call(renderInfo.render, renderInfo, this.metrics);
+    }
+  }
+  renderEnd() {
+    if (!this.trackRender) {
+      throw new Error("Must start the metrics-plugin with render tracking enabled");
+    }
+    const { flow } = this.metrics;
+    if (!flow) {
+      return;
+    }
+    const { timeline, interactive } = flow;
+    if (!timeline || !interactive || timeline.length === 0) {
+      return;
+    }
+    const lastItem = timeline[timeline.length - 1];
+    if (!("render" in lastItem)) {
+      return;
+    }
+    const endTime = defaultGetTime();
+    if (lastItem.render.completed) {
+      if (lastItem.updates.length === 0) {
+        return;
+      }
+      const lastUpdate = lastItem.updates[lastItem.updates.length - 1];
+      if (lastUpdate.completed === true) {
+        return;
+      }
+      const update = __spreadProps(__spreadValues({}, lastUpdate), {
+        completed: true,
+        endTime,
+        duration: endTime - lastUpdate.startTime
+      });
+      lastItem.updates[lastItem.updates.length - 1] = update;
+      this.hooks.onUpdateEnd.call(update, lastItem, this.metrics);
+    } else {
+      lastItem.render = __spreadProps(__spreadValues({}, lastItem.render), {
+        completed: true,
+        endTime,
+        duration: endTime - lastItem.startTime
+      });
+      this.hooks.onRenderEnd.call(lastItem.render, lastItem, this.metrics);
+      if (!interactive.completed) {
+        flow.interactive = __spreadProps(__spreadValues({}, interactive), {
+          completed: true,
+          duration: endTime - interactive.startTime,
+          endTime
+        });
+        this.hooks.onInteractive.call(flow.interactive, this.metrics);
+      }
+    }
+  }
+  apply(player) {
+    player.hooks.onStart.tap(this.name, (flow) => {
+      const requestTime = this.hooks.resolveRequestTime.call();
+      const startTime = defaultGetTime();
+      this.metrics = {
+        flow: {
+          id: flow.id,
+          requestTime,
+          timeline: [],
+          startTime,
+          completed: false,
+          interactive: {
+            completed: false,
+            startTime
+          }
+        }
+      };
+      this.hooks.onFlowBegin.call(this.metrics);
+    });
+    player.hooks.state.tap(this.name, (state) => {
+      if (state.status === "completed" || state.status === "error") {
+        const endTime = defaultGetTime();
+        const { flow } = this.metrics;
+        if (flow === void 0 || (flow == null ? void 0 : flow.completed) === true) {
+          return;
+        }
+        this.metrics = {
+          flow: __spreadProps(__spreadValues({}, flow), {
+            completed: true,
+            endTime,
+            duration: endTime - flow.startTime
+          })
+        };
+        const lastUpdate = flow.timeline[flow.timeline.length - 1];
+        if (lastUpdate && !lastUpdate.completed) {
+          this.metrics.flow.timeline[flow.timeline.length - 1] = __spreadProps(__spreadValues({}, lastUpdate), {
+            completed: true,
+            endTime,
+            duration: endTime - lastUpdate.startTime
+          });
+        }
+        this.hooks.onFlowEnd.call(this.metrics);
+      }
+    });
+    player.hooks.flowController.tap(this.name, (fc) => {
+      fc.hooks.flow.tap(this.name, (f) => {
+        f.hooks.transition.tap(this.name, (from, to) => {
+          const time = defaultGetTime();
+          const { flow } = this.metrics;
+          if (!flow) {
+            return;
+          }
+          const { timeline } = flow;
+          if (timeline.length > 0) {
+            const prev = timeline[timeline.length - 1];
+            if (prev.completed) {
+              throw new Error("Completing a state that's already done.");
+            }
+            timeline[timeline.length - 1] = __spreadProps(__spreadValues({}, prev), {
+              completed: true,
+              endTime: time,
+              duration: time - prev.startTime
+            });
+            this.hooks.onNodeEnd.call(timeline[timeline.length - 1]);
+          }
+          const nodeMetrics = {
+            completed: false,
+            startTime: time,
+            stateName: to.name,
+            stateType: to.value.state_type
+          };
+          timeline.push(nodeMetrics);
+          this.hooks.onNodeStart.call(nodeMetrics);
+        });
+      });
+    });
+    if (this.trackRender) {
+      player.hooks.view.tap(this.name, (v) => {
+        if (this.trackUpdate) {
+          v.hooks.onUpdate.tap(this.name, () => {
+            this.renderStart();
+          });
+        } else {
+          this.renderStart();
+        }
+      });
+      player.applyTo(beaconPlugin.BeaconPlugin.Symbol, (beaconPlugin) => new MetricsViewBeaconPlugin(this).apply(beaconPlugin));
+    }
+  }
+}
+MetricsCorePlugin.Symbol = MetricsCorePluginSymbol;
+
+exports.MetricsCorePlugin = MetricsCorePlugin;
+exports.MetricsCorePluginSymbol = MetricsCorePluginSymbol;
+exports.MetricsViewBeaconPlugin = MetricsViewBeaconPlugin;
+exports.MetricsViewBeaconPluginContextSymbol = MetricsViewBeaconPluginContextSymbol;
+exports.RequestTimeWebPlugin = RequestTimeWebPlugin;
+exports.defaultGetTime = defaultGetTime;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.d.ts

@@ -0,0 +1,146 @@
+import { PlayerPlugin, Player } from '@player-ui/player';
+import { SyncBailHook, SyncHook } from 'tapable';
+import { BeaconPluginPlugin, BeaconPlugin } from '@player-ui/beacon-plugin';
+
+declare const defaultGetTime: () => number;
+declare type Timing = {
+    /** Time this duration started (ms) */
+    startTime: number;
+} & ({
+    /** Flag set if this is currently in progress */
+    completed: false;
+} | {
+    /** The stopwatch has stopped */
+    completed: true;
+    /** The time in (ms) that the process ended */
+    endTime: number;
+    /** The elapsed time of this event (ms) */
+    duration: number;
+});
+declare type NodeMetrics = Timing & {
+    /** The type of the flow-state  */
+    stateType: string;
+    /** The name of the flow-state */
+    stateName: string;
+};
+declare type NodeRenderMetrics = NodeMetrics & {
+    /** Timing representing the initial render */
+    render: Timing;
+    /** An array of timings representing updates to the view */
+    updates: Array<Timing>;
+};
+interface PlayerFlowMetrics {
+    /** All metrics about a running flow */
+    flow?: {
+        /** The id of the flow these metrics are for */
+        id: string;
+        /** request time */
+        requestTime?: number;
+        /** A timeline of events for each node-state */
+        timeline: Array<NodeMetrics | NodeRenderMetrics>;
+        /** A timing measuring until the first interactive render */
+        interactive: Timing;
+    } & Timing;
+}
+/** Context structure for 'viewed' beacons rendering metrics */
+interface MetricsViewBeaconPluginContext {
+    /** Represents the time taken before the view is first rendered */
+    renderTime?: number;
+    /** request time */
+    requestTime?: number;
+}
+/** Simple [BeaconPluginPlugin] that adds renderTime to 'viewed' beacons data */
+declare class MetricsViewBeaconPlugin implements BeaconPluginPlugin {
+    static Symbol: symbol;
+    readonly symbol: symbol;
+    private metricsPlugin;
+    private resolvePendingRenderTime;
+    constructor(metricsPlugin: MetricsCorePlugin);
+    apply(beaconPlugin: BeaconPlugin): void;
+    private buildContext;
+    private getRenderTime;
+    private getRequestTime;
+}
+interface MetricsWebPluginOptions {
+    /** Called when a flow starts */
+    onFlowBegin?: (update: PlayerFlowMetrics) => void;
+    /** Called when a flow ends */
+    onFlowEnd?: (update: PlayerFlowMetrics) => void;
+    /** Called when a flow becomes interactive for the first time */
+    onInteractive?: (timing: Timing, update: PlayerFlowMetrics) => void;
+    /** Called when a new node is started */
+    onNodeStart?: (nodeMetrics: NodeMetrics | NodeRenderMetrics, update: PlayerFlowMetrics) => void;
+    /** Called when a node is ended */
+    onNodeEnd?: (nodeMetrics: NodeMetrics | NodeRenderMetrics, update: PlayerFlowMetrics) => void;
+    /** Called when rendering for a node begins */
+    onRenderStart?: (timing: Timing, nodeMetrics: NodeRenderMetrics, update: PlayerFlowMetrics) => void;
+    /** Called when rendering for a node ends */
+    onRenderEnd?: (timing: Timing, nodeMetrics: NodeRenderMetrics, update: PlayerFlowMetrics) => void;
+    /** Called when an update for a node begins */
+    onUpdateStart?: (timing: Timing, nodeMetrics: NodeRenderMetrics, update: PlayerFlowMetrics) => void;
+    /** Called when an update for a node ends */
+    onUpdateEnd?: (timing: Timing, nodeMetrics: NodeRenderMetrics, update: PlayerFlowMetrics) => void;
+    /** Callback to subscribe to updates for any metric */
+    onUpdate?: (metrics: PlayerFlowMetrics) => void;
+    /**
+     * A flag to set if you want to track render times for nodes
+     * This requires that the UI calls `renderEnd()` when the view is painted.
+     */
+    trackRenderTime?: boolean;
+    /**
+     * A flag to set if you want to track update times for nodes
+     * This requires that the UI calls `renderEnd()` when the view is painted.
+     */
+    trackUpdateTime?: boolean;
+    /** A function to get the current time (in ms) */
+    getTime?: () => number;
+}
+/**
+ * A plugin that enables request time metrics
+ */
+declare class RequestTimeWebPlugin {
+    getRequestTime: () => number | undefined;
+    name: string;
+    constructor(getRequestTime: () => number | undefined);
+    apply(metricsCorePlugin: MetricsCorePlugin): void;
+}
+/**
+ * A plugin that enables gathering of render metrics
+ */
+declare class MetricsCorePlugin implements PlayerPlugin {
+    name: string;
+    static Symbol: symbol;
+    readonly symbol: symbol;
+    protected trackRender: boolean;
+    protected trackUpdate: boolean;
+    protected getTime: () => number;
+    readonly hooks: {
+        resolveRequestTime: SyncBailHook<number, any, any, any>;
+        onFlowBegin: SyncHook<PlayerFlowMetrics, any, any>;
+        onFlowEnd: SyncHook<PlayerFlowMetrics, any, any>;
+        onInteractive: SyncHook<Timing, PlayerFlowMetrics, any>;
+        onNodeStart: SyncHook<NodeMetrics | NodeRenderMetrics, any, any>;
+        onNodeEnd: SyncHook<NodeMetrics | NodeRenderMetrics, any, any>;
+        onRenderStart: SyncHook<Timing, NodeRenderMetrics, PlayerFlowMetrics>;
+        onRenderEnd: SyncHook<Timing, NodeRenderMetrics, PlayerFlowMetrics>;
+        onUpdateStart: SyncHook<Timing, NodeRenderMetrics, PlayerFlowMetrics>;
+        onUpdateEnd: SyncHook<Timing, NodeRenderMetrics, PlayerFlowMetrics>;
+        onUpdate: SyncHook<PlayerFlowMetrics, any, any>;
+    };
+    private metrics;
+    constructor(options?: MetricsWebPluginOptions);
+    /**
+     * Fetch the metrics of the current flow
+     */
+    getMetrics(): PlayerFlowMetrics;
+    /** Called when the UI layer wishes to start a timer for rendering */
+    private renderStart;
+    /** Called when the UI layer wants to end the rendering timer */
+    renderEnd(): void;
+    apply(player: Player): void;
+}
+
+declare const MetricsCorePluginSymbol: unique symbol;
+declare const MetricsViewBeaconPluginContextSymbol: unique symbol;
+
+export { MetricsCorePlugin, MetricsCorePluginSymbol, MetricsViewBeaconPlugin, MetricsViewBeaconPluginContext, MetricsViewBeaconPluginContextSymbol, MetricsWebPluginOptions, NodeMetrics, NodeRenderMetrics, PlayerFlowMetrics, RequestTimeWebPlugin, Timing, defaultGetTime };