@player-ui/metrics-plugin 0.8.0--canary.307.9645 → 0.8.0-next.1

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/metrics/core/src/metrics.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/metrics/core/src/symbols.ts"],"sourcesContent":["import type { Player, PlayerPlugin } from \"@player-ui/player\";\nimport { SyncHook, SyncBailHook } from \"tapable-ts\";\nimport type { BeaconPluginPlugin, BeaconArgs } from \"@player-ui/beacon-plugin\";\nimport { BeaconPlugin } from \"@player-ui/beacon-plugin\";\nimport {\n  MetricsCorePluginSymbol,\n  MetricsViewBeaconPluginContextSymbol,\n} from \"./symbols\";\n\n// Try to use performance.now() but fall back to Date.now() if you can't\nexport const defaultGetTime =\n  typeof performance === \"undefined\"\n    ? () => Date.now()\n    : () => performance.now();\n\nexport type Timing = {\n  /** Time this duration started (ms) */\n  startTime: number;\n} & (\n  | {\n      /** Flag set if this is currently in progress */\n      completed: false;\n    }\n  | {\n      /** The stopwatch has stopped */\n      completed: true;\n\n      /** The time in (ms) that the process ended */\n      endTime: number;\n\n      /** The elapsed time of this event (ms) */\n      duration: number;\n    }\n);\n\nexport type NodeMetrics = Timing & {\n  /** The type of the flow-state  */\n  stateType: string;\n\n  /** The name of the flow-state */\n  stateName: string;\n};\n\nexport type NodeRenderMetrics = NodeMetrics & {\n  /** Timing representing the initial render */\n  render: Timing;\n\n  /** An array of timings representing updates to the view */\n  updates: Array<Timing>;\n};\n\nexport interface PlayerFlowMetrics {\n  /** All metrics about a running flow */\n  flow?: {\n    /** The id of the flow these metrics are for */\n    id: string;\n\n    /** request time */\n    requestTime?: number;\n\n    /** A timeline of events for each node-state */\n    timeline: Array<NodeMetrics | NodeRenderMetrics>;\n\n    /** A timing measuring until the first interactive render */\n    interactive: Timing;\n  } & Timing;\n}\n\nconst callbacks = [\n  \"onFlowBegin\",\n  \"onFlowEnd\",\n  \"onInteractive\",\n  \"onNodeStart\",\n  \"onNodeEnd\",\n  \"onRenderStart\",\n  \"onRenderEnd\",\n  \"onUpdateStart\",\n  \"onUpdateEnd\",\n  \"onUpdate\",\n] as const;\n\n/** Context structure for 'viewed' beacons rendering metrics */\nexport interface MetricsViewBeaconPluginContext {\n  /** Represents the time taken before the view is first rendered */\n  renderTime?: number;\n  /** request time */\n  requestTime?: number;\n}\n\n/** Simple [BeaconPluginPlugin] that adds renderTime to 'viewed' beacons data */\nexport class MetricsViewBeaconPlugin implements BeaconPluginPlugin {\n  static Symbol = MetricsViewBeaconPluginContextSymbol;\n  public readonly symbol = MetricsViewBeaconPlugin.Symbol;\n\n  private metricsPlugin: MetricsCorePlugin;\n\n  private resolvePendingRenderTime: ((renderTime: number) => void) | undefined;\n\n  constructor(metricsPlugin: MetricsCorePlugin) {\n    this.metricsPlugin = metricsPlugin;\n    this.metricsPlugin.hooks.onRenderEnd.tap(\n      \"MetricsViewBeaconPlugin\",\n      (timing) => {\n        if (timing.completed && this.resolvePendingRenderTime) {\n          this.resolvePendingRenderTime(timing.duration);\n          this.resolvePendingRenderTime = undefined;\n        }\n      },\n    );\n  }\n\n  apply(beaconPlugin: BeaconPlugin) {\n    beaconPlugin.hooks.buildBeacon.intercept({\n      context: true,\n      call: (context: any, beacon) => {\n        if (context && (beacon as BeaconArgs).action === \"viewed\") {\n          context[this.symbol] = this.buildContext();\n        }\n      },\n    });\n  }\n\n  private async buildContext(): Promise<MetricsViewBeaconPluginContext> {\n    return {\n      renderTime: await this.getRenderTime(),\n      requestTime: this.getRequestTime(),\n    };\n  }\n\n  private async getRenderTime(): Promise<number> {\n    const { flow } = this.metricsPlugin.getMetrics();\n\n    if (flow) {\n      const lastItem = flow.timeline[flow.timeline.length - 1];\n\n      if (\"render\" in lastItem && lastItem.render.completed) {\n        return lastItem.render.duration;\n      }\n    }\n\n    return new Promise((resolve) => {\n      this.resolvePendingRenderTime = resolve;\n    });\n  }\n\n  private getRequestTime(): number | undefined {\n    const { flow } = this.metricsPlugin.getMetrics();\n\n    return flow?.requestTime;\n  }\n}\n\nexport interface MetricsWebPluginOptions {\n  /** Called when a flow starts */\n  onFlowBegin?: (update: PlayerFlowMetrics) => void;\n\n  /** Called when a flow ends */\n  onFlowEnd?: (update: PlayerFlowMetrics) => void;\n\n  /** Called when a flow becomes interactive for the first time */\n  onInteractive?: (timing: Timing, update: PlayerFlowMetrics) => void;\n\n  /** Called when a new node is started */\n  onNodeStart?: (\n    nodeMetrics: NodeMetrics | NodeRenderMetrics,\n    update: PlayerFlowMetrics,\n  ) => void;\n\n  /** Called when a node is ended */\n  onNodeEnd?: (\n    nodeMetrics: NodeMetrics | NodeRenderMetrics,\n    update: PlayerFlowMetrics,\n  ) => void;\n\n  /** Called when rendering for a node begins */\n  onRenderStart?: (\n    timing: Timing,\n    nodeMetrics: NodeRenderMetrics,\n    update: PlayerFlowMetrics,\n  ) => void;\n\n  /** Called when rendering for a node ends */\n  onRenderEnd?: (\n    timing: Timing,\n    nodeMetrics: NodeRenderMetrics,\n    update: PlayerFlowMetrics,\n  ) => void;\n\n  /** Called when an update for a node begins */\n  onUpdateStart?: (\n    timing: Timing,\n    nodeMetrics: NodeRenderMetrics,\n    update: PlayerFlowMetrics,\n  ) => void;\n\n  /** Called when an update for a node ends */\n  onUpdateEnd?: (\n    timing: Timing,\n    nodeMetrics: NodeRenderMetrics,\n    update: PlayerFlowMetrics,\n  ) => void;\n\n  /** Callback to subscribe to updates for any metric */\n  onUpdate?: (metrics: PlayerFlowMetrics) => void;\n\n  /**\n   * A flag to set if you want to track render times for nodes\n   * This requires that the UI calls `renderEnd()` when the view is painted.\n   */\n  trackRenderTime?: boolean;\n\n  /**\n   * A flag to set if you want to track update times for nodes\n   * This requires that the UI calls `renderEnd()` when the view is painted.\n   */\n  trackUpdateTime?: boolean;\n\n  /** A function to get the current time (in ms) */\n  getTime?: () => number;\n}\n\n/**\n * A plugin that enables request time metrics\n */\nexport class RequestTimeWebPlugin {\n  getRequestTime: () => number | undefined;\n  name = \"RequestTimeWebPlugin\";\n\n  constructor(getRequestTime: () => number | undefined) {\n    this.getRequestTime = getRequestTime;\n  }\n\n  apply(metricsCorePlugin: MetricsCorePlugin) {\n    metricsCorePlugin.hooks.resolveRequestTime.tap(this.name, () => {\n      return this.getRequestTime();\n    });\n  }\n}\n\n/**\n * A plugin that enables gathering of render metrics\n */\nexport class MetricsCorePlugin implements PlayerPlugin {\n  name = \"metrics\";\n\n  static Symbol = MetricsCorePluginSymbol;\n  public readonly symbol = MetricsCorePluginSymbol;\n\n  protected trackRender: boolean;\n  protected trackUpdate: boolean;\n  protected getTime: () => number;\n\n  public readonly hooks = {\n    resolveRequestTime: new SyncBailHook<[], number>(),\n\n    onFlowBegin: new SyncHook<[PlayerFlowMetrics]>(),\n    onFlowEnd: new SyncHook<[PlayerFlowMetrics]>(),\n\n    onInteractive: new SyncHook<[Timing, PlayerFlowMetrics]>(),\n\n    onNodeStart: new SyncHook<[NodeMetrics | NodeRenderMetrics]>(),\n    onNodeEnd: new SyncHook<[NodeMetrics | NodeRenderMetrics]>(),\n\n    onRenderStart: new SyncHook<\n      [Timing, NodeRenderMetrics, PlayerFlowMetrics]\n    >(),\n    onRenderEnd: new SyncHook<[Timing, NodeRenderMetrics, PlayerFlowMetrics]>(),\n\n    onUpdateStart: new SyncHook<\n      [Timing, NodeRenderMetrics, PlayerFlowMetrics]\n    >(),\n    onUpdateEnd: new SyncHook<[Timing, NodeRenderMetrics, PlayerFlowMetrics]>(),\n\n    onUpdate: new SyncHook<[PlayerFlowMetrics]>(),\n  };\n\n  private metrics: PlayerFlowMetrics = {};\n\n  constructor(options?: MetricsWebPluginOptions) {\n    this.trackRender = options?.trackRenderTime ?? false;\n    this.trackUpdate = options?.trackUpdateTime ?? false;\n    this.getTime = options?.getTime ?? defaultGetTime;\n\n    /** fn to call the update hook */\n    const callOnUpdate = () => {\n      this.hooks.onUpdate.call(this.metrics);\n    };\n\n    this.hooks.onFlowBegin.tap(this.name, callOnUpdate);\n    this.hooks.onFlowEnd.tap(this.name, callOnUpdate);\n    this.hooks.onInteractive.tap(this.name, callOnUpdate);\n    this.hooks.onNodeStart.tap(this.name, callOnUpdate);\n    this.hooks.onNodeEnd.tap(this.name, callOnUpdate);\n\n    this.hooks.onRenderStart.tap(this.name, callOnUpdate);\n    this.hooks.onRenderEnd.tap(this.name, callOnUpdate);\n\n    this.hooks.onUpdateStart.tap(this.name, callOnUpdate);\n    this.hooks.onUpdateEnd.tap(this.name, callOnUpdate);\n\n    callbacks.forEach((hookName) => {\n      if (options?.[hookName] !== undefined) {\n        (this.hooks[hookName] as any).tap(\"options\", options?.[hookName]);\n      }\n    });\n  }\n\n  /**\n   * Fetch the metrics of the current flow\n   */\n  public getMetrics(): PlayerFlowMetrics {\n    return this.metrics;\n  }\n\n  /** Called when the UI layer wishes to start a timer for rendering */\n  private renderStart(): void {\n    // Grab the last update\n    const timeline = this.metrics.flow?.timeline;\n\n    if (!timeline || timeline.length === 0) {\n      return;\n    }\n\n    const lastItem = timeline[timeline.length - 1];\n\n    if (\"updates\" in lastItem) {\n      // Get the last update, make sure it's completed\n      if (lastItem.updates.length > 0) {\n        const lastUpdate = lastItem.updates[lastItem.updates.length - 1];\n\n        if (lastUpdate.completed === false) {\n          // Starting a new render before the last one was finished.\n          // Just ignore it and include as part of 1 render time\n          return;\n        }\n      }\n\n      if (!lastItem.render.completed) {\n        // Starting a new render before the last one was finished.\n        // Just ignore it and include as part of 1 render time\n        return;\n      }\n\n      const update: Timing = {\n        completed: false,\n        startTime: defaultGetTime(),\n      };\n\n      lastItem.updates.push(update);\n\n      this.hooks.onUpdateStart.call(update, lastItem, this.metrics);\n    } else {\n      const renderInfo = {\n        ...lastItem,\n        render: {\n          completed: false,\n          startTime: defaultGetTime(),\n        },\n        updates: [],\n      } as NodeRenderMetrics;\n\n      timeline[timeline.length - 1] = renderInfo;\n\n      this.hooks.onRenderStart.call(\n        renderInfo.render,\n        renderInfo,\n        this.metrics,\n      );\n    }\n  }\n\n  /** Called when the UI layer wants to end the rendering timer */\n  public renderEnd(): void {\n    if (!this.trackRender) {\n      throw new Error(\n        \"Must start the metrics-plugin with render tracking enabled\",\n      );\n    }\n\n    const { flow } = this.metrics;\n\n    if (!flow) {\n      return;\n    }\n\n    const { timeline, interactive } = flow;\n\n    if (!timeline || !interactive || timeline.length === 0) {\n      return;\n    }\n\n    const lastItem = timeline[timeline.length - 1];\n\n    if (!(\"render\" in lastItem)) {\n      return;\n    }\n\n    // Check if this is an update or render\n    const endTime = defaultGetTime();\n\n    if (lastItem.render.completed) {\n      // This is the end of an existing update\n\n      if (lastItem.updates.length === 0) {\n        // throw new Error(\"Trying to end an update that's not in progress\");\n        return;\n      }\n\n      const lastUpdate = lastItem.updates[lastItem.updates.length - 1];\n\n      if (lastUpdate.completed === true) {\n        // throw new Error(\"Trying to end an update that's not in progress\");\n        return;\n      }\n\n      const update = {\n        ...lastUpdate,\n        completed: true,\n        endTime,\n        duration: endTime - lastUpdate.startTime,\n      };\n\n      lastItem.updates[lastItem.updates.length - 1] = update;\n      this.hooks.onUpdateEnd.call(update, lastItem, this.metrics);\n    } else {\n      lastItem.render = {\n        ...lastItem.render,\n        completed: true,\n        endTime,\n        duration: endTime - lastItem.startTime,\n      };\n      this.hooks.onRenderEnd.call(lastItem.render, lastItem, this.metrics);\n\n      if (!interactive.completed) {\n        flow.interactive = {\n          ...interactive,\n          completed: true,\n          duration: endTime - interactive.startTime,\n          endTime,\n        };\n\n        this.hooks.onInteractive.call(flow.interactive, this.metrics);\n      }\n    }\n  }\n\n  apply(player: Player): void {\n    player.hooks.onStart.tap(this.name, (flow) => {\n      const requestTime = this.hooks.resolveRequestTime.call();\n      const startTime = defaultGetTime();\n      this.metrics = {\n        flow: {\n          id: flow.id,\n          requestTime: requestTime ?? undefined,\n          timeline: [],\n          startTime,\n          completed: false,\n          interactive: {\n            completed: false,\n            startTime,\n          },\n        },\n      };\n\n      this.hooks.onFlowBegin.call(this.metrics);\n    });\n\n    player.hooks.state.tap(this.name, (state) => {\n      if (state.status === \"completed\" || state.status === \"error\") {\n        const endTime = defaultGetTime();\n        const { flow } = this.metrics;\n\n        if (flow === undefined || flow?.completed === true) {\n          return;\n        }\n\n        this.metrics = {\n          flow: {\n            ...flow,\n            completed: true,\n            endTime,\n            duration: endTime - flow.startTime,\n          },\n        };\n\n        // get the last update\n\n        const lastUpdate = flow.timeline[flow.timeline.length - 1];\n\n        if (lastUpdate && !lastUpdate.completed) {\n          (this.metrics.flow as any).timeline[flow.timeline.length - 1] = {\n            ...lastUpdate,\n            completed: true,\n            endTime,\n            duration: endTime - lastUpdate.startTime,\n          };\n        }\n\n        this.hooks.onFlowEnd.call(this.metrics);\n      }\n    });\n\n    player.hooks.flowController.tap(this.name, (fc) => {\n      fc.hooks.flow.tap(this.name, (f) => {\n        f.hooks.transition.tap(this.name, (from, to) => {\n          const time = defaultGetTime();\n          const { flow } = this.metrics;\n\n          if (!flow) {\n            return;\n          }\n\n          const { timeline } = flow;\n\n          // End the last state, and start the next one\n\n          if (timeline.length > 0) {\n            const prev = timeline[timeline.length - 1];\n\n            if (prev.completed) {\n              throw new Error(\"Completing a state that's already done.\");\n            }\n\n            timeline[timeline.length - 1] = {\n              ...prev,\n              completed: true,\n              endTime: time,\n              duration: time - prev.startTime,\n            };\n\n            this.hooks.onNodeEnd.call(timeline[timeline.length - 1]);\n          }\n\n          const nodeMetrics = {\n            completed: false,\n            startTime: time,\n            stateName: to.name,\n            stateType: to.value.state_type,\n          } as const;\n\n          timeline.push(nodeMetrics);\n          this.hooks.onNodeStart.call(nodeMetrics);\n        });\n      });\n    });\n\n    if (this.trackRender) {\n      player.hooks.view.tap(this.name, (v) => {\n        if (this.trackUpdate) {\n          v.hooks.onUpdate.tap(this.name, () => {\n            this.renderStart();\n          });\n        } else {\n          this.renderStart();\n        }\n      });\n\n      player.applyTo<BeaconPlugin>(BeaconPlugin.Symbol, (beaconPlugin) =>\n        new MetricsViewBeaconPlugin(this).apply(beaconPlugin),\n      );\n    }\n  }\n}\n\nexport default MetricsCorePlugin;\n","export const MetricsCorePluginSymbol = Symbol.for(\"MetricsCorePlugin\");\nexport const MetricsViewBeaconPluginContextSymbol = Symbol.for(\n  \"MetricsViewBeaconPluginContext\",\n);\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,68 +1,31 @@
 {
   "name": "@player-ui/metrics-plugin",
-  "version": "0.8.0--canary.307.9645",
-  "private": false,
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
-  },
-  "peerDependencies": {
-    "@player-ui/player": "0.8.0--canary.307.9645"
-  },
+  "version": "0.8.0-next.1",
+  "main": "dist/cjs/index.cjs",
   "dependencies": {
-    "@player-ui/beacon-plugin": "0.8.0--canary.307.9645",
+    "@player-ui/beacon-plugin": "0.8.0-next.1",
     "tapable-ts": "^0.2.3",
-    "@babel/runtime": "7.15.4"
-  },
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "typings": "dist/index.d.ts",
-  "sideEffects": false,
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/player-ui/player-ui"
+    "tslib": "^2.6.2"
   },
-  "bugs": {
-    "url": "https://github.com/player-ui/player-ui/issues"
+  "peerDependencies": {
+    "@player-ui/player": "0.8.0-next.1"
   },
-  "homepage": "https://player-ui.github.io",
-  "contributors": [
-    {
-      "name": "Adam Dierkens",
-      "url": "https://github.com/adierkens"
-    },
-    {
-      "name": "Spencer Hamm",
-      "url": "https://github.com/spentacular"
-    },
-    {
-      "name": "Harris Borawski",
-      "url": "https://github.com/hborawski"
-    },
-    {
-      "name": "Jeremiah Zucker",
-      "url": "https://github.com/sugarmanz"
-    },
-    {
-      "name": "Ketan Reddy",
-      "url": "https://github.com/KetanReddy"
-    },
-    {
-      "name": "Brocollie08",
-      "url": "https://github.com/brocollie08"
-    },
-    {
-      "name": "Kelly Harrop",
-      "url": "https://github.com/kharrop"
-    },
-    {
-      "name": "Alejandro Fimbres",
-      "url": "https://github.com/lexfm"
-    },
-    {
-      "name": "Rafael Campos",
-      "url": "https://github.com/rafbcampos"
+  "module": "dist/index.legacy-esm.js",
+  "types": "types/index.d.ts",
+  "bundle": "dist/MetricsPlugin.native.js",
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    "./dist/index.css": "./dist/index.css",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/cjs/index.cjs"
     }
-  ],
-  "bundle": "./dist/metrics-plugin.prod.js"
+  },
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ]
 }

package/src/index.test.ts

@@ -0,0 +1,271 @@
+import { vitest, test, expect } from "vitest";
+import type { BeaconPluginPlugin } from "@player-ui/beacon-plugin";
+import { BeaconPlugin } from "@player-ui/beacon-plugin";
+import type { InProgressState, Flow } from "@player-ui/player";
+import { Player } from "@player-ui/player";
+import type { NodeRenderMetrics } from ".";
+import {
+  MetricsCorePlugin,
+  MetricsViewBeaconPlugin,
+  RequestTimeWebPlugin,
+} from ".";
+
+const basicContentWithActions: Flow<any> = {
+  id: "test-flow",
+  views: [
+    {
+      id: "my-view",
+      actions: [
+        {
+          asset: {
+            id: "next-label-action",
+            type: "action",
+            value: "{{foo.bar}}",
+          },
+        },
+      ],
+    },
+  ],
+  navigation: {
+    BEGIN: "FLOW_1",
+    FLOW_1: {
+      startState: "VIEW_1",
+      VIEW_1: {
+        state_type: "VIEW",
+        ref: "my-view",
+        transitions: {
+          "*": "OTHER_2",
+        },
+      },
+      OTHER_2: {
+        state_type: "VIEW",
+        ref: "my-view",
+        transitions: {
+          "*": "END_Done",
+        },
+      },
+      END_Done: {
+        state_type: "END",
+        outcome: "done",
+      },
+    },
+  },
+};
+
+test("tracks metrics", () => {
+  const onUpdate = vitest.fn();
+  const metrics = new MetricsCorePlugin({ onUpdate });
+  const player = new Player({ plugins: [metrics] });
+  player.start(basicContentWithActions);
+
+  let flowMetrics = metrics.getMetrics();
+
+  /**
+   *
+   */
+  const transition = () => {
+    (player.getState() as InProgressState).controllers.flow.transition("Next");
+    flowMetrics = metrics.getMetrics();
+  };
+
+  expect(onUpdate).toBeCalledTimes(2);
+  expect(flowMetrics.flow?.completed).toBe(false);
+  expect(flowMetrics.flow?.id).toBe("test-flow");
+  expect(flowMetrics.flow?.timeline[0]).toMatchObject({
+    stateName: "VIEW_1",
+    stateType: "VIEW",
+  });
+
+  transition();
+  expect(onUpdate).toBeCalledTimes(4);
+  expect(flowMetrics.flow?.timeline[0].completed).toBe(true);
+  expect(flowMetrics.flow?.timeline).toHaveLength(2);
+  transition();
+  expect(onUpdate).toBeCalledTimes(6);
+});
+
+test("tracks metrics w/ render time", () => {
+  const onRenderEnd = vitest.fn();
+  const metrics = new MetricsCorePlugin({
+    trackRenderTime: true,
+    trackUpdateTime: true,
+    onRenderEnd,
+  });
+  const player = new Player({ plugins: [metrics] });
+  player.start(basicContentWithActions);
+  metrics.renderEnd();
+  expect(onRenderEnd).toBeCalledTimes(1);
+  const flowMetrics = metrics.getMetrics();
+
+  /**
+   *
+   */
+  const transition = () => {
+    (player.getState() as InProgressState).controllers.flow.transition("Next");
+
+    const state = player.getState();
+
+    if (state.status === "in-progress") {
+      if (
+        state.controllers.flow.current?.currentState?.value.state_type ===
+        "VIEW"
+      ) {
+        metrics.renderEnd();
+      }
+    }
+  };
+
+  expect(flowMetrics.flow?.completed).toBe(false);
+  expect(flowMetrics.flow?.id).toBe("test-flow");
+  expect(flowMetrics.flow?.timeline[0]).toMatchObject({
+    stateName: "VIEW_1",
+    stateType: "VIEW",
+  });
+
+  transition();
+  expect(flowMetrics.flow?.timeline[0].completed).toBe(true);
+  expect(flowMetrics.flow?.timeline).toHaveLength(2);
+  transition();
+
+  expect(
+    (flowMetrics.flow?.timeline[0] as NodeRenderMetrics).render.completed,
+  ).toBe(true);
+});
+
+test("handles double updates", async () => {
+  const onRenderEnd = vitest.fn();
+  const metrics = new MetricsCorePlugin({
+    trackRenderTime: true,
+    trackUpdateTime: true,
+    onRenderEnd,
+  });
+  const player = new Player({ plugins: [metrics] });
+  player.start(basicContentWithActions);
+  metrics.renderEnd();
+  expect(onRenderEnd).toBeCalledTimes(1);
+  /**
+   *
+   */
+  const getDataController = () =>
+    (player.getState() as InProgressState).controllers.data;
+  getDataController().set([["foo.bar", "update-1"]]);
+  metrics.renderEnd(); // Adds 1 update
+
+  await vitest.waitFor(() =>
+    expect(
+      (metrics.getMetrics().flow?.timeline[0] as NodeRenderMetrics).updates,
+    ).toHaveLength(1),
+  );
+
+  // Don't send a render-end for the second
+  getDataController().set([["foo.bar", "update-2"]]);
+  getDataController().set([["foo.bar", "update-3"]]);
+  metrics.renderEnd(); // Adds another update
+
+  await vitest.waitFor(() =>
+    expect(
+      (metrics.getMetrics().flow?.timeline[0] as NodeRenderMetrics).updates,
+    ).toHaveLength(2),
+  );
+});
+
+class MyBeaconPluginPlugin implements BeaconPluginPlugin {
+  apply(beaconPlugin: BeaconPlugin) {
+    beaconPlugin.hooks.buildBeacon.tap(
+      { name: "my-beacon-plugin", context: true },
+      async (context, beacon: any) => {
+        const { renderTime } =
+          (await (context as any)[MetricsViewBeaconPlugin.Symbol]) || {};
+
+        // move renderTime from data to top-level
+        return {
+          ...beacon,
+          ...(renderTime && { renderTime }),
+        };
+      },
+    );
+  }
+}
+
+test("viewed beacon builder can use request time", async () => {
+  const getRequestTime = vitest.fn().mockImplementation(() => 123);
+  const metricsPlugin = new MetricsCorePlugin({
+    trackRenderTime: true,
+    trackUpdateTime: true,
+  });
+  new RequestTimeWebPlugin(getRequestTime).apply(metricsPlugin);
+  const beaconPlugin = new BeaconPlugin({
+    plugins: [new MyBeaconPluginPlugin()],
+  });
+
+  const player = new Player({
+    plugins: [beaconPlugin, metricsPlugin],
+  });
+  player.start(basicContentWithActions as any);
+  expect(getRequestTime).toBeCalledTimes(1);
+  expect(metricsPlugin.getMetrics()?.flow?.requestTime).toBe(123);
+});
+
+test("viewed beacon builder can use render time", async () => {
+  const handler = vitest.fn();
+
+  const metricsPlugin = new MetricsCorePlugin({
+    trackRenderTime: true,
+    trackUpdateTime: true,
+  });
+  const beaconPlugin = new BeaconPlugin({
+    callback: handler,
+    plugins: [new MyBeaconPluginPlugin()],
+  });
+
+  const player = new Player({
+    plugins: [beaconPlugin, metricsPlugin],
+  });
+  player.start(basicContentWithActions as any);
+
+  const onRenderEndPromise = new Promise((resolve) => {
+    metricsPlugin.hooks.onRenderEnd.tap(
+      "on-render-end",
+      (timing) => timing.completed && resolve(timing.duration),
+    );
+  });
+  metricsPlugin.renderEnd();
+  const duration = await onRenderEndPromise;
+
+  await vitest.waitFor(() =>
+    expect(handler.mock.calls[0][0].assetId).toBe("my-view"),
+  );
+  expect(handler.mock.calls[0][0].renderTime).toBe(duration);
+});
+
+test("viewed beacon builder can use render time when it resolves", async () => {
+  const handler = vitest.fn();
+
+  const metricsPlugin = new MetricsCorePlugin({
+    trackRenderTime: true,
+    trackUpdateTime: true,
+  });
+  const beaconPlugin = new BeaconPlugin({
+    callback: handler,
+    plugins: [new MyBeaconPluginPlugin()],
+  });
+
+  const player = new Player({
+    plugins: [beaconPlugin, metricsPlugin],
+  });
+  player.start(basicContentWithActions as any);
+
+  const onRenderEndPromise = new Promise((resolve) => {
+    metricsPlugin.hooks.onRenderEnd.tap(
+      "on-render-end",
+      (timing) => timing.completed && resolve(timing.duration),
+    );
+  });
+  metricsPlugin.renderEnd();
+  const duration = await onRenderEndPromise;
+
+  await vitest.waitFor(() =>
+    expect(handler.mock.calls[0][0].assetId).toBe("my-view"),
+  );
+  expect(handler.mock.calls[0][0].renderTime).toBe(duration);
+});

package/src/index.ts

@@ -1,2 +1,2 @@
-export * from './metrics';
-export * from './symbols';
+export * from "./metrics";
+export * from "./symbols";

package/src/metrics.ts

@@ -1,15 +1,15 @@
-import type { Player, PlayerPlugin } from '@player-ui/player';
-import { SyncHook, SyncBailHook } from 'tapable-ts';
-import type { BeaconPluginPlugin, BeaconArgs } from '@player-ui/beacon-plugin';
-import { BeaconPlugin } from '@player-ui/beacon-plugin';
+import type { Player, PlayerPlugin } from "@player-ui/player";
+import { SyncHook, SyncBailHook } from "tapable-ts";
+import type { BeaconPluginPlugin, BeaconArgs } from "@player-ui/beacon-plugin";
+import { BeaconPlugin } from "@player-ui/beacon-plugin";
 import {
   MetricsCorePluginSymbol,
   MetricsViewBeaconPluginContextSymbol,
-} from './symbols';
+} from "./symbols";
 
 // Try to use performance.now() but fall back to Date.now() if you can't
 export const defaultGetTime =
-  typeof performance === 'undefined'
+  typeof performance === "undefined"
     ? () => Date.now()
     : () => performance.now();
 
@@ -67,16 +67,16 @@ export interface PlayerFlowMetrics {
 }
 
 const callbacks = [
-  'onFlowBegin',
-  'onFlowEnd',
-  'onInteractive',
-  'onNodeStart',
-  'onNodeEnd',
-  'onRenderStart',
-  'onRenderEnd',
-  'onUpdateStart',
-  'onUpdateEnd',
-  'onUpdate',
+  "onFlowBegin",
+  "onFlowEnd",
+  "onInteractive",
+  "onNodeStart",
+  "onNodeEnd",
+  "onRenderStart",
+  "onRenderEnd",
+  "onUpdateStart",
+  "onUpdateEnd",
+  "onUpdate",
 ] as const;
 
 /** Context structure for 'viewed' beacons rendering metrics */
@@ -99,13 +99,13 @@ export class MetricsViewBeaconPlugin implements BeaconPluginPlugin {
   constructor(metricsPlugin: MetricsCorePlugin) {
     this.metricsPlugin = metricsPlugin;
     this.metricsPlugin.hooks.onRenderEnd.tap(
-      'MetricsViewBeaconPlugin',
+      "MetricsViewBeaconPlugin",
       (timing) => {
         if (timing.completed && this.resolvePendingRenderTime) {
           this.resolvePendingRenderTime(timing.duration);
           this.resolvePendingRenderTime = undefined;
         }
-      }
+      },
     );
   }
 
@@ -113,7 +113,7 @@ export class MetricsViewBeaconPlugin implements BeaconPluginPlugin {
     beaconPlugin.hooks.buildBeacon.intercept({
       context: true,
       call: (context: any, beacon) => {
-        if (context && (beacon as BeaconArgs).action === 'viewed') {
+        if (context && (beacon as BeaconArgs).action === "viewed") {
           context[this.symbol] = this.buildContext();
         }
       },
@@ -133,7 +133,7 @@ export class MetricsViewBeaconPlugin implements BeaconPluginPlugin {
     if (flow) {
       const lastItem = flow.timeline[flow.timeline.length - 1];
 
-      if ('render' in lastItem && lastItem.render.completed) {
+      if ("render" in lastItem && lastItem.render.completed) {
         return lastItem.render.duration;
       }
     }
@@ -163,41 +163,41 @@ export interface MetricsWebPluginOptions {
   /** Called when a new node is started */
   onNodeStart?: (
     nodeMetrics: NodeMetrics | NodeRenderMetrics,
-    update: PlayerFlowMetrics
+    update: PlayerFlowMetrics,
   ) => void;
 
   /** Called when a node is ended */
   onNodeEnd?: (
     nodeMetrics: NodeMetrics | NodeRenderMetrics,
-    update: PlayerFlowMetrics
+    update: PlayerFlowMetrics,
   ) => void;
 
   /** Called when rendering for a node begins */
   onRenderStart?: (
     timing: Timing,
     nodeMetrics: NodeRenderMetrics,
-    update: PlayerFlowMetrics
+    update: PlayerFlowMetrics,
   ) => void;
 
   /** Called when rendering for a node ends */
   onRenderEnd?: (
     timing: Timing,
     nodeMetrics: NodeRenderMetrics,
-    update: PlayerFlowMetrics
+    update: PlayerFlowMetrics,
   ) => void;
 
   /** Called when an update for a node begins */
   onUpdateStart?: (
     timing: Timing,
     nodeMetrics: NodeRenderMetrics,
-    update: PlayerFlowMetrics
+    update: PlayerFlowMetrics,
   ) => void;
 
   /** Called when an update for a node ends */
   onUpdateEnd?: (
     timing: Timing,
     nodeMetrics: NodeRenderMetrics,
-    update: PlayerFlowMetrics
+    update: PlayerFlowMetrics,
   ) => void;
 
   /** Callback to subscribe to updates for any metric */
@@ -224,7 +224,7 @@ export interface MetricsWebPluginOptions {
  */
 export class RequestTimeWebPlugin {
   getRequestTime: () => number | undefined;
-  name = 'RequestTimeWebPlugin';
+  name = "RequestTimeWebPlugin";
 
   constructor(getRequestTime: () => number | undefined) {
     this.getRequestTime = getRequestTime;
@@ -241,7 +241,7 @@ export class RequestTimeWebPlugin {
  * A plugin that enables gathering of render metrics
  */
 export class MetricsCorePlugin implements PlayerPlugin {
-  name = 'metrics';
+  name = "metrics";
 
   static Symbol = MetricsCorePluginSymbol;
   public readonly symbol = MetricsCorePluginSymbol;
@@ -300,7 +300,7 @@ export class MetricsCorePlugin implements PlayerPlugin {
 
     callbacks.forEach((hookName) => {
       if (options?.[hookName] !== undefined) {
-        (this.hooks[hookName] as any).tap('options', options?.[hookName]);
+        (this.hooks[hookName] as any).tap("options", options?.[hookName]);
       }
     });
   }
@@ -323,7 +323,7 @@ export class MetricsCorePlugin implements PlayerPlugin {
 
     const lastItem = timeline[timeline.length - 1];
 
-    if ('updates' in lastItem) {
+    if ("updates" in lastItem) {
       // Get the last update, make sure it's completed
       if (lastItem.updates.length > 0) {
         const lastUpdate = lastItem.updates[lastItem.updates.length - 1];
@@ -364,7 +364,7 @@ export class MetricsCorePlugin implements PlayerPlugin {
       this.hooks.onRenderStart.call(
         renderInfo.render,
         renderInfo,
-        this.metrics
+        this.metrics,
       );
     }
   }
@@ -373,7 +373,7 @@ export class MetricsCorePlugin implements PlayerPlugin {
   public renderEnd(): void {
     if (!this.trackRender) {
       throw new Error(
-        'Must start the metrics-plugin with render tracking enabled'
+        "Must start the metrics-plugin with render tracking enabled",
       );
     }
 
@@ -391,7 +391,7 @@ export class MetricsCorePlugin implements PlayerPlugin {
 
     const lastItem = timeline[timeline.length - 1];
 
-    if (!('render' in lastItem)) {
+    if (!("render" in lastItem)) {
       return;
     }
 
@@ -466,7 +466,7 @@ export class MetricsCorePlugin implements PlayerPlugin {
     });
 
     player.hooks.state.tap(this.name, (state) => {
-      if (state.status === 'completed' || state.status === 'error') {
+      if (state.status === "completed" || state.status === "error") {
         const endTime = defaultGetTime();
         const { flow } = this.metrics;
 
@@ -556,7 +556,7 @@ export class MetricsCorePlugin implements PlayerPlugin {
       });
 
       player.applyTo<BeaconPlugin>(BeaconPlugin.Symbol, (beaconPlugin) =>
-        new MetricsViewBeaconPlugin(this).apply(beaconPlugin)
+        new MetricsViewBeaconPlugin(this).apply(beaconPlugin),
       );
     }
   }

package/src/symbols.ts

@@ -1,4 +1,4 @@
-export const MetricsCorePluginSymbol = Symbol.for('MetricsCorePlugin');
+export const MetricsCorePluginSymbol = Symbol.for("MetricsCorePlugin");
 export const MetricsViewBeaconPluginContextSymbol = Symbol.for(
-  'MetricsViewBeaconPluginContext'
+  "MetricsViewBeaconPluginContext",
 );

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./metrics";
+export * from "./symbols";
+//# sourceMappingURL=index.d.ts.map