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

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/profiler/src/index.tsx","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/profiler/src/constants/index.ts","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/profiler/src/WrapperComponent.tsx","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/profiler/src/helpers/genDataChangeTransaction.ts","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/profiler/src/helpers/profiler.ts","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/profiler/_generated/index.json"],"sourcesContent":["import type { ReactPlayer, ReactPlayerPlugin } from \"@player-ui/react\";\nimport React from \"react\";\nimport { PLUGIN_ID } from \"./constants\";\nimport { ProfilerNode } from \"./types\";\nimport { WrapperComponent } from \"./WrapperComponent\";\nimport { profiler } from \"./helpers\";\n\nexport class ProfilerPlugin implements ReactPlayerPlugin {\n  name = PLUGIN_ID;\n\n  checkIfDevtoolsIsActive() {\n    return localStorage.getItem(\"player-ui-devtools-active\") === \"true\";\n  }\n\n  applyReact({ player, hooks: { webComponent } }: ReactPlayer) {\n    if (!this.checkIfDevtoolsIsActive()) {\n      return;\n    }\n\n    const { start, startTimer, endTimer, stopProfiler } = profiler();\n\n    /** function to tap into hooks and start the profiler */\n    const startProfiler = () => {\n      start();\n\n      player.hooks.onStart.intercept({\n        call: () => {\n          startTimer(\"onStart\");\n        },\n      });\n\n      player.hooks.onStart.tap(this.name, () => {\n        endTimer({ hookName: \"onStart\" });\n      });\n\n      player.hooks.flowController.intercept({\n        call: (fc) => {\n          startTimer(\"flowController\");\n          fc.hooks.flow.intercept({\n            call: () => {\n              startTimer(\"flow\");\n            },\n          });\n        },\n      });\n\n      player.hooks.flowController.tap(this.name, (fc) => {\n        let flowControllerNode: ProfilerNode = {\n          name: \"flowController\",\n          children: [],\n        };\n\n        fc.hooks.flow.tap(this.name, () => {\n          endTimer({ hookName: \"flow\", parentNode: flowControllerNode });\n        });\n\n        flowControllerNode = endTimer({\n          hookName: flowControllerNode.name,\n          children: flowControllerNode.children,\n        });\n      });\n\n      player.hooks.viewController.intercept({\n        call: (vc) => {\n          startTimer(\"viewController\");\n          vc.hooks.resolveView.intercept({\n            call: () => {\n              startTimer(\"resolveView\");\n            },\n          });\n          vc.hooks.view.intercept({\n            call: () => {\n              startTimer(\"view\");\n            },\n          });\n        },\n      });\n\n      player.hooks.viewController.tap(this.name, (vc) => {\n        let viewControllerNode: ProfilerNode = {\n          name: \"viewController\",\n          children: [],\n        };\n\n        vc.hooks.resolveView.tap(this.name, (asset) => {\n          endTimer({ hookName: \"resolveView\", parentNode: viewControllerNode });\n          return asset;\n        });\n\n        viewControllerNode = endTimer({\n          hookName: viewControllerNode.name,\n          children: viewControllerNode.children,\n        });\n      });\n\n      player.hooks.view.intercept({\n        call: (view) => {\n          startTimer(\"view\");\n\n          view.hooks.onUpdate.intercept({\n            call: () => {\n              startTimer(\"onUpdate\");\n            },\n          });\n\n          view.hooks.parser.intercept({\n            call: () => {\n              startTimer(\"parser\");\n            },\n          });\n\n          view.hooks.resolver.intercept({\n            call: () => {\n              startTimer(\"resolver\");\n            },\n          });\n\n          view.hooks.templatePlugin.intercept({\n            call: () => {\n              startTimer(\"templatePlugin\");\n            },\n          });\n        },\n      });\n\n      player.hooks.view.tap(this.name, (view) => {\n        let viewNode: ProfilerNode = {\n          name: \"view\",\n          children: [],\n        };\n\n        view.hooks.onUpdate.tap(this.name, () => {\n          endTimer({ hookName: \"onUpdate\", parentNode: viewNode });\n        });\n\n        view.hooks.parser.tap(this.name, () => {\n          endTimer({ hookName: \"parser\", parentNode: viewNode });\n        });\n\n        view.hooks.resolver.tap(this.name, () => {\n          endTimer({ hookName: \"resolver\", parentNode: viewNode });\n        });\n\n        view.hooks.templatePlugin.tap(this.name, () => {\n          endTimer({ hookName: \"templatePlugin\", parentNode: viewNode });\n        });\n\n        viewNode = endTimer({\n          hookName: viewNode.name,\n          children: viewNode.children,\n        });\n      });\n\n      player.hooks.expressionEvaluator.intercept({\n        call: (ev) => {\n          startTimer(\"expressionEvaluator\");\n\n          ev.hooks.resolve.intercept({\n            call: () => {\n              startTimer(\"resolve\");\n            },\n          });\n\n          ev.hooks.onError.intercept({\n            call: () => {\n              startTimer(\"onError\");\n            },\n          });\n        },\n      });\n\n      player.hooks.expressionEvaluator.tap(this.name, (ev) => {\n        let expressionEvaluatorNode: ProfilerNode = {\n          name: \"expressionEvaluator\",\n          children: [],\n        };\n\n        ev.hooks.resolve.tap(this.name, () => {\n          endTimer({\n            hookName: \"resolve\",\n            parentNode: expressionEvaluatorNode,\n          });\n        });\n\n        ev.hooks.onError.tap(this.name, () => {\n          endTimer({\n            hookName: \"onError\",\n            parentNode: expressionEvaluatorNode,\n          });\n          return undefined;\n        });\n\n        expressionEvaluatorNode = endTimer({\n          hookName: expressionEvaluatorNode.name,\n          children: expressionEvaluatorNode.children,\n        });\n      });\n\n      player.hooks.dataController.intercept({\n        call: (dc) => {\n          startTimer(\"dataController\");\n\n          dc.hooks.resolve.intercept({\n            call: () => {\n              startTimer(\"resolve\");\n            },\n          });\n          dc.hooks.resolveDataStages.intercept({\n            call: () => {\n              startTimer(\"resolveDataStages\");\n            },\n          });\n          dc.hooks.resolveDefaultValue.intercept({\n            call: () => {\n              startTimer(\"resolveDefaultValue\");\n            },\n          });\n          dc.hooks.onDelete.intercept({\n            call: () => {\n              startTimer(\"onDelete\");\n            },\n          });\n          dc.hooks.onSet.intercept({\n            call: () => {\n              startTimer(\"onSet\");\n            },\n          });\n          dc.hooks.onGet.intercept({\n            call: () => {\n              startTimer(\"onGet\");\n            },\n          });\n          dc.hooks.onUpdate.intercept({\n            call: () => {\n              startTimer(\"onUpdate\");\n            },\n          });\n          dc.hooks.format.intercept({\n            call: () => {\n              startTimer(\"resolve\");\n            },\n          });\n          dc.hooks.deformat.intercept({\n            call: () => {\n              startTimer(\"deformat\");\n            },\n          });\n          dc.hooks.serialize.intercept({\n            call: () => {\n              startTimer(\"serialize\");\n            },\n          });\n        },\n      });\n\n      player.hooks.dataController.tap(this.name, (dc) => {\n        let dataControllerNode: ProfilerNode = {\n          name: \"dataController\",\n          children: [],\n        };\n\n        dc.hooks.resolve.tap(this.name, () => {\n          endTimer({ hookName: \"resolve\", parentNode: dataControllerNode });\n        });\n\n        dc.hooks.resolveDataStages.tap(this.name, (dataPipeline) => {\n          endTimer({\n            hookName: \"resolveDataStages\",\n            parentNode: dataControllerNode,\n          });\n          return dataPipeline;\n        });\n\n        dc.hooks.resolveDefaultValue.tap(this.name, () => {\n          endTimer({\n            hookName: \"resolveDefaultValue\",\n            parentNode: dataControllerNode,\n          });\n        });\n\n        dc.hooks.onDelete.tap(this.name, () => {\n          endTimer({ hookName: \"onDelete\", parentNode: dataControllerNode });\n        });\n\n        dc.hooks.onSet.tap(this.name, () => {\n          endTimer({ hookName: \"onSet\", parentNode: dataControllerNode });\n        });\n\n        dc.hooks.onGet.tap(this.name, () => {\n          endTimer({ hookName: \"onGet\", parentNode: dataControllerNode });\n        });\n\n        dc.hooks.onUpdate.tap(this.name, () => {\n          endTimer({ hookName: \"onUpdate\", parentNode: dataControllerNode });\n        });\n\n        dc.hooks.format.tap(this.name, () => {\n          endTimer({ hookName: \"format\", parentNode: dataControllerNode });\n        });\n\n        dc.hooks.deformat.tap(this.name, () => {\n          endTimer({ hookName: \"deformat\", parentNode: dataControllerNode });\n        });\n\n        dc.hooks.serialize.tap(this.name, () => {\n          endTimer({ hookName: \"serialize\", parentNode: dataControllerNode });\n        });\n\n        dataControllerNode = endTimer({\n          hookName: dataControllerNode.name,\n          children: dataControllerNode.children,\n        });\n      });\n\n      player.hooks.schema.intercept({\n        call: (sc) => {\n          startTimer(\"schema\");\n          sc.hooks.resolveTypeForBinding.intercept({\n            call: () => {\n              startTimer(\"resolveTypeForBinding\");\n            },\n          });\n        },\n      });\n\n      player.hooks.schema.tap(this.name, (sc) => {\n        let schemaNode: ProfilerNode = {\n          name: \"schema\",\n          children: [],\n        };\n\n        sc.hooks.resolveTypeForBinding.tap(this.name, (dataType) => {\n          endTimer({\n            hookName: \"resolveTypeForBinding\",\n            parentNode: schemaNode,\n          });\n          return dataType;\n        });\n\n        schemaNode = endTimer({\n          hookName: schemaNode.name,\n          children: schemaNode.children,\n        });\n      });\n\n      player.hooks.validationController.intercept({\n        call: (vc) => {\n          startTimer(\"validationController\");\n\n          vc.hooks.createValidatorRegistry.intercept({\n            call: () => {\n              startTimer(\"createValidatorRegistry\");\n            },\n          });\n          vc.hooks.onAddValidation.intercept({\n            call: () => {\n              startTimer(\"onAddValidation\");\n            },\n          });\n          vc.hooks.onRemoveValidation.intercept({\n            call: () => {\n              startTimer(\"onRemoveValidation\");\n            },\n          });\n        },\n      });\n\n      player.hooks.validationController.tap(this.name, (vc) => {\n        let validationControllerNode: ProfilerNode = {\n          name: \"validationController\",\n          children: [],\n        };\n\n        vc.hooks.createValidatorRegistry.tap(this.name, () => {\n          endTimer({\n            hookName: \"createValidatorRegistry\",\n            parentNode: validationControllerNode,\n          });\n        });\n\n        vc.hooks.onAddValidation.tap(this.name, (validationResponse) => {\n          endTimer({\n            hookName: \"onAddValidation\",\n            parentNode: validationControllerNode,\n          });\n          return validationResponse;\n        });\n\n        vc.hooks.onRemoveValidation.tap(this.name, (validationResponse) => {\n          endTimer({\n            hookName: \"onRemoveValidation\",\n            parentNode: validationControllerNode,\n          });\n          return validationResponse;\n        });\n\n        validationControllerNode = endTimer({\n          hookName: validationControllerNode.name,\n          children: validationControllerNode.children,\n        });\n      });\n\n      player.hooks.bindingParser.intercept({\n        call: (bp) => {\n          startTimer(\"bindingParser\");\n          bp.hooks.skipOptimization.intercept({\n            call: () => {\n              startTimer(\"skipOptimization\");\n            },\n          });\n          bp.hooks.beforeResolveNode.intercept({\n            call: () => {\n              startTimer(\"beforeResolveNode\");\n            },\n          });\n        },\n      });\n\n      player.hooks.bindingParser.tap(this.name, (bp) => {\n        let bindingParserNode: ProfilerNode = {\n          name: \"bindingParser\",\n          children: [],\n        };\n\n        bp.hooks.skipOptimization.tap(this.name, () => {\n          endTimer({\n            hookName: \"skipOptimization\",\n            parentNode: bindingParserNode,\n          });\n          return undefined;\n        });\n        bp.hooks.beforeResolveNode.tap(this.name, (node) => {\n          endTimer({\n            hookName: \"beforeResolveNode\",\n            parentNode: bindingParserNode,\n          });\n          return node;\n        });\n\n        bindingParserNode = endTimer({\n          hookName: bindingParserNode.name,\n          children: bindingParserNode.children,\n        });\n      });\n\n      player.hooks.state.intercept({\n        call: () => {\n          startTimer(\"state\");\n        },\n      });\n\n      player.hooks.state.tap(this.name, () => {\n        endTimer({ hookName: \"state\" });\n      });\n\n      player.hooks.onEnd.intercept({\n        call: () => {\n          startTimer(\"onEnd\");\n        },\n      });\n\n      player.hooks.onEnd.tap(this.name, () => {\n        endTimer({ hookName: \"onEnd\" });\n      });\n\n      player.hooks.resolveFlowContent.intercept({\n        call: () => {\n          startTimer(\"resolveFlowContent\");\n        },\n      });\n\n      player.hooks.resolveFlowContent.tap(this.name, (flow) => {\n        endTimer({ hookName: \"resolveFlowContent\" });\n        return flow;\n      });\n    };\n\n    // eslint-disable-next-line react/display-name\n    webComponent.tap(this.name, (Comp) => () => {\n      return (\n        <WrapperComponent\n          startProfiler={startProfiler}\n          stopProfiler={stopProfiler}\n        >\n          <Comp />\n        </WrapperComponent>\n      );\n    });\n  }\n}\n","import type { PluginData } from \"@player-tools/devtools-types\";\n\nexport const PLUGIN_ID = \"player-ui-profiler-plugin\";\n\nexport const PLUGIN_NAME = \"Player UI Profiler\";\n\nexport const PLUGIN_DESCRIPTION = \"Standard Player UI Profiler\";\n\nexport const PLUGIN_VERSION = \"0.0.1\";\n\nexport const VIEWS_IDS = {\n  PROFILER: \"Profiler\",\n};\n\nexport const INTERACTIONS = {\n  START_PROFILING: \"start-profiling\",\n  STOP_PROFILING: \"stop-profiling\",\n};\n\nexport const BASE_PLUGIN_DATA: Omit<PluginData, \"flow\"> = {\n  id: PLUGIN_ID,\n  name: PLUGIN_NAME,\n  description: PLUGIN_DESCRIPTION,\n  version: PLUGIN_VERSION,\n};\n\nexport const PLUGIN_INACTIVE_WARNING =\n  \"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.\";\n","import { usePluginState } from \"@player-tools/devtools-desktop-plugins-common\";\nimport type {\n  DevtoolsPluginInteractionEvent,\n  PlayerInitEvent,\n  PluginData,\n  Transaction,\n} from \"@player-tools/devtools-types\";\nimport type { Flow } from \"@player-ui/react\";\nimport { dset } from \"dset/merge\";\nimport { produce } from \"immer\";\nimport React, { useCallback, useEffect } from \"react\";\nimport { BASE_PLUGIN_DATA, INTERACTIONS } from \"./constants\";\nimport type { WrapperComponentProps } from \"./types\";\nimport { genDataChangeTransaction } from \"./helpers\";\nimport flow from \"../_generated/index.json\";\n\nconst pluginData: PluginData = {\n  ...BASE_PLUGIN_DATA,\n  flow: flow as Flow,\n};\n\n/** Defines the content to be rendered into the extension Player UI and process changes */\nexport const WrapperComponent = ({\n  children,\n  startProfiler,\n  stopProfiler,\n}: WrapperComponentProps): JSX.Element => {\n  const [state, playerID, dispatch] = usePluginState();\n  const lastProcessedInteraction = React.useRef(0);\n  const id = pluginData.id;\n\n  // Initial plugin content\n  useEffect(() => {\n    const transaction: Transaction<PlayerInitEvent> = {\n      id: -1,\n      type: \"PLAYER_DEVTOOLS_PLAYER_INIT\",\n      payload: {\n        plugins: {\n          [id]: pluginData,\n        },\n      },\n      sender: playerID,\n      context: \"player\",\n      target: \"player\",\n      timestamp: Date.now(),\n      _messenger_: true,\n    };\n\n    dispatch(transaction);\n  }, []);\n\n  const processInteraction = useCallback(\n    (interaction: DevtoolsPluginInteractionEvent) => {\n      const {\n        payload: { type },\n      } = interaction;\n      if (type === INTERACTIONS.START_PROFILING) {\n        startProfiler();\n        lastProcessedInteraction.current += 1;\n\n        const newState = produce(state, (draft) => {\n          dset(draft, [\"plugins\", id, \"flow\", \"data\", \"rootNode\"], {\n            name: \"root\",\n            children: [],\n          });\n          dset(draft, [\"plugins\", id, \"flow\", \"data\", \"durations\"], []);\n          dset(draft, [\"plugins\", id, \"flow\", \"data\", \"profiling\"], true);\n          dset(\n            draft,\n            [\"plugins\", id, \"flow\", \"data\", \"displayFlameGraph\"],\n            false\n          );\n        });\n\n        const transaction = genDataChangeTransaction({\n          playerID,\n          data: newState.plugins[id].flow.data,\n          pluginID: id,\n        });\n\n        dispatch(transaction);\n      }\n\n      if (type === INTERACTIONS.STOP_PROFILING) {\n        const { rootNode, durations } = stopProfiler();\n        lastProcessedInteraction.current += 1;\n\n        const newState = produce(state, (draft) => {\n          dset(draft, [\"plugins\", id, \"flow\", \"data\", \"rootNode\"], rootNode);\n          dset(draft, [\"plugins\", id, \"flow\", \"data\", \"durations\"], durations);\n          dset(draft, [\"plugins\", id, \"flow\", \"data\", \"profiling\"], false);\n          dset(\n            draft,\n            [\"plugins\", id, \"flow\", \"data\", \"displayFlameGraph\"],\n            true\n          );\n        });\n\n        const transaction = genDataChangeTransaction({\n          playerID,\n          data: newState.plugins[id].flow.data,\n          pluginID: id,\n        });\n\n        dispatch(transaction);\n      }\n    },\n    [dispatch, id, state]\n  );\n\n  // Process interactions\n  useEffect(() => {\n    if (lastProcessedInteraction.current < (state.interactions.length ?? 0)) {\n      state.interactions\n        .slice(lastProcessedInteraction.current)\n        .forEach(processInteraction);\n    }\n  }, [state.interactions.length]);\n\n  return children as JSX.Element;\n};\n","import type {\n  DevtoolsDataChangeEvent,\n  Transaction,\n} from \"@player-tools/devtools-types\";\nimport type { Flow } from \"@player-ui/react\";\n\nconst NOOP_ID = -1;\n\n/**\n * Generates a data change transaction for the player devtools plugin.\n *\n * This function creates a transaction object that represents a change in data\n * within a player devtools plugin. The transaction includes details such as the\n * plugin ID, the changed data, and the player ID. It is used to communicate\n * changes between the plugin and devtools.\n */\nexport const genDataChangeTransaction = ({\n  playerID,\n  data,\n  pluginID,\n}: {\n  playerID: string;\n  data: Flow[\"data\"];\n  pluginID: string;\n}): Transaction<DevtoolsDataChangeEvent> => {\n  return {\n    id: NOOP_ID,\n    type: \"PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE\",\n    payload: {\n      pluginID,\n      data,\n    },\n    sender: playerID,\n    context: \"player\",\n    target: \"player\",\n    timestamp: Date.now(),\n    _messenger_: true,\n  };\n};\n","import type { ProfilerNode } from \"../types\";\n\nexport const profiler = () => {\n  let rootNode: ProfilerNode = {\n    name: \"root\",\n    children: [],\n  };\n\n  let record: { [key: string]: number[] } = {};\n  let durations: { hookName: string; duration: number }[] = [];\n\n  const start = () => {\n    rootNode = {\n      name: \"root\",\n      startTime: performance.now(),\n      children: [],\n    };\n    record = {};\n    durations = [];\n  };\n\n  const addNodeToTree = (newNode: ProfilerNode, parentNode: ProfilerNode) => {\n    parentNode.children.push(newNode);\n    return newNode;\n  };\n\n  const startTimer = (hookName: string) => {\n    const startTime = performance.now();\n\n    if (!record[hookName] || record[hookName].length === 2) {\n      record[hookName] = [];\n      record[hookName].push(startTime);\n    }\n  };\n\n  const endTimer = ({\n    hookName,\n    parentNode = rootNode,\n    children,\n  }: {\n    hookName: string;\n    parentNode?: ProfilerNode;\n    children?: ProfilerNode[];\n  }) => {\n    let startTime: number | undefined;\n    let duration: number | undefined;\n\n    const endTime = performance.now();\n\n    for (const key in record) {\n      if (key === hookName && record[key].length === 1) {\n        [startTime] = record[key];\n        duration = endTime - startTime;\n        record[key].push(endTime);\n      }\n    }\n\n    const value = Math.ceil((duration || 0.01) * 1000);\n\n    const newNode: ProfilerNode = {\n      name: hookName,\n      startTime,\n      endTime,\n      value,\n      tooltip: `${hookName}, ${(duration || 0.01).toFixed(4)} (ms)`,\n      children: children ?? [],\n    };\n\n    addNodeToTree(newNode, parentNode);\n\n    // Push the hookName and duration into durations array\n    durations.push({ hookName, duration: duration ? duration : 0.01 });\n\n    return newNode;\n  };\n\n  const stopProfiler = (): {\n    rootNode: ProfilerNode;\n    durations: { name: string; duration: string }[];\n  } => {\n    const endTime = performance.now();\n    const totalTime = endTime - (rootNode.startTime ?? 0);\n\n    rootNode.endTime = endTime;\n    // set the stop profiler value is the sum of its children values\n    // otherwise the difference of width of the root and the other nodes\n    // make it impossible to see them into the flame graph\n    rootNode.value =\n      rootNode.children.reduce((acc, { value }) => (acc += value ?? 0), 0) ||\n      Math.ceil((totalTime || 0.01) * 1000);\n    rootNode.tooltip = `Profiler total time span ${totalTime.toFixed(4)} (ms)`;\n\n    // Sort durations array in descending order\n    durations.sort((a, b) => b.duration - a.duration);\n\n    return {\n      rootNode,\n      durations: durations.map(({ hookName, duration }) => ({\n        name: hookName,\n        duration: `${duration.toFixed(4)} ms`,\n      })),\n    };\n  };\n\n  return {\n    start,\n    startTimer,\n    endTimer,\n    stopProfiler,\n  };\n};\n","{\n  \"id\": \"player-ui-profiler-plugin\",\n  \"views\": [\n    {\n      \"id\": \"Profiler\",\n      \"type\": \"stacked-view\",\n      \"header\": {\n        \"asset\": {\n          \"id\": \"Profiler-header\",\n          \"type\": \"collection\",\n          \"values\": [\n            {\n              \"asset\": {\n                \"id\": \"Profiler-header-values-0\",\n                \"type\": \"action\",\n                \"applicability\": \" {{profiling}} === true \",\n                \"exp\": \"@[ publish('stop-profiling') ]@\",\n                \"label\": {\n                  \"asset\": {\n                    \"id\": \"Profiler-header-values-0-label\",\n                    \"type\": \"text\",\n                    \"value\": \"Stop\"\n                  }\n                }\n              }\n            },\n            {\n              \"asset\": {\n                \"id\": \"Profiler-header-values-1\",\n                \"type\": \"action\",\n                \"applicability\": \" {{profiling}} === false \",\n                \"exp\": \"@[ publish('start-profiling') ]@\",\n                \"label\": {\n                  \"asset\": {\n                    \"id\": \"Profiler-header-values-1-label\",\n                    \"type\": \"text\",\n                    \"value\": \"Start\"\n                  }\n                }\n              }\n            }\n          ]\n        }\n      },\n      \"main\": {\n        \"asset\": {\n          \"id\": \"Profiler-main\",\n          \"type\": \"collection\",\n          \"values\": [\n            {\n              \"asset\": {\n                \"id\": \"Profiler-main-values-0\",\n                \"type\": \"table\",\n                \"applicability\": \" {{displayFlameGraph}} === true \",\n                \"binding\": \"durations\"\n              }\n            },\n            {\n              \"asset\": {\n                \"id\": \"Profiler-main-values-1\",\n                \"type\": \"flame-graph\",\n                \"applicability\": \" {{displayFlameGraph}} === true \",\n                \"height\": 200,\n                \"binding\": \"rootNode\"\n              }\n            },\n            {\n              \"asset\": {\n                \"id\": \"Profiler-main-values-2\",\n                \"type\": \"text\",\n                \"applicability\": \" {{displayFlameGraph}} === false && {{profiling}} === true\",\n                \"value\": \"Profiling...\"\n              }\n            },\n            {\n              \"asset\": {\n                \"id\": \"Profiler-main-values-3\",\n                \"type\": \"text\",\n                \"applicability\": \" {{displayFlameGraph}} === false && {{profiling}} === false \",\n                \"value\": \"Start the profiler to generate the flame graph.\"\n              }\n            }\n          ]\n        }\n      }\n    }\n  ],\n  \"navigation\": {\n    \"BEGIN\": \"Plugin\",\n    \"Plugin\": {\n      \"startState\": \"PROFILER\",\n      \"PROFILER\": {\n        \"state_type\": \"VIEW\",\n        \"ref\": \"Profiler\",\n        \"transitions\": {\n          \"Profiler\": \"PROFILER\"\n        }\n      }\n    }\n  },\n  \"schema\": {\n    \"ROOT\": {\n      \"playerConfig\": {\n        \"type\": \"RecordType\"\n      },\n      \"rootNode\": {\n        \"type\": \"RecordType\"\n      },\n      \"profiling\": {\n        \"type\": \"BooleanType\",\n        \"default\": false,\n        \"validation\": [\n          {\n            \"type\": \"oneOf\",\n            \"message\": \"Value must be true or false\",\n            \"options\": [\n              true,\n              false\n            ]\n          }\n        ]\n      },\n      \"displayFlameGraph\": {\n        \"type\": \"BooleanType\",\n        \"default\": false,\n        \"validation\": [\n          {\n            \"type\": \"oneOf\",\n            \"message\": \"Value must be true or false\",\n            \"options\": [\n              true,\n              false\n            ]\n          }\n        ]\n      },\n      \"durations\": {\n        \"type\": \"durationsType\",\n        \"isArray\": true\n      }\n    },\n    \"durationsType\": {\n      \"name\": {\n        \"type\": \"StringType\",\n        \"default\": \"\",\n        \"validation\": [\n          {\n            \"type\": \"string\"\n          }\n        ],\n        \"format\": {\n          \"type\": \"string\"\n        }\n      },\n      \"duration\": {\n        \"type\": \"StringType\",\n        \"default\": \"\",\n        \"validation\": [\n          {\n            \"type\": \"string\"\n          }\n        ],\n        \"format\": {\n          \"type\": \"string\"\n        }\n      }\n    }\n  },\n  \"data\": {\n    \"rootNode\": {\n      \"name\": \"profiler time span\",\n      \"value\": 0\n    },\n    \"displayFlameGraph\": false,\n    \"profiling\": false\n  }\n}"],"mappings":"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","names":["React","React"]}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@player-tools/devtools-profiler-web-plugin",
+  "version": "0.6.1--canary.125.2996",
+  "main": "dist/cjs/index.cjs",
+  "dependencies": {
+    "@player-tools/devtools-types": "0.6.1--canary.125.2996",
+    "@player-tools/devtools-desktop-plugins-common": "0.6.1--canary.125.2996",
+    "@player-tools/dsl": "0.6.1--canary.125.2996",
+    "@player-tools/cli": "0.6.1--canary.125.2996",
+    "@player-ui/common-types-plugin": "0.7.3",
+    "@player-ui/react": "0.7.3",
+    "@devtools-ui/plugin": "0.2.0",
+    "@player-ui/reference-assets-plugin-react": "0.7.3",
+    "@player-ui/types": "0.7.3",
+    "@types/react": "^18.2.51",
+    "react": "^18.2.0",
+    "immer": "^10.0.3",
+    "uuid": "^8.3.2",
+    "@types/uuid": "^8.3.4",
+    "dset": "^3.1.3",
+    "dequal": "^2.0.2",
+    "tslib": "^2.6.2"
+  },
+  "module": "dist/index.legacy-esm.js",
+  "types": "types/index.d.ts",
+  "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"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "peerDependencies": {}
+}

package/src/WrapperComponent.tsx

@@ -0,0 +1,121 @@
+import { usePluginState } from "@player-tools/devtools-desktop-plugins-common";
+import type {
+  DevtoolsPluginInteractionEvent,
+  PlayerInitEvent,
+  PluginData,
+  Transaction,
+} from "@player-tools/devtools-types";
+import type { Flow } from "@player-ui/react";
+import { dset } from "dset/merge";
+import { produce } from "immer";
+import React, { useCallback, useEffect } from "react";
+import { BASE_PLUGIN_DATA, INTERACTIONS } from "./constants";
+import type { WrapperComponentProps } from "./types";
+import { genDataChangeTransaction } from "./helpers";
+import flow from "../_generated/index.json";
+
+const pluginData: PluginData = {
+  ...BASE_PLUGIN_DATA,
+  flow: flow as Flow,
+};
+
+/** Defines the content to be rendered into the extension Player UI and process changes */
+export const WrapperComponent = ({
+  children,
+  startProfiler,
+  stopProfiler,
+}: WrapperComponentProps): JSX.Element => {
+  const [state, playerID, dispatch] = usePluginState();
+  const lastProcessedInteraction = React.useRef(0);
+  const id = pluginData.id;
+
+  // Initial plugin content
+  useEffect(() => {
+    const transaction: Transaction<PlayerInitEvent> = {
+      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: DevtoolsPluginInteractionEvent) => {
+      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]
+  );
+
+  // Process interactions
+  useEffect(() => {
+    if (lastProcessedInteraction.current < (state.interactions.length ?? 0)) {
+      state.interactions
+        .slice(lastProcessedInteraction.current)
+        .forEach(processInteraction);
+    }
+  }, [state.interactions.length]);
+
+  return children as JSX.Element;
+};

package/src/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,90 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ProfilerPlugin > snapshot 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div
+      id="chakra-toast-portal"
+    >
+      <ul
+        id="chakra-toast-manager-top"
+        style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; margin: 0px auto;"
+      />
+      <ul
+        id="chakra-toast-manager-top-left"
+        style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column;"
+      />
+      <ul
+        id="chakra-toast-manager-top-right"
+        style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column;"
+      />
+      <ul
+        id="chakra-toast-manager-bottom-left"
+        style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column;"
+      />
+      <ul
+        id="chakra-toast-manager-bottom"
+        style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; margin: 0px auto;"
+      />
+      <ul
+        id="chakra-toast-manager-bottom-right"
+        style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column;"
+      />
+    </div>
+    <div />
+  </body>,
+  "container": <div />,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

package/src/__tests__/index.test.tsx

@@ -0,0 +1,307 @@
+import React from "react";
+import { ReferenceAssetsPlugin } from "@player-ui/reference-assets-plugin-react";
+import { Flow, ReactPlayer } from "@player-ui/react";
+import { test, vi, describe, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { ProfilerPlugin } from "..";
+
+vi.mock("../WrapperComponent.tsx", () => ({
+  WrapperComponent: vi.fn(),
+}));
+
+let count = 2490.0;
+
+const now = vi.fn(() => {
+  count += 0.1;
+  return count;
+});
+
+global.performance = { ...global.performance, now };
+
+const flow: Flow = {
+  id: "flow_1",
+  views: [
+    {
+      id: "test",
+      type: "text",
+      value: "TEST",
+    },
+  ],
+  navigation: {
+    BEGIN: "flow_1",
+    flow_1: {
+      startState: "view_1",
+      view_1: {
+        state_type: "VIEW",
+        ref: "test",
+        transitions: {
+          "*": "end_1",
+        },
+      },
+      end_1: {
+        state_type: "END",
+        outcome: "end",
+      },
+    },
+  },
+};
+
+function waitForMicrotasks() {
+  return new Promise((resolve) => {
+    queueMicrotask(() => {
+      resolve({});
+    });
+  });
+}
+
+class MockPlayer {
+  callbacks: any[] = [];
+
+  createHandles() {
+    return {
+      tap: (name: string, cb: any) => {
+        this.callbacks.push(cb);
+      },
+      intercept: ({ call }: { call: any }) => {
+        this.callbacks.push(call);
+      },
+    };
+  }
+
+  hooks = {
+    onStart: this.createHandles(),
+    flowController: this.createHandles(),
+    flow: this.createHandles(),
+    viewController: this.createHandles(),
+    resolveView: this.createHandles(),
+    view: this.createHandles(),
+    onUpdate: this.createHandles(),
+    parser: this.createHandles(),
+    resolver: this.createHandles(),
+    templatePlugin: this.createHandles(),
+    expressionEvaluator: this.createHandles(),
+    resolve: this.createHandles(),
+    onError: this.createHandles(),
+    dataController: this.createHandles(),
+    resolveDataStages: this.createHandles(),
+    resolveDefaultValue: this.createHandles(),
+    onDelete: this.createHandles(),
+    onSet: this.createHandles(),
+    onGet: this.createHandles(),
+    format: this.createHandles(),
+    deformat: this.createHandles(),
+    serialize: this.createHandles(),
+    schema: this.createHandles(),
+    resolveTypeForBinding: this.createHandles(),
+    validationController: this.createHandles(),
+    createValidatorRegistry: this.createHandles(),
+    onAddValidation: this.createHandles(),
+    onRemoveValidation: this.createHandles(),
+    bindingParser: this.createHandles(),
+    skipOptimization: this.createHandles(),
+    beforeResolveNode: this.createHandles(),
+    state: this.createHandles(),
+    onEnd: this.createHandles(),
+    resolveFlowContent: this.createHandles(),
+  };
+
+  runAllCallbacks() {
+    this.callbacks.forEach((cb) => cb({ hooks: this.hooks }));
+  }
+}
+
+describe("ProfilerPlugin", () => {
+  test("profiling all hooks", () => {
+    localStorage.setItem("player-ui-devtools-active", "true");
+    const plugin = new ProfilerPlugin();
+    const mockPlayer = new MockPlayer();
+    let props: any;
+
+    plugin.applyReact({
+      player: mockPlayer,
+      hooks: {
+        webComponent: {
+          tap: (_: string, cb: any) => {
+            props = cb(() => <div />)().props;
+          },
+        },
+      },
+    } as any);
+
+    const { startProfiler, stopProfiler } = props;
+
+    startProfiler();
+
+    mockPlayer.runAllCallbacks();
+
+    const result = stopProfiler();
+
+    expect(result).toStrictEqual({
+      durations: [
+        {
+          duration: "0.1000 ms",
+          name: "onStart",
+        },
+        {
+          duration: "0.1000 ms",
+          name: "flowController",
+        },
+        {
+          duration: "0.1000 ms",
+          name: "viewController",
+        },
+        {
+          duration: "0.1000 ms",
+          name: "view",
+        },
+        {
+          duration: "0.1000 ms",
+          name: "expressionEvaluator",
+        },
+        {
+          duration: "0.1000 ms",
+          name: "dataController",
+        },
+        {
+          duration: "0.1000 ms",
+          name: "schema",
+        },
+        {
+          duration: "0.1000 ms",
+          name: "validationController",
+        },
+        {
+          duration: "0.1000 ms",
+          name: "bindingParser",
+        },
+        {
+          duration: "0.1000 ms",
+          name: "state",
+        },
+        {
+          duration: "0.1000 ms",
+          name: "onEnd",
+        },
+        {
+          duration: "0.1000 ms",
+          name: "resolveFlowContent",
+        },
+      ],
+      rootNode: {
+        children: [
+          {
+            children: [],
+            endTime: 2490.2999999999997,
+            name: "onStart",
+            startTime: 2490.2,
+            tooltip: "onStart, 0.1000 (ms)",
+            value: 100,
+          },
+          {
+            children: [],
+            endTime: 2490.4999999999995,
+            name: "flowController",
+            startTime: 2490.3999999999996,
+            tooltip: "flowController, 0.1000 (ms)",
+            value: 100,
+          },
+          {
+            children: [],
+            endTime: 2490.6999999999994,
+            name: "viewController",
+            startTime: 2490.5999999999995,
+            tooltip: "viewController, 0.1000 (ms)",
+            value: 100,
+          },
+          {
+            children: [],
+            endTime: 2490.899999999999,
+            name: "view",
+            startTime: 2490.7999999999993,
+            tooltip: "view, 0.1000 (ms)",
+            value: 100,
+          },
+          {
+            children: [],
+            endTime: 2491.099999999999,
+            name: "expressionEvaluator",
+            startTime: 2490.999999999999,
+            tooltip: "expressionEvaluator, 0.1000 (ms)",
+            value: 100,
+          },
+          {
+            children: [],
+            endTime: 2491.299999999999,
+            name: "dataController",
+            startTime: 2491.199999999999,
+            tooltip: "dataController, 0.1000 (ms)",
+            value: 100,
+          },
+          {
+            children: [],
+            endTime: 2491.4999999999986,
+            name: "schema",
+            startTime: 2491.3999999999987,
+            tooltip: "schema, 0.1000 (ms)",
+            value: 100,
+          },
+          {
+            children: [],
+            endTime: 2491.6999999999985,
+            name: "validationController",
+            startTime: 2491.5999999999985,
+            tooltip: "validationController, 0.1000 (ms)",
+            value: 100,
+          },
+          {
+            children: [],
+            endTime: 2491.8999999999983,
+            name: "bindingParser",
+            startTime: 2491.7999999999984,
+            tooltip: "bindingParser, 0.1000 (ms)",
+            value: 100,
+          },
+          {
+            children: [],
+            endTime: 2492.099999999998,
+            name: "state",
+            startTime: 2491.999999999998,
+            tooltip: "state, 0.1000 (ms)",
+            value: 100,
+          },
+          {
+            children: [],
+            endTime: 2492.299999999998,
+            name: "onEnd",
+            startTime: 2492.199999999998,
+            tooltip: "onEnd, 0.1000 (ms)",
+            value: 100,
+          },
+          {
+            children: [],
+            endTime: 2492.4999999999977,
+            name: "resolveFlowContent",
+            startTime: 2492.399999999998,
+            tooltip: "resolveFlowContent, 0.1000 (ms)",
+            value: 100,
+          },
+        ],
+        endTime: 2492.5999999999976,
+        name: "root",
+        startTime: 2490.1,
+        tooltip: "Profiler total time span 2.5000 (ms)",
+        value: 1200,
+      },
+    });
+  });
+
+  test("snapshot", async () => {
+    const rp = new ReactPlayer({
+      plugins: [new ProfilerPlugin(), new ReferenceAssetsPlugin()],
+    });
+    rp.start(flow);
+    await waitForMicrotasks();
+    const el = render(<rp.Component />);
+    expect(el).toMatchSnapshot();
+  });
+});