@player-tools/devtools-client 0.2.1--canary.11.139

package/README.md

@@ -0,0 +1,3 @@
+# devtools-client
+
+Package responsible for providing the common constructs (TODO: maybe even including redux) responsible for managing state and consuming events and RPCs.

package/dist/index.cjs.js

@@ -0,0 +1,197 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var devtoolsCommon = require('@player-tools/devtools-common');
+var toolkit = require('@reduxjs/toolkit');
+
+const GET_INFO_DETAILS = "GET_INFO_DETAILS";
+const GET_CONFIG_DETAILS = "GET_CONFIG_DETAILS";
+const GET_VIEW_DETAILS = "GET_VIEW_DETAILS";
+const GET_DATA_BINDING_DETAILS = "GET_DATA_BINDING_DETAILS";
+const GET_CONSOLE_EVAL = "GET_CONSOLE_EVAL";
+const START_PROFILER = "START_PROFILER";
+const STOP_PROFILER = "STOP_PROFILER";
+const alias = (aliases) => () => (next) => (action) => {
+  const alias2 = aliases[action.type];
+  if (alias2) {
+    return next(alias2(action));
+  }
+  return next(action);
+};
+const 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 __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const logger = devtoolsCommon.createLogger(devtoolsCommon.BACKGROUND_SOURCE);
+const buildRPCActions = (handlers) => devtoolsCommon.Runtime.RuntimeRPCTypes.reduce((acc, rpcType) => (acc[rpcType] = toolkit.createAsyncThunk(rpcType, (params) => __async(undefined, null, function* () {
+  logger.log(`Requesting ${rpcType}`, params);
+  const data = yield handlers[rpcType].call(params);
+  logger.log(`Response from ${rpcType}`, data);
+  return data;
+})), acc), {});
+
+const 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;
+  });
+  builder.addCase(actions["player-view-details-request"].fulfilled, (state, action) => {
+    var _a;
+    const { activePlayers, selectedPlayerId } = state;
+    if (!selectedPlayerId) {
+      return;
+    }
+    activePlayers[selectedPlayerId].view = (_a = action.payload) == null ? void 0 : _a.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) => {
+    var _a, _b, _c, _d;
+    const { activePlayers, selectedPlayerId } = state;
+    if (!selectedPlayerId) {
+      return;
+    }
+    (_d = (_a = activePlayers[selectedPlayerId].consoleState) == null ? void 0 : _a.history) == null ? void 0 : _d.push({
+      id: action.meta.requestId,
+      result: action.payload,
+      expression: (_c = (_b = action.payload) == null ? void 0 : _b.exp) != null ? _c : ""
+    });
+  });
+  builder.addCase(actions["player-start-profiler-request"].fulfilled, (state, action) => {
+    var _a;
+    const { activePlayers, selectedPlayerId } = state;
+    if (!selectedPlayerId)
+      return;
+    activePlayers[selectedPlayerId].profilerInfo = (_a = action.payload) == null ? void 0 : _a.data;
+  });
+  builder.addCase(actions["player-stop-profiler-request"].fulfilled, (state, action) => {
+    var _a;
+    const { activePlayers, selectedPlayerId } = state;
+    if (!selectedPlayerId)
+      return;
+    activePlayers[selectedPlayerId].profilerInfo = (_a = action.payload) == null ? void 0 : _a.data;
+  });
+};
+
+function handleMessage(store, message) {
+  switch (message.type) {
+    case "runtime-init":
+      store.dispatch(devtoolsCommon.clearStore());
+      break;
+    case "player-init":
+      store.dispatch(devtoolsCommon.playerInitAction(message));
+      store.dispatch(devtoolsCommon.selectedPlayerAction());
+      break;
+    case "player-removed":
+      store.dispatch(devtoolsCommon.playerRemoveAction(message.playerID));
+      store.dispatch(devtoolsCommon.selectedPlayerAction());
+      break;
+    case "player-flow-start":
+      store.dispatch(devtoolsCommon.playerFlowStartAction(message));
+      store.dispatch(devtoolsCommon.playerTimelineAction(message));
+      store.dispatch({
+        type: GET_DATA_BINDING_DETAILS,
+        payload: { playerID: message.playerID, binding: "" }
+      });
+      break;
+    case "player-log-event":
+      store.dispatch(devtoolsCommon.playerTimelineAction(message));
+      break;
+    case "player-view-update-event":
+      store.dispatch(devtoolsCommon.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(devtoolsCommon.playerTimelineAction(message));
+      break;
+    }
+    default:
+      console.warn(`Unhandled event: ${JSON.stringify(message)}`);
+      break;
+  }
+}
+
+const buildRPCRequests = (onRequestMessage) => devtoolsCommon.Runtime.RuntimeRPCTypes.reduce((acc, rpcType) => (acc[rpcType] = devtoolsCommon.createRPCRequest(rpcType, devtoolsCommon.PANEL_SOURCE, onRequestMessage), acc), {});
+
+exports.GET_CONFIG_DETAILS = GET_CONFIG_DETAILS;
+exports.GET_CONSOLE_EVAL = GET_CONSOLE_EVAL;
+exports.GET_DATA_BINDING_DETAILS = GET_DATA_BINDING_DETAILS;
+exports.GET_INFO_DETAILS = GET_INFO_DETAILS;
+exports.GET_VIEW_DETAILS = GET_VIEW_DETAILS;
+exports.START_PROFILER = START_PROFILER;
+exports.STOP_PROFILER = STOP_PROFILER;
+exports.buildAliases = buildAliases;
+exports.buildPlayerReducerCallback = buildPlayerReducerCallback;
+exports.buildRPCActions = buildRPCActions;
+exports.buildRPCRequests = buildRPCRequests;
+exports.handleMessage = handleMessage;
+Object.keys(devtoolsCommon).forEach(function (k) {
+  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return devtoolsCommon[k]; }
+  });
+});
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+import { Runtime, RPCRequestHandler, RPCRequestMessageEvent, PlayersState, Message } from '@player-tools/devtools-common';
+export * from '@player-tools/devtools-common';
+import { Store } from 'redux';
+import { AsyncThunk, ActionReducerMapBuilder } from '@reduxjs/toolkit';
+
+declare type RuntimeRPCRequestHandlers = {
+    [key in Runtime.RuntimeRPCTypes]: RPCRequestHandler<any>;
+};
+/**
+ *
+ */
+declare const buildRPCRequests: (onRequestMessage: (message: RPCRequestMessageEvent<Runtime.RuntimeRPC>) => void) => RuntimeRPCRequestHandlers;
+
+declare type AsyncRPCActions = {
+    [key in Runtime.RuntimeRPCTypes]: AsyncThunk<Extract<Runtime.RuntimeRPC, {
+        /**
+         *
+         */
+        type: key;
+    }>['result'], Extract<Runtime.RuntimeRPC, {
+        /**
+         *
+         */
+        type: key;
+    }>['params'], {}>;
+};
+/**
+ *
+ */
+declare const buildRPCActions: (handlers: RuntimeRPCRequestHandlers) => AsyncRPCActions;
+
+declare const GET_INFO_DETAILS = "GET_INFO_DETAILS";
+declare const GET_CONFIG_DETAILS = "GET_CONFIG_DETAILS";
+declare const GET_VIEW_DETAILS = "GET_VIEW_DETAILS";
+declare const GET_DATA_BINDING_DETAILS = "GET_DATA_BINDING_DETAILS";
+declare const GET_CONSOLE_EVAL = "GET_CONSOLE_EVAL";
+declare const START_PROFILER = "START_PROFILER";
+declare const STOP_PROFILER = "STOP_PROFILER";
+/**
+ *
+ */
+declare const buildAliases: (actions: AsyncRPCActions) => () => (next: any) => (action: any) => any;
+
+/**
+ * Callback function that adds cases for async actions for the player.
+ *
+ * @param playerReducerCallback
+ * @returns
+ */
+declare const buildPlayerReducerCallback: (actions: AsyncRPCActions) => (builder: ActionReducerMapBuilder<PlayersState>) => void;
+
+/**
+ *
+ */
+declare function handleMessage(store: Store, message: Message): void;
+
+export { AsyncRPCActions, GET_CONFIG_DETAILS, GET_CONSOLE_EVAL, GET_DATA_BINDING_DETAILS, GET_INFO_DETAILS, GET_VIEW_DETAILS, RuntimeRPCRequestHandlers, START_PROFILER, STOP_PROFILER, buildAliases, buildPlayerReducerCallback, buildRPCActions, buildRPCRequests, handleMessage };

package/dist/index.esm.js

@@ -0,0 +1,177 @@
+import { createLogger, BACKGROUND_SOURCE, Runtime, playerTimelineAction, playerViewUpdateAction, playerFlowStartAction, playerRemoveAction, selectedPlayerAction, playerInitAction, clearStore, createRPCRequest, PANEL_SOURCE } from '@player-tools/devtools-common';
+export * from '@player-tools/devtools-common';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
+const GET_INFO_DETAILS = "GET_INFO_DETAILS";
+const GET_CONFIG_DETAILS = "GET_CONFIG_DETAILS";
+const GET_VIEW_DETAILS = "GET_VIEW_DETAILS";
+const GET_DATA_BINDING_DETAILS = "GET_DATA_BINDING_DETAILS";
+const GET_CONSOLE_EVAL = "GET_CONSOLE_EVAL";
+const START_PROFILER = "START_PROFILER";
+const STOP_PROFILER = "STOP_PROFILER";
+const alias = (aliases) => () => (next) => (action) => {
+  const alias2 = aliases[action.type];
+  if (alias2) {
+    return next(alias2(action));
+  }
+  return next(action);
+};
+const 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 __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const logger = createLogger(BACKGROUND_SOURCE);
+const buildRPCActions = (handlers) => Runtime.RuntimeRPCTypes.reduce((acc, rpcType) => (acc[rpcType] = createAsyncThunk(rpcType, (params) => __async(undefined, null, function* () {
+  logger.log(`Requesting ${rpcType}`, params);
+  const data = yield handlers[rpcType].call(params);
+  logger.log(`Response from ${rpcType}`, data);
+  return data;
+})), acc), {});
+
+const 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;
+  });
+  builder.addCase(actions["player-view-details-request"].fulfilled, (state, action) => {
+    var _a;
+    const { activePlayers, selectedPlayerId } = state;
+    if (!selectedPlayerId) {
+      return;
+    }
+    activePlayers[selectedPlayerId].view = (_a = action.payload) == null ? void 0 : _a.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) => {
+    var _a, _b, _c, _d;
+    const { activePlayers, selectedPlayerId } = state;
+    if (!selectedPlayerId) {
+      return;
+    }
+    (_d = (_a = activePlayers[selectedPlayerId].consoleState) == null ? void 0 : _a.history) == null ? void 0 : _d.push({
+      id: action.meta.requestId,
+      result: action.payload,
+      expression: (_c = (_b = action.payload) == null ? void 0 : _b.exp) != null ? _c : ""
+    });
+  });
+  builder.addCase(actions["player-start-profiler-request"].fulfilled, (state, action) => {
+    var _a;
+    const { activePlayers, selectedPlayerId } = state;
+    if (!selectedPlayerId)
+      return;
+    activePlayers[selectedPlayerId].profilerInfo = (_a = action.payload) == null ? void 0 : _a.data;
+  });
+  builder.addCase(actions["player-stop-profiler-request"].fulfilled, (state, action) => {
+    var _a;
+    const { activePlayers, selectedPlayerId } = state;
+    if (!selectedPlayerId)
+      return;
+    activePlayers[selectedPlayerId].profilerInfo = (_a = action.payload) == null ? void 0 : _a.data;
+  });
+};
+
+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;
+  }
+}
+
+const buildRPCRequests = (onRequestMessage) => Runtime.RuntimeRPCTypes.reduce((acc, rpcType) => (acc[rpcType] = createRPCRequest(rpcType, PANEL_SOURCE, onRequestMessage), acc), {});
+
+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 };
+//# sourceMappingURL=index.esm.js.map

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@player-tools/devtools-client",
+  "version": "0.2.1--canary.11.139",
+  "private": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "peerDependencies": {},
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.6.1",
+    "@player-tools/devtools-common": "0.2.1--canary.11.139",
+    "@babel/runtime": "7.15.4"
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/player-ui/tools"
+  },
+  "bugs": {
+    "url": "https://github.com/player-ui/tools/issues"
+  },
+  "homepage": "https://player-ui.github.io",
+  "contributors": [
+    {
+      "name": "Ketan Reddy",
+      "url": "https://github.com/KetanReddy"
+    }
+  ]
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './redux';
+export * from './rpc';
+export * from '@player-tools/devtools-common';

package/src/redux/actions.ts

@@ -0,0 +1,82 @@
+import type { AsyncThunk } from '@reduxjs/toolkit';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import {
+  Runtime,
+  createLogger,
+  BACKGROUND_SOURCE,
+} from '@player-tools/devtools-common';
+import type { RuntimeRPCRequestHandlers } from '../rpc';
+
+const logger = createLogger(BACKGROUND_SOURCE);
+
+export type AsyncRPCActions = {
+  [key in Runtime.RuntimeRPCTypes]: AsyncThunk<
+    Extract<
+      Runtime.RuntimeRPC,
+      {
+        /**
+         *
+         */
+        type: key;
+      }
+    >['result'],
+    Extract<
+      Runtime.RuntimeRPC,
+      {
+        /**
+         *
+         */
+        type: key;
+      }
+    >['params'],
+    {}
+  >;
+};
+
+/**
+ *
+ */
+export const buildRPCActions = (
+  handlers: RuntimeRPCRequestHandlers
+): AsyncRPCActions =>
+  Runtime.RuntimeRPCTypes.reduce(
+    (acc, rpcType) => (
+      // TODO: Fix this
+      // @ts-ignore
+      (acc[rpcType] = createAsyncThunk<
+        Extract<
+          Runtime.RuntimeRPC,
+          {
+            /**
+             *
+             */
+            type: typeof rpcType;
+          }
+        >['result'],
+        Extract<
+          Runtime.RuntimeRPC,
+          {
+            /**
+             *
+             */
+            type: typeof rpcType;
+          }
+        >['params']
+      >(rpcType, async (params) => {
+        logger.log(`Requesting ${rpcType}`, params);
+        const data = (await handlers[rpcType].call(params)) as Extract<
+          Runtime.RuntimeRPC,
+          {
+            /**
+             *
+             */
+            type: typeof rpcType;
+          }
+        >['result'];
+        logger.log(`Response from ${rpcType}`, data);
+        return data;
+      })),
+      acc
+    ),
+    {} as AsyncRPCActions
+  );

package/src/redux/aliases.ts

@@ -0,0 +1,51 @@
+import type {
+  AliasAction,
+  ConfigAction,
+  DataBindingAction,
+  ExpressionAction,
+  StartProfilerAction,
+  StopProfilerAction,
+} from '@player-tools/devtools-common';
+import type { AsyncRPCActions } from './actions';
+
+export const GET_INFO_DETAILS = 'GET_INFO_DETAILS';
+export const GET_CONFIG_DETAILS = 'GET_CONFIG_DETAILS';
+export const GET_VIEW_DETAILS = 'GET_VIEW_DETAILS';
+export const GET_DATA_BINDING_DETAILS = 'GET_DATA_BINDING_DETAILS';
+export const GET_CONSOLE_EVAL = 'GET_CONSOLE_EVAL';
+export const START_PROFILER = 'START_PROFILER';
+export const STOP_PROFILER = 'STOP_PROFILER';
+
+/**
+ *
+ */
+const alias = (aliases: any) => () => (next: any) => (action: any) => {
+  const alias = aliases[action.type];
+
+  if (alias) {
+    return next(alias(action));
+  }
+
+  return next(action);
+};
+
+/**
+ *
+ */
+export const buildAliases = (actions: AsyncRPCActions) =>
+  alias({
+    GET_INFO_DETAILS: (action: AliasAction) =>
+      actions['player-runtime-info-request'](action.payload),
+    GET_CONFIG_DETAILS: (action: ConfigAction) =>
+      actions['player-config-request'](action.payload),
+    GET_VIEW_DETAILS: (action: AliasAction) =>
+      actions['player-view-details-request'](action.payload),
+    GET_DATA_BINDING_DETAILS: (action: DataBindingAction) =>
+      actions['player-data-binding-details'](action.payload),
+    GET_CONSOLE_EVAL: (action: ExpressionAction) =>
+      actions['player-execute-expression'](action.payload),
+    START_PROFILER: (action: StartProfilerAction) =>
+      actions['player-start-profiler-request'](action.payload),
+    STOP_PROFILER: (action: StopProfilerAction) =>
+      actions['player-stop-profiler-request'](action.payload),
+  });

package/src/redux/index.ts

@@ -0,0 +1,73 @@
+import type { Message } from '@player-tools/devtools-common';
+import {
+  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 './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;
+  }
+}

package/src/redux/reducers.ts

@@ -0,0 +1,119 @@
+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;
+      }
+    );
+
+    builder.addCase(
+      actions['player-config-request'].fulfilled,
+      (state, action) => {
+        const { activePlayers, selectedPlayerId } = state;
+
+        if (!selectedPlayerId) {
+          return;
+        }
+
+        activePlayers[selectedPlayerId].configState = action.payload;
+      }
+    );
+
+    builder.addCase(
+      actions['player-view-details-request'].fulfilled,
+      (state, action) => {
+        const { activePlayers, selectedPlayerId } = state;
+
+        if (!selectedPlayerId) {
+          return;
+        }
+
+        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 ?? '',
+        });
+      }
+    );
+
+    builder.addCase(
+      actions['player-start-profiler-request'].fulfilled,
+      (state, action) => {
+        const { activePlayers, selectedPlayerId } = state;
+
+        if (!selectedPlayerId) return;
+
+        activePlayers[selectedPlayerId].profilerInfo = action.payload?.data;
+      }
+    );
+
+    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,34 @@
+import type {
+  Runtime as PlayerRuntime,
+  RPCRequestMessageEvent,
+  RPCRequestHandler,
+} from '@player-tools/devtools-common';
+import {
+  createRPCRequest,
+  PANEL_SOURCE,
+  Runtime,
+} from '@player-tools/devtools-common';
+
+export type RuntimeRPCRequestHandlers = {
+  [key in Runtime.RuntimeRPCTypes]: RPCRequestHandler<any>;
+};
+
+/**
+ *
+ */
+export const buildRPCRequests = (
+  onRequestMessage: (
+    message: RPCRequestMessageEvent<PlayerRuntime.RuntimeRPC>
+  ) => void
+): RuntimeRPCRequestHandlers =>
+  Runtime.RuntimeRPCTypes.reduce(
+    (acc, rpcType) => (
+      (acc[rpcType] = createRPCRequest(
+        rpcType,
+        PANEL_SOURCE,
+        onRequestMessage
+      )),
+      acc
+    ),
+    {} as RuntimeRPCRequestHandlers
+  );