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

package/dist/cjs/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,228 +17,320 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  GET_CONFIG_DETAILS: () => GET_CONFIG_DETAILS,
-  GET_CONSOLE_EVAL: () => GET_CONSOLE_EVAL,
-  GET_DATA_BINDING_DETAILS: () => GET_DATA_BINDING_DETAILS,
-  GET_INFO_DETAILS: () => GET_INFO_DETAILS,
-  GET_VIEW_DETAILS: () => GET_VIEW_DETAILS,
-  START_PROFILER: () => START_PROFILER,
-  STOP_PROFILER: () => STOP_PROFILER,
-  buildAliases: () => buildAliases,
-  buildPlayerReducerCallback: () => buildPlayerReducerCallback,
-  buildRPCActions: () => buildRPCActions,
-  buildRPCRequests: () => buildRPCRequests,
-  handleMessage: () => handleMessage
+  Panel: () => Panel
 });
 module.exports = __toCommonJS(src_exports);
 
-// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/redux/index.ts
-var import_devtools_common2 = require("@player-tools/devtools-common");
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/panel/index.tsx
+var import_react3 = __toESM(require("react"));
+var import_react4 = require("@player-ui/react");
+var import_react5 = require("react");
+var import_react_error_boundary = require("react-error-boundary");
+var import_react6 = require("@chakra-ui/react");
+var import_themes = require("@devtools-ds/themes");
 
-// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/redux/aliases.ts
-var GET_INFO_DETAILS = "GET_INFO_DETAILS";
-var GET_CONFIG_DETAILS = "GET_CONFIG_DETAILS";
-var GET_VIEW_DETAILS = "GET_VIEW_DETAILS";
-var GET_DATA_BINDING_DETAILS = "GET_DATA_BINDING_DETAILS";
-var GET_CONSOLE_EVAL = "GET_CONSOLE_EVAL";
-var START_PROFILER = "START_PROFILER";
-var STOP_PROFILER = "STOP_PROFILER";
-var _alias = (aliases) => () => (next) => (action) => {
-  const alias = aliases[action.type];
-  if (alias) {
-    return next(alias(action));
+// ../../../../../../../../../../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: [
+    {
+      id: "view-1",
+      type: "text",
+      value: "connecting..."
+    }
+  ],
+  navigation: {
+    BEGIN: "FLOW_1",
+    FLOW_1: {
+      startState: "VIEW_1",
+      VIEW_1: {
+        state_type: "VIEW",
+        ref: "view-1",
+        transitions: {}
+      }
+    }
   }
-  return next(action);
 };
-var buildAliases = (actions) => _alias({
-  GET_INFO_DETAILS: (action) => actions["player-runtime-info-request"](action.payload),
-  GET_CONFIG_DETAILS: (action) => actions["player-config-request"](action.payload),
-  GET_VIEW_DETAILS: (action) => actions["player-view-details-request"](action.payload),
-  GET_DATA_BINDING_DETAILS: (action) => actions["player-data-binding-details"](action.payload),
-  GET_CONSOLE_EVAL: (action) => actions["player-execute-expression"](action.payload),
-  START_PROFILER: (action) => actions["player-start-profiler-request"](action.payload),
-  STOP_PROFILER: (action) => actions["player-stop-profiler-request"](action.payload)
-});
+var INITIAL_EXTENSION_STATE = {
+  current: {
+    player: null,
+    plugin: null
+  },
+  players: {}
+};
 
-// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/redux/actions.ts
-var import_toolkit = require("@reduxjs/toolkit");
-var import_devtools_common = require("@player-tools/devtools-common");
-var logger = (0, import_devtools_common.createLogger)(import_devtools_common.BACKGROUND_SOURCE);
-var buildRPCActions = (handlers) => import_devtools_common.Runtime.RuntimeRPCTypes.reduce((acc, rpcType) => {
-  acc[rpcType] = (0, import_toolkit.createAsyncThunk)(rpcType, async (params) => {
-    logger.log(`Requesting ${rpcType}`, params);
-    const data = await handlers[rpcType].call(params);
-    logger.log(`Response from ${rpcType}`, data);
-    return data;
-  });
-  return acc;
-}, {});
+// ../../../../../../../../../../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");
 
-// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/redux/reducers.ts
-var buildPlayerReducerCallback = (actions) => (builder) => {
-  builder.addCase(
-    actions["player-runtime-info-request"].fulfilled,
-    (state, action) => {
-      const { activePlayers, selectedPlayerId } = state;
-      if (!selectedPlayerId) {
-        return;
-      }
-      const data = action.payload && Object.keys(action.payload).length > 0 ? action.payload : null;
-      activePlayers[selectedPlayerId].flowInfo = data;
-    }
-  );
-  builder.addCase(
-    actions["player-config-request"].fulfilled,
-    (state, action) => {
-      const { activePlayers, selectedPlayerId } = state;
-      if (!selectedPlayerId) {
-        return;
-      }
-      activePlayers[selectedPlayerId].configState = action.payload;
-    }
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/reducer.ts
+var import_merge = require("dset/merge");
+var import_immer = require("immer");
+var reducer = (state, transaction) => {
+  switch (transaction.type) {
+    case "PLAYER_DEVTOOLS_PLAYER_INIT":
+      return (0, import_immer.produce)(state, (draft) => {
+        const {
+          sender,
+          payload: { plugins }
+        } = transaction;
+        const { player, plugin } = draft.current;
+        if (!player && !plugin) {
+          (0, import_merge.dset)(draft, ["current", "player"], sender);
+          (0, import_merge.dset)(
+            draft,
+            ["current", "plugin"],
+            plugins[Object.keys(plugins)[0]].id
+          );
+        }
+        (0, import_merge.dset)(draft, ["players", sender, "plugins"], plugins);
+        (0, import_merge.dset)(draft, ["players", sender, "active"], true);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE":
+      return (0, import_immer.produce)(state, (draft) => {
+        const {
+          sender,
+          payload: { flow, pluginID }
+        } = transaction;
+        (0, import_merge.dset)(draft, ["players", sender, "plugins", pluginID, "flow"], flow);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE":
+      return (0, import_immer.produce)(state, (draft) => {
+        const {
+          sender,
+          payload: { data, pluginID }
+        } = transaction;
+        (0, import_merge.dset)(
+          draft,
+          ["players", sender, "plugins", pluginID, "flow", "data"],
+          data
+        );
+      });
+    case "MESSENGER_EVENT_BATCH":
+      return (0, import_immer.produce)(state, (draft) => {
+        return transaction.payload.events.reduce(reducer, draft);
+      });
+    case "PLAYER_DEVTOOLS_PLAYER_STOPPED":
+      return (0, import_immer.produce)(state, (draft) => {
+        const { sender } = transaction;
+        (0, import_merge.dset)(draft, ["players", sender, "active"], false);
+      });
+    case "PLAYER_DEVTOOLS_PLAYER_SELECTED":
+      return (0, import_immer.produce)(state, (draft) => {
+        const { playerID } = transaction.payload;
+        (0, import_merge.dset)(draft, ["current", "player"], playerID);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_SELECTED":
+      return (0, import_immer.produce)(state, (draft) => {
+        const { pluginID } = transaction.payload;
+        (0, import_merge.dset)(draft, ["current", "plugin"], pluginID);
+      });
+    default:
+      return state;
+  }
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/index.ts
+var NOOP_ID = -1;
+var useExtensionState = ({
+  communicationLayer
+}) => {
+  const [state, dispatch] = (0, import_react.useReducer)(reducer, INITIAL_EXTENSION_STATE);
+  const messengerOptions = (0, import_react.useMemo)(
+    () => ({
+      context: "devtools",
+      target: "player",
+      messageCallback: (message) => {
+        dispatch(message);
+      },
+      ...communicationLayer,
+      logger: console
+    }),
+    [dispatch, communicationLayer]
   );
-  builder.addCase(
-    actions["player-view-details-request"].fulfilled,
-    (state, action) => {
-      const { activePlayers, selectedPlayerId } = state;
-      if (!selectedPlayerId) {
-        return;
-      }
-      activePlayers[selectedPlayerId].view = action.payload?.lastViewUpdate;
-    }
+  const messenger = (0, import_react.useMemo)(
+    () => new import_devtools_messenger.Messenger(messengerOptions),
+    [messengerOptions]
   );
-  builder.addCase(
-    actions["player-data-binding-details"].fulfilled,
-    (state, action) => {
-      const {
-        meta: {
-          arg: { binding, playerID }
-        },
-        payload
-      } = action;
-      const { activePlayers } = state;
-      if (!playerID || !activePlayers[playerID]) {
-        return;
-      }
-      if (binding === "") {
-        activePlayers[playerID].dataState.allBindings = payload;
-        return;
-      }
-      activePlayers[playerID].dataState.selectedBinding = payload;
-    }
-  );
-  builder.addCase(
-    actions["player-execute-expression"].fulfilled,
-    (state, action) => {
-      const { activePlayers, selectedPlayerId } = state;
-      if (!selectedPlayerId) {
-        return;
-      }
-      activePlayers[selectedPlayerId].consoleState?.history?.push({
-        id: action.meta.requestId,
-        result: action.payload,
-        expression: action.payload?.exp ?? ""
+  (0, import_react.useEffect)(() => {
+    return () => {
+      messenger.destroy();
+    };
+  }, []);
+  const selectPlayer = (0, import_react.useCallback)(
+    (playerID) => {
+      dispatch({
+        id: NOOP_ID,
+        sender: "internal",
+        context: "devtools",
+        _messenger_: false,
+        timestamp: Date.now(),
+        type: "PLAYER_DEVTOOLS_PLAYER_SELECTED",
+        payload: {
+          playerID
+        }
       });
-    }
+    },
+    [dispatch]
   );
-  builder.addCase(
-    actions["player-start-profiler-request"].fulfilled,
-    (state, action) => {
-      const { activePlayers, selectedPlayerId } = state;
-      if (!selectedPlayerId)
-        return;
-      activePlayers[selectedPlayerId].profilerInfo = action.payload?.data;
-    }
+  const selectPlugin = (0, import_react.useCallback)(
+    (pluginID) => {
+      dispatch({
+        id: NOOP_ID,
+        sender: "internal",
+        context: "devtools",
+        _messenger_: false,
+        timestamp: Date.now(),
+        type: "PLAYER_DEVTOOLS_PLUGIN_SELECTED",
+        payload: {
+          pluginID
+        }
+      });
+    },
+    [dispatch]
   );
-  builder.addCase(
-    actions["player-stop-profiler-request"].fulfilled,
-    (state, action) => {
-      const { activePlayers, selectedPlayerId } = state;
-      if (!selectedPlayerId)
-        return;
-      activePlayers[selectedPlayerId].profilerInfo = action.payload?.data;
-    }
+  const handleInteraction = (0, import_react.useCallback)(
+    ({
+      type,
+      payload
+    }) => {
+      messenger.sendMessage({
+        type: "PLAYER_DEVTOOLS_PLUGIN_INTERACTION",
+        payload: {
+          type,
+          payload
+        }
+      });
+    },
+    [messenger]
   );
+  return { state, selectPlayer, selectPlugin, handleInteraction };
 };
 
-// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/redux/index.ts
-function handleMessage(store, message) {
-  switch (message.type) {
-    case "runtime-init":
-      store.dispatch((0, import_devtools_common2.clearStore)());
-      break;
-    case "player-init":
-      store.dispatch((0, import_devtools_common2.playerInitAction)(message));
-      store.dispatch((0, import_devtools_common2.selectedPlayerAction)());
-      break;
-    case "player-removed":
-      store.dispatch((0, import_devtools_common2.playerRemoveAction)(message.playerID));
-      store.dispatch((0, import_devtools_common2.selectedPlayerAction)());
-      break;
-    case "player-flow-start":
-      store.dispatch((0, import_devtools_common2.playerFlowStartAction)(message));
-      store.dispatch((0, import_devtools_common2.playerTimelineAction)(message));
-      store.dispatch({
-        type: GET_DATA_BINDING_DETAILS,
-        payload: { playerID: message.playerID, binding: "" }
-      });
-      break;
-    case "player-log-event":
-      store.dispatch((0, import_devtools_common2.playerTimelineAction)(message));
-      break;
-    case "player-view-update-event":
-      store.dispatch((0, import_devtools_common2.playerViewUpdateAction)(message));
-      break;
-    case "player-data-change-event": {
-      const { players } = store.getState();
-      if (players.activePlayers[message.playerID] && players.activePlayers[message.playerID].dataState.selectedBinding) {
-        store.dispatch({
-          type: GET_DATA_BINDING_DETAILS,
-          payload: message
-        });
-      }
-      store.dispatch({
-        type: GET_DATA_BINDING_DETAILS,
-        payload: { playerID: message.playerID, binding: "" }
-      });
-      store.dispatch((0, import_devtools_common2.playerTimelineAction)(message));
-      break;
-    }
-    default:
-      console.warn(`Unhandled event: ${JSON.stringify(message)}`);
-      break;
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/helpers/flowDiff.ts
+var import_dequal = require("dequal");
+var flowDiff = ({
+  curr,
+  next
+}) => {
+  const currCopy = { ...curr, data: null };
+  const nextCopy = { ...next, data: null };
+  const baseFlowIsEqual = (0, import_dequal.dequal)(currCopy, nextCopy);
+  if (!baseFlowIsEqual) {
+    return { change: "flow", value: next };
   }
-}
+  const currData = curr.data;
+  const nextData = next.data;
+  const dataIsEqual = (0, import_dequal.dequal)(currData, nextData);
+  if (!dataIsEqual) {
+    return { change: "data", value: nextData };
+  }
+  return null;
+};
 
-// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/rpc/index.ts
-var import_devtools_common3 = require("@player-tools/devtools-common");
-var buildRPCRequests = (onRequestMessage) => import_devtools_common3.Runtime.RuntimeRPCTypes.reduce((acc, rpcType) => {
-  acc[rpcType] = (0, import_devtools_common3.createRPCRequest)(rpcType, import_devtools_common3.PANEL_SOURCE, onRequestMessage);
-  return acc;
-}, {});
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/panel/theme.ts
+var import_react2 = require("@chakra-ui/react");
+var config = {
+  initialColorMode: "dark",
+  useSystemColorMode: false
+};
+var theme = (0, import_react2.extendTheme)({ config });
 
-// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/index.ts
-__reExport(src_exports, require("@player-tools/devtools-common"), module.exports);
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/panel/index.tsx
+var fallbackRender = ({
+  error
+}) => {
+  return /* @__PURE__ */ import_react3.default.createElement(import_react6.Container, { centerContent: true }, /* @__PURE__ */ import_react3.default.createElement(import_react6.Card, null, /* @__PURE__ */ import_react3.default.createElement(import_react6.CardHeader, null, /* @__PURE__ */ import_react3.default.createElement(import_react6.Heading, null, "Ops, something went wrong."))), /* @__PURE__ */ import_react3.default.createElement(import_react6.CardBody, null, /* @__PURE__ */ import_react3.default.createElement(import_react6.Text, { as: "pre" }, error.message)));
+};
+var Panel = ({
+  communicationLayer
+}) => {
+  const { state, selectPlayer, selectPlugin, handleInteraction } = useExtensionState({
+    communicationLayer
+  });
+  const { reactPlayer } = (0, import_react4.useReactPlayer)({
+    plugins: PLAYER_PLUGINS
+  });
+  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) => {
+      dataController.current = new WeakRef(d);
+    });
+  }, [reactPlayer]);
+  (0, import_react5.useEffect)(() => {
+    PUBSUB_PLUGIN.subscribe("*", (type, payload) => {
+      handleInteraction({
+        type,
+        payload
+      });
+    });
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    const { player, plugin } = state.current;
+    const flow = player && plugin ? state.players[player]?.plugins?.[plugin]?.flow || INITIAL_FLOW : INITIAL_FLOW;
+    if (!currentFlow.current) {
+      currentFlow.current = flow;
+      reactPlayer.start(flow);
+      return;
+    }
+    const diff = flowDiff({
+      curr: currentFlow.current,
+      next: flow
+    });
+    if (diff) {
+      const { change, value } = diff;
+      if (change === "flow") {
+        currentFlow.current = value;
+        reactPlayer.start(value);
+      } else if (change === "data") {
+        dataController.current ? dataController.current.deref()?.set(value) : reactPlayer.start(flow);
+      }
+    }
+  }, [reactPlayer, state]);
+  const Component = reactPlayer.Component;
+  return /* @__PURE__ */ import_react3.default.createElement(import_react6.ChakraProvider, { theme }, /* @__PURE__ */ import_react3.default.createElement(import_themes.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ import_react3.default.createElement(import_react_error_boundary.ErrorBoundary, { fallbackRender }, /* @__PURE__ */ import_react3.default.createElement(import_react6.VStack, { w: "100vw", h: "100vh" }, state.current.player ? /* @__PURE__ */ import_react3.default.createElement(import_react6.Flex, { direction: "column", marginTop: "4" }, /* @__PURE__ */ import_react3.default.createElement(import_react6.HStack, { spacing: "4" }, /* @__PURE__ */ import_react3.default.createElement(import_react6.FormControl, null, /* @__PURE__ */ import_react3.default.createElement(import_react6.FormLabel, null, "Player"), /* @__PURE__ */ import_react3.default.createElement(
+    import_react6.Select,
+    {
+      id: "player",
+      value: state.current.player || "",
+      onChange: (event) => selectPlayer(event.target.value)
+    },
+    Object.keys(state.players).map((playerID) => /* @__PURE__ */ import_react3.default.createElement("option", { key: playerID, value: playerID }, playerID))
+  )), /* @__PURE__ */ import_react3.default.createElement(import_react6.FormControl, null, /* @__PURE__ */ import_react3.default.createElement(import_react6.FormLabel, null, "Plugin"), /* @__PURE__ */ import_react3.default.createElement(
+    import_react6.Select,
+    {
+      id: "plugin",
+      value: state.current.plugin || "",
+      onChange: (event) => selectPlugin(event.target.value)
+    },
+    Object.keys(
+      state.players[state.current.player].plugins
+    ).map((pluginID) => /* @__PURE__ */ import_react3.default.createElement("option", { key: pluginID, value: pluginID }, pluginID))
+  ))), /* @__PURE__ */ import_react3.default.createElement(import_react6.Container, { marginY: "6" }, /* @__PURE__ */ import_react3.default.createElement(Component, null)), /* @__PURE__ */ import_react3.default.createElement("details", null, /* @__PURE__ */ import_react3.default.createElement("summary", null, "Debug"), /* @__PURE__ */ import_react3.default.createElement("pre", null, JSON.stringify(state, null, 2)))) : /* @__PURE__ */ import_react3.default.createElement(import_react6.Flex, { justifyContent: "center", padding: "6" }, /* @__PURE__ */ import_react3.default.createElement(import_react6.Text, null, "No Player-UI instance or devtools plugin detected. Visit", " ", /* @__PURE__ */ import_react3.default.createElement("a", { href: "https://player-ui.github.io/" }, "https://player-ui.github.io/"), " ", "for more info."))))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  GET_CONFIG_DETAILS,
-  GET_CONSOLE_EVAL,
-  GET_DATA_BINDING_DETAILS,
-  GET_INFO_DETAILS,
-  GET_VIEW_DETAILS,
-  START_PROFILER,
-  STOP_PROFILER,
-  buildAliases,
-  buildPlayerReducerCallback,
-  buildRPCActions,
-  buildRPCRequests,
-  handleMessage,
-  ...require("@player-tools/devtools-common")
+  Panel
 });
 //# sourceMappingURL=index.cjs.map

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/redux/index.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/redux/aliases.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/redux/actions.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/redux/reducers.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/rpc/index.ts"],"sourcesContent":["export * from \"./redux\";\nexport * from \"./rpc\";\nexport * from \"@player-tools/devtools-common\";\n","import {\n  type Message,\n  clearStore,\n  playerFlowStartAction,\n  playerInitAction,\n  playerRemoveAction,\n  playerTimelineAction,\n  playerViewUpdateAction,\n  selectedPlayerAction,\n} from \"@player-tools/devtools-common\";\nimport type { Store } from \"redux\";\nimport { GET_DATA_BINDING_DETAILS } from \"./aliases\";\n\nexport * from \"./actions\";\nexport * from \"./aliases\";\nexport * from \"./reducers\";\n\nexport function handleMessage(store: Store, message: Message) {\n  switch (message.type) {\n    case \"runtime-init\":\n      store.dispatch(clearStore());\n      break;\n    case \"player-init\":\n      store.dispatch(playerInitAction(message));\n      store.dispatch(selectedPlayerAction());\n      break;\n    case \"player-removed\":\n      store.dispatch(playerRemoveAction(message.playerID));\n      store.dispatch(selectedPlayerAction());\n      break;\n    case \"player-flow-start\":\n      store.dispatch(playerFlowStartAction(message));\n      store.dispatch(playerTimelineAction(message));\n      store.dispatch({\n        type: GET_DATA_BINDING_DETAILS,\n        payload: { playerID: message.playerID, binding: \"\" },\n      });\n      break;\n    case \"player-log-event\":\n      store.dispatch(playerTimelineAction(message));\n      break;\n    case \"player-view-update-event\":\n      store.dispatch(playerViewUpdateAction(message));\n      break;\n    case \"player-data-change-event\": {\n      const { players } = store.getState();\n\n      if (\n        players.activePlayers[message.playerID] &&\n        players.activePlayers[message.playerID].dataState.selectedBinding\n      ) {\n        store.dispatch({\n          type: GET_DATA_BINDING_DETAILS,\n          payload: message,\n        });\n      }\n\n      store.dispatch({\n        type: GET_DATA_BINDING_DETAILS,\n        payload: { playerID: message.playerID, binding: \"\" },\n      });\n      store.dispatch(playerTimelineAction(message));\n      break;\n    }\n\n    default:\n      console.warn(`Unhandled event: ${JSON.stringify(message)}`);\n      break;\n  }\n}\n","import type {\n  AliasAction,\n  ConfigAction,\n  DataBindingAction,\n  ExpressionAction,\n  StartProfilerAction,\n  StopProfilerAction,\n} from \"@player-tools/devtools-common\";\nimport type { AsyncRPCActions } from \"./actions\";\n\nexport const GET_INFO_DETAILS = \"GET_INFO_DETAILS\";\nexport const GET_CONFIG_DETAILS = \"GET_CONFIG_DETAILS\";\nexport const GET_VIEW_DETAILS = \"GET_VIEW_DETAILS\";\nexport const GET_DATA_BINDING_DETAILS = \"GET_DATA_BINDING_DETAILS\";\nexport const GET_CONSOLE_EVAL = \"GET_CONSOLE_EVAL\";\nexport const START_PROFILER = \"START_PROFILER\";\nexport const STOP_PROFILER = \"STOP_PROFILER\";\n\nconst _alias = (aliases: any) => () => (next: any) => (action: any) => {\n  const alias = aliases[action.type];\n\n  if (alias) {\n    return next(alias(action));\n  }\n\n  return next(action);\n};\n\nexport const buildAliases = (actions: AsyncRPCActions) =>\n  _alias({\n    GET_INFO_DETAILS: (action: AliasAction) =>\n      actions[\"player-runtime-info-request\"](action.payload),\n    GET_CONFIG_DETAILS: (action: ConfigAction) =>\n      actions[\"player-config-request\"](action.payload),\n    GET_VIEW_DETAILS: (action: AliasAction) =>\n      actions[\"player-view-details-request\"](action.payload),\n    GET_DATA_BINDING_DETAILS: (action: DataBindingAction) =>\n      actions[\"player-data-binding-details\"](action.payload),\n    GET_CONSOLE_EVAL: (action: ExpressionAction) =>\n      actions[\"player-execute-expression\"](action.payload),\n    START_PROFILER: (action: StartProfilerAction) =>\n      actions[\"player-start-profiler-request\"](action.payload),\n    STOP_PROFILER: (action: StopProfilerAction) =>\n      actions[\"player-stop-profiler-request\"](action.payload),\n  });\n","import { type AsyncThunk, createAsyncThunk } from \"@reduxjs/toolkit\";\nimport {\n  Runtime,\n  createLogger,\n  BACKGROUND_SOURCE,\n} from \"@player-tools/devtools-common\";\nimport type { RuntimeRPCRequestHandlers } from \"../rpc\";\n\nconst logger = createLogger(BACKGROUND_SOURCE);\n\nexport type AsyncRPCActions = {\n  [key in Runtime.RuntimeRPCTypes]: AsyncThunk<\n    Extract<Runtime.RuntimeRPC, { type: key }>[\"result\"],\n    Extract<Runtime.RuntimeRPC, { type: key }>[\"params\"],\n    any\n  >;\n};\n\nexport const buildRPCActions = (\n  handlers: RuntimeRPCRequestHandlers\n): AsyncRPCActions =>\n  Runtime.RuntimeRPCTypes.reduce((acc, rpcType) => {\n    acc[rpcType] = createAsyncThunk<\n      Extract<Runtime.RuntimeRPC, { type: typeof rpcType }>[\"result\"],\n      Extract<Runtime.RuntimeRPC, { type: typeof rpcType }>[\"params\"]\n    >(rpcType, async (params) => {\n      logger.log(`Requesting ${rpcType}`, params);\n      const data = (await handlers[rpcType].call(params)) as Extract<\n        Runtime.RuntimeRPC,\n        { type: typeof rpcType }\n      >[\"result\"];\n      logger.log(`Response from ${rpcType}`, data);\n      return data;\n    }) as any;\n    return acc;\n  }, {} as AsyncRPCActions);\n","import type { ActionReducerMapBuilder } from \"@reduxjs/toolkit\";\nimport type { PlayersState } from \"@player-tools/devtools-common\";\nimport type { AsyncRPCActions } from \"./actions\";\n\n/**\n * Callback function that adds cases for async actions for the player.\n * @param playerReducerCallback\n * @returns\n */\nexport const buildPlayerReducerCallback =\n  (actions: AsyncRPCActions) =>\n  (builder: ActionReducerMapBuilder<PlayersState>) => {\n    builder.addCase(\n      actions[\"player-runtime-info-request\"].fulfilled,\n      (state, action) => {\n        const { activePlayers, selectedPlayerId } = state;\n\n        if (!selectedPlayerId) {\n          return;\n        }\n\n        const data =\n          action.payload && Object.keys(action.payload).length > 0\n            ? action.payload\n            : null;\n        activePlayers[selectedPlayerId].flowInfo = data;\n      }\n    );\n\n    builder.addCase(\n      actions[\"player-config-request\"].fulfilled,\n      (state, action) => {\n        const { activePlayers, selectedPlayerId } = state;\n\n        if (!selectedPlayerId) {\n          return;\n        }\n\n        activePlayers[selectedPlayerId].configState = action.payload;\n      }\n    );\n\n    builder.addCase(\n      actions[\"player-view-details-request\"].fulfilled,\n      (state, action) => {\n        const { activePlayers, selectedPlayerId } = state;\n\n        if (!selectedPlayerId) {\n          return;\n        }\n\n        activePlayers[selectedPlayerId].view = action.payload?.lastViewUpdate;\n      }\n    );\n\n    builder.addCase(\n      actions[\"player-data-binding-details\"].fulfilled,\n      (state, action) => {\n        const {\n          meta: {\n            arg: { binding, playerID },\n          },\n          payload,\n        } = action;\n        const { activePlayers } = state;\n\n        if (!playerID || !activePlayers[playerID]) {\n          return;\n        }\n\n        if (binding === \"\") {\n          activePlayers[playerID].dataState.allBindings = payload;\n          return;\n        }\n\n        activePlayers[playerID].dataState.selectedBinding = payload;\n      }\n    );\n\n    builder.addCase(\n      actions[\"player-execute-expression\"].fulfilled,\n      (state, action) => {\n        const { activePlayers, selectedPlayerId } = state;\n\n        if (!selectedPlayerId) {\n          return;\n        }\n\n        activePlayers[selectedPlayerId].consoleState?.history?.push({\n          id: action.meta.requestId,\n          result: action.payload,\n          expression: action.payload?.exp ?? \"\",\n        });\n      }\n    );\n\n    builder.addCase(\n      actions[\"player-start-profiler-request\"].fulfilled,\n      (state, action) => {\n        const { activePlayers, selectedPlayerId } = state;\n\n        if (!selectedPlayerId) return;\n\n        activePlayers[selectedPlayerId].profilerInfo = action.payload?.data;\n      }\n    );\n\n    builder.addCase(\n      actions[\"player-stop-profiler-request\"].fulfilled,\n      (state, action) => {\n        const { activePlayers, selectedPlayerId } = state;\n\n        if (!selectedPlayerId) return;\n\n        activePlayers[selectedPlayerId].profilerInfo = action.payload?.data;\n      }\n    );\n  };\n","import {\n  type RPCRequestMessageEvent,\n  type RPCRequestHandler,\n  createRPCRequest,\n  Runtime,\n  PANEL_SOURCE,\n} from \"@player-tools/devtools-common\";\n\nexport type RuntimeRPCRequestHandlers = {\n  [key in Runtime.RuntimeRPCTypes]: RPCRequestHandler<any>;\n};\n\nexport const buildRPCRequests = (\n  onRequestMessage: (\n    message: RPCRequestMessageEvent<Runtime.RuntimeRPC>\n  ) => void\n): RuntimeRPCRequestHandlers =>\n  Runtime.RuntimeRPCTypes.reduce((acc, rpcType) => {\n    acc[rpcType] = createRPCRequest(rpcType, PANEL_SOURCE, onRequestMessage);\n    return acc;\n  }, {} as RuntimeRPCRequestHandlers);\n"],"mappings":"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","names":["import_devtools_common","import_devtools_common"]}
+{"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"]}