@player-tools/devtools-profiler-web-plugin 0.6.1--canary.125.2996

package/src/constants/index.ts

@@ -0,0 +1,28 @@
+import type { PluginData } from "@player-tools/devtools-types";
+
+export const PLUGIN_ID = "player-ui-profiler-plugin";
+
+export const PLUGIN_NAME = "Player UI Profiler";
+
+export const PLUGIN_DESCRIPTION = "Standard Player UI Profiler";
+
+export const PLUGIN_VERSION = "0.0.1";
+
+export const VIEWS_IDS = {
+  PROFILER: "Profiler",
+};
+
+export const INTERACTIONS = {
+  START_PROFILING: "start-profiling",
+  STOP_PROFILING: "stop-profiling",
+};
+
+export const BASE_PLUGIN_DATA: Omit<PluginData, "flow"> = {
+  id: PLUGIN_ID,
+  name: PLUGIN_NAME,
+  description: PLUGIN_DESCRIPTION,
+  version: PLUGIN_VERSION,
+};
+
+export const PLUGIN_INACTIVE_WARNING =
+  "The plugin has been registered, but the Player development tools are not active. If you are working in a production environment, it is recommended to remove the plugin. Either way, you can activate the Player development tools by clicking on the extension popup and refreshing the page.";

package/src/content/common/Screen.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { StackedView } from "@devtools-ui/plugin";
+
+export const Screen = ({
+  main,
+  header,
+  footer,
+  id,
+}: {
+  id: string;
+  main: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+}) => (
+  <StackedView id={id}>
+    {header && <StackedView.Header>{header}</StackedView.Header>}
+    <StackedView.Main>{main}</StackedView.Main>
+    {footer && <StackedView.Footer>{footer}</StackedView.Footer>}
+  </StackedView>
+);

package/src/content/common/index.ts

@@ -0,0 +1 @@
+export * from "./Screen";

package/src/content/index.ts

@@ -0,0 +1,19 @@
+import { PLUGIN_ID } from "../constants";
+import { navigation } from "./navigation";
+import { schema } from "./schema";
+import { views } from "./views";
+
+export default {
+  id: PLUGIN_ID,
+  views,
+  navigation,
+  schema,
+  data: {
+    rootNode: {
+      name: "profiler time span",
+      value: 0,
+    },
+    displayFlameGraph: false,
+    profiling: false,
+  },
+};

package/src/content/navigation/index.ts

@@ -0,0 +1,27 @@
+import { VIEWS_IDS } from "../../constants";
+
+const transitions = Object.entries(VIEWS_IDS).reduce(
+  (acc, [key, value]) => ({
+    ...acc,
+    [value]: key,
+  }),
+  {} as Record<string, string>
+);
+
+export const navigation = {
+  BEGIN: "Plugin",
+  Plugin: {
+    startState: Object.keys(VIEWS_IDS)[0],
+    ...Object.entries(VIEWS_IDS).reduce(
+      (acc, [key, value]) => ({
+        ...acc,
+        [key]: {
+          state_type: "VIEW",
+          ref: value,
+          transitions,
+        },
+      }),
+      {} as Record<string, unknown>
+    ),
+  },
+};

package/src/content/schema/index.ts

@@ -0,0 +1,22 @@
+import type { Schema } from "@player-ui/types";
+import { dataTypes } from "@player-ui/common-types-plugin";
+import { DSLSchema, makeBindingsForObject } from "@player-tools/dsl";
+
+const RecordType: Schema.DataType<Record<string, unknown>> = {
+  type: "RecordType",
+};
+
+export const schema = {
+  playerConfig: RecordType,
+  rootNode: RecordType,
+  profiling: dataTypes.BooleanType,
+  displayFlameGraph: dataTypes.BooleanType,
+  durations: [
+    {
+      name: dataTypes.StringType,
+      duration: dataTypes.StringType,
+    },
+  ] as [DSLSchema],
+};
+
+export const bindings = makeBindingsForObject(schema);

package/src/content/views/ProfilerView.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import { expression as e } from "@player-tools/dsl";
+import {
+  Action,
+  Collection,
+  FlameGraph,
+  Table,
+  Text,
+} from "@devtools-ui/plugin";
+import { INTERACTIONS, VIEWS_IDS } from "../../constants";
+import { Screen } from "../common";
+import { bindings } from "../schema";
+
+const startProfilerExpression = e` publish('${INTERACTIONS.START_PROFILING}') `;
+const stopProfilerExpression = e` publish('${INTERACTIONS.STOP_PROFILING}') `;
+
+export const ProfilerView = (
+  <Screen
+    id={VIEWS_IDS.PROFILER}
+    header={
+      <Collection>
+        <Collection.Values>
+          <Action
+            applicability={e` {{profiling}} === true ` as any}
+            key="stopProfiler"
+            exp={stopProfilerExpression.toString()}
+          >
+            <Action.Label>
+              <Text>Stop</Text>
+            </Action.Label>
+          </Action>
+          <Action
+            applicability={e` {{profiling}} === false ` as any}
+            key="startProfiler"
+            exp={startProfilerExpression.toString()}
+          >
+            <Action.Label>
+              <Text>Start</Text>
+            </Action.Label>
+          </Action>
+        </Collection.Values>
+      </Collection>
+    }
+    main={
+      <Collection>
+        <Collection.Values>
+          <Table
+            applicability={e` {{displayFlameGraph}} === true ` as any}
+            binding={bindings.durations as any}
+          />
+          <FlameGraph
+            applicability={e` {{displayFlameGraph}} === true ` as any}
+            binding={bindings.rootNode as any}
+            height={200}
+          />
+          <Text
+            applicability={
+              e` {{displayFlameGraph}} === false && {{profiling}} === true` as any
+            }
+          >
+            Profiling...
+          </Text>
+          <Text
+            applicability={
+              e` {{displayFlameGraph}} === false && {{profiling}} === false ` as any
+            }
+          >
+            Start the profiler to generate the flame graph.
+          </Text>
+        </Collection.Values>
+      </Collection>
+    }
+  />
+);

package/src/content/views/index.ts

@@ -0,0 +1,3 @@
+import { ProfilerView } from "./ProfilerView";
+
+export const views = [ProfilerView];

package/src/helpers/__tests__/genDataChangeTransaction.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import type {
+  DevtoolsDataChangeEvent,
+  Transaction,
+} from "@player-tools/devtools-types";
+import { genDataChangeTransaction } from "../genDataChangeTransaction";
+
+describe("genDataChangeTransaction", () => {
+  it("should correctly generate a data change transaction for valid input", () => {
+    const input = {
+      playerID: "player1",
+      data: {
+        key: "value",
+        anotherKey: 123,
+      },
+      pluginID: "pluginA",
+    };
+
+    const expectedOutput: Transaction<DevtoolsDataChangeEvent> = {
+      id: -1,
+      type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
+      payload: {
+        pluginID: "pluginA",
+        data: {
+          key: "value",
+          anotherKey: 123,
+        },
+      },
+      sender: "player1",
+      context: "player",
+      target: "player",
+      timestamp: expect.any(Number),
+      _messenger_: true,
+    };
+
+    const result = genDataChangeTransaction(input);
+
+    expect(result).toEqual(expect.objectContaining(expectedOutput));
+  });
+});

package/src/helpers/__tests__/profiler.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, test, vi } from "vitest";
+import { profiler } from "..";
+import { ProfilerNode } from "../../types";
+
+// mock performance.now
+let count = 2490.0;
+const now = vi.fn(() => {
+  count += 0.1;
+  return count;
+});
+global.performance = { ...global.performance, now };
+
+describe("Profiler", () => {
+  test("starts the profiler, keep track of the events, and return the profiler tree", () => {
+    const { startTimer, endTimer, stopProfiler, start } = profiler();
+
+    start();
+
+    // process with no children
+    startTimer("process1");
+    endTimer({ hookName: "process1" });
+
+    // process with children
+    const parentNode: ProfilerNode = {
+      name: "process2",
+      children: [],
+    };
+
+    startTimer("process2");
+    startTimer("process2.1");
+    startTimer("process2.2");
+    endTimer({ hookName: "process2.1", parentNode });
+    endTimer({ hookName: "process2.2", parentNode });
+    endTimer({ hookName: "process2", children: parentNode.children });
+
+    const rootNode = stopProfiler();
+
+    expect(rootNode).toStrictEqual({
+      durations: [
+        { name: "process2", duration: "0.5000 ms" },
+        { name: "process2.1", duration: "0.2000 ms" },
+        { name: "process2.2", duration: "0.2000 ms" },
+        { name: "process1", duration: "0.1000 ms" },
+      ],
+      rootNode: {
+        children: [
+          {
+            children: [],
+            endTime: 2490.2999999999997,
+            name: "process1",
+            startTime: 2490.2,
+            tooltip: "process1, 0.1000 (ms)",
+            value: 100,
+          },
+          {
+            children: [
+              {
+                children: [],
+                endTime: 2490.6999999999994,
+                name: "process2.1",
+                startTime: 2490.4999999999995,
+                tooltip: "process2.1, 0.2000 (ms)",
+                value: 200,
+              },
+              {
+                children: [],
+                endTime: 2490.7999999999993,
+                name: "process2.2",
+                startTime: 2490.5999999999995,
+                tooltip: "process2.2, 0.2000 (ms)",
+                value: 200,
+              },
+            ],
+            endTime: 2490.899999999999,
+            name: "process2",
+            startTime: 2490.3999999999996,
+            tooltip: "process2, 0.5000 (ms)",
+            value: 500,
+          },
+        ],
+        endTime: 2490.999999999999,
+        name: "root",
+        startTime: 2490.1,
+        tooltip: "Profiler total time span 0.9000 (ms)",
+        value: 600,
+      },
+    });
+
+    // (re)start
+    start();
+    const { rootNode: rootNode2, durations } = stopProfiler();
+
+    expect(durations).toStrictEqual([]);
+
+    expect(rootNode2).toStrictEqual({
+      name: "root",
+      endTime: 2491.199999999999,
+      startTime: 2491.099999999999,
+      tooltip: "Profiler total time span 0.1000 (ms)",
+      value: 100,
+      children: [],
+    });
+  });
+});

package/src/helpers/genDataChangeTransaction.ts

@@ -0,0 +1,39 @@
+import type {
+  DevtoolsDataChangeEvent,
+  Transaction,
+} from "@player-tools/devtools-types";
+import type { Flow } from "@player-ui/react";
+
+const NOOP_ID = -1;
+
+/**
+ * Generates a data change transaction for the player devtools plugin.
+ *
+ * This function creates a transaction object that represents a change in data
+ * within a player devtools plugin. The transaction includes details such as the
+ * plugin ID, the changed data, and the player ID. It is used to communicate
+ * changes between the plugin and devtools.
+ */
+export const genDataChangeTransaction = ({
+  playerID,
+  data,
+  pluginID,
+}: {
+  playerID: string;
+  data: Flow["data"];
+  pluginID: string;
+}): Transaction<DevtoolsDataChangeEvent> => {
+  return {
+    id: NOOP_ID,
+    type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
+    payload: {
+      pluginID,
+      data,
+    },
+    sender: playerID,
+    context: "player",
+    target: "player",
+    timestamp: Date.now(),
+    _messenger_: true,
+  };
+};

package/src/helpers/index.ts

@@ -0,0 +1,2 @@
+export { genDataChangeTransaction } from "./genDataChangeTransaction";
+export { profiler } from "./profiler";

package/src/helpers/profiler.ts

@@ -0,0 +1,111 @@
+import type { ProfilerNode } from "../types";
+
+export const profiler = () => {
+  let rootNode: ProfilerNode = {
+    name: "root",
+    children: [],
+  };
+
+  let record: { [key: string]: number[] } = {};
+  let durations: { hookName: string; duration: number }[] = [];
+
+  const start = () => {
+    rootNode = {
+      name: "root",
+      startTime: performance.now(),
+      children: [],
+    };
+    record = {};
+    durations = [];
+  };
+
+  const addNodeToTree = (newNode: ProfilerNode, parentNode: ProfilerNode) => {
+    parentNode.children.push(newNode);
+    return newNode;
+  };
+
+  const startTimer = (hookName: string) => {
+    const startTime = performance.now();
+
+    if (!record[hookName] || record[hookName].length === 2) {
+      record[hookName] = [];
+      record[hookName].push(startTime);
+    }
+  };
+
+  const endTimer = ({
+    hookName,
+    parentNode = rootNode,
+    children,
+  }: {
+    hookName: string;
+    parentNode?: ProfilerNode;
+    children?: ProfilerNode[];
+  }) => {
+    let startTime: number | undefined;
+    let duration: number | undefined;
+
+    const endTime = performance.now();
+
+    for (const key in record) {
+      if (key === hookName && record[key].length === 1) {
+        [startTime] = record[key];
+        duration = endTime - startTime;
+        record[key].push(endTime);
+      }
+    }
+
+    const value = Math.ceil((duration || 0.01) * 1000);
+
+    const newNode: ProfilerNode = {
+      name: hookName,
+      startTime,
+      endTime,
+      value,
+      tooltip: `${hookName}, ${(duration || 0.01).toFixed(4)} (ms)`,
+      children: children ?? [],
+    };
+
+    addNodeToTree(newNode, parentNode);
+
+    // Push the hookName and duration into durations array
+    durations.push({ hookName, duration: duration ? duration : 0.01 });
+
+    return newNode;
+  };
+
+  const stopProfiler = (): {
+    rootNode: ProfilerNode;
+    durations: { name: string; duration: string }[];
+  } => {
+    const endTime = performance.now();
+    const totalTime = endTime - (rootNode.startTime ?? 0);
+
+    rootNode.endTime = endTime;
+    // set the stop profiler value is the sum of its children values
+    // otherwise the difference of width of the root and the other nodes
+    // make it impossible to see them into the flame graph
+    rootNode.value =
+      rootNode.children.reduce((acc, { value }) => (acc += value ?? 0), 0) ||
+      Math.ceil((totalTime || 0.01) * 1000);
+    rootNode.tooltip = `Profiler total time span ${totalTime.toFixed(4)} (ms)`;
+
+    // Sort durations array in descending order
+    durations.sort((a, b) => b.duration - a.duration);
+
+    return {
+      rootNode,
+      durations: durations.map(({ hookName, duration }) => ({
+        name: hookName,
+        duration: `${duration.toFixed(4)} ms`,
+      })),
+    };
+  };
+
+  return {
+    start,
+    startTimer,
+    endTimer,
+    stopProfiler,
+  };
+};