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

package/dist/index.esm.js

@@ -0,0 +1,365 @@
+import { SyncBailHook, SyncHook } from 'tapable';
+import { BeaconPlugin } from '@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 SyncBailHook(["requestTime"]),
+      onFlowBegin: new SyncHook(["update"]),
+      onFlowEnd: new SyncHook(["update"]),
+      onInteractive: new SyncHook([
+        "timing",
+        "update"
+      ]),
+      onNodeStart: new SyncHook([
+        "nodeMetrics",
+        "update"
+      ]),
+      onNodeEnd: new SyncHook([
+        "nodeMetrics",
+        "update"
+      ]),
+      onRenderStart: new SyncHook([
+        "timing",
+        "nodeMetrics",
+        "update"
+      ]),
+      onRenderEnd: new SyncHook([
+        "timing",
+        "nodeMetrics",
+        "update"
+      ]),
+      onUpdateStart: new SyncHook([
+        "timing",
+        "nodeMetrics",
+        "update"
+      ]),
+      onUpdateEnd: new SyncHook([
+        "timing",
+        "nodeMetrics",
+        "update"
+      ]),
+      onUpdate: new 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.Symbol, (beaconPlugin) => new MetricsViewBeaconPlugin(this).apply(beaconPlugin));
+    }
+  }
+}
+MetricsCorePlugin.Symbol = MetricsCorePluginSymbol;
+
+export { MetricsCorePlugin, MetricsCorePluginSymbol, MetricsViewBeaconPlugin, MetricsViewBeaconPluginContextSymbol, RequestTimeWebPlugin, defaultGetTime };
+//# sourceMappingURL=index.esm.js.map

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@player-ui/metrics-plugin",
+  "version": "0.0.1-next.1",
+  "private": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "peerDependencies": {
+    "@player-ui/binding-grammar": "0.0.1-next.1"
+  },
+  "dependencies": {
+    "tapable": "1.1.3",
+    "@types/tapable": "^1.0.5",
+    "@babel/runtime": "7.15.4"
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts"
+}

package/src/index.ts

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