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

package/dist/index.legacy-esm.js

@@ -1,218 +1,313 @@
-// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/redux/index.ts
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/panel/index.tsx
+import React, { useRef } from "react";
+import { useReactPlayer } from "@player-ui/react";
+import { useEffect as useEffect2 } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 import {
-  clearStore,
-  playerFlowStartAction,
-  playerInitAction,
-  playerRemoveAction,
-  playerTimelineAction,
-  playerViewUpdateAction,
-  selectedPlayerAction
-} from "@player-tools/devtools-common";
+  Card,
+  CardBody,
+  CardHeader,
+  ChakraProvider,
+  Container,
+  Flex,
+  FormControl,
+  FormLabel,
+  Heading,
+  HStack,
+  Select,
+  Text,
+  VStack
+} from "@chakra-ui/react";
+import { ThemeProvider } from "@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
+import DevtoolsUIAssetsPlugin from "@devtools-ui/plugin";
+import { PubSubPlugin } from "@player-ui/pubsub-plugin";
+var PUBSUB_PLUGIN = new PubSubPlugin();
+var PLAYER_PLUGINS = [
+  new DevtoolsUIAssetsPlugin(),
+  PUBSUB_PLUGIN
+];
+var INITIAL_FLOW = {
+  id: "initial-flow",
+  views: [
+    {
+      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
-import { createAsyncThunk } from "@reduxjs/toolkit";
-import {
-  Runtime,
-  createLogger,
-  BACKGROUND_SOURCE
-} from "@player-tools/devtools-common";
-var logger = createLogger(BACKGROUND_SOURCE);
-var buildRPCActions = (handlers) => Runtime.RuntimeRPCTypes.reduce((acc, rpcType) => {
-  acc[rpcType] = 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
+import { Messenger } from "@player-tools/devtools-messenger";
+import { useCallback, useEffect, useMemo, useReducer } from "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
+import { dset } from "dset/merge";
+import { produce } from "immer";
+var reducer = (state, transaction) => {
+  switch (transaction.type) {
+    case "PLAYER_DEVTOOLS_PLAYER_INIT":
+      return produce(state, (draft) => {
+        const {
+          sender,
+          payload: { plugins }
+        } = transaction;
+        const { player, plugin } = draft.current;
+        if (!player && !plugin) {
+          dset(draft, ["current", "player"], sender);
+          dset(
+            draft,
+            ["current", "plugin"],
+            plugins[Object.keys(plugins)[0]].id
+          );
+        }
+        dset(draft, ["players", sender, "plugins"], plugins);
+        dset(draft, ["players", sender, "active"], true);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE":
+      return produce(state, (draft) => {
+        const {
+          sender,
+          payload: { flow, pluginID }
+        } = transaction;
+        dset(draft, ["players", sender, "plugins", pluginID, "flow"], flow);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE":
+      return produce(state, (draft) => {
+        const {
+          sender,
+          payload: { data, pluginID }
+        } = transaction;
+        dset(
+          draft,
+          ["players", sender, "plugins", pluginID, "flow", "data"],
+          data
+        );
+      });
+    case "MESSENGER_EVENT_BATCH":
+      return produce(state, (draft) => {
+        return transaction.payload.events.reduce(reducer, draft);
+      });
+    case "PLAYER_DEVTOOLS_PLAYER_STOPPED":
+      return produce(state, (draft) => {
+        const { sender } = transaction;
+        dset(draft, ["players", sender, "active"], false);
+      });
+    case "PLAYER_DEVTOOLS_PLAYER_SELECTED":
+      return produce(state, (draft) => {
+        const { playerID } = transaction.payload;
+        dset(draft, ["current", "player"], playerID);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_SELECTED":
+      return produce(state, (draft) => {
+        const { pluginID } = transaction.payload;
+        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] = useReducer(reducer, INITIAL_EXTENSION_STATE);
+  const messengerOptions = 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 = useMemo(
+    () => new 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 ?? ""
+  useEffect(() => {
+    return () => {
+      messenger.destroy();
+    };
+  }, []);
+  const selectPlayer = 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 = 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 = 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(clearStore());
-      break;
-    case "player-init":
-      store.dispatch(playerInitAction(message));
-      store.dispatch(selectedPlayerAction());
-      break;
-    case "player-removed":
-      store.dispatch(playerRemoveAction(message.playerID));
-      store.dispatch(selectedPlayerAction());
-      break;
-    case "player-flow-start":
-      store.dispatch(playerFlowStartAction(message));
-      store.dispatch(playerTimelineAction(message));
-      store.dispatch({
-        type: GET_DATA_BINDING_DETAILS,
-        payload: { playerID: message.playerID, binding: "" }
-      });
-      break;
-    case "player-log-event":
-      store.dispatch(playerTimelineAction(message));
-      break;
-    case "player-view-update-event":
-      store.dispatch(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(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
+import { dequal } from "dequal";
+var flowDiff = ({
+  curr,
+  next
+}) => {
+  const currCopy = { ...curr, data: null };
+  const nextCopy = { ...next, data: null };
+  const baseFlowIsEqual = dequal(currCopy, nextCopy);
+  if (!baseFlowIsEqual) {
+    return { change: "flow", value: next };
   }
-}
+  const currData = curr.data;
+  const nextData = next.data;
+  const dataIsEqual = 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
-import {
-  createRPCRequest,
-  Runtime as Runtime2,
-  PANEL_SOURCE
-} from "@player-tools/devtools-common";
-var buildRPCRequests = (onRequestMessage) => Runtime2.RuntimeRPCTypes.reduce((acc, rpcType) => {
-  acc[rpcType] = createRPCRequest(rpcType, PANEL_SOURCE, onRequestMessage);
-  return acc;
-}, {});
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/panel/theme.ts
+import { extendTheme } from "@chakra-ui/react";
+var config = {
+  initialColorMode: "dark",
+  useSystemColorMode: false
+};
+var theme = extendTheme({ config });
 
-// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/index.ts
-export * from "@player-tools/devtools-common";
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/panel/index.tsx
+var fallbackRender = ({
+  error
+}) => {
+  return /* @__PURE__ */ React.createElement(Container, { centerContent: true }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, null, /* @__PURE__ */ React.createElement(Heading, null, "Ops, something went wrong."))), /* @__PURE__ */ React.createElement(CardBody, null, /* @__PURE__ */ React.createElement(Text, { as: "pre" }, error.message)));
+};
+var Panel = ({
+  communicationLayer
+}) => {
+  const { state, selectPlayer, selectPlugin, handleInteraction } = useExtensionState({
+    communicationLayer
+  });
+  const { reactPlayer } = useReactPlayer({
+    plugins: PLAYER_PLUGINS
+  });
+  const dataController = useRef(null);
+  const currentFlow = useRef(null);
+  useEffect2(() => {
+    reactPlayer.player.hooks.dataController.tap("panel", (d) => {
+      dataController.current = new WeakRef(d);
+    });
+  }, [reactPlayer]);
+  useEffect2(() => {
+    PUBSUB_PLUGIN.subscribe("*", (type, payload) => {
+      handleInteraction({
+        type,
+        payload
+      });
+    });
+  }, []);
+  useEffect2(() => {
+    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__ */ React.createElement(ChakraProvider, { theme }, /* @__PURE__ */ React.createElement(ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React.createElement(ErrorBoundary, { fallbackRender }, /* @__PURE__ */ React.createElement(VStack, { w: "100vw", h: "100vh" }, state.current.player ? /* @__PURE__ */ React.createElement(Flex, { direction: "column", marginTop: "4" }, /* @__PURE__ */ React.createElement(HStack, { spacing: "4" }, /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(FormLabel, null, "Player"), /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      id: "player",
+      value: state.current.player || "",
+      onChange: (event) => selectPlayer(event.target.value)
+    },
+    Object.keys(state.players).map((playerID) => /* @__PURE__ */ React.createElement("option", { key: playerID, value: playerID }, playerID))
+  )), /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(FormLabel, null, "Plugin"), /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      id: "plugin",
+      value: state.current.plugin || "",
+      onChange: (event) => selectPlugin(event.target.value)
+    },
+    Object.keys(
+      state.players[state.current.player].plugins
+    ).map((pluginID) => /* @__PURE__ */ React.createElement("option", { key: pluginID, value: pluginID }, pluginID))
+  ))), /* @__PURE__ */ React.createElement(Container, { marginY: "6" }, /* @__PURE__ */ React.createElement(Component, null)), /* @__PURE__ */ React.createElement("details", null, /* @__PURE__ */ React.createElement("summary", null, "Debug"), /* @__PURE__ */ React.createElement("pre", null, JSON.stringify(state, null, 2)))) : /* @__PURE__ */ React.createElement(Flex, { justifyContent: "center", padding: "6" }, /* @__PURE__ */ React.createElement(Text, null, "No Player-UI instance or devtools plugin detected. Visit", " ", /* @__PURE__ */ React.createElement("a", { href: "https://player-ui.github.io/" }, "https://player-ui.github.io/"), " ", "for more info."))))));
+};
 export {
-  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
+  Panel
 };
 //# sourceMappingURL=index.mjs.map