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

package/dist/index.mjs

@@ -0,0 +1,812 @@
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/profiler/src/index.tsx
+import React2 from "react";
+
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/profiler/src/constants/index.ts
+var PLUGIN_ID = "player-ui-profiler-plugin";
+var PLUGIN_NAME = "Player UI Profiler";
+var PLUGIN_DESCRIPTION = "Standard Player UI Profiler";
+var PLUGIN_VERSION = "0.0.1";
+var INTERACTIONS = {
+  START_PROFILING: "start-profiling",
+  STOP_PROFILING: "stop-profiling"
+};
+var BASE_PLUGIN_DATA = {
+  id: PLUGIN_ID,
+  name: PLUGIN_NAME,
+  description: PLUGIN_DESCRIPTION,
+  version: PLUGIN_VERSION
+};
+
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/profiler/src/WrapperComponent.tsx
+import { usePluginState } from "@player-tools/devtools-desktop-plugins-common";
+import { dset } from "dset/merge";
+import { produce } from "immer";
+import React, { useCallback, useEffect } from "react";
+
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/profiler/src/helpers/genDataChangeTransaction.ts
+var NOOP_ID = -1;
+var genDataChangeTransaction = ({
+  playerID,
+  data,
+  pluginID
+}) => {
+  return {
+    id: NOOP_ID,
+    type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
+    payload: {
+      pluginID,
+      data
+    },
+    sender: playerID,
+    context: "player",
+    target: "player",
+    timestamp: Date.now(),
+    _messenger_: true
+  };
+};
+
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/profiler/src/helpers/profiler.ts
+var profiler = () => {
+  let rootNode = {
+    name: "root",
+    children: []
+  };
+  let record = {};
+  let durations = [];
+  const start = () => {
+    rootNode = {
+      name: "root",
+      startTime: performance.now(),
+      children: []
+    };
+    record = {};
+    durations = [];
+  };
+  const addNodeToTree = (newNode, parentNode) => {
+    parentNode.children.push(newNode);
+    return newNode;
+  };
+  const startTimer = (hookName) => {
+    const startTime = performance.now();
+    if (!record[hookName] || record[hookName].length === 2) {
+      record[hookName] = [];
+      record[hookName].push(startTime);
+    }
+  };
+  const endTimer = ({
+    hookName,
+    parentNode = rootNode,
+    children
+  }) => {
+    let startTime;
+    let duration;
+    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) * 1e3);
+    const newNode = {
+      name: hookName,
+      startTime,
+      endTime,
+      value,
+      tooltip: `${hookName}, ${(duration || 0.01).toFixed(4)} (ms)`,
+      children: children ?? []
+    };
+    addNodeToTree(newNode, parentNode);
+    durations.push({ hookName, duration: duration ? duration : 0.01 });
+    return newNode;
+  };
+  const stopProfiler = () => {
+    const endTime = performance.now();
+    const totalTime = endTime - (rootNode.startTime ?? 0);
+    rootNode.endTime = endTime;
+    rootNode.value = rootNode.children.reduce((acc, { value }) => acc += value ?? 0, 0) || Math.ceil((totalTime || 0.01) * 1e3);
+    rootNode.tooltip = `Profiler total time span ${totalTime.toFixed(4)} (ms)`;
+    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
+  };
+};
+
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/profiler/_generated/index.json
+var generated_default = {
+  id: "player-ui-profiler-plugin",
+  views: [
+    {
+      id: "Profiler",
+      type: "stacked-view",
+      header: {
+        asset: {
+          id: "Profiler-header",
+          type: "collection",
+          values: [
+            {
+              asset: {
+                id: "Profiler-header-values-0",
+                type: "action",
+                applicability: " {{profiling}} === true ",
+                exp: "@[ publish('stop-profiling') ]@",
+                label: {
+                  asset: {
+                    id: "Profiler-header-values-0-label",
+                    type: "text",
+                    value: "Stop"
+                  }
+                }
+              }
+            },
+            {
+              asset: {
+                id: "Profiler-header-values-1",
+                type: "action",
+                applicability: " {{profiling}} === false ",
+                exp: "@[ publish('start-profiling') ]@",
+                label: {
+                  asset: {
+                    id: "Profiler-header-values-1-label",
+                    type: "text",
+                    value: "Start"
+                  }
+                }
+              }
+            }
+          ]
+        }
+      },
+      main: {
+        asset: {
+          id: "Profiler-main",
+          type: "collection",
+          values: [
+            {
+              asset: {
+                id: "Profiler-main-values-0",
+                type: "table",
+                applicability: " {{displayFlameGraph}} === true ",
+                binding: "durations"
+              }
+            },
+            {
+              asset: {
+                id: "Profiler-main-values-1",
+                type: "flame-graph",
+                applicability: " {{displayFlameGraph}} === true ",
+                height: 200,
+                binding: "rootNode"
+              }
+            },
+            {
+              asset: {
+                id: "Profiler-main-values-2",
+                type: "text",
+                applicability: " {{displayFlameGraph}} === false && {{profiling}} === true",
+                value: "Profiling..."
+              }
+            },
+            {
+              asset: {
+                id: "Profiler-main-values-3",
+                type: "text",
+                applicability: " {{displayFlameGraph}} === false && {{profiling}} === false ",
+                value: "Start the profiler to generate the flame graph."
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  navigation: {
+    BEGIN: "Plugin",
+    Plugin: {
+      startState: "PROFILER",
+      PROFILER: {
+        state_type: "VIEW",
+        ref: "Profiler",
+        transitions: {
+          Profiler: "PROFILER"
+        }
+      }
+    }
+  },
+  schema: {
+    ROOT: {
+      playerConfig: {
+        type: "RecordType"
+      },
+      rootNode: {
+        type: "RecordType"
+      },
+      profiling: {
+        type: "BooleanType",
+        default: false,
+        validation: [
+          {
+            type: "oneOf",
+            message: "Value must be true or false",
+            options: [
+              true,
+              false
+            ]
+          }
+        ]
+      },
+      displayFlameGraph: {
+        type: "BooleanType",
+        default: false,
+        validation: [
+          {
+            type: "oneOf",
+            message: "Value must be true or false",
+            options: [
+              true,
+              false
+            ]
+          }
+        ]
+      },
+      durations: {
+        type: "durationsType",
+        isArray: true
+      }
+    },
+    durationsType: {
+      name: {
+        type: "StringType",
+        default: "",
+        validation: [
+          {
+            type: "string"
+          }
+        ],
+        format: {
+          type: "string"
+        }
+      },
+      duration: {
+        type: "StringType",
+        default: "",
+        validation: [
+          {
+            type: "string"
+          }
+        ],
+        format: {
+          type: "string"
+        }
+      }
+    }
+  },
+  data: {
+    rootNode: {
+      name: "profiler time span",
+      value: 0
+    },
+    displayFlameGraph: false,
+    profiling: false
+  }
+};
+
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/profiler/src/WrapperComponent.tsx
+var pluginData = {
+  ...BASE_PLUGIN_DATA,
+  flow: generated_default
+};
+var WrapperComponent = ({
+  children,
+  startProfiler,
+  stopProfiler
+}) => {
+  const [state, playerID, dispatch] = usePluginState();
+  const lastProcessedInteraction = React.useRef(0);
+  const id = pluginData.id;
+  useEffect(() => {
+    const transaction = {
+      id: -1,
+      type: "PLAYER_DEVTOOLS_PLAYER_INIT",
+      payload: {
+        plugins: {
+          [id]: pluginData
+        }
+      },
+      sender: playerID,
+      context: "player",
+      target: "player",
+      timestamp: Date.now(),
+      _messenger_: true
+    };
+    dispatch(transaction);
+  }, []);
+  const processInteraction = useCallback(
+    (interaction) => {
+      const {
+        payload: { type }
+      } = interaction;
+      if (type === INTERACTIONS.START_PROFILING) {
+        startProfiler();
+        lastProcessedInteraction.current += 1;
+        const newState = produce(state, (draft) => {
+          dset(draft, ["plugins", id, "flow", "data", "rootNode"], {
+            name: "root",
+            children: []
+          });
+          dset(draft, ["plugins", id, "flow", "data", "durations"], []);
+          dset(draft, ["plugins", id, "flow", "data", "profiling"], true);
+          dset(
+            draft,
+            ["plugins", id, "flow", "data", "displayFlameGraph"],
+            false
+          );
+        });
+        const transaction = genDataChangeTransaction({
+          playerID,
+          data: newState.plugins[id].flow.data,
+          pluginID: id
+        });
+        dispatch(transaction);
+      }
+      if (type === INTERACTIONS.STOP_PROFILING) {
+        const { rootNode, durations } = stopProfiler();
+        lastProcessedInteraction.current += 1;
+        const newState = produce(state, (draft) => {
+          dset(draft, ["plugins", id, "flow", "data", "rootNode"], rootNode);
+          dset(draft, ["plugins", id, "flow", "data", "durations"], durations);
+          dset(draft, ["plugins", id, "flow", "data", "profiling"], false);
+          dset(
+            draft,
+            ["plugins", id, "flow", "data", "displayFlameGraph"],
+            true
+          );
+        });
+        const transaction = genDataChangeTransaction({
+          playerID,
+          data: newState.plugins[id].flow.data,
+          pluginID: id
+        });
+        dispatch(transaction);
+      }
+    },
+    [dispatch, id, state]
+  );
+  useEffect(() => {
+    if (lastProcessedInteraction.current < (state.interactions.length ?? 0)) {
+      state.interactions.slice(lastProcessedInteraction.current).forEach(processInteraction);
+    }
+  }, [state.interactions.length]);
+  return children;
+};
+
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/profiler/src/index.tsx
+var ProfilerPlugin = class {
+  name = PLUGIN_ID;
+  checkIfDevtoolsIsActive() {
+    return localStorage.getItem("player-ui-devtools-active") === "true";
+  }
+  applyReact({ player, hooks: { webComponent } }) {
+    if (!this.checkIfDevtoolsIsActive()) {
+      return;
+    }
+    const { start, startTimer, endTimer, stopProfiler } = profiler();
+    const startProfiler = () => {
+      start();
+      player.hooks.onStart.intercept({
+        call: () => {
+          startTimer("onStart");
+        }
+      });
+      player.hooks.onStart.tap(this.name, () => {
+        endTimer({ hookName: "onStart" });
+      });
+      player.hooks.flowController.intercept({
+        call: (fc) => {
+          startTimer("flowController");
+          fc.hooks.flow.intercept({
+            call: () => {
+              startTimer("flow");
+            }
+          });
+        }
+      });
+      player.hooks.flowController.tap(this.name, (fc) => {
+        let flowControllerNode = {
+          name: "flowController",
+          children: []
+        };
+        fc.hooks.flow.tap(this.name, () => {
+          endTimer({ hookName: "flow", parentNode: flowControllerNode });
+        });
+        flowControllerNode = endTimer({
+          hookName: flowControllerNode.name,
+          children: flowControllerNode.children
+        });
+      });
+      player.hooks.viewController.intercept({
+        call: (vc) => {
+          startTimer("viewController");
+          vc.hooks.resolveView.intercept({
+            call: () => {
+              startTimer("resolveView");
+            }
+          });
+          vc.hooks.view.intercept({
+            call: () => {
+              startTimer("view");
+            }
+          });
+        }
+      });
+      player.hooks.viewController.tap(this.name, (vc) => {
+        let viewControllerNode = {
+          name: "viewController",
+          children: []
+        };
+        vc.hooks.resolveView.tap(this.name, (asset) => {
+          endTimer({ hookName: "resolveView", parentNode: viewControllerNode });
+          return asset;
+        });
+        viewControllerNode = endTimer({
+          hookName: viewControllerNode.name,
+          children: viewControllerNode.children
+        });
+      });
+      player.hooks.view.intercept({
+        call: (view) => {
+          startTimer("view");
+          view.hooks.onUpdate.intercept({
+            call: () => {
+              startTimer("onUpdate");
+            }
+          });
+          view.hooks.parser.intercept({
+            call: () => {
+              startTimer("parser");
+            }
+          });
+          view.hooks.resolver.intercept({
+            call: () => {
+              startTimer("resolver");
+            }
+          });
+          view.hooks.templatePlugin.intercept({
+            call: () => {
+              startTimer("templatePlugin");
+            }
+          });
+        }
+      });
+      player.hooks.view.tap(this.name, (view) => {
+        let viewNode = {
+          name: "view",
+          children: []
+        };
+        view.hooks.onUpdate.tap(this.name, () => {
+          endTimer({ hookName: "onUpdate", parentNode: viewNode });
+        });
+        view.hooks.parser.tap(this.name, () => {
+          endTimer({ hookName: "parser", parentNode: viewNode });
+        });
+        view.hooks.resolver.tap(this.name, () => {
+          endTimer({ hookName: "resolver", parentNode: viewNode });
+        });
+        view.hooks.templatePlugin.tap(this.name, () => {
+          endTimer({ hookName: "templatePlugin", parentNode: viewNode });
+        });
+        viewNode = endTimer({
+          hookName: viewNode.name,
+          children: viewNode.children
+        });
+      });
+      player.hooks.expressionEvaluator.intercept({
+        call: (ev) => {
+          startTimer("expressionEvaluator");
+          ev.hooks.resolve.intercept({
+            call: () => {
+              startTimer("resolve");
+            }
+          });
+          ev.hooks.onError.intercept({
+            call: () => {
+              startTimer("onError");
+            }
+          });
+        }
+      });
+      player.hooks.expressionEvaluator.tap(this.name, (ev) => {
+        let expressionEvaluatorNode = {
+          name: "expressionEvaluator",
+          children: []
+        };
+        ev.hooks.resolve.tap(this.name, () => {
+          endTimer({
+            hookName: "resolve",
+            parentNode: expressionEvaluatorNode
+          });
+        });
+        ev.hooks.onError.tap(this.name, () => {
+          endTimer({
+            hookName: "onError",
+            parentNode: expressionEvaluatorNode
+          });
+          return void 0;
+        });
+        expressionEvaluatorNode = endTimer({
+          hookName: expressionEvaluatorNode.name,
+          children: expressionEvaluatorNode.children
+        });
+      });
+      player.hooks.dataController.intercept({
+        call: (dc) => {
+          startTimer("dataController");
+          dc.hooks.resolve.intercept({
+            call: () => {
+              startTimer("resolve");
+            }
+          });
+          dc.hooks.resolveDataStages.intercept({
+            call: () => {
+              startTimer("resolveDataStages");
+            }
+          });
+          dc.hooks.resolveDefaultValue.intercept({
+            call: () => {
+              startTimer("resolveDefaultValue");
+            }
+          });
+          dc.hooks.onDelete.intercept({
+            call: () => {
+              startTimer("onDelete");
+            }
+          });
+          dc.hooks.onSet.intercept({
+            call: () => {
+              startTimer("onSet");
+            }
+          });
+          dc.hooks.onGet.intercept({
+            call: () => {
+              startTimer("onGet");
+            }
+          });
+          dc.hooks.onUpdate.intercept({
+            call: () => {
+              startTimer("onUpdate");
+            }
+          });
+          dc.hooks.format.intercept({
+            call: () => {
+              startTimer("resolve");
+            }
+          });
+          dc.hooks.deformat.intercept({
+            call: () => {
+              startTimer("deformat");
+            }
+          });
+          dc.hooks.serialize.intercept({
+            call: () => {
+              startTimer("serialize");
+            }
+          });
+        }
+      });
+      player.hooks.dataController.tap(this.name, (dc) => {
+        let dataControllerNode = {
+          name: "dataController",
+          children: []
+        };
+        dc.hooks.resolve.tap(this.name, () => {
+          endTimer({ hookName: "resolve", parentNode: dataControllerNode });
+        });
+        dc.hooks.resolveDataStages.tap(this.name, (dataPipeline) => {
+          endTimer({
+            hookName: "resolveDataStages",
+            parentNode: dataControllerNode
+          });
+          return dataPipeline;
+        });
+        dc.hooks.resolveDefaultValue.tap(this.name, () => {
+          endTimer({
+            hookName: "resolveDefaultValue",
+            parentNode: dataControllerNode
+          });
+        });
+        dc.hooks.onDelete.tap(this.name, () => {
+          endTimer({ hookName: "onDelete", parentNode: dataControllerNode });
+        });
+        dc.hooks.onSet.tap(this.name, () => {
+          endTimer({ hookName: "onSet", parentNode: dataControllerNode });
+        });
+        dc.hooks.onGet.tap(this.name, () => {
+          endTimer({ hookName: "onGet", parentNode: dataControllerNode });
+        });
+        dc.hooks.onUpdate.tap(this.name, () => {
+          endTimer({ hookName: "onUpdate", parentNode: dataControllerNode });
+        });
+        dc.hooks.format.tap(this.name, () => {
+          endTimer({ hookName: "format", parentNode: dataControllerNode });
+        });
+        dc.hooks.deformat.tap(this.name, () => {
+          endTimer({ hookName: "deformat", parentNode: dataControllerNode });
+        });
+        dc.hooks.serialize.tap(this.name, () => {
+          endTimer({ hookName: "serialize", parentNode: dataControllerNode });
+        });
+        dataControllerNode = endTimer({
+          hookName: dataControllerNode.name,
+          children: dataControllerNode.children
+        });
+      });
+      player.hooks.schema.intercept({
+        call: (sc) => {
+          startTimer("schema");
+          sc.hooks.resolveTypeForBinding.intercept({
+            call: () => {
+              startTimer("resolveTypeForBinding");
+            }
+          });
+        }
+      });
+      player.hooks.schema.tap(this.name, (sc) => {
+        let schemaNode = {
+          name: "schema",
+          children: []
+        };
+        sc.hooks.resolveTypeForBinding.tap(this.name, (dataType) => {
+          endTimer({
+            hookName: "resolveTypeForBinding",
+            parentNode: schemaNode
+          });
+          return dataType;
+        });
+        schemaNode = endTimer({
+          hookName: schemaNode.name,
+          children: schemaNode.children
+        });
+      });
+      player.hooks.validationController.intercept({
+        call: (vc) => {
+          startTimer("validationController");
+          vc.hooks.createValidatorRegistry.intercept({
+            call: () => {
+              startTimer("createValidatorRegistry");
+            }
+          });
+          vc.hooks.onAddValidation.intercept({
+            call: () => {
+              startTimer("onAddValidation");
+            }
+          });
+          vc.hooks.onRemoveValidation.intercept({
+            call: () => {
+              startTimer("onRemoveValidation");
+            }
+          });
+        }
+      });
+      player.hooks.validationController.tap(this.name, (vc) => {
+        let validationControllerNode = {
+          name: "validationController",
+          children: []
+        };
+        vc.hooks.createValidatorRegistry.tap(this.name, () => {
+          endTimer({
+            hookName: "createValidatorRegistry",
+            parentNode: validationControllerNode
+          });
+        });
+        vc.hooks.onAddValidation.tap(this.name, (validationResponse) => {
+          endTimer({
+            hookName: "onAddValidation",
+            parentNode: validationControllerNode
+          });
+          return validationResponse;
+        });
+        vc.hooks.onRemoveValidation.tap(this.name, (validationResponse) => {
+          endTimer({
+            hookName: "onRemoveValidation",
+            parentNode: validationControllerNode
+          });
+          return validationResponse;
+        });
+        validationControllerNode = endTimer({
+          hookName: validationControllerNode.name,
+          children: validationControllerNode.children
+        });
+      });
+      player.hooks.bindingParser.intercept({
+        call: (bp) => {
+          startTimer("bindingParser");
+          bp.hooks.skipOptimization.intercept({
+            call: () => {
+              startTimer("skipOptimization");
+            }
+          });
+          bp.hooks.beforeResolveNode.intercept({
+            call: () => {
+              startTimer("beforeResolveNode");
+            }
+          });
+        }
+      });
+      player.hooks.bindingParser.tap(this.name, (bp) => {
+        let bindingParserNode = {
+          name: "bindingParser",
+          children: []
+        };
+        bp.hooks.skipOptimization.tap(this.name, () => {
+          endTimer({
+            hookName: "skipOptimization",
+            parentNode: bindingParserNode
+          });
+          return void 0;
+        });
+        bp.hooks.beforeResolveNode.tap(this.name, (node) => {
+          endTimer({
+            hookName: "beforeResolveNode",
+            parentNode: bindingParserNode
+          });
+          return node;
+        });
+        bindingParserNode = endTimer({
+          hookName: bindingParserNode.name,
+          children: bindingParserNode.children
+        });
+      });
+      player.hooks.state.intercept({
+        call: () => {
+          startTimer("state");
+        }
+      });
+      player.hooks.state.tap(this.name, () => {
+        endTimer({ hookName: "state" });
+      });
+      player.hooks.onEnd.intercept({
+        call: () => {
+          startTimer("onEnd");
+        }
+      });
+      player.hooks.onEnd.tap(this.name, () => {
+        endTimer({ hookName: "onEnd" });
+      });
+      player.hooks.resolveFlowContent.intercept({
+        call: () => {
+          startTimer("resolveFlowContent");
+        }
+      });
+      player.hooks.resolveFlowContent.tap(this.name, (flow) => {
+        endTimer({ hookName: "resolveFlowContent" });
+        return flow;
+      });
+    };
+    webComponent.tap(this.name, (Comp) => () => {
+      return /* @__PURE__ */ React2.createElement(
+        WrapperComponent,
+        {
+          startProfiler,
+          stopProfiler
+        },
+        /* @__PURE__ */ React2.createElement(Comp, null)
+      );
+    });
+  }
+};
+export {
+  ProfilerPlugin
+};
+//# sourceMappingURL=index.mjs.map