@player-tools/devtools-client 0.2.2--canary.17.363 → 0.3.0-next.0

package/src/redux/index.ts

@@ -1,7 +1,70 @@
+import {
+  type Message,
+  clearStore,
+  playerFlowStartAction,
+  playerInitAction,
+  playerRemoveAction,
+  playerTimelineAction,
+  playerViewUpdateAction,
+  selectedPlayerAction,
+} from '@player-tools/devtools-common';
+import type { Store } from 'redux';
+import { GET_DATA_BINDING_DETAILS } from './aliases';
+
 export * from './actions';
 export * from './aliases';
-export * from './listeners';
 export * from './reducers';
-export * from './selectors';
-export * from './state';
-export * from './store';
+
+export function handleMessage(store: Store, message: 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;
+  }
+}

package/src/redux/reducers.ts

@@ -1,248 +1,118 @@
-import { ActionReducerMapBuilder, createReducer } from '@reduxjs/toolkit';
-import type { PlayersState } from './state';
-import { Actions, Events, Methods } from './actions';
-
-const initialState = {
-  selectedPlayerId: null,
-  activePlayers: {},
-} as PlayersState;
-
-// TODO: It'd be nice if methodThunks didn't have to be passed in - but it is kinda client dependent
-export const methodsReducer = (methods: Methods.MethodThunks) => (builder: ActionReducerMapBuilder<PlayersState>) => {
-  builder.addCase(
-    methods['player-runtime-info-request'].fulfilled,
-    (state, action) => {
-      const { activePlayers, selectedPlayerId } = state;
-
-      if (!selectedPlayerId) {
-        return;
+import type { ActionReducerMapBuilder } from '@reduxjs/toolkit';
+import type { PlayersState } from '@player-tools/devtools-common';
+import type { AsyncRPCActions } from './actions';
+
+/**
+ * Callback function that adds cases for async actions for the player.
+ * @param playerReducerCallback
+ * @returns
+ */
+export const buildPlayerReducerCallback =
+  (actions: AsyncRPCActions) =>
+  (builder: ActionReducerMapBuilder<PlayersState>) => {
+    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;
       }
+    );
 
-      const data =
-        action.payload && Object.keys(action.payload).length > 0
-          ? action.payload
-          : null;
-      activePlayers[selectedPlayerId].flowInfo = data;
-    }
-  );
-
-  builder.addCase(
-    methods['player-config-request'].fulfilled,
-    (state, action) => {
-      const { activePlayers, selectedPlayerId } = state;
-
-      if (!selectedPlayerId) {
-        return;
+    builder.addCase(
+      actions['player-config-request'].fulfilled,
+      (state, action) => {
+        const { activePlayers, selectedPlayerId } = state;
+
+        if (!selectedPlayerId) {
+          return;
+        }
+
+        activePlayers[selectedPlayerId].configState = action.payload;
       }
+    );
 
-      activePlayers[selectedPlayerId].configState = action.payload;
-    }
-  );
+    builder.addCase(
+      actions['player-view-details-request'].fulfilled,
+      (state, action) => {
+        const { activePlayers, selectedPlayerId } = state;
 
-  builder.addCase(
-    methods['player-view-details-request'].fulfilled,
-    (state, action) => {
-      const { activePlayers, selectedPlayerId } = state;
+        if (!selectedPlayerId) {
+          return;
+        }
 
-      if (!selectedPlayerId) {
-        return;
+        activePlayers[selectedPlayerId].view = action.payload?.lastViewUpdate;
       }
-
-      activePlayers[selectedPlayerId].view = action.payload?.lastViewUpdate;
-    }
-  );
-
-  builder.addCase(
-    methods['player-data-binding-details'].fulfilled,
-    (state, action) => {
-      const {
-        meta: {
-          arg: { params: { binding, playerID } },
-        },
-        payload,
-      } = action;
-      const { activePlayers } = state;
-
-      if (!playerID || !activePlayers[playerID]) {
-        return;
+    );
+
+    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;
       }
-
-      if (binding === '') {
-        activePlayers[playerID].dataState.allBindings = payload;
-        return;
+    );
+
+    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 ?? '',
+        });
       }
+    );
 
-      activePlayers[playerID].dataState.selectedBinding = payload;
-    }
-  );
+    builder.addCase(
+      actions['player-start-profiler-request'].fulfilled,
+      (state, action) => {
+        const { activePlayers, selectedPlayerId } = state;
 
-  builder.addCase(
-    methods['player-execute-expression'].fulfilled,
-    (state, action) => {
-      const { activePlayers, selectedPlayerId } = state;
+        if (!selectedPlayerId) return;
 
-      if (!selectedPlayerId) {
-        return;
+        activePlayers[selectedPlayerId].profilerInfo = action.payload?.data;
       }
+    );
 
-      activePlayers[selectedPlayerId].consoleState?.history?.push({
-        id: action.meta.requestId,
-        result: action.payload,
-        expression: action.payload?.exp ?? '',
-      });
-    }
-  );
-
-  builder.addCase(
-    methods['player-start-profiler-request'].fulfilled,
-    (state, action) => {
-      const { activePlayers, selectedPlayerId } = state;
-
-      if (!selectedPlayerId) return;
-
-      activePlayers[selectedPlayerId].profilerInfo = action.payload?.data;
-    }
-  );
-
-  builder.addCase(
-    methods['player-stop-profiler-request'].fulfilled,
-    (state, action) => {
-      const { activePlayers, selectedPlayerId } = state;
-
-      if (!selectedPlayerId) return;
-
-      activePlayers[selectedPlayerId].profilerInfo = action.payload?.data;
-    }
-  );
-};
-
-export const eventsReducer = (builder: ActionReducerMapBuilder<PlayersState>) => {
-  builder.addCase(Events.actions['player-init'], (state, action) => {
-    const {
-      payload: { version, playerID },
-    } = action;
-    state.activePlayers[playerID] = {
-      timelineEvents: [],
-      dataState: {},
-      consoleState: { history: [] },
-    };
-    state.version = version;
-  });
-
-  builder.addCase(Events.actions['player-removed'], (state, action) => {
-    delete state.activePlayers[action.payload.playerID];
-  });
-
-  builder.addCase(Events.actions['player-flow-start'], (state, action) => {
-    const {
-      payload: { flow, playerID },
-    } = action;
-
-    if (!state.activePlayers[playerID]) {
-      state.activePlayers[playerID] = {
-        flowInfo: { currentFlow: flow },
-        timelineEvents: [],
-        dataState: {},
-        consoleState: { history: [] },
-      };
-      state.selectedPlayerId = playerID;
-      return;
-    }
-
-    state.activePlayers[playerID].flowInfo = {
-      ...state.activePlayers[playerID].flowInfo,
-      currentFlow: flow,
-    };
-  });
-
-  builder.addCase(Events.actions['player-view-update-event'], (state, action) => {
-    const {
-      payload: { playerID, update },
-    } = action;
-
-    if (!state.activePlayers[playerID]) {
-      state.activePlayers[playerID] = {
-        view: update,
-        timelineEvents: [],
-        dataState: {},
-        consoleState: { history: [] },
-      };
-      state.selectedPlayerId = playerID;
-      return;
-    }
-
-    state.activePlayers[playerID].view = update;
-  });
-};
-
-export const actionsReducer = (builder: ActionReducerMapBuilder<PlayersState>) => {
-  builder.addCase(Actions['selected-player'], (state, action) => {
-    if (action.payload) {
-      state.selectedPlayerId = action.payload;
-      return;
-    }
-
-    state.selectedPlayerId = Object.keys(state.activePlayers)[0] || null;
-  });
-
-  builder.addCase(Actions['player-timeline-event'], (state, action) => {
-    const {
-      payload: { playerID },
-    } = action;
-
-    if (!state.activePlayers[playerID]) {
-      state.activePlayers[playerID] = {
-        timelineEvents: [action.payload],
-        dataState: {},
-        consoleState: { history: [] },
-      };
-      state.selectedPlayerId = playerID;
-      return;
-    }
-
-    state.activePlayers[playerID].timelineEvents.push(action.payload);
-  });
-
-  builder.addCase(Actions['clear-selected-data-details'], (state) => {
-    const { activePlayers, selectedPlayerId } = state;
-
-    if (!selectedPlayerId || !activePlayers[selectedPlayerId]) {
-      return;
-    }
-
-    activePlayers[selectedPlayerId].dataState.selectedBinding = undefined;
-  });
-
-  builder.addCase(Actions['clear-console'], (state) => {
-    const { activePlayers, selectedPlayerId } = state;
-
-    if (!selectedPlayerId) {
-      return;
-    }
-
-    activePlayers[selectedPlayerId].consoleState = {
-      history: [],
-    };
-  });
-
-  builder.addCase(Actions['clear-logs'], (state) => {
-    const { activePlayers, selectedPlayerId } = state;
-
-    if (!selectedPlayerId) {
-      return;
-    }
-
-    activePlayers[selectedPlayerId].timelineEvents = [];
-  });
-
-  builder.addCase(Actions['clear-store'], () => {
-    return initialState;
-  });
-};
-
-export const playersReducer = (methods: Methods.MethodThunks) =>
-  createReducer<PlayersState>(initialState, (builder) => {
-    actionsReducer(builder)
-    eventsReducer(builder)
-    methodsReducer(methods)(builder)
-  });
+    builder.addCase(
+      actions['player-stop-profiler-request'].fulfilled,
+      (state, action) => {
+        const { activePlayers, selectedPlayerId } = state;
+
+        if (!selectedPlayerId) return;
+
+        activePlayers[selectedPlayerId].profilerInfo = action.payload?.data;
+      }
+    );
+  };

package/src/rpc/index.ts

@@ -0,0 +1,21 @@
+import {
+  type RPCRequestMessageEvent,
+  type RPCRequestHandler,
+  createRPCRequest,
+  Runtime,
+  PANEL_SOURCE,
+} from '@player-tools/devtools-common';
+
+export type RuntimeRPCRequestHandlers = {
+  [key in Runtime.RuntimeRPCTypes]: RPCRequestHandler<any>;
+};
+
+export const buildRPCRequests = (
+  onRequestMessage: (
+    message: RPCRequestMessageEvent<Runtime.RuntimeRPC>
+  ) => void
+): RuntimeRPCRequestHandlers =>
+  Runtime.RuntimeRPCTypes.reduce((acc, rpcType) => {
+    acc[rpcType] = createRPCRequest(rpcType, PANEL_SOURCE, onRequestMessage);
+    return acc;
+  }, {} as RuntimeRPCRequestHandlers);

package/src/redux/listeners.ts

@@ -1,10 +0,0 @@
-import { Events, Message } from "@player-tools/devtools-common";
-import { Events as EventActions } from "./actions";
-
-export function handleMessage(message: Message) {
-  // propagate message to default event handlers
-  const { type } = message;
-  if (type in Events.EventTypes) {
-    EventActions.actions[type as Events.EventTypes](message as any)
-  }
-}

package/src/redux/middleware.ts

@@ -1,63 +0,0 @@
-import { StoreState } from "@player-tools/devtools-client";
-import { createListenerMiddleware, isAnyOf } from "@reduxjs/toolkit";
-import { Actions, Events } from "./actions";
-import { GET_DATA_BINDING_DETAILS } from "./aliases";
-
-export const listenerMiddleware = createListenerMiddleware();
-
-listenerMiddleware.startListening({
-  matcher: isAnyOf(
-    Events.actions['player-data-change-event'],
-    Events.actions['player-log-event'],
-    Events.actions['player-flow-start'],
-    // TODO: I don't actually think this _was_ included
-    Events.actions['player-view-update-event']
-  ),
-  effect: (action, api) => {
-    api.dispatch(Actions['player-timeline-event'](action.payload));
-  },
-});
-
-listenerMiddleware.startListening({
-  actionCreator: Events.actions['runtime-init'],
-  effect: (_, api) => {
-    api.dispatch(Actions["clear-store"]())
-  }
-})
-
-listenerMiddleware.startListening({
-  matcher: isAnyOf(
-    Events.actions["player-init"],
-    Events.actions["player-removed"],
-  ),
-  effect: (_, api) => {
-    api.dispatch(Actions["selected-player"]())
-  }
-});
-
-listenerMiddleware.startListening({
-  matcher: isAnyOf(
-    Events.actions["player-flow-start"],
-    Events.actions["player-data-change-event"],
-  ),
-  effect: (action, api) => {
-    // TODO: Just appropriately type the middleware
-    const { players } = api.getState() as StoreState;
-    const { playerID } = action.payload;
-
-    if (
-      players.activePlayers[playerID] &&
-      players.activePlayers[playerID].dataState.selectedBinding
-    ) {
-      api.dispatch({
-        type: GET_DATA_BINDING_DETAILS,
-        payload: { playerID, binding: players.activePlayers[playerID].dataState.selectedBinding },
-      });
-    }
-
-    api.dispatch({
-      type: GET_DATA_BINDING_DETAILS,
-      payload: { playerID, binding: '' },
-    })
-  }
-})

package/src/redux/selectors.ts

@@ -1,133 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import type { StoreState, PlayersState } from './state';
-
-/**
- * Selects the player state
- * @param state
- * @returns
- */
-const selectPlayers = (state: StoreState) => {
-  return state.players;
-};
-
-/**
- * Selects all the active players.
- */
-const selectActivePlayers = createSelector(
-  selectPlayers,
-  (players: PlayersState) => players.activePlayers
-);
-
-export const selectPlayerVersion = createSelector(
-  selectPlayers,
-  (players: PlayersState) => players.version
-);
-
-export const selectPlayerIds = createSelector(
-  selectActivePlayers,
-  (activePlayers) => Object.keys(activePlayers) || []
-);
-
-/**
- * Selects the selected/currently active player Id.
- */
-export const selectSelectedPlayerId = createSelector(
-  selectPlayers,
-  (players: PlayersState) => players.selectedPlayerId
-);
-
-export const selectCurrentPlayer = createSelector(
-  selectActivePlayers,
-  selectSelectedPlayerId,
-  (activePlayers, selectedPlayerId) => {
-    if (!selectedPlayerId) {
-      return null;
-    }
-
-    return activePlayers[selectedPlayerId];
-  }
-);
-
-export const selectConfig = createSelector(
-  selectCurrentPlayer,
-  (currentPlayer) => {
-    return currentPlayer?.configState ?? null;
-  }
-);
-
-const selectData = createSelector(selectCurrentPlayer, (currentPlayer) => {
-  return currentPlayer?.dataState;
-});
-
-export const selectFlowInfo = createSelector(
-  selectCurrentPlayer,
-  (currentPlayer) => {
-    if (!currentPlayer) {
-      return null;
-    }
-
-    return currentPlayer?.flowInfo;
-  }
-);
-
-export const selectCurrentFlow = createSelector(
-  selectFlowInfo,
-  (flowInfo) => {
-    return flowInfo?.currentFlow;
-  }
-);
-
-export const selectCurrentTopic = createSelector(
-  selectCurrentFlow,
-  (currentFlow) => {
-    return currentFlow?.topic;
-  }
-);
-
-export const selectEvents = createSelector(
-  selectCurrentPlayer,
-  (currentPlayer) => {
-    if (!currentPlayer) {
-      return [];
-    }
-
-    return currentPlayer?.timelineEvents;
-  }
-);
-
-export const selectView = createSelector(
-  selectCurrentPlayer,
-  (currentPlayer) => {
-    if (!currentPlayer) {
-      return null;
-    }
-
-    return currentPlayer?.view;
-  }
-);
-
-export const selectAllBindings = createSelector(selectData, (data) => {
-  return data?.allBindings;
-});
-
-export const selectSelectedBinding = createSelector(selectData, (data) => {
-  return data?.selectedBinding;
-});
-
-export const selectConsole = createSelector(
-  selectCurrentPlayer,
-  (currentPlayer) => {
-    if (!currentPlayer) {
-      return { history: [] };
-    }
-
-    return currentPlayer.consoleState;
-  }
-);
-
-export const selectProfiler = createSelector(
-  selectCurrentPlayer,
-  (currentPlayer) => {
-    return currentPlayer?.profilerInfo;
-  }
-);