@player-tools/devtools-client 0.5.3--canary.90.2515 → 0.5.3--canary.100.2570

package/dist/cjs/index.cjs

@@ -43,13 +43,6 @@ var import_react6 = require("@chakra-ui/react");
 var import_themes = require("@devtools-ds/themes");
 
 // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/constants/index.ts
-var import_plugin = __toESM(require("@devtools-ui/plugin"));
-var import_pubsub_plugin = require("@player-ui/pubsub-plugin");
-var PUBSUB_PLUGIN = new import_pubsub_plugin.PubSubPlugin();
-var PLAYER_PLUGINS = [
-  new import_plugin.default(),
-  PUBSUB_PLUGIN
-];
 var INITIAL_FLOW = {
   id: "initial-flow",
   views: [
@@ -79,6 +72,15 @@ var INITIAL_EXTENSION_STATE = {
   players: {}
 };
 
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/plugins/index.ts
+var import_plugin = __toESM(require("@devtools-ui/plugin"));
+var import_pubsub_plugin = require("@player-ui/pubsub-plugin");
+var PUBSUB_PLUGIN = new import_pubsub_plugin.PubSubPlugin();
+var PLAYER_PLUGINS = [
+  new import_plugin.default(),
+  PUBSUB_PLUGIN
+];
+
 // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/index.ts
 var import_devtools_messenger = require("@player-tools/devtools-messenger");
 var import_react = require("react");
@@ -274,7 +276,7 @@ var Panel = ({
   const dataController = (0, import_react3.useRef)(null);
   const currentFlow = (0, import_react3.useRef)(null);
   (0, import_react5.useEffect)(() => {
-    reactPlayer.player.hooks.dataController.tap("panel", (d) => {
+    reactPlayer.player.hooks.dataController.tap("devtools-panel", (d) => {
       dataController.current = new WeakRef(d);
     });
   }, [reactPlayer]);

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/index.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/panel/index.tsx","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/constants/index.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/index.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/reducer.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/helpers/flowDiff.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/panel/theme.ts"],"sourcesContent":["export { Panel } from \"./panel\";\n","import React, { useRef } from \"react\";\nimport type { MessengerOptions } from \"@player-tools/devtools-types\";\nimport type { ExtensionSupportedEvents } from \"@player-tools/devtools-types\";\nimport { DataController, Flow, useReactPlayer } from \"@player-ui/react\";\nimport { useEffect } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport {\n  Card,\n  CardBody,\n  CardHeader,\n  ChakraProvider,\n  Container,\n  Flex,\n  FormControl,\n  FormLabel,\n  Heading,\n  HStack,\n  Select,\n  Text,\n  VStack,\n} from \"@chakra-ui/react\";\nimport { ThemeProvider } from \"@devtools-ds/themes\";\n\nimport { INITIAL_FLOW, PLAYER_PLUGINS, PUBSUB_PLUGIN } from \"../constants\";\nimport { useExtensionState } from \"../state\";\nimport { flowDiff } from \"../helpers/flowDiff\";\nimport { theme } from \"./theme\";\n\nconst fallbackRender: ErrorBoundary[\"props\"][\"fallbackRender\"] = ({\n  error,\n}) => {\n  return (\n    <Container centerContent>\n      <Card>\n        <CardHeader>\n          <Heading>Ops, something went wrong.</Heading>\n        </CardHeader>\n      </Card>\n      <CardBody>\n        <Text as=\"pre\">{error.message}</Text>\n      </CardBody>\n    </Container>\n  );\n};\n\n/**\n * Panel component\n *\n * devtools plugin authors can define their plugins content using DSL and have it rendered here\n */\nexport const Panel = ({\n  communicationLayer,\n}: {\n  /** the communication layer to use for the extension */\n  readonly communicationLayer: Pick<\n    MessengerOptions<ExtensionSupportedEvents>,\n    \"sendMessage\" | \"addListener\" | \"removeListener\"\n  >;\n}) => {\n  const { state, selectPlayer, selectPlugin, handleInteraction } =\n    useExtensionState({\n      communicationLayer,\n    });\n\n  const { reactPlayer } = useReactPlayer({\n    plugins: PLAYER_PLUGINS,\n  });\n\n  const dataController = useRef<WeakRef<DataController> | null>(null);\n\n  const currentFlow = useRef<Flow | null>(null);\n\n  useEffect(() => {\n    reactPlayer.player.hooks.dataController.tap(\"panel\", (d) => {\n      dataController.current = new WeakRef(d);\n    });\n  }, [reactPlayer]);\n\n  useEffect(() => {\n    // we subscribe to all messages from the devtools plugin\n    // so the plugin author can define their own events\n    PUBSUB_PLUGIN.subscribe(\"*\", (type: string, payload: string) => {\n      handleInteraction({\n        type,\n        payload,\n      });\n    });\n  }, []);\n\n  useEffect(() => {\n    const { player, plugin } = state.current;\n\n    const flow =\n      player && plugin\n        ? state.players[player]?.plugins?.[plugin]?.flow || INITIAL_FLOW\n        : INITIAL_FLOW;\n\n    if (!currentFlow.current) {\n      currentFlow.current = flow;\n      reactPlayer.start(flow);\n      return;\n    }\n\n    const diff = flowDiff({\n      curr: currentFlow.current as Flow,\n      next: flow,\n    });\n\n    if (diff) {\n      const { change, value } = diff;\n\n      if (change === \"flow\") {\n        currentFlow.current = value;\n        reactPlayer.start(value);\n      } else if (change === \"data\") {\n        dataController.current\n          ? dataController.current\n              .deref()\n              ?.set(value as Record<string, unknown>)\n          : reactPlayer.start(flow);\n      }\n    }\n  }, [reactPlayer, state]);\n\n  const Component = reactPlayer.Component as React.FC;\n\n  return (\n    <ChakraProvider theme={theme}>\n      <ThemeProvider colorScheme=\"dark\">\n        <ErrorBoundary fallbackRender={fallbackRender}>\n          <VStack w=\"100vw\" h=\"100vh\">\n            {state.current.player ? (\n              <Flex direction=\"column\" marginTop=\"4\">\n                <HStack spacing=\"4\">\n                  <FormControl>\n                    <FormLabel>Player</FormLabel>\n                    <Select\n                      id=\"player\"\n                      value={state.current.player || \"\"}\n                      onChange={(event) => selectPlayer(event.target.value)}\n                    >\n                      {Object.keys(state.players).map((playerID) => (\n                        <option key={playerID} value={playerID}>\n                          {playerID}\n                        </option>\n                      ))}\n                    </Select>\n                  </FormControl>\n                  <FormControl>\n                    <FormLabel>Plugin</FormLabel>\n                    <Select\n                      id=\"plugin\"\n                      value={state.current.plugin || \"\"}\n                      onChange={(event) => selectPlugin(event.target.value)}\n                    >\n                      {Object.keys(\n                        state.players[state.current.player].plugins\n                      ).map((pluginID) => (\n                        <option key={pluginID} value={pluginID}>\n                          {pluginID}\n                        </option>\n                      ))}\n                    </Select>\n                  </FormControl>\n                </HStack>\n                <Container marginY=\"6\">\n                  <Component />\n                </Container>\n                <details>\n                  <summary>Debug</summary>\n                  <pre>{JSON.stringify(state, null, 2)}</pre>\n                </details>\n              </Flex>\n            ) : (\n              <Flex justifyContent=\"center\" padding=\"6\">\n                <Text>\n                  No Player-UI instance or devtools plugin detected. Visit{\" \"}\n                  <a href=\"https://player-ui.github.io/\">\n                    https://player-ui.github.io/\n                  </a>{\" \"}\n                  for more info.\n                </Text>\n              </Flex>\n            )}\n          </VStack>\n        </ErrorBoundary>\n      </ThemeProvider>\n    </ChakraProvider>\n  );\n};\n","import type { ExtensionState } from \"@player-tools/devtools-types\";\nimport type { Flow, ReactPlayerPlugin } from \"@player-ui/react\";\nimport DevtoolsUIAssetsPlugin from \"@devtools-ui/plugin\";\nimport { PubSubPlugin } from \"@player-ui/pubsub-plugin\";\n\nexport const PUBSUB_PLUGIN = new PubSubPlugin();\n\nexport const PLAYER_PLUGINS: ReactPlayerPlugin[] = [\n  new DevtoolsUIAssetsPlugin(),\n  PUBSUB_PLUGIN,\n];\n\nexport const INITIAL_FLOW: Flow = {\n  id: \"initial-flow\",\n  views: [\n    {\n      id: \"view-1\",\n      type: \"text\",\n      value: \"connecting...\",\n    },\n  ],\n  navigation: {\n    BEGIN: \"FLOW_1\",\n    FLOW_1: {\n      startState: \"VIEW_1\",\n      VIEW_1: {\n        state_type: \"VIEW\",\n        ref: \"view-1\",\n        transitions: {},\n      },\n    },\n  },\n};\n\nexport const INITIAL_EXTENSION_STATE: ExtensionState = {\n  current: {\n    player: null,\n    plugin: null,\n  },\n  players: {},\n};\n","import { Messenger } from \"@player-tools/devtools-messenger\";\nimport type {\n  ExtensionSupportedEvents,\n  MessengerOptions,\n} from \"@player-tools/devtools-types\";\nimport { useCallback, useEffect, useMemo, useReducer } from \"react\";\n\nimport { INITIAL_EXTENSION_STATE } from \"../constants\";\nimport { reducer } from \"./reducer\";\n\nconst NOOP_ID = -1;\n\n/** Extension state */\nexport const useExtensionState = ({\n  communicationLayer,\n}: {\n  /** the communication layer to use for the extension */\n  communicationLayer: Pick<\n    MessengerOptions<ExtensionSupportedEvents>,\n    \"sendMessage\" | \"addListener\" | \"removeListener\"\n  >;\n}) => {\n  const [state, dispatch] = useReducer(reducer, INITIAL_EXTENSION_STATE);\n\n  const messengerOptions = useMemo<MessengerOptions<ExtensionSupportedEvents>>(\n    () => ({\n      context: \"devtools\",\n      target: \"player\",\n      messageCallback: (message) => {\n        dispatch(message);\n      },\n      ...communicationLayer,\n      logger: console,\n    }),\n    [dispatch, communicationLayer]\n  );\n\n  const messenger = useMemo(\n    () => new Messenger(messengerOptions),\n    [messengerOptions]\n  );\n\n  useEffect(() => {\n    return () => {\n      messenger.destroy();\n    };\n  }, []);\n\n  const selectPlayer = useCallback(\n    (playerID: string) => {\n      dispatch({\n        id: NOOP_ID,\n        sender: \"internal\",\n        context: \"devtools\",\n        _messenger_: false,\n        timestamp: Date.now(),\n        type: \"PLAYER_DEVTOOLS_PLAYER_SELECTED\",\n        payload: {\n          playerID,\n        },\n      });\n    },\n    [dispatch]\n  );\n\n  const selectPlugin = useCallback(\n    (pluginID: string) => {\n      dispatch({\n        id: NOOP_ID,\n        sender: \"internal\",\n        context: \"devtools\",\n        _messenger_: false,\n        timestamp: Date.now(),\n        type: \"PLAYER_DEVTOOLS_PLUGIN_SELECTED\",\n        payload: {\n          pluginID,\n        },\n      });\n    },\n    [dispatch]\n  );\n\n  const handleInteraction = useCallback(\n    ({\n      type,\n      payload,\n    }: {\n      /** interaction type */\n      type: string;\n      /** interaction payload */\n      payload?: string;\n    }) => {\n      messenger.sendMessage({\n        type: \"PLAYER_DEVTOOLS_PLUGIN_INTERACTION\",\n        payload: {\n          type,\n          payload,\n        },\n      });\n    },\n    [messenger]\n  );\n\n  return { state, selectPlayer, selectPlugin, handleInteraction };\n};\n","import type {\n  ExtensionState,\n  ExtensionSupportedEvents,\n  Transaction,\n} from \"@player-tools/devtools-types\";\nimport { dset } from \"dset/merge\";\nimport { produce } from \"immer\";\n\n/** Extension state reducer */\nexport const reducer = (\n  state: ExtensionState,\n  transaction: Transaction<ExtensionSupportedEvents>\n): ExtensionState => {\n  switch (transaction.type) {\n    case \"PLAYER_DEVTOOLS_PLAYER_INIT\":\n      return produce(state, (draft) => {\n        const {\n          sender,\n          payload: { plugins },\n        } = transaction;\n        const { player, plugin } = draft.current;\n\n        if (!player && !plugin) {\n          // if there is no player and plugin selected, select the first one:\n          dset(draft, [\"current\", \"player\"], sender);\n          dset(\n            draft,\n            [\"current\", \"plugin\"],\n            plugins[Object.keys(plugins)[0]].id\n          );\n        }\n\n        dset(draft, [\"players\", sender, \"plugins\"], plugins);\n        dset(draft, [\"players\", sender, \"active\"], true);\n      });\n    case \"PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE\":\n      return produce(state, (draft) => {\n        const {\n          sender,\n          payload: { flow, pluginID },\n        } = transaction;\n\n        dset(draft, [\"players\", sender, \"plugins\", pluginID, \"flow\"], flow);\n      });\n    case \"PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE\":\n      return produce(state, (draft) => {\n        const {\n          sender,\n          payload: { data, pluginID },\n        } = transaction;\n        dset(\n          draft,\n          [\"players\", sender, \"plugins\", pluginID, \"flow\", \"data\"],\n          data\n        );\n      });\n    case \"MESSENGER_EVENT_BATCH\":\n      return produce(state, (draft) => {\n        return transaction.payload.events.reduce(reducer, draft);\n      });\n    case \"PLAYER_DEVTOOLS_PLAYER_STOPPED\":\n      return produce(state, (draft) => {\n        const { sender } = transaction;\n\n        dset(draft, [\"players\", sender, \"active\"], false);\n      });\n    case \"PLAYER_DEVTOOLS_PLAYER_SELECTED\":\n      return produce(state, (draft) => {\n        const { playerID } = transaction.payload;\n        dset(draft, [\"current\", \"player\"], playerID);\n      });\n    case \"PLAYER_DEVTOOLS_PLUGIN_SELECTED\":\n      return produce(state, (draft) => {\n        const { pluginID } = transaction.payload;\n        dset(draft, [\"current\", \"plugin\"], pluginID);\n      });\n    default:\n      return state;\n  }\n};\n","import type { Flow } from \"@player-ui/react\";\nimport { dequal } from \"dequal\";\n\nexport const flowDiff = ({\n  curr,\n  next,\n}: {\n  curr: Flow;\n  next: Flow;\n}):\n  | { change: \"data\"; value: Flow[\"data\"] }\n  | { change: \"flow\"; value: Flow }\n  | null => {\n  // compare flows except for the `data` property\n  const currCopy = { ...curr, data: null };\n  const nextCopy = { ...next, data: null };\n\n  const baseFlowIsEqual = dequal(currCopy, nextCopy);\n\n  if (!baseFlowIsEqual) {\n    return { change: \"flow\", value: next };\n  }\n\n  // compare data\n  const currData = curr.data;\n  const nextData = next.data;\n\n  const dataIsEqual = dequal(currData, nextData);\n\n  if (!dataIsEqual) {\n    return { change: \"data\", value: nextData };\n  }\n\n  return null;\n};\n","import { extendTheme, type ThemeConfig } from \"@chakra-ui/react\";\n\nconst config: ThemeConfig = {\n  initialColorMode: \"dark\",\n  useSystemColorMode: false,\n};\n\nexport const theme = extendTheme({ config });\n"],"mappings":"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","names":["import_react","DevtoolsUIAssetsPlugin","import_react","React"]}
+{"version":3,"sources":["../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/index.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/panel/index.tsx","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/constants/index.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/plugins/index.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/index.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/reducer.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/helpers/flowDiff.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/panel/theme.ts"],"sourcesContent":["export { Panel } from \"./panel\";\n","import React, { useRef } from \"react\";\nimport type {\n  MessengerOptions,\n  ExtensionSupportedEvents,\n} from \"@player-tools/devtools-types\";\nimport { DataController, Flow, useReactPlayer } from \"@player-ui/react\";\nimport { useEffect } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport {\n  Card,\n  CardBody,\n  CardHeader,\n  ChakraProvider,\n  Container,\n  Flex,\n  FormControl,\n  FormLabel,\n  Heading,\n  HStack,\n  Select,\n  Text,\n  VStack,\n} from \"@chakra-ui/react\";\nimport { ThemeProvider } from \"@devtools-ds/themes\";\n\nimport { INITIAL_FLOW } from \"../constants\";\nimport { PLAYER_PLUGINS, PUBSUB_PLUGIN } from \"../plugins\";\nimport { useExtensionState } from \"../state\";\nimport { flowDiff } from \"../helpers/flowDiff\";\nimport { theme } from \"./theme\";\n\nconst fallbackRender: ErrorBoundary[\"props\"][\"fallbackRender\"] = ({\n  error,\n}) => {\n  return (\n    <Container centerContent>\n      <Card>\n        <CardHeader>\n          <Heading>Ops, something went wrong.</Heading>\n        </CardHeader>\n      </Card>\n      <CardBody>\n        <Text as=\"pre\">{error.message}</Text>\n      </CardBody>\n    </Container>\n  );\n};\n\n/**\n * Panel Component\n *\n * This component serves as the main container for the devtools plugin content defined by plugin authors using Player-UI DSL.\n *\n * Props:\n * - `communicationLayer`: An object that allows communication between the devtools and the Player-UI plugins,\n *   enabling the exchange of data and events.\n *\n * Features:\n * - Error Handling: Utilizes the `ErrorBoundary` component from `react-error-boundary` to gracefully handle and display errors\n *   that may occur during the rendering of the plugin's content.\n * - State Management: Integrates with custom hooks such as `useExtensionState` to manage the state of the plugin and its components.\n * - Player Integration: Uses the `useReactPlayer` hook from `player-ui/react` to render interactive player components based on the\n *   DSL defined by the plugin authors.\n *\n * Example Usage:\n * ```tsx\n * <Panel communicationLayer={myCommunicationLayer} />\n * ```\n *\n * Note: The `communicationLayer` prop is essential for the proper functioning of the `Panel` component, as it enables the necessary\n * communication and data exchange with the player-ui/react library.\n */\nexport const Panel = ({\n  communicationLayer,\n}: {\n  /** the communication layer to use for the extension */\n  readonly communicationLayer: Pick<\n    MessengerOptions<ExtensionSupportedEvents>,\n    \"sendMessage\" | \"addListener\" | \"removeListener\"\n  >;\n}) => {\n  const { state, selectPlayer, selectPlugin, handleInteraction } =\n    useExtensionState({\n      communicationLayer,\n    });\n\n  const { reactPlayer } = useReactPlayer({\n    plugins: PLAYER_PLUGINS,\n  });\n\n  const dataController = useRef<WeakRef<DataController> | null>(null);\n\n  const currentFlow = useRef<Flow | null>(null);\n\n  useEffect(() => {\n    reactPlayer.player.hooks.dataController.tap(\"devtools-panel\", (d) => {\n      dataController.current = new WeakRef(d);\n    });\n  }, [reactPlayer]);\n\n  useEffect(() => {\n    // we subscribe to all messages from the devtools plugin\n    // so the plugin author can define their own events\n    PUBSUB_PLUGIN.subscribe(\"*\", (type: string, payload: string) => {\n      handleInteraction({\n        type,\n        payload,\n      });\n    });\n  }, []);\n\n  useEffect(() => {\n    const { player, plugin } = state.current;\n\n    const flow =\n      player && plugin\n        ? state.players[player]?.plugins?.[plugin]?.flow || INITIAL_FLOW\n        : INITIAL_FLOW;\n\n    if (!currentFlow.current) {\n      currentFlow.current = flow;\n      reactPlayer.start(flow);\n      return;\n    }\n\n    const diff = flowDiff({\n      curr: currentFlow.current as Flow,\n      next: flow,\n    });\n\n    if (diff) {\n      const { change, value } = diff;\n\n      if (change === \"flow\") {\n        currentFlow.current = value;\n        reactPlayer.start(value);\n      } else if (change === \"data\") {\n        dataController.current\n          ? dataController.current\n              .deref()\n              ?.set(value as Record<string, unknown>)\n          : reactPlayer.start(flow);\n      }\n    }\n  }, [reactPlayer, state]);\n\n  const Component = reactPlayer.Component as React.FC;\n\n  return (\n    <ChakraProvider theme={theme}>\n      <ThemeProvider colorScheme=\"dark\">\n        <ErrorBoundary fallbackRender={fallbackRender}>\n          <VStack w=\"100vw\" h=\"100vh\">\n            {state.current.player ? (\n              <Flex direction=\"column\" marginTop=\"4\">\n                <HStack spacing=\"4\">\n                  <FormControl>\n                    <FormLabel>Player</FormLabel>\n                    <Select\n                      id=\"player\"\n                      value={state.current.player || \"\"}\n                      onChange={(event) => selectPlayer(event.target.value)}\n                    >\n                      {Object.keys(state.players).map((playerID) => (\n                        <option key={playerID} value={playerID}>\n                          {playerID}\n                        </option>\n                      ))}\n                    </Select>\n                  </FormControl>\n                  <FormControl>\n                    <FormLabel>Plugin</FormLabel>\n                    <Select\n                      id=\"plugin\"\n                      value={state.current.plugin || \"\"}\n                      onChange={(event) => selectPlugin(event.target.value)}\n                    >\n                      {Object.keys(\n                        state.players[state.current.player].plugins\n                      ).map((pluginID) => (\n                        <option key={pluginID} value={pluginID}>\n                          {pluginID}\n                        </option>\n                      ))}\n                    </Select>\n                  </FormControl>\n                </HStack>\n                <Container marginY=\"6\">\n                  <Component />\n                </Container>\n                <details>\n                  <summary>Debug</summary>\n                  <pre>{JSON.stringify(state, null, 2)}</pre>\n                </details>\n              </Flex>\n            ) : (\n              <Flex justifyContent=\"center\" padding=\"6\">\n                <Text>\n                  No Player-UI instance or devtools plugin detected. Visit{\" \"}\n                  <a href=\"https://player-ui.github.io/\">\n                    https://player-ui.github.io/\n                  </a>{\" \"}\n                  for more info.\n                </Text>\n              </Flex>\n            )}\n          </VStack>\n        </ErrorBoundary>\n      </ThemeProvider>\n    </ChakraProvider>\n  );\n};\n","import type { ExtensionState } from \"@player-tools/devtools-types\";\nimport type { Flow } from \"@player-ui/react\";\n\nexport const INITIAL_FLOW: Flow = {\n  id: \"initial-flow\",\n  views: [\n    {\n      id: \"view-1\",\n      type: \"text\",\n      value: \"connecting...\",\n    },\n  ],\n  navigation: {\n    BEGIN: \"FLOW_1\",\n    FLOW_1: {\n      startState: \"VIEW_1\",\n      VIEW_1: {\n        state_type: \"VIEW\",\n        ref: \"view-1\",\n        transitions: {},\n      },\n    },\n  },\n};\n\nexport const INITIAL_EXTENSION_STATE: ExtensionState = {\n  current: {\n    player: null,\n    plugin: null,\n  },\n  players: {},\n};\n","import DevtoolsUIAssetsPlugin from \"@devtools-ui/plugin\";\nimport { PubSubPlugin } from \"@player-ui/pubsub-plugin\";\nimport type { ReactPlayerPlugin } from \"@player-ui/react\";\n\nexport const PUBSUB_PLUGIN = new PubSubPlugin();\n\nexport const PLAYER_PLUGINS: ReactPlayerPlugin[] = [\n  new DevtoolsUIAssetsPlugin(),\n  PUBSUB_PLUGIN,\n];\n","import { Messenger } from \"@player-tools/devtools-messenger\";\nimport type {\n  ExtensionSupportedEvents,\n  MessengerOptions,\n} from \"@player-tools/devtools-types\";\nimport { useCallback, useEffect, useMemo, useReducer } from \"react\";\n\nimport { INITIAL_EXTENSION_STATE } from \"../constants\";\nimport { reducer } from \"./reducer\";\n\nconst NOOP_ID = -1;\n\n/**\n * Custom React hook for managing the state of the devtools extension.\n *\n * This hook initializes the extension's state and sets up a communication layer\n * using the `Messenger` class. It provides methods to select a player or plugin,\n * and handle interactions, which dispatch actions to update the state accordingly.\n *\n */\nexport const useExtensionState = ({\n  communicationLayer,\n}: {\n  /** the communication layer to use for the extension */\n  communicationLayer: Pick<\n    MessengerOptions<ExtensionSupportedEvents>,\n    \"sendMessage\" | \"addListener\" | \"removeListener\"\n  >;\n}) => {\n  const [state, dispatch] = useReducer(reducer, INITIAL_EXTENSION_STATE);\n\n  const messengerOptions = useMemo<MessengerOptions<ExtensionSupportedEvents>>(\n    () => ({\n      context: \"devtools\",\n      target: \"player\",\n      messageCallback: (message) => {\n        dispatch(message);\n      },\n      ...communicationLayer,\n      logger: console,\n    }),\n    [dispatch, communicationLayer]\n  );\n\n  const messenger = useMemo(\n    () => new Messenger(messengerOptions),\n    [messengerOptions]\n  );\n\n  useEffect(() => {\n    return () => {\n      messenger.destroy();\n    };\n  }, []);\n\n  const selectPlayer = useCallback(\n    (playerID: string) => {\n      dispatch({\n        id: NOOP_ID,\n        sender: \"internal\",\n        context: \"devtools\",\n        _messenger_: false,\n        timestamp: Date.now(),\n        type: \"PLAYER_DEVTOOLS_PLAYER_SELECTED\",\n        payload: {\n          playerID,\n        },\n      });\n    },\n    [dispatch]\n  );\n\n  const selectPlugin = useCallback(\n    (pluginID: string) => {\n      dispatch({\n        id: NOOP_ID,\n        sender: \"internal\",\n        context: \"devtools\",\n        _messenger_: false,\n        timestamp: Date.now(),\n        type: \"PLAYER_DEVTOOLS_PLUGIN_SELECTED\",\n        payload: {\n          pluginID,\n        },\n      });\n    },\n    [dispatch]\n  );\n\n  /**\n   * Plugin authors can add interactive elements to the Player-UI content by leveraging\n   * the pub-sub plugin and having the handle interaction proxy the message to the inspected\n   * Player-UI instance.\n   */\n  const handleInteraction = useCallback(\n    ({\n      type,\n      payload,\n    }: {\n      /** interaction type */\n      type: string;\n      /** interaction payload */\n      payload?: string;\n    }) => {\n      messenger.sendMessage({\n        type: \"PLAYER_DEVTOOLS_PLUGIN_INTERACTION\",\n        payload: {\n          type,\n          payload,\n        },\n      });\n    },\n    [messenger]\n  );\n\n  return { state, selectPlayer, selectPlugin, handleInteraction };\n};\n","import type {\n  ExtensionState,\n  ExtensionSupportedEvents,\n  Transaction,\n} from \"@player-tools/devtools-types\";\nimport { dset } from \"dset/merge\";\nimport { produce } from \"immer\";\n\n/** Extension state reducer */\nexport const reducer = (\n  state: ExtensionState,\n  transaction: Transaction<ExtensionSupportedEvents>\n): ExtensionState => {\n  switch (transaction.type) {\n    case \"PLAYER_DEVTOOLS_PLAYER_INIT\":\n      return produce(state, (draft) => {\n        const {\n          sender,\n          payload: { plugins },\n        } = transaction;\n        const { player, plugin } = draft.current;\n\n        if (!player && !plugin) {\n          // if there is no player and plugin selected, select the first one:\n          dset(draft, [\"current\", \"player\"], sender);\n          dset(\n            draft,\n            [\"current\", \"plugin\"],\n            plugins[Object.keys(plugins)[0]].id\n          );\n        }\n\n        dset(draft, [\"players\", sender, \"plugins\"], plugins);\n        dset(draft, [\"players\", sender, \"active\"], true);\n      });\n    case \"PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE\":\n      return produce(state, (draft) => {\n        const {\n          sender,\n          payload: { flow, pluginID },\n        } = transaction;\n\n        dset(draft, [\"players\", sender, \"plugins\", pluginID, \"flow\"], flow);\n      });\n    case \"PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE\":\n      return produce(state, (draft) => {\n        const {\n          sender,\n          payload: { data, pluginID },\n        } = transaction;\n        dset(\n          draft,\n          [\"players\", sender, \"plugins\", pluginID, \"flow\", \"data\"],\n          data\n        );\n      });\n    case \"MESSENGER_EVENT_BATCH\":\n      return produce(state, (draft) => {\n        return transaction.payload.events.reduce(reducer, draft);\n      });\n    case \"PLAYER_DEVTOOLS_PLAYER_STOPPED\":\n      return produce(state, (draft) => {\n        const { sender } = transaction;\n\n        dset(draft, [\"players\", sender, \"active\"], false);\n      });\n    case \"PLAYER_DEVTOOLS_PLAYER_SELECTED\":\n      return produce(state, (draft) => {\n        const { playerID } = transaction.payload;\n        dset(draft, [\"current\", \"player\"], playerID);\n      });\n    case \"PLAYER_DEVTOOLS_PLUGIN_SELECTED\":\n      return produce(state, (draft) => {\n        const { pluginID } = transaction.payload;\n        dset(draft, [\"current\", \"plugin\"], pluginID);\n      });\n    default:\n      return state;\n  }\n};\n","import type { Flow } from \"@player-ui/react\";\nimport { dequal } from \"dequal\";\n\n/**\n * Compares two Flow objects and identifies if there's a change in their structure or data.\n *\n * This function takes two Flow objects as input, `curr` (current) and `next` (next), and compares them\n * to determine if there's a change in the flow's structure or its data. If there's a change in the flow's\n * structure (excluding the `data` property), it returns an object indicating a \"flow\" change along with the\n * new flow. If there's a change in the `data` property, it returns an object indicating a \"data\" change along\n * with the new data. If there are no changes, it returns null.\n */\nexport const flowDiff = ({\n  curr,\n  next,\n}: {\n  curr: Flow;\n  next: Flow;\n}):\n  | { change: \"data\"; value: Flow[\"data\"] }\n  | { change: \"flow\"; value: Flow }\n  | null => {\n  // compare flows except for the `data` property\n  const currCopy = { ...curr, data: null };\n  const nextCopy = { ...next, data: null };\n\n  const baseFlowIsEqual = dequal(currCopy, nextCopy);\n\n  if (!baseFlowIsEqual) {\n    return { change: \"flow\", value: next };\n  }\n\n  // compare data\n  const currData = curr.data;\n  const nextData = next.data;\n\n  const dataIsEqual = dequal(currData, nextData);\n\n  if (!dataIsEqual) {\n    return { change: \"data\", value: nextData };\n  }\n\n  return null;\n};\n","import { extendTheme, type ThemeConfig } from \"@chakra-ui/react\";\n\nconst config: ThemeConfig = {\n  initialColorMode: \"dark\",\n  useSystemColorMode: false,\n};\n\nexport const theme = extendTheme({ config });\n"],"mappings":"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","names":["import_react","DevtoolsUIAssetsPlugin","import_react","React"]}

package/dist/index.legacy-esm.js

@@ -21,13 +21,6 @@ import {
 import { ThemeProvider } from "@devtools-ds/themes";
 
 // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/constants/index.ts
-import DevtoolsUIAssetsPlugin from "@devtools-ui/plugin";
-import { PubSubPlugin } from "@player-ui/pubsub-plugin";
-var PUBSUB_PLUGIN = new PubSubPlugin();
-var PLAYER_PLUGINS = [
-  new DevtoolsUIAssetsPlugin(),
-  PUBSUB_PLUGIN
-];
 var INITIAL_FLOW = {
   id: "initial-flow",
   views: [
@@ -57,6 +50,15 @@ var INITIAL_EXTENSION_STATE = {
   players: {}
 };
 
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/plugins/index.ts
+import DevtoolsUIAssetsPlugin from "@devtools-ui/plugin";
+import { PubSubPlugin } from "@player-ui/pubsub-plugin";
+var PUBSUB_PLUGIN = new PubSubPlugin();
+var PLAYER_PLUGINS = [
+  new DevtoolsUIAssetsPlugin(),
+  PUBSUB_PLUGIN
+];
+
 // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/index.ts
 import { Messenger } from "@player-tools/devtools-messenger";
 import { useCallback, useEffect, useMemo, useReducer } from "react";
@@ -252,7 +254,7 @@ var Panel = ({
   const dataController = useRef(null);
   const currentFlow = useRef(null);
   useEffect2(() => {
-    reactPlayer.player.hooks.dataController.tap("panel", (d) => {
+    reactPlayer.player.hooks.dataController.tap("devtools-panel", (d) => {
       dataController.current = new WeakRef(d);
     });
   }, [reactPlayer]);

package/dist/index.mjs

@@ -21,13 +21,6 @@ import {
 import { ThemeProvider } from "@devtools-ds/themes";
 
 // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/constants/index.ts
-import DevtoolsUIAssetsPlugin from "@devtools-ui/plugin";
-import { PubSubPlugin } from "@player-ui/pubsub-plugin";
-var PUBSUB_PLUGIN = new PubSubPlugin();
-var PLAYER_PLUGINS = [
-  new DevtoolsUIAssetsPlugin(),
-  PUBSUB_PLUGIN
-];
 var INITIAL_FLOW = {
   id: "initial-flow",
   views: [
@@ -57,6 +50,15 @@ var INITIAL_EXTENSION_STATE = {
   players: {}
 };
 
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/plugins/index.ts
+import DevtoolsUIAssetsPlugin from "@devtools-ui/plugin";
+import { PubSubPlugin } from "@player-ui/pubsub-plugin";
+var PUBSUB_PLUGIN = new PubSubPlugin();
+var PLAYER_PLUGINS = [
+  new DevtoolsUIAssetsPlugin(),
+  PUBSUB_PLUGIN
+];
+
 // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/index.ts
 import { Messenger } from "@player-tools/devtools-messenger";
 import { useCallback, useEffect, useMemo, useReducer } from "react";
@@ -252,7 +254,7 @@ var Panel = ({
   const dataController = useRef(null);
   const currentFlow = useRef(null);
   useEffect2(() => {
-    reactPlayer.player.hooks.dataController.tap("panel", (d) => {
+    reactPlayer.player.hooks.dataController.tap("devtools-panel", (d) => {
       dataController.current = new WeakRef(d);
     });
   }, [reactPlayer]);

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/panel/index.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/constants/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/reducer.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/helpers/flowDiff.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/panel/theme.ts"],"sourcesContent":["import React, { useRef } from \"react\";\nimport type { MessengerOptions } from \"@player-tools/devtools-types\";\nimport type { ExtensionSupportedEvents } from \"@player-tools/devtools-types\";\nimport { DataController, Flow, useReactPlayer } from \"@player-ui/react\";\nimport { useEffect } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport {\n  Card,\n  CardBody,\n  CardHeader,\n  ChakraProvider,\n  Container,\n  Flex,\n  FormControl,\n  FormLabel,\n  Heading,\n  HStack,\n  Select,\n  Text,\n  VStack,\n} from \"@chakra-ui/react\";\nimport { ThemeProvider } from \"@devtools-ds/themes\";\n\nimport { INITIAL_FLOW, PLAYER_PLUGINS, PUBSUB_PLUGIN } from \"../constants\";\nimport { useExtensionState } from \"../state\";\nimport { flowDiff } from \"../helpers/flowDiff\";\nimport { theme } from \"./theme\";\n\nconst fallbackRender: ErrorBoundary[\"props\"][\"fallbackRender\"] = ({\n  error,\n}) => {\n  return (\n    <Container centerContent>\n      <Card>\n        <CardHeader>\n          <Heading>Ops, something went wrong.</Heading>\n        </CardHeader>\n      </Card>\n      <CardBody>\n        <Text as=\"pre\">{error.message}</Text>\n      </CardBody>\n    </Container>\n  );\n};\n\n/**\n * Panel component\n *\n * devtools plugin authors can define their plugins content using DSL and have it rendered here\n */\nexport const Panel = ({\n  communicationLayer,\n}: {\n  /** the communication layer to use for the extension */\n  readonly communicationLayer: Pick<\n    MessengerOptions<ExtensionSupportedEvents>,\n    \"sendMessage\" | \"addListener\" | \"removeListener\"\n  >;\n}) => {\n  const { state, selectPlayer, selectPlugin, handleInteraction } =\n    useExtensionState({\n      communicationLayer,\n    });\n\n  const { reactPlayer } = useReactPlayer({\n    plugins: PLAYER_PLUGINS,\n  });\n\n  const dataController = useRef<WeakRef<DataController> | null>(null);\n\n  const currentFlow = useRef<Flow | null>(null);\n\n  useEffect(() => {\n    reactPlayer.player.hooks.dataController.tap(\"panel\", (d) => {\n      dataController.current = new WeakRef(d);\n    });\n  }, [reactPlayer]);\n\n  useEffect(() => {\n    // we subscribe to all messages from the devtools plugin\n    // so the plugin author can define their own events\n    PUBSUB_PLUGIN.subscribe(\"*\", (type: string, payload: string) => {\n      handleInteraction({\n        type,\n        payload,\n      });\n    });\n  }, []);\n\n  useEffect(() => {\n    const { player, plugin } = state.current;\n\n    const flow =\n      player && plugin\n        ? state.players[player]?.plugins?.[plugin]?.flow || INITIAL_FLOW\n        : INITIAL_FLOW;\n\n    if (!currentFlow.current) {\n      currentFlow.current = flow;\n      reactPlayer.start(flow);\n      return;\n    }\n\n    const diff = flowDiff({\n      curr: currentFlow.current as Flow,\n      next: flow,\n    });\n\n    if (diff) {\n      const { change, value } = diff;\n\n      if (change === \"flow\") {\n        currentFlow.current = value;\n        reactPlayer.start(value);\n      } else if (change === \"data\") {\n        dataController.current\n          ? dataController.current\n              .deref()\n              ?.set(value as Record<string, unknown>)\n          : reactPlayer.start(flow);\n      }\n    }\n  }, [reactPlayer, state]);\n\n  const Component = reactPlayer.Component as React.FC;\n\n  return (\n    <ChakraProvider theme={theme}>\n      <ThemeProvider colorScheme=\"dark\">\n        <ErrorBoundary fallbackRender={fallbackRender}>\n          <VStack w=\"100vw\" h=\"100vh\">\n            {state.current.player ? (\n              <Flex direction=\"column\" marginTop=\"4\">\n                <HStack spacing=\"4\">\n                  <FormControl>\n                    <FormLabel>Player</FormLabel>\n                    <Select\n                      id=\"player\"\n                      value={state.current.player || \"\"}\n                      onChange={(event) => selectPlayer(event.target.value)}\n                    >\n                      {Object.keys(state.players).map((playerID) => (\n                        <option key={playerID} value={playerID}>\n                          {playerID}\n                        </option>\n                      ))}\n                    </Select>\n                  </FormControl>\n                  <FormControl>\n                    <FormLabel>Plugin</FormLabel>\n                    <Select\n                      id=\"plugin\"\n                      value={state.current.plugin || \"\"}\n                      onChange={(event) => selectPlugin(event.target.value)}\n                    >\n                      {Object.keys(\n                        state.players[state.current.player].plugins\n                      ).map((pluginID) => (\n                        <option key={pluginID} value={pluginID}>\n                          {pluginID}\n                        </option>\n                      ))}\n                    </Select>\n                  </FormControl>\n                </HStack>\n                <Container marginY=\"6\">\n                  <Component />\n                </Container>\n                <details>\n                  <summary>Debug</summary>\n                  <pre>{JSON.stringify(state, null, 2)}</pre>\n                </details>\n              </Flex>\n            ) : (\n              <Flex justifyContent=\"center\" padding=\"6\">\n                <Text>\n                  No Player-UI instance or devtools plugin detected. Visit{\" \"}\n                  <a href=\"https://player-ui.github.io/\">\n                    https://player-ui.github.io/\n                  </a>{\" \"}\n                  for more info.\n                </Text>\n              </Flex>\n            )}\n          </VStack>\n        </ErrorBoundary>\n      </ThemeProvider>\n    </ChakraProvider>\n  );\n};\n","import type { ExtensionState } from \"@player-tools/devtools-types\";\nimport type { Flow, ReactPlayerPlugin } from \"@player-ui/react\";\nimport DevtoolsUIAssetsPlugin from \"@devtools-ui/plugin\";\nimport { PubSubPlugin } from \"@player-ui/pubsub-plugin\";\n\nexport const PUBSUB_PLUGIN = new PubSubPlugin();\n\nexport const PLAYER_PLUGINS: ReactPlayerPlugin[] = [\n  new DevtoolsUIAssetsPlugin(),\n  PUBSUB_PLUGIN,\n];\n\nexport const INITIAL_FLOW: Flow = {\n  id: \"initial-flow\",\n  views: [\n    {\n      id: \"view-1\",\n      type: \"text\",\n      value: \"connecting...\",\n    },\n  ],\n  navigation: {\n    BEGIN: \"FLOW_1\",\n    FLOW_1: {\n      startState: \"VIEW_1\",\n      VIEW_1: {\n        state_type: \"VIEW\",\n        ref: \"view-1\",\n        transitions: {},\n      },\n    },\n  },\n};\n\nexport const INITIAL_EXTENSION_STATE: ExtensionState = {\n  current: {\n    player: null,\n    plugin: null,\n  },\n  players: {},\n};\n","import { Messenger } from \"@player-tools/devtools-messenger\";\nimport type {\n  ExtensionSupportedEvents,\n  MessengerOptions,\n} from \"@player-tools/devtools-types\";\nimport { useCallback, useEffect, useMemo, useReducer } from \"react\";\n\nimport { INITIAL_EXTENSION_STATE } from \"../constants\";\nimport { reducer } from \"./reducer\";\n\nconst NOOP_ID = -1;\n\n/** Extension state */\nexport const useExtensionState = ({\n  communicationLayer,\n}: {\n  /** the communication layer to use for the extension */\n  communicationLayer: Pick<\n    MessengerOptions<ExtensionSupportedEvents>,\n    \"sendMessage\" | \"addListener\" | \"removeListener\"\n  >;\n}) => {\n  const [state, dispatch] = useReducer(reducer, INITIAL_EXTENSION_STATE);\n\n  const messengerOptions = useMemo<MessengerOptions<ExtensionSupportedEvents>>(\n    () => ({\n      context: \"devtools\",\n      target: \"player\",\n      messageCallback: (message) => {\n        dispatch(message);\n      },\n      ...communicationLayer,\n      logger: console,\n    }),\n    [dispatch, communicationLayer]\n  );\n\n  const messenger = useMemo(\n    () => new Messenger(messengerOptions),\n    [messengerOptions]\n  );\n\n  useEffect(() => {\n    return () => {\n      messenger.destroy();\n    };\n  }, []);\n\n  const selectPlayer = useCallback(\n    (playerID: string) => {\n      dispatch({\n        id: NOOP_ID,\n        sender: \"internal\",\n        context: \"devtools\",\n        _messenger_: false,\n        timestamp: Date.now(),\n        type: \"PLAYER_DEVTOOLS_PLAYER_SELECTED\",\n        payload: {\n          playerID,\n        },\n      });\n    },\n    [dispatch]\n  );\n\n  const selectPlugin = useCallback(\n    (pluginID: string) => {\n      dispatch({\n        id: NOOP_ID,\n        sender: \"internal\",\n        context: \"devtools\",\n        _messenger_: false,\n        timestamp: Date.now(),\n        type: \"PLAYER_DEVTOOLS_PLUGIN_SELECTED\",\n        payload: {\n          pluginID,\n        },\n      });\n    },\n    [dispatch]\n  );\n\n  const handleInteraction = useCallback(\n    ({\n      type,\n      payload,\n    }: {\n      /** interaction type */\n      type: string;\n      /** interaction payload */\n      payload?: string;\n    }) => {\n      messenger.sendMessage({\n        type: \"PLAYER_DEVTOOLS_PLUGIN_INTERACTION\",\n        payload: {\n          type,\n          payload,\n        },\n      });\n    },\n    [messenger]\n  );\n\n  return { state, selectPlayer, selectPlugin, handleInteraction };\n};\n","import type {\n  ExtensionState,\n  ExtensionSupportedEvents,\n  Transaction,\n} from \"@player-tools/devtools-types\";\nimport { dset } from \"dset/merge\";\nimport { produce } from \"immer\";\n\n/** Extension state reducer */\nexport const reducer = (\n  state: ExtensionState,\n  transaction: Transaction<ExtensionSupportedEvents>\n): ExtensionState => {\n  switch (transaction.type) {\n    case \"PLAYER_DEVTOOLS_PLAYER_INIT\":\n      return produce(state, (draft) => {\n        const {\n          sender,\n          payload: { plugins },\n        } = transaction;\n        const { player, plugin } = draft.current;\n\n        if (!player && !plugin) {\n          // if there is no player and plugin selected, select the first one:\n          dset(draft, [\"current\", \"player\"], sender);\n          dset(\n            draft,\n            [\"current\", \"plugin\"],\n            plugins[Object.keys(plugins)[0]].id\n          );\n        }\n\n        dset(draft, [\"players\", sender, \"plugins\"], plugins);\n        dset(draft, [\"players\", sender, \"active\"], true);\n      });\n    case \"PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE\":\n      return produce(state, (draft) => {\n        const {\n          sender,\n          payload: { flow, pluginID },\n        } = transaction;\n\n        dset(draft, [\"players\", sender, \"plugins\", pluginID, \"flow\"], flow);\n      });\n    case \"PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE\":\n      return produce(state, (draft) => {\n        const {\n          sender,\n          payload: { data, pluginID },\n        } = transaction;\n        dset(\n          draft,\n          [\"players\", sender, \"plugins\", pluginID, \"flow\", \"data\"],\n          data\n        );\n      });\n    case \"MESSENGER_EVENT_BATCH\":\n      return produce(state, (draft) => {\n        return transaction.payload.events.reduce(reducer, draft);\n      });\n    case \"PLAYER_DEVTOOLS_PLAYER_STOPPED\":\n      return produce(state, (draft) => {\n        const { sender } = transaction;\n\n        dset(draft, [\"players\", sender, \"active\"], false);\n      });\n    case \"PLAYER_DEVTOOLS_PLAYER_SELECTED\":\n      return produce(state, (draft) => {\n        const { playerID } = transaction.payload;\n        dset(draft, [\"current\", \"player\"], playerID);\n      });\n    case \"PLAYER_DEVTOOLS_PLUGIN_SELECTED\":\n      return produce(state, (draft) => {\n        const { pluginID } = transaction.payload;\n        dset(draft, [\"current\", \"plugin\"], pluginID);\n      });\n    default:\n      return state;\n  }\n};\n","import type { Flow } from \"@player-ui/react\";\nimport { dequal } from \"dequal\";\n\nexport const flowDiff = ({\n  curr,\n  next,\n}: {\n  curr: Flow;\n  next: Flow;\n}):\n  | { change: \"data\"; value: Flow[\"data\"] }\n  | { change: \"flow\"; value: Flow }\n  | null => {\n  // compare flows except for the `data` property\n  const currCopy = { ...curr, data: null };\n  const nextCopy = { ...next, data: null };\n\n  const baseFlowIsEqual = dequal(currCopy, nextCopy);\n\n  if (!baseFlowIsEqual) {\n    return { change: \"flow\", value: next };\n  }\n\n  // compare data\n  const currData = curr.data;\n  const nextData = next.data;\n\n  const dataIsEqual = dequal(currData, nextData);\n\n  if (!dataIsEqual) {\n    return { change: \"data\", value: nextData };\n  }\n\n  return null;\n};\n","import { extendTheme, type ThemeConfig } from \"@chakra-ui/react\";\n\nconst config: ThemeConfig = {\n  initialColorMode: \"dark\",\n  useSystemColorMode: false,\n};\n\nexport const theme = extendTheme({ config });\n"],"mappings":"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","names":["useEffect","useEffect"]}
+{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/panel/index.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/constants/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/plugins/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/reducer.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/helpers/flowDiff.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/panel/theme.ts"],"sourcesContent":["import React, { useRef } from \"react\";\nimport type {\n  MessengerOptions,\n  ExtensionSupportedEvents,\n} from \"@player-tools/devtools-types\";\nimport { DataController, Flow, useReactPlayer } from \"@player-ui/react\";\nimport { useEffect } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport {\n  Card,\n  CardBody,\n  CardHeader,\n  ChakraProvider,\n  Container,\n  Flex,\n  FormControl,\n  FormLabel,\n  Heading,\n  HStack,\n  Select,\n  Text,\n  VStack,\n} from \"@chakra-ui/react\";\nimport { ThemeProvider } from \"@devtools-ds/themes\";\n\nimport { INITIAL_FLOW } from \"../constants\";\nimport { PLAYER_PLUGINS, PUBSUB_PLUGIN } from \"../plugins\";\nimport { useExtensionState } from \"../state\";\nimport { flowDiff } from \"../helpers/flowDiff\";\nimport { theme } from \"./theme\";\n\nconst fallbackRender: ErrorBoundary[\"props\"][\"fallbackRender\"] = ({\n  error,\n}) => {\n  return (\n    <Container centerContent>\n      <Card>\n        <CardHeader>\n          <Heading>Ops, something went wrong.</Heading>\n        </CardHeader>\n      </Card>\n      <CardBody>\n        <Text as=\"pre\">{error.message}</Text>\n      </CardBody>\n    </Container>\n  );\n};\n\n/**\n * Panel Component\n *\n * This component serves as the main container for the devtools plugin content defined by plugin authors using Player-UI DSL.\n *\n * Props:\n * - `communicationLayer`: An object that allows communication between the devtools and the Player-UI plugins,\n *   enabling the exchange of data and events.\n *\n * Features:\n * - Error Handling: Utilizes the `ErrorBoundary` component from `react-error-boundary` to gracefully handle and display errors\n *   that may occur during the rendering of the plugin's content.\n * - State Management: Integrates with custom hooks such as `useExtensionState` to manage the state of the plugin and its components.\n * - Player Integration: Uses the `useReactPlayer` hook from `player-ui/react` to render interactive player components based on the\n *   DSL defined by the plugin authors.\n *\n * Example Usage:\n * ```tsx\n * <Panel communicationLayer={myCommunicationLayer} />\n * ```\n *\n * Note: The `communicationLayer` prop is essential for the proper functioning of the `Panel` component, as it enables the necessary\n * communication and data exchange with the player-ui/react library.\n */\nexport const Panel = ({\n  communicationLayer,\n}: {\n  /** the communication layer to use for the extension */\n  readonly communicationLayer: Pick<\n    MessengerOptions<ExtensionSupportedEvents>,\n    \"sendMessage\" | \"addListener\" | \"removeListener\"\n  >;\n}) => {\n  const { state, selectPlayer, selectPlugin, handleInteraction } =\n    useExtensionState({\n      communicationLayer,\n    });\n\n  const { reactPlayer } = useReactPlayer({\n    plugins: PLAYER_PLUGINS,\n  });\n\n  const dataController = useRef<WeakRef<DataController> | null>(null);\n\n  const currentFlow = useRef<Flow | null>(null);\n\n  useEffect(() => {\n    reactPlayer.player.hooks.dataController.tap(\"devtools-panel\", (d) => {\n      dataController.current = new WeakRef(d);\n    });\n  }, [reactPlayer]);\n\n  useEffect(() => {\n    // we subscribe to all messages from the devtools plugin\n    // so the plugin author can define their own events\n    PUBSUB_PLUGIN.subscribe(\"*\", (type: string, payload: string) => {\n      handleInteraction({\n        type,\n        payload,\n      });\n    });\n  }, []);\n\n  useEffect(() => {\n    const { player, plugin } = state.current;\n\n    const flow =\n      player && plugin\n        ? state.players[player]?.plugins?.[plugin]?.flow || INITIAL_FLOW\n        : INITIAL_FLOW;\n\n    if (!currentFlow.current) {\n      currentFlow.current = flow;\n      reactPlayer.start(flow);\n      return;\n    }\n\n    const diff = flowDiff({\n      curr: currentFlow.current as Flow,\n      next: flow,\n    });\n\n    if (diff) {\n      const { change, value } = diff;\n\n      if (change === \"flow\") {\n        currentFlow.current = value;\n        reactPlayer.start(value);\n      } else if (change === \"data\") {\n        dataController.current\n          ? dataController.current\n              .deref()\n              ?.set(value as Record<string, unknown>)\n          : reactPlayer.start(flow);\n      }\n    }\n  }, [reactPlayer, state]);\n\n  const Component = reactPlayer.Component as React.FC;\n\n  return (\n    <ChakraProvider theme={theme}>\n      <ThemeProvider colorScheme=\"dark\">\n        <ErrorBoundary fallbackRender={fallbackRender}>\n          <VStack w=\"100vw\" h=\"100vh\">\n            {state.current.player ? (\n              <Flex direction=\"column\" marginTop=\"4\">\n                <HStack spacing=\"4\">\n                  <FormControl>\n                    <FormLabel>Player</FormLabel>\n                    <Select\n                      id=\"player\"\n                      value={state.current.player || \"\"}\n                      onChange={(event) => selectPlayer(event.target.value)}\n                    >\n                      {Object.keys(state.players).map((playerID) => (\n                        <option key={playerID} value={playerID}>\n                          {playerID}\n                        </option>\n                      ))}\n                    </Select>\n                  </FormControl>\n                  <FormControl>\n                    <FormLabel>Plugin</FormLabel>\n                    <Select\n                      id=\"plugin\"\n                      value={state.current.plugin || \"\"}\n                      onChange={(event) => selectPlugin(event.target.value)}\n                    >\n                      {Object.keys(\n                        state.players[state.current.player].plugins\n                      ).map((pluginID) => (\n                        <option key={pluginID} value={pluginID}>\n                          {pluginID}\n                        </option>\n                      ))}\n                    </Select>\n                  </FormControl>\n                </HStack>\n                <Container marginY=\"6\">\n                  <Component />\n                </Container>\n                <details>\n                  <summary>Debug</summary>\n                  <pre>{JSON.stringify(state, null, 2)}</pre>\n                </details>\n              </Flex>\n            ) : (\n              <Flex justifyContent=\"center\" padding=\"6\">\n                <Text>\n                  No Player-UI instance or devtools plugin detected. Visit{\" \"}\n                  <a href=\"https://player-ui.github.io/\">\n                    https://player-ui.github.io/\n                  </a>{\" \"}\n                  for more info.\n                </Text>\n              </Flex>\n            )}\n          </VStack>\n        </ErrorBoundary>\n      </ThemeProvider>\n    </ChakraProvider>\n  );\n};\n","import type { ExtensionState } from \"@player-tools/devtools-types\";\nimport type { Flow } from \"@player-ui/react\";\n\nexport const INITIAL_FLOW: Flow = {\n  id: \"initial-flow\",\n  views: [\n    {\n      id: \"view-1\",\n      type: \"text\",\n      value: \"connecting...\",\n    },\n  ],\n  navigation: {\n    BEGIN: \"FLOW_1\",\n    FLOW_1: {\n      startState: \"VIEW_1\",\n      VIEW_1: {\n        state_type: \"VIEW\",\n        ref: \"view-1\",\n        transitions: {},\n      },\n    },\n  },\n};\n\nexport const INITIAL_EXTENSION_STATE: ExtensionState = {\n  current: {\n    player: null,\n    plugin: null,\n  },\n  players: {},\n};\n","import DevtoolsUIAssetsPlugin from \"@devtools-ui/plugin\";\nimport { PubSubPlugin } from \"@player-ui/pubsub-plugin\";\nimport type { ReactPlayerPlugin } from \"@player-ui/react\";\n\nexport const PUBSUB_PLUGIN = new PubSubPlugin();\n\nexport const PLAYER_PLUGINS: ReactPlayerPlugin[] = [\n  new DevtoolsUIAssetsPlugin(),\n  PUBSUB_PLUGIN,\n];\n","import { Messenger } from \"@player-tools/devtools-messenger\";\nimport type {\n  ExtensionSupportedEvents,\n  MessengerOptions,\n} from \"@player-tools/devtools-types\";\nimport { useCallback, useEffect, useMemo, useReducer } from \"react\";\n\nimport { INITIAL_EXTENSION_STATE } from \"../constants\";\nimport { reducer } from \"./reducer\";\n\nconst NOOP_ID = -1;\n\n/**\n * Custom React hook for managing the state of the devtools extension.\n *\n * This hook initializes the extension's state and sets up a communication layer\n * using the `Messenger` class. It provides methods to select a player or plugin,\n * and handle interactions, which dispatch actions to update the state accordingly.\n *\n */\nexport const useExtensionState = ({\n  communicationLayer,\n}: {\n  /** the communication layer to use for the extension */\n  communicationLayer: Pick<\n    MessengerOptions<ExtensionSupportedEvents>,\n    \"sendMessage\" | \"addListener\" | \"removeListener\"\n  >;\n}) => {\n  const [state, dispatch] = useReducer(reducer, INITIAL_EXTENSION_STATE);\n\n  const messengerOptions = useMemo<MessengerOptions<ExtensionSupportedEvents>>(\n    () => ({\n      context: \"devtools\",\n      target: \"player\",\n      messageCallback: (message) => {\n        dispatch(message);\n      },\n      ...communicationLayer,\n      logger: console,\n    }),\n    [dispatch, communicationLayer]\n  );\n\n  const messenger = useMemo(\n    () => new Messenger(messengerOptions),\n    [messengerOptions]\n  );\n\n  useEffect(() => {\n    return () => {\n      messenger.destroy();\n    };\n  }, []);\n\n  const selectPlayer = useCallback(\n    (playerID: string) => {\n      dispatch({\n        id: NOOP_ID,\n        sender: \"internal\",\n        context: \"devtools\",\n        _messenger_: false,\n        timestamp: Date.now(),\n        type: \"PLAYER_DEVTOOLS_PLAYER_SELECTED\",\n        payload: {\n          playerID,\n        },\n      });\n    },\n    [dispatch]\n  );\n\n  const selectPlugin = useCallback(\n    (pluginID: string) => {\n      dispatch({\n        id: NOOP_ID,\n        sender: \"internal\",\n        context: \"devtools\",\n        _messenger_: false,\n        timestamp: Date.now(),\n        type: \"PLAYER_DEVTOOLS_PLUGIN_SELECTED\",\n        payload: {\n          pluginID,\n        },\n      });\n    },\n    [dispatch]\n  );\n\n  /**\n   * Plugin authors can add interactive elements to the Player-UI content by leveraging\n   * the pub-sub plugin and having the handle interaction proxy the message to the inspected\n   * Player-UI instance.\n   */\n  const handleInteraction = useCallback(\n    ({\n      type,\n      payload,\n    }: {\n      /** interaction type */\n      type: string;\n      /** interaction payload */\n      payload?: string;\n    }) => {\n      messenger.sendMessage({\n        type: \"PLAYER_DEVTOOLS_PLUGIN_INTERACTION\",\n        payload: {\n          type,\n          payload,\n        },\n      });\n    },\n    [messenger]\n  );\n\n  return { state, selectPlayer, selectPlugin, handleInteraction };\n};\n","import type {\n  ExtensionState,\n  ExtensionSupportedEvents,\n  Transaction,\n} from \"@player-tools/devtools-types\";\nimport { dset } from \"dset/merge\";\nimport { produce } from \"immer\";\n\n/** Extension state reducer */\nexport const reducer = (\n  state: ExtensionState,\n  transaction: Transaction<ExtensionSupportedEvents>\n): ExtensionState => {\n  switch (transaction.type) {\n    case \"PLAYER_DEVTOOLS_PLAYER_INIT\":\n      return produce(state, (draft) => {\n        const {\n          sender,\n          payload: { plugins },\n        } = transaction;\n        const { player, plugin } = draft.current;\n\n        if (!player && !plugin) {\n          // if there is no player and plugin selected, select the first one:\n          dset(draft, [\"current\", \"player\"], sender);\n          dset(\n            draft,\n            [\"current\", \"plugin\"],\n            plugins[Object.keys(plugins)[0]].id\n          );\n        }\n\n        dset(draft, [\"players\", sender, \"plugins\"], plugins);\n        dset(draft, [\"players\", sender, \"active\"], true);\n      });\n    case \"PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE\":\n      return produce(state, (draft) => {\n        const {\n          sender,\n          payload: { flow, pluginID },\n        } = transaction;\n\n        dset(draft, [\"players\", sender, \"plugins\", pluginID, \"flow\"], flow);\n      });\n    case \"PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE\":\n      return produce(state, (draft) => {\n        const {\n          sender,\n          payload: { data, pluginID },\n        } = transaction;\n        dset(\n          draft,\n          [\"players\", sender, \"plugins\", pluginID, \"flow\", \"data\"],\n          data\n        );\n      });\n    case \"MESSENGER_EVENT_BATCH\":\n      return produce(state, (draft) => {\n        return transaction.payload.events.reduce(reducer, draft);\n      });\n    case \"PLAYER_DEVTOOLS_PLAYER_STOPPED\":\n      return produce(state, (draft) => {\n        const { sender } = transaction;\n\n        dset(draft, [\"players\", sender, \"active\"], false);\n      });\n    case \"PLAYER_DEVTOOLS_PLAYER_SELECTED\":\n      return produce(state, (draft) => {\n        const { playerID } = transaction.payload;\n        dset(draft, [\"current\", \"player\"], playerID);\n      });\n    case \"PLAYER_DEVTOOLS_PLUGIN_SELECTED\":\n      return produce(state, (draft) => {\n        const { pluginID } = transaction.payload;\n        dset(draft, [\"current\", \"plugin\"], pluginID);\n      });\n    default:\n      return state;\n  }\n};\n","import type { Flow } from \"@player-ui/react\";\nimport { dequal } from \"dequal\";\n\n/**\n * Compares two Flow objects and identifies if there's a change in their structure or data.\n *\n * This function takes two Flow objects as input, `curr` (current) and `next` (next), and compares them\n * to determine if there's a change in the flow's structure or its data. If there's a change in the flow's\n * structure (excluding the `data` property), it returns an object indicating a \"flow\" change along with the\n * new flow. If there's a change in the `data` property, it returns an object indicating a \"data\" change along\n * with the new data. If there are no changes, it returns null.\n */\nexport const flowDiff = ({\n  curr,\n  next,\n}: {\n  curr: Flow;\n  next: Flow;\n}):\n  | { change: \"data\"; value: Flow[\"data\"] }\n  | { change: \"flow\"; value: Flow }\n  | null => {\n  // compare flows except for the `data` property\n  const currCopy = { ...curr, data: null };\n  const nextCopy = { ...next, data: null };\n\n  const baseFlowIsEqual = dequal(currCopy, nextCopy);\n\n  if (!baseFlowIsEqual) {\n    return { change: \"flow\", value: next };\n  }\n\n  // compare data\n  const currData = curr.data;\n  const nextData = next.data;\n\n  const dataIsEqual = dequal(currData, nextData);\n\n  if (!dataIsEqual) {\n    return { change: \"data\", value: nextData };\n  }\n\n  return null;\n};\n","import { extendTheme, type ThemeConfig } from \"@chakra-ui/react\";\n\nconst config: ThemeConfig = {\n  initialColorMode: \"dark\",\n  useSystemColorMode: false,\n};\n\nexport const theme = extendTheme({ config });\n"],"mappings":"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","names":["useEffect","useEffect"]}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@player-tools/devtools-client",
-  "version": "0.5.3--canary.90.2515",
+  "version": "0.5.3--canary.100.2570",
   "main": "dist/cjs/index.cjs",
   "dependencies": {
-    "@player-tools/devtools-messenger": "0.5.3--canary.90.2515",
-    "@player-tools/devtools-types": "0.5.3--canary.90.2515",
+    "@player-tools/devtools-messenger": "0.5.3--canary.100.2570",
+    "@player-tools/devtools-types": "0.5.3--canary.100.2570",
     "@chakra-ui/react": "2.8.2",
     "@player-ui/pubsub-plugin": "0.7.2-next.4",
     "@player-ui/react": "0.7.2-next.4",

package/src/constants/index.ts

@@ -1,14 +1,5 @@
 import type { ExtensionState } from "@player-tools/devtools-types";
-import type { Flow, ReactPlayerPlugin } from "@player-ui/react";
-import DevtoolsUIAssetsPlugin from "@devtools-ui/plugin";
-import { PubSubPlugin } from "@player-ui/pubsub-plugin";
-
-export const PUBSUB_PLUGIN = new PubSubPlugin();
-
-export const PLAYER_PLUGINS: ReactPlayerPlugin[] = [
-  new DevtoolsUIAssetsPlugin(),
-  PUBSUB_PLUGIN,
-];
+import type { Flow } from "@player-ui/react";
 
 export const INITIAL_FLOW: Flow = {
   id: "initial-flow",

package/src/helpers/flowDiff.ts

@@ -1,6 +1,15 @@
 import type { Flow } from "@player-ui/react";
 import { dequal } from "dequal";
 
+/**
+ * Compares two Flow objects and identifies if there's a change in their structure or data.
+ *
+ * This function takes two Flow objects as input, `curr` (current) and `next` (next), and compares them
+ * to determine if there's a change in the flow's structure or its data. If there's a change in the flow's
+ * structure (excluding the `data` property), it returns an object indicating a "flow" change along with the
+ * new flow. If there's a change in the `data` property, it returns an object indicating a "data" change along
+ * with the new data. If there are no changes, it returns null.
+ */
 export const flowDiff = ({
   curr,
   next,

package/src/panel/index.tsx

@@ -1,6 +1,8 @@
 import React, { useRef } from "react";
-import type { MessengerOptions } from "@player-tools/devtools-types";
-import type { ExtensionSupportedEvents } from "@player-tools/devtools-types";
+import type {
+  MessengerOptions,
+  ExtensionSupportedEvents,
+} from "@player-tools/devtools-types";
 import { DataController, Flow, useReactPlayer } from "@player-ui/react";
 import { useEffect } from "react";
 import { ErrorBoundary } from "react-error-boundary";
@@ -21,7 +23,8 @@ import {
 } from "@chakra-ui/react";
 import { ThemeProvider } from "@devtools-ds/themes";
 
-import { INITIAL_FLOW, PLAYER_PLUGINS, PUBSUB_PLUGIN } from "../constants";
+import { INITIAL_FLOW } from "../constants";
+import { PLAYER_PLUGINS, PUBSUB_PLUGIN } from "../plugins";
 import { useExtensionState } from "../state";
 import { flowDiff } from "../helpers/flowDiff";
 import { theme } from "./theme";
@@ -44,9 +47,28 @@ const fallbackRender: ErrorBoundary["props"]["fallbackRender"] = ({
 };
 
 /**
- * Panel component
+ * Panel Component
  *
- * devtools plugin authors can define their plugins content using DSL and have it rendered here
+ * This component serves as the main container for the devtools plugin content defined by plugin authors using Player-UI DSL.
+ *
+ * Props:
+ * - `communicationLayer`: An object that allows communication between the devtools and the Player-UI plugins,
+ *   enabling the exchange of data and events.
+ *
+ * Features:
+ * - Error Handling: Utilizes the `ErrorBoundary` component from `react-error-boundary` to gracefully handle and display errors
+ *   that may occur during the rendering of the plugin's content.
+ * - State Management: Integrates with custom hooks such as `useExtensionState` to manage the state of the plugin and its components.
+ * - Player Integration: Uses the `useReactPlayer` hook from `player-ui/react` to render interactive player components based on the
+ *   DSL defined by the plugin authors.
+ *
+ * Example Usage:
+ * ```tsx
+ * <Panel communicationLayer={myCommunicationLayer} />
+ * ```
+ *
+ * Note: The `communicationLayer` prop is essential for the proper functioning of the `Panel` component, as it enables the necessary
+ * communication and data exchange with the player-ui/react library.
  */
 export const Panel = ({
   communicationLayer,
@@ -71,7 +93,7 @@ export const Panel = ({
   const currentFlow = useRef<Flow | null>(null);
 
   useEffect(() => {
-    reactPlayer.player.hooks.dataController.tap("panel", (d) => {
+    reactPlayer.player.hooks.dataController.tap("devtools-panel", (d) => {
       dataController.current = new WeakRef(d);
     });
   }, [reactPlayer]);

package/src/plugins/index.ts

@@ -0,0 +1,10 @@
+import DevtoolsUIAssetsPlugin from "@devtools-ui/plugin";
+import { PubSubPlugin } from "@player-ui/pubsub-plugin";
+import type { ReactPlayerPlugin } from "@player-ui/react";
+
+export const PUBSUB_PLUGIN = new PubSubPlugin();
+
+export const PLAYER_PLUGINS: ReactPlayerPlugin[] = [
+  new DevtoolsUIAssetsPlugin(),
+  PUBSUB_PLUGIN,
+];

package/src/state/__tests__/reducer.test.ts

@@ -0,0 +1,362 @@
+import { describe, expect, test } from "vitest";
+import type {
+  Transaction,
+  DevtoolsDataChangeEvent,
+  PlayerInitEvent,
+  DevtoolsFlowChangeEvent,
+  DevtoolsEventsBatchEvent,
+  PlayerStoppedEvent,
+  ExtensionSelectedPlayerEvent,
+  ExtensionSelectedPluginEvent,
+} from "@player-tools/devtools-types";
+import { reducer } from "../reducer";
+import { INITIAL_EXTENSION_STATE, INITIAL_FLOW } from "../../constants";
+
+const mockPlayerInitTransaction: Transaction<PlayerInitEvent> = {
+  id: 1,
+  timestamp: Date.now(),
+  sender: "sender-id",
+  target: "target-id",
+  context: "player",
+  _messenger_: true,
+  type: "PLAYER_DEVTOOLS_PLAYER_INIT",
+  payload: {
+    plugins: {
+      "plugin-id": {
+        id: "plugin-id",
+        description: "Plugin Description",
+        flow: INITIAL_FLOW,
+        name: "Plugin Name",
+        version: "1.0.0",
+      },
+    },
+  },
+};
+
+const mockPlayerFlowChangeTransaction: Transaction<DevtoolsFlowChangeEvent> = {
+  id: 2,
+  timestamp: Date.now(),
+  sender: "sender-id",
+  target: "target-id",
+  context: "player",
+  _messenger_: true,
+  type: "PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE",
+  payload: {
+    flow: {
+      ...INITIAL_FLOW,
+      data: {
+        key: "value",
+      },
+    },
+    pluginID: "plugin-id",
+  },
+};
+
+const mockPluginDataChangeTransaction: Transaction<DevtoolsDataChangeEvent> = {
+  id: 2,
+  timestamp: Date.now(),
+  sender: "sender-id",
+  target: "target-id",
+  context: "player",
+  _messenger_: true,
+  type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
+  payload: {
+    data: {
+      key: "value",
+    },
+    pluginID: "plugin-id",
+  },
+};
+
+const mockEventBatchTransaction: Transaction<DevtoolsEventsBatchEvent> = {
+  id: 4,
+  timestamp: Date.now(),
+  sender: "sender-id",
+  target: "target-id",
+  context: "player",
+  _messenger_: true,
+  type: "MESSENGER_EVENT_BATCH",
+  payload: {
+    events: [
+      mockPlayerInitTransaction,
+      mockPlayerFlowChangeTransaction,
+      mockPluginDataChangeTransaction,
+    ],
+  },
+};
+
+const mockPlayerStoppedTransaction: Transaction<PlayerStoppedEvent> = {
+  id: 5,
+  timestamp: Date.now(),
+  sender: "sender-id",
+  target: "target-id",
+  context: "player",
+  _messenger_: true,
+  type: "PLAYER_DEVTOOLS_PLAYER_STOPPED",
+  payload: null,
+};
+
+const mockPlayerSelectedTransaction: Transaction<ExtensionSelectedPlayerEvent> =
+  {
+    id: 6,
+    timestamp: Date.now(),
+    sender: "sender-id",
+    target: "target-id",
+    context: "player",
+    _messenger_: true,
+    type: "PLAYER_DEVTOOLS_PLAYER_SELECTED",
+    payload: {
+      playerID: "player-id",
+    },
+  };
+
+const mockPluginSelectedTransaction: Transaction<ExtensionSelectedPluginEvent> =
+  {
+    id: 7,
+    timestamp: Date.now(),
+    sender: "sender-id",
+    target: "target-id",
+    context: "player",
+    _messenger_: true,
+    type: "PLAYER_DEVTOOLS_PLUGIN_SELECTED",
+    payload: {
+      pluginID: "plugin-id",
+    },
+  };
+
+describe("reducer", () => {
+  test("PLAYER_DEVTOOLS_PLAYER_INIT", () => {
+    const newState = reducer(
+      INITIAL_EXTENSION_STATE,
+      mockPlayerInitTransaction
+    );
+
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "current": {
+          "player": "sender-id",
+          "plugin": "plugin-id",
+        },
+        "players": {
+          "sender-id": {
+            "active": true,
+            "plugins": {
+              "plugin-id": {
+                "description": "Plugin Description",
+                "flow": {
+                  "id": "initial-flow",
+                  "navigation": {
+                    "BEGIN": "FLOW_1",
+                    "FLOW_1": {
+                      "VIEW_1": {
+                        "ref": "view-1",
+                        "state_type": "VIEW",
+                        "transitions": {},
+                      },
+                      "startState": "VIEW_1",
+                    },
+                  },
+                  "views": [
+                    {
+                      "id": "view-1",
+                      "type": "text",
+                      "value": "connecting...",
+                    },
+                  ],
+                },
+                "id": "plugin-id",
+                "name": "Plugin Name",
+                "version": "1.0.0",
+              },
+            },
+          },
+        },
+      }
+    `);
+  });
+
+  test("PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE", () => {
+    const newState = reducer(
+      INITIAL_EXTENSION_STATE,
+      mockPlayerFlowChangeTransaction
+    );
+
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "current": {
+          "player": null,
+          "plugin": null,
+        },
+        "players": {
+          "sender-id": {
+            "plugins": {
+              "plugin-id": {
+                "flow": {
+                  "data": {
+                    "key": "value",
+                  },
+                  "id": "initial-flow",
+                  "navigation": {
+                    "BEGIN": "FLOW_1",
+                    "FLOW_1": {
+                      "VIEW_1": {
+                        "ref": "view-1",
+                        "state_type": "VIEW",
+                        "transitions": {},
+                      },
+                      "startState": "VIEW_1",
+                    },
+                  },
+                  "views": [
+                    {
+                      "id": "view-1",
+                      "type": "text",
+                      "value": "connecting...",
+                    },
+                  ],
+                },
+              },
+            },
+          },
+        },
+      }
+    `);
+  });
+
+  test("PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE", () => {
+    const newState = reducer(
+      INITIAL_EXTENSION_STATE,
+      mockPluginDataChangeTransaction
+    );
+
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "current": {
+          "player": null,
+          "plugin": null,
+        },
+        "players": {
+          "sender-id": {
+            "plugins": {
+              "plugin-id": {
+                "flow": {
+                  "data": {
+                    "key": "value",
+                  },
+                },
+              },
+            },
+          },
+        },
+      }
+    `);
+  });
+
+  test("MESSENGER_EVENT_BATCH", () => {
+    const newState = reducer(
+      INITIAL_EXTENSION_STATE,
+      mockEventBatchTransaction
+    );
+
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "current": {
+          "player": "sender-id",
+          "plugin": "plugin-id",
+        },
+        "players": {
+          "sender-id": {
+            "active": true,
+            "plugins": {
+              "plugin-id": {
+                "description": "Plugin Description",
+                "flow": {
+                  "data": {
+                    "key": "value",
+                  },
+                  "id": "initial-flow",
+                  "navigation": {
+                    "BEGIN": "FLOW_1",
+                    "FLOW_1": {
+                      "VIEW_1": {
+                        "ref": "view-1",
+                        "state_type": "VIEW",
+                        "transitions": {},
+                      },
+                      "startState": "VIEW_1",
+                    },
+                  },
+                  "views": [
+                    {
+                      "id": "view-1",
+                      "type": "text",
+                      "value": "connecting...",
+                    },
+                  ],
+                },
+                "id": "plugin-id",
+                "name": "Plugin Name",
+                "version": "1.0.0",
+              },
+            },
+          },
+        },
+      }
+    `);
+  });
+
+  test("PLAYER_DEVTOOLS_PLAYER_STOPPED", () => {
+    const newState = reducer(
+      INITIAL_EXTENSION_STATE,
+      mockPlayerStoppedTransaction
+    );
+
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "current": {
+          "player": null,
+          "plugin": null,
+        },
+        "players": {
+          "sender-id": {
+            "active": false,
+          },
+        },
+      }
+    `);
+  });
+
+  test("PLAYER_DEVTOOLS_PLAYER_SELECTED", () => {
+    const newState = reducer(
+      INITIAL_EXTENSION_STATE,
+      mockPlayerSelectedTransaction
+    );
+
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "current": {
+          "player": "player-id",
+          "plugin": null,
+        },
+        "players": {},
+      }
+    `);
+  });
+
+  test("PLAYER_DEVTOOLS_PLUGIN_SELECTED", () => {
+    const newState = reducer(
+      INITIAL_EXTENSION_STATE,
+      mockPluginSelectedTransaction
+    );
+
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "current": {
+          "player": null,
+          "plugin": "plugin-id",
+        },
+        "players": {},
+      }
+    `);
+  });
+});

package/src/state/index.ts

@@ -10,7 +10,14 @@ import { reducer } from "./reducer";
 
 const NOOP_ID = -1;
 
-/** Extension state */
+/**
+ * Custom React hook for managing the state of the devtools extension.
+ *
+ * This hook initializes the extension's state and sets up a communication layer
+ * using the `Messenger` class. It provides methods to select a player or plugin,
+ * and handle interactions, which dispatch actions to update the state accordingly.
+ *
+ */
 export const useExtensionState = ({
   communicationLayer,
 }: {
@@ -80,6 +87,11 @@ export const useExtensionState = ({
     [dispatch]
   );
 
+  /**
+   * Plugin authors can add interactive elements to the Player-UI content by leveraging
+   * the pub-sub plugin and having the handle interaction proxy the message to the inspected
+   * Player-UI instance.
+   */
   const handleInteraction = useCallback(
     ({
       type,

package/types/constants/index.d.ts

@@ -1,8 +1,5 @@
 import type { ExtensionState } from "@player-tools/devtools-types";
-import type { Flow, ReactPlayerPlugin } from "@player-ui/react";
-import { PubSubPlugin } from "@player-ui/pubsub-plugin";
-export declare const PUBSUB_PLUGIN: PubSubPlugin;
-export declare const PLAYER_PLUGINS: ReactPlayerPlugin[];
+import type { Flow } from "@player-ui/react";
 export declare const INITIAL_FLOW: Flow;
 export declare const INITIAL_EXTENSION_STATE: ExtensionState;
 //# sourceMappingURL=index.d.ts.map

package/types/helpers/flowDiff.d.ts

@@ -1,4 +1,13 @@
 import type { Flow } from "@player-ui/react";
+/**
+ * Compares two Flow objects and identifies if there's a change in their structure or data.
+ *
+ * This function takes two Flow objects as input, `curr` (current) and `next` (next), and compares them
+ * to determine if there's a change in the flow's structure or its data. If there's a change in the flow's
+ * structure (excluding the `data` property), it returns an object indicating a "flow" change along with the
+ * new flow. If there's a change in the `data` property, it returns an object indicating a "data" change along
+ * with the new data. If there are no changes, it returns null.
+ */
 export declare const flowDiff: ({ curr, next, }: {
     curr: Flow;
     next: Flow;

package/types/panel/index.d.ts

@@ -1,10 +1,28 @@
 import React from "react";
-import type { MessengerOptions } from "@player-tools/devtools-types";
-import type { ExtensionSupportedEvents } from "@player-tools/devtools-types";
+import type { MessengerOptions, ExtensionSupportedEvents } from "@player-tools/devtools-types";
 /**
- * Panel component
+ * Panel Component
  *
- * devtools plugin authors can define their plugins content using DSL and have it rendered here
+ * This component serves as the main container for the devtools plugin content defined by plugin authors using Player-UI DSL.
+ *
+ * Props:
+ * - `communicationLayer`: An object that allows communication between the devtools and the Player-UI plugins,
+ *   enabling the exchange of data and events.
+ *
+ * Features:
+ * - Error Handling: Utilizes the `ErrorBoundary` component from `react-error-boundary` to gracefully handle and display errors
+ *   that may occur during the rendering of the plugin's content.
+ * - State Management: Integrates with custom hooks such as `useExtensionState` to manage the state of the plugin and its components.
+ * - Player Integration: Uses the `useReactPlayer` hook from `player-ui/react` to render interactive player components based on the
+ *   DSL defined by the plugin authors.
+ *
+ * Example Usage:
+ * ```tsx
+ * <Panel communicationLayer={myCommunicationLayer} />
+ * ```
+ *
+ * Note: The `communicationLayer` prop is essential for the proper functioning of the `Panel` component, as it enables the necessary
+ * communication and data exchange with the player-ui/react library.
  */
 export declare const Panel: ({ communicationLayer, }: {
     /** the communication layer to use for the extension */

package/types/plugins/index.d.ts

@@ -0,0 +1,5 @@
+import { PubSubPlugin } from "@player-ui/pubsub-plugin";
+import type { ReactPlayerPlugin } from "@player-ui/react";
+export declare const PUBSUB_PLUGIN: PubSubPlugin;
+export declare const PLAYER_PLUGINS: ReactPlayerPlugin[];
+//# sourceMappingURL=index.d.ts.map

package/types/state/index.d.ts

@@ -1,5 +1,12 @@
 import type { ExtensionSupportedEvents, MessengerOptions } from "@player-tools/devtools-types";
-/** Extension state */
+/**
+ * Custom React hook for managing the state of the devtools extension.
+ *
+ * This hook initializes the extension's state and sets up a communication layer
+ * using the `Messenger` class. It provides methods to select a player or plugin,
+ * and handle interactions, which dispatch actions to update the state accordingly.
+ *
+ */
 export declare const useExtensionState: ({ communicationLayer, }: {
     /** the communication layer to use for the extension */
     communicationLayer: Pick<MessengerOptions<ExtensionSupportedEvents>, "sendMessage" | "addListener" | "removeListener">;