@player-tools/devtools-client 0.8.1 → 0.8.2--canary.174.3739

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/cjs/index.cjs +10 -10
  2. package/dist/cjs/index.cjs.map +1 -1
  3. package/dist/index.legacy-esm.js +10 -10
  4. package/dist/index.mjs +10 -10
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +4 -5
  7. package/src/state/reducer.ts +10 -10
package/dist/cjs/index.cjs CHANGED
@@ -86,7 +86,7 @@ var import_devtools_messenger = require("@player-tools/devtools-messenger");
86
86
  var import_react = require("react");
87
87
 
88
88
  // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/reducer.ts
89
- var import_lodash = __toESM(require("lodash.set"));
89
+ var import_merge = require("dset/merge");
90
90
  var import_immer = require("immer");
91
91
  var reducer = (state, transaction) => {
92
92
  switch (transaction.type) {
@@ -96,14 +96,14 @@ var reducer = (state, transaction) => {
96
96
  sender,
97
97
  payload: { plugins }
98
98
  } = transaction;
99
- (0, import_lodash.default)(draft, ["current", "player"], sender);
100
- (0, import_lodash.default)(
99
+ (0, import_merge.dset)(draft, ["current", "player"], sender);
100
+ (0, import_merge.dset)(
101
101
  draft,
102
102
  ["current", "plugin"],
103
103
  draft.current.plugin || plugins[Object.keys(plugins)[0]].id
104
104
  );
105
- (0, import_lodash.default)(draft, ["players", sender, "plugins"], plugins);
106
- (0, import_lodash.default)(draft, ["players", sender, "active"], true);
105
+ (0, import_merge.dset)(draft, ["players", sender, "plugins"], plugins);
106
+ (0, import_merge.dset)(draft, ["players", sender, "active"], true);
107
107
  });
108
108
  case "PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE":
109
109
  return (0, import_immer.produce)(state, (draft) => {
@@ -111,7 +111,7 @@ var reducer = (state, transaction) => {
111
111
  sender,
112
112
  payload: { flow, pluginID }
113
113
  } = transaction;
114
- (0, import_lodash.default)(draft, ["players", sender, "plugins", pluginID, "flow"], flow);
114
+ (0, import_merge.dset)(draft, ["players", sender, "plugins", pluginID, "flow"], flow);
115
115
  });
116
116
  case "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE":
117
117
  return (0, import_immer.produce)(state, (draft) => {
@@ -119,7 +119,7 @@ var reducer = (state, transaction) => {
119
119
  sender,
120
120
  payload: { data, pluginID }
121
121
  } = transaction;
122
- (0, import_lodash.default)(
122
+ (0, import_merge.dset)(
123
123
  draft,
124
124
  ["players", sender, "plugins", pluginID, "flow", "data"],
125
125
  data
@@ -132,17 +132,17 @@ var reducer = (state, transaction) => {
132
132
  case "PLAYER_DEVTOOLS_PLAYER_STOPPED":
133
133
  return (0, import_immer.produce)(state, (draft) => {
134
134
  const { sender } = transaction;
135
- (0, import_lodash.default)(draft, ["players", sender, "active"], false);
135
+ (0, import_merge.dset)(draft, ["players", sender, "active"], false);
136
136
  });
137
137
  case "PLAYER_DEVTOOLS_PLAYER_SELECTED":
138
138
  return (0, import_immer.produce)(state, (draft) => {
139
139
  const { playerID } = transaction.payload;
140
- (0, import_lodash.default)(draft, ["current", "player"], playerID);
140
+ (0, import_merge.dset)(draft, ["current", "player"], playerID);
141
141
  });
142
142
  case "PLAYER_DEVTOOLS_PLUGIN_SELECTED":
143
143
  return (0, import_immer.produce)(state, (draft) => {
144
144
  const { pluginID } = transaction.payload;
145
- (0, import_lodash.default)(draft, ["current", "plugin"], pluginID);
145
+ (0, import_merge.dset)(draft, ["current", "plugin"], pluginID);
146
146
  });
147
147
  default:
148
148
  return state;
package/dist/cjs/index.cjs.map CHANGED
@@ -1 +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/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 Select,\n Text,\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 <Flex direction=\"column\" w=\"100vw\" h=\"100vh\" alignItems={\"normal\"}>\n {state.current.player ? (\n <Container minWidth={\"100%\"}>\n <Flex direction=\"column\" marginTop=\"4\">\n <Flex gap={\"8\"}>\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 </Flex>\n <Flex>\n <Component />\n </Flex>\n <details>\n <summary>Debug</summary>\n <pre style={{ maxHeight: \"30vh\", overflow: \"scroll\" }}>\n {JSON.stringify(state, null, 2)}\n </pre>\n </details>\n </Flex>\n </Container>\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 </Flex>\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 messenger.sendMessage({\n type: \"PLAYER_DEVTOOLS_PLUGIN_INTERACTION\",\n payload: {\n type: \"player-selected\",\n payload: 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 ...(state.current.player ? { target: state.current.player } : {}),\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 set from \"lodash.set\";\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 set(draft, [\"current\", \"player\"], sender);\n set(\n draft,\n [\"current\", \"plugin\"],\n draft.current.plugin || plugins[Object.keys(plugins)[0]].id\n );\n\n set(draft, [\"players\", sender, \"plugins\"], plugins);\n set(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 set(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 set(\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 set(draft, [\"players\", sender, \"active\"], false);\n });\n case \"PLAYER_DEVTOOLS_PLAYER_SELECTED\":\n return produce(state, (draft) => {\n const { playerID } = transaction.payload;\n set(draft, [\"current\", \"player\"], playerID);\n });\n case \"PLAYER_DEVTOOLS_PLUGIN_SELECTED\":\n return produce(state, (draft) => {\n const { pluginID } = transaction.payload;\n set(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","set","import_react","React"]}
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/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 Select,\n Text,\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 <Flex direction=\"column\" w=\"100vw\" h=\"100vh\" alignItems={\"normal\"}>\n {state.current.player ? (\n <Container minWidth={\"100%\"}>\n <Flex direction=\"column\" marginTop=\"4\">\n <Flex gap={\"8\"}>\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 </Flex>\n <Flex>\n <Component />\n </Flex>\n <details>\n <summary>Debug</summary>\n <pre style={{ maxHeight: \"30vh\", overflow: \"scroll\" }}>\n {JSON.stringify(state, null, 2)}\n </pre>\n </details>\n </Flex>\n </Container>\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 </Flex>\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 messenger.sendMessage({\n type: \"PLAYER_DEVTOOLS_PLUGIN_INTERACTION\",\n payload: {\n type: \"player-selected\",\n payload: 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 ...(state.current.player ? { target: state.current.player } : {}),\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 dset(draft, [\"current\", \"player\"], sender);\n dset(\n draft,\n [\"current\", \"plugin\"],\n draft.current.plugin || plugins[Object.keys(plugins)[0]].id\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 CHANGED
@@ -62,7 +62,7 @@ import { Messenger } from "@player-tools/devtools-messenger";
62
62
  import { useCallback, useEffect, useMemo, useReducer } from "react";
63
63
 
64
64
  // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/reducer.ts
65
- import set from "lodash.set";
65
+ import { dset } from "dset/merge";
66
66
  import { produce } from "immer";
67
67
  var reducer = (state, transaction) => {
68
68
  switch (transaction.type) {
@@ -72,14 +72,14 @@ var reducer = (state, transaction) => {
72
72
  sender,
73
73
  payload: { plugins }
74
74
  } = transaction;
75
- set(draft, ["current", "player"], sender);
76
- set(
75
+ dset(draft, ["current", "player"], sender);
76
+ dset(
77
77
  draft,
78
78
  ["current", "plugin"],
79
79
  draft.current.plugin || plugins[Object.keys(plugins)[0]].id
80
80
  );
81
- set(draft, ["players", sender, "plugins"], plugins);
82
- set(draft, ["players", sender, "active"], true);
81
+ dset(draft, ["players", sender, "plugins"], plugins);
82
+ dset(draft, ["players", sender, "active"], true);
83
83
  });
84
84
  case "PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE":
85
85
  return produce(state, (draft) => {
@@ -87,7 +87,7 @@ var reducer = (state, transaction) => {
87
87
  sender,
88
88
  payload: { flow, pluginID }
89
89
  } = transaction;
90
- set(draft, ["players", sender, "plugins", pluginID, "flow"], flow);
90
+ dset(draft, ["players", sender, "plugins", pluginID, "flow"], flow);
91
91
  });
92
92
  case "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE":
93
93
  return produce(state, (draft) => {
@@ -95,7 +95,7 @@ var reducer = (state, transaction) => {
95
95
  sender,
96
96
  payload: { data, pluginID }
97
97
  } = transaction;
98
- set(
98
+ dset(
99
99
  draft,
100
100
  ["players", sender, "plugins", pluginID, "flow", "data"],
101
101
  data
@@ -108,17 +108,17 @@ var reducer = (state, transaction) => {
108
108
  case "PLAYER_DEVTOOLS_PLAYER_STOPPED":
109
109
  return produce(state, (draft) => {
110
110
  const { sender } = transaction;
111
- set(draft, ["players", sender, "active"], false);
111
+ dset(draft, ["players", sender, "active"], false);
112
112
  });
113
113
  case "PLAYER_DEVTOOLS_PLAYER_SELECTED":
114
114
  return produce(state, (draft) => {
115
115
  const { playerID } = transaction.payload;
116
- set(draft, ["current", "player"], playerID);
116
+ dset(draft, ["current", "player"], playerID);
117
117
  });
118
118
  case "PLAYER_DEVTOOLS_PLUGIN_SELECTED":
119
119
  return produce(state, (draft) => {
120
120
  const { pluginID } = transaction.payload;
121
- set(draft, ["current", "plugin"], pluginID);
121
+ dset(draft, ["current", "plugin"], pluginID);
122
122
  });
123
123
  default:
124
124
  return state;
package/dist/index.mjs CHANGED
@@ -62,7 +62,7 @@ import { Messenger } from "@player-tools/devtools-messenger";
62
62
  import { useCallback, useEffect, useMemo, useReducer } from "react";
63
63
 
64
64
  // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/reducer.ts
65
- import set from "lodash.set";
65
+ import { dset } from "dset/merge";
66
66
  import { produce } from "immer";
67
67
  var reducer = (state, transaction) => {
68
68
  switch (transaction.type) {
@@ -72,14 +72,14 @@ var reducer = (state, transaction) => {
72
72
  sender,
73
73
  payload: { plugins }
74
74
  } = transaction;
75
- set(draft, ["current", "player"], sender);
76
- set(
75
+ dset(draft, ["current", "player"], sender);
76
+ dset(
77
77
  draft,
78
78
  ["current", "plugin"],
79
79
  draft.current.plugin || plugins[Object.keys(plugins)[0]].id
80
80
  );
81
- set(draft, ["players", sender, "plugins"], plugins);
82
- set(draft, ["players", sender, "active"], true);
81
+ dset(draft, ["players", sender, "plugins"], plugins);
82
+ dset(draft, ["players", sender, "active"], true);
83
83
  });
84
84
  case "PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE":
85
85
  return produce(state, (draft) => {
@@ -87,7 +87,7 @@ var reducer = (state, transaction) => {
87
87
  sender,
88
88
  payload: { flow, pluginID }
89
89
  } = transaction;
90
- set(draft, ["players", sender, "plugins", pluginID, "flow"], flow);
90
+ dset(draft, ["players", sender, "plugins", pluginID, "flow"], flow);
91
91
  });
92
92
  case "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE":
93
93
  return produce(state, (draft) => {
@@ -95,7 +95,7 @@ var reducer = (state, transaction) => {
95
95
  sender,
96
96
  payload: { data, pluginID }
97
97
  } = transaction;
98
- set(
98
+ dset(
99
99
  draft,
100
100
  ["players", sender, "plugins", pluginID, "flow", "data"],
101
101
  data
@@ -108,17 +108,17 @@ var reducer = (state, transaction) => {
108
108
  case "PLAYER_DEVTOOLS_PLAYER_STOPPED":
109
109
  return produce(state, (draft) => {
110
110
  const { sender } = transaction;
111
- set(draft, ["players", sender, "active"], false);
111
+ dset(draft, ["players", sender, "active"], false);
112
112
  });
113
113
  case "PLAYER_DEVTOOLS_PLAYER_SELECTED":
114
114
  return produce(state, (draft) => {
115
115
  const { playerID } = transaction.payload;
116
- set(draft, ["current", "player"], playerID);
116
+ dset(draft, ["current", "player"], playerID);
117
117
  });
118
118
  case "PLAYER_DEVTOOLS_PLUGIN_SELECTED":
119
119
  return produce(state, (draft) => {
120
120
  const { pluginID } = transaction.payload;
121
- set(draft, ["current", "plugin"], pluginID);
121
+ dset(draft, ["current", "plugin"], pluginID);
122
122
  });
123
123
  default:
124
124
  return state;
package/dist/index.mjs.map CHANGED
@@ -1 +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/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 Select,\n Text,\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 <Flex direction=\"column\" w=\"100vw\" h=\"100vh\" alignItems={\"normal\"}>\n {state.current.player ? (\n <Container minWidth={\"100%\"}>\n <Flex direction=\"column\" marginTop=\"4\">\n <Flex gap={\"8\"}>\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 </Flex>\n <Flex>\n <Component />\n </Flex>\n <details>\n <summary>Debug</summary>\n <pre style={{ maxHeight: \"30vh\", overflow: \"scroll\" }}>\n {JSON.stringify(state, null, 2)}\n </pre>\n </details>\n </Flex>\n </Container>\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 </Flex>\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 messenger.sendMessage({\n type: \"PLAYER_DEVTOOLS_PLUGIN_INTERACTION\",\n payload: {\n type: \"player-selected\",\n payload: 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 ...(state.current.player ? { target: state.current.player } : {}),\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 set from \"lodash.set\";\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 set(draft, [\"current\", \"player\"], sender);\n set(\n draft,\n [\"current\", \"plugin\"],\n draft.current.plugin || plugins[Object.keys(plugins)[0]].id\n );\n\n set(draft, [\"players\", sender, \"plugins\"], plugins);\n set(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 set(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 set(\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 set(draft, [\"players\", sender, \"active\"], false);\n });\n case \"PLAYER_DEVTOOLS_PLAYER_SELECTED\":\n return produce(state, (draft) => {\n const { playerID } = transaction.payload;\n set(draft, [\"current\", \"player\"], playerID);\n });\n case \"PLAYER_DEVTOOLS_PLUGIN_SELECTED\":\n return produce(state, (draft) => {\n const { pluginID } = transaction.payload;\n set(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"]}
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/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 Select,\n Text,\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 <Flex direction=\"column\" w=\"100vw\" h=\"100vh\" alignItems={\"normal\"}>\n {state.current.player ? (\n <Container minWidth={\"100%\"}>\n <Flex direction=\"column\" marginTop=\"4\">\n <Flex gap={\"8\"}>\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 </Flex>\n <Flex>\n <Component />\n </Flex>\n <details>\n <summary>Debug</summary>\n <pre style={{ maxHeight: \"30vh\", overflow: \"scroll\" }}>\n {JSON.stringify(state, null, 2)}\n </pre>\n </details>\n </Flex>\n </Container>\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 </Flex>\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 messenger.sendMessage({\n type: \"PLAYER_DEVTOOLS_PLUGIN_INTERACTION\",\n payload: {\n type: \"player-selected\",\n payload: 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 ...(state.current.player ? { target: state.current.player } : {}),\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 dset(draft, [\"current\", \"player\"], sender);\n dset(\n draft,\n [\"current\", \"plugin\"],\n draft.current.plugin || plugins[Object.keys(plugins)[0]].id\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 CHANGED
@@ -6,19 +6,18 @@
6
6
  "types"
7
7
  ],
8
8
  "name": "@player-tools/devtools-client",
9
- "version": "0.8.1",
9
+ "version": "0.8.2--canary.174.3739",
10
10
  "main": "dist/cjs/index.cjs",
11
11
  "dependencies": {
12
- "@player-tools/devtools-messenger": "0.8.1",
13
- "@player-tools/devtools-types": "0.8.1",
12
+ "@player-tools/devtools-messenger": "0.8.2--canary.174.3739",
13
+ "@player-tools/devtools-types": "0.8.2--canary.174.3739",
14
14
  "@chakra-ui/react": "2.8.2",
15
15
  "@player-ui/pubsub-plugin": "0.7.3",
16
16
  "@player-ui/react": "0.7.3",
17
17
  "@devtools-ui/plugin": "0.3.0",
18
18
  "@types/react": "^18.2.51",
19
19
  "immer": "^10.0.3",
20
- "lodash.set": "^4.3.2",
21
- "@types/lodash.set": "^4.3.9",
20
+ "dset": "^3.1.3",
22
21
  "react": "^18.2.0",
23
22
  "react-error-boundary": "^4.0.12",
24
23
  "dequal": "^2.0.2",
package/src/state/reducer.ts CHANGED
@@ -3,7 +3,7 @@ import type {
3
3
  ExtensionSupportedEvents,
4
4
  Transaction,
5
5
  } from "@player-tools/devtools-types";
6
- import set from "lodash.set";
6
+ import { dset } from "dset/merge";
7
7
  import { produce } from "immer";
8
8
 
9
9
  /** Extension state reducer */
@@ -18,15 +18,15 @@ export const reducer = (
18
18
  sender,
19
19
  payload: { plugins },
20
20
  } = transaction;
21
- set(draft, ["current", "player"], sender);
22
- set(
21
+ dset(draft, ["current", "player"], sender);
22
+ dset(
23
23
  draft,
24
24
  ["current", "plugin"],
25
25
  draft.current.plugin || plugins[Object.keys(plugins)[0]].id
26
26
  );
27
27
 
28
- set(draft, ["players", sender, "plugins"], plugins);
29
- set(draft, ["players", sender, "active"], true);
28
+ dset(draft, ["players", sender, "plugins"], plugins);
29
+ dset(draft, ["players", sender, "active"], true);
30
30
  });
31
31
  case "PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE":
32
32
  return produce(state, (draft) => {
@@ -35,7 +35,7 @@ export const reducer = (
35
35
  payload: { flow, pluginID },
36
36
  } = transaction;
37
37
 
38
- set(draft, ["players", sender, "plugins", pluginID, "flow"], flow);
38
+ dset(draft, ["players", sender, "plugins", pluginID, "flow"], flow);
39
39
  });
40
40
  case "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE":
41
41
  return produce(state, (draft) => {
@@ -43,7 +43,7 @@ export const reducer = (
43
43
  sender,
44
44
  payload: { data, pluginID },
45
45
  } = transaction;
46
- set(
46
+ dset(
47
47
  draft,
48
48
  ["players", sender, "plugins", pluginID, "flow", "data"],
49
49
  data
@@ -57,17 +57,17 @@ export const reducer = (
57
57
  return produce(state, (draft) => {
58
58
  const { sender } = transaction;
59
59
 
60
- set(draft, ["players", sender, "active"], false);
60
+ dset(draft, ["players", sender, "active"], false);
61
61
  });
62
62
  case "PLAYER_DEVTOOLS_PLAYER_SELECTED":
63
63
  return produce(state, (draft) => {
64
64
  const { playerID } = transaction.payload;
65
- set(draft, ["current", "player"], playerID);
65
+ dset(draft, ["current", "player"], playerID);
66
66
  });
67
67
  case "PLAYER_DEVTOOLS_PLUGIN_SELECTED":
68
68
  return produce(state, (draft) => {
69
69
  const { pluginID } = transaction.payload;
70
- set(draft, ["current", "plugin"], pluginID);
70
+ dset(draft, ["current", "plugin"], pluginID);
71
71
  });
72
72
  default:
73
73
  return state;