@player-tools/devtools-client 0.2.2--canary.19.409 → 0.2.2--canary.17.433

package/src/redux/index.ts

@@ -1,70 +1,8 @@
-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 './middleware';
 export * from './reducers';
-
-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;
-  }
-}
+export * from './selectors';
+export * from './state';
+export * from './store';

package/src/redux/listeners.ts

@@ -0,0 +1,8 @@
+import { Events } from "@player-tools/devtools-common";
+import { Dispatch } from "redux";
+import { EventActions } from "./actions";
+
+/** Utility method to filter known events from a supplied message and dispatch the corresponding action */
+export const dispatchEvents = (dispatch: Dispatch) => (message: any) => {
+  if (Events.isEvent(message)) dispatch(EventActions[message.type](message as any))
+}

package/src/redux/middleware.ts

@@ -0,0 +1,64 @@
+import { createListenerMiddleware, isAnyOf } from "@reduxjs/toolkit";
+import { Actions, EventActions } from "./actions";
+import { GET_DATA_BINDING_DETAILS } from "./aliases";
+import { type StoreState } from './state';
+
+/**
+ * Listener middleware that will be consumed by default when creating the devtools store.
+ * Exported such that clients can configure additional side effects.
+ */
+export const listenerMiddleware = createListenerMiddleware<StoreState>();
+
+listenerMiddleware.startListening({
+  matcher: isAnyOf(
+    EventActions['player-data-change-event'],
+    EventActions['player-log-event'],
+    EventActions['player-flow-start'],
+  ),
+  effect: (action, api) => {
+    api.dispatch(Actions['player-timeline-event'](action.payload));
+  },
+});
+
+listenerMiddleware.startListening({
+  actionCreator: EventActions['runtime-init'],
+  effect: (_, api) => {
+    api.dispatch(Actions["clear-store"]())
+  }
+})
+
+listenerMiddleware.startListening({
+  matcher: isAnyOf(
+    EventActions["player-init"],
+    EventActions["player-removed"],
+  ),
+  effect: (_, api) => {
+    api.dispatch(Actions["selected-player"]())
+  }
+});
+
+listenerMiddleware.startListening({
+  matcher: isAnyOf(
+    EventActions["player-flow-start"],
+    EventActions["player-data-change-event"],
+  ),
+  effect: (action, api) => {
+    const { players } = api.getState();
+    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/reducers.ts

@@ -1,118 +1,247 @@
-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;
+import { type ActionReducerMapBuilder, createReducer } from '@reduxjs/toolkit';
+import type { PlayersState } from './state';
+import { Actions, EventActions, type MethodThunks } from './actions';
+
+const initialState = {
+  selectedPlayerId: null,
+  activePlayers: {},
+} as PlayersState;
+
+const methodsReducer = (methods: MethodThunks) => (builder: ActionReducerMapBuilder<PlayersState>) => {
+  builder.addCase(
+    methods['player-runtime-info-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;
+      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-view-details-request'].fulfilled,
-      (state, action) => {
-        const { activePlayers, selectedPlayerId } = state;
+      activePlayers[selectedPlayerId].configState = action.payload;
+    }
+  );
 
-        if (!selectedPlayerId) {
-          return;
-        }
+  builder.addCase(
+    methods['player-view-details-request'].fulfilled,
+    (state, action) => {
+      const { activePlayers, selectedPlayerId } = state;
 
-        activePlayers[selectedPlayerId].view = action.payload?.lastViewUpdate;
-      }
-    );
-
-    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 ?? '',
-        });
+      if (!selectedPlayerId) {
+        return;
       }
-    );
 
-    builder.addCase(
-      actions['player-start-profiler-request'].fulfilled,
-      (state, action) => {
-        const { activePlayers, selectedPlayerId } = state;
-
-        if (!selectedPlayerId) return;
+      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;
+      }
 
-        activePlayers[selectedPlayerId].profilerInfo = action.payload?.data;
+      if (binding === '') {
+        activePlayers[playerID].dataState.allBindings = payload;
+        return;
       }
-    );
 
-    builder.addCase(
-      actions['player-stop-profiler-request'].fulfilled,
-      (state, action) => {
-        const { activePlayers, selectedPlayerId } = state;
+      activePlayers[playerID].dataState.selectedBinding = payload;
+    }
+  );
 
-        if (!selectedPlayerId) return;
+  builder.addCase(
+    methods['player-execute-expression'].fulfilled,
+    (state, action) => {
+      const { activePlayers, selectedPlayerId } = state;
 
-        activePlayers[selectedPlayerId].profilerInfo = action.payload?.data;
+      if (!selectedPlayerId) {
+        return;
       }
-    );
-  };
+
+      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;
+    }
+  );
+};
+
+const eventsReducer = (builder: ActionReducerMapBuilder<PlayersState>) => {
+  builder.addCase(EventActions['player-init'], (state, action) => {
+    const {
+      payload: { version, playerID },
+    } = action;
+    state.activePlayers[playerID] = {
+      timelineEvents: [],
+      dataState: {},
+      consoleState: { history: [] },
+    };
+    state.version = version;
+  });
+
+  builder.addCase(EventActions['player-removed'], (state, action) => {
+    delete state.activePlayers[action.payload.playerID];
+  });
+
+  builder.addCase(EventActions['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(EventActions['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;
+  });
+};
+
+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: MethodThunks) =>
+  createReducer<PlayersState>(initialState, (builder) => {
+    actionsReducer(builder)
+    eventsReducer(builder)
+    methodsReducer(methods)(builder)
+  });

package/src/redux/selectors.ts

@@ -0,0 +1,133 @@
+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;
+  }
+);