@player-tools/devtools-desktop-plugins-common 0.8.1 → 0.9.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/cjs/index.cjs +13 -19
  2. package/dist/cjs/index.cjs.map +1 -1
  3. package/dist/index.legacy-esm.js +13 -9
  4. package/dist/index.mjs +13 -9
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +4 -5
  7. package/src/state/__tests__/reducer.test.ts +90 -2
  8. package/src/state/reducer.ts +13 -10
package/dist/cjs/index.cjs CHANGED
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
- var __create = Object.create;
3
2
  var __defProp = Object.defineProperty;
4
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
6
  var __export = (target, all) => {
9
7
  for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
17
15
  }
18
16
  return to;
19
17
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
19
 
30
20
  // ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/index.ts
@@ -135,7 +125,7 @@ var useCommunicationLayer = () => {
135
125
  // ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/reducer.ts
136
126
  var import_immer = require("immer");
137
127
  var import_dequal = require("dequal");
138
- var import_lodash = __toESM(require("lodash.set"));
128
+ var import_merge = require("dset/merge");
139
129
  var containsInteraction = (interactions, interaction) => {
140
130
  return interactions.filter((i) => (0, import_dequal.dequal)(i, interaction)).length > 0;
141
131
  };
@@ -144,7 +134,7 @@ var reducer = (state, transaction) => {
144
134
  case "PLAYER_DEVTOOLS_PLAYER_INIT":
145
135
  return (0, import_immer.produce)(state, (draft) => {
146
136
  const { payload } = transaction;
147
- (0, import_lodash.default)(draft, "plugins", payload.plugins);
137
+ (0, import_merge.dset)(draft, "plugins", payload.plugins);
148
138
  const message = {
149
139
  type: "PLAYER_DEVTOOLS_PLAYER_INIT",
150
140
  payload
@@ -155,11 +145,15 @@ var reducer = (state, transaction) => {
155
145
  return (0, import_immer.produce)(state, (draft) => {
156
146
  const { payload } = transaction;
157
147
  if (!payload.data) return state;
158
- (0, import_lodash.default)(
159
- draft.plugins,
160
- [transaction.payload.pluginID, "flow", "data"],
161
- transaction.payload.data
162
- );
148
+ try {
149
+ (0, import_merge.dset)(
150
+ draft,
151
+ ["plugins", transaction.payload.pluginID, "flow", "data"],
152
+ transaction.payload.data
153
+ );
154
+ } catch {
155
+ console.error("error setting data:", transaction.payload.data);
156
+ }
163
157
  const message = {
164
158
  type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
165
159
  payload
@@ -169,13 +163,13 @@ var reducer = (state, transaction) => {
169
163
  case "PLAYER_DEVTOOLS_PLUGIN_INTERACTION":
170
164
  return (0, import_immer.produce)(state, (draft) => {
171
165
  if (containsInteraction(draft.interactions, transaction)) return state;
172
- (0, import_lodash.default)(draft, ["interactions"], [...draft.interactions, transaction]);
166
+ (0, import_merge.dset)(draft, ["interactions"], [...draft.interactions, transaction]);
173
167
  });
174
168
  case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE":
175
169
  const { playerID } = transaction.payload;
176
170
  if (!playerID) return state;
177
171
  return (0, import_immer.produce)(state, (draft) => {
178
- (0, import_lodash.default)(draft, "currentPlayer", playerID);
172
+ (0, import_merge.dset)(draft, "currentPlayer", playerID);
179
173
  });
180
174
  default:
181
175
  return state;
package/dist/cjs/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/index.ts","../../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/communication-layer/index.ts","../../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/reducer.ts","../../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/usePluginState.ts"],"sourcesContent":["export * from \"./communication-layer\";\nexport * from \"./state\";\n","import type {\n ExtensionSupportedEvents,\n MessengerEvent,\n MessengerOptions,\n TransactionMetadata,\n} from \"@player-tools/devtools-types\";\nimport { useEffect, useState } from \"react\";\nimport { type FlipperPluginConnection, flipperClient } from \"js-flipper\";\n\ntype IntoArrays<T> = {\n [P in keyof T]: T[P][];\n};\n\ntype CommunicationLayerMethods = Pick<\n MessengerOptions<ExtensionSupportedEvents>,\n \"sendMessage\" | \"addListener\" | \"removeListener\"\n>;\n\ntype Callbacks = IntoArrays<CommunicationLayerMethods>;\n\n// keep track of the Flipper connection between React renders\nlet flipperConnection: FlipperPluginConnection | null = null;\n\n/** Adds a Flipper client and starts the connection */\nexport const startFlipperConnection = (\n setLayerCallbacks: (\n value: React.SetStateAction<IntoArrays<CommunicationLayerMethods>>\n ) => void\n) => {\n const listeners: Array<\n (\n message: TransactionMetadata & MessengerEvent<ExtensionSupportedEvents>\n ) => void\n > = [];\n\n if (!flipperConnection) {\n flipperClient\n .start(\"player-ui-devtools\")\n .then(() => {\n flipperClient.addPlugin({\n getId() {\n return \"player-ui-devtools\";\n },\n onConnect(conn) {\n flipperConnection = conn;\n\n conn.receive(\"message::flipper\", (message) => {\n listeners.forEach((listener) => listener(message));\n });\n },\n onDisconnect() {\n console.log(\"Flipper client disconnected\");\n flipperConnection = null;\n },\n });\n })\n .catch((error) => {\n console.error(\"Failed to start Flipper client\", error);\n });\n }\n\n const sendMessage: CommunicationLayerMethods[\"sendMessage\"] = async (\n message\n ) => {\n flipperConnection?.send(\"message::plugin\", message);\n };\n\n const addListener: CommunicationLayerMethods[\"addListener\"] = (listener) => {\n listeners.push(listener);\n };\n\n setLayerCallbacks((current) => ({\n sendMessage: [...current.sendMessage, sendMessage],\n addListener: [...current.addListener, addListener],\n removeListener: current.removeListener,\n }));\n};\n\n/** Web extension communication layer leverage by the @player-tools/devtools-messenger */\nexport const useCommunicationLayer = (): Pick<\n MessengerOptions<ExtensionSupportedEvents>,\n \"sendMessage\" | \"addListener\" | \"removeListener\"\n> => {\n const flipperConnectionIsActive = localStorage.getItem(\n \"player-ui-devtools-flipper-active\"\n );\n\n const [layerCallbacks, setLayerCallbacks] = useState<Callbacks>({\n sendMessage: [],\n addListener: [],\n removeListener: [],\n });\n\n useEffect(() => {\n if (flipperConnectionIsActive === \"true\") {\n startFlipperConnection(setLayerCallbacks);\n } else {\n console.warn(\n \"The Flipper connection is disabled. If you want to enable it, use the Player UI extension popup.\"\n );\n }\n\n let windowListener: null | ((event: MessageEvent) => void) = null;\n\n setLayerCallbacks((current) => ({\n sendMessage: [\n ...current.sendMessage,\n async (message) => {\n window.postMessage(message, \"*\");\n },\n ],\n addListener: [\n ...current.addListener,\n (listener) => {\n windowListener = (event: MessageEvent) => listener(event.data);\n window.addEventListener(\"message\", windowListener);\n },\n ],\n removeListener: [\n ...current.removeListener,\n () => {\n if (windowListener) {\n window.removeEventListener(\"message\", windowListener);\n }\n },\n ],\n }));\n }, []);\n\n const layer: Pick<\n MessengerOptions<ExtensionSupportedEvents>,\n \"sendMessage\" | \"addListener\" | \"removeListener\"\n > = {\n sendMessage: async (message) => {\n layerCallbacks.sendMessage.forEach((callback) => callback(message));\n },\n addListener: (listener) => {\n layerCallbacks.addListener.forEach((callback) => callback(listener));\n },\n removeListener: (listener) => {\n layerCallbacks.removeListener.forEach((callback) => callback(listener));\n },\n };\n\n return layer;\n};\n","import { produce } from \"immer\";\nimport { dequal } from \"dequal\";\nimport type {\n DevtoolsDataChangeEvent,\n DevtoolsPluginsStore,\n ExtensionSupportedEvents,\n PlayerInitEvent,\n Transaction,\n} from \"@player-tools/devtools-types\";\nimport set from \"lodash.set\";\n\nconst containsInteraction = (\n interactions: DevtoolsPluginsStore[\"interactions\"],\n interaction: DevtoolsPluginsStore[\"interactions\"][number]\n) => {\n return interactions.filter((i) => dequal(i, interaction)).length > 0;\n};\n\n/** devtools plugin state reducer */\nexport const reducer = (\n state: DevtoolsPluginsStore,\n transaction: Transaction<ExtensionSupportedEvents>\n): DevtoolsPluginsStore => {\n switch (transaction.type) {\n case \"PLAYER_DEVTOOLS_PLAYER_INIT\":\n return produce(state, (draft) => {\n const { payload } = transaction;\n set(draft, \"plugins\", payload.plugins);\n\n const message: PlayerInitEvent = {\n type: \"PLAYER_DEVTOOLS_PLAYER_INIT\",\n payload,\n };\n\n draft.messages.push(message);\n });\n case \"PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE\":\n return produce(state, (draft) => {\n const { payload } = transaction;\n\n if (!payload.data) return state;\n\n set(\n draft.plugins,\n [transaction.payload.pluginID, \"flow\", \"data\"],\n transaction.payload.data\n );\n\n const message: DevtoolsDataChangeEvent = {\n type: \"PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE\",\n payload,\n };\n\n draft.messages.push(message);\n });\n case \"PLAYER_DEVTOOLS_PLUGIN_INTERACTION\":\n return produce(state, (draft) => {\n if (containsInteraction(draft.interactions, transaction)) return state;\n\n set(draft, [\"interactions\"], [...draft.interactions, transaction]);\n });\n case \"PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE\":\n const { playerID } = transaction.payload;\n\n if (!playerID) return state;\n return produce(state, (draft) => {\n set(draft, \"currentPlayer\", playerID);\n });\n default:\n return state;\n }\n};\n","import { Messenger } from \"@player-tools/devtools-messenger\";\nimport type {\n DevtoolsPluginsStore,\n ExtensionSupportedEvents,\n MessengerOptions,\n Transaction,\n} from \"@player-tools/devtools-types\";\nimport { useEffect, useMemo, useReducer, useRef } from \"react\";\nimport { useCommunicationLayer } from \"../communication-layer\";\nimport { reducer } from \"./reducer\";\n\nconst INITIAL_STATE: DevtoolsPluginsStore = {\n messages: [],\n plugins: {},\n interactions: [],\n currentPlayer: \"\",\n};\n\n/** devtools plugin state */\nexport const usePluginState = ({\n playerID,\n}: {\n playerID: string;\n}): [\n DevtoolsPluginsStore,\n React.Dispatch<Transaction<ExtensionSupportedEvents>>\n] => {\n const [state, dispatch] = useReducer(reducer, INITIAL_STATE);\n const lastMessageIndex = useRef<number>(-1);\n const { sendMessage, addListener, removeListener } = useCommunicationLayer();\n\n const messenger = useMemo(() => {\n const options: MessengerOptions<ExtensionSupportedEvents> = {\n id: playerID,\n context: \"player\",\n messageCallback: (message) =>\n dispatch(message as Parameters<typeof dispatch>[0]),\n sendMessage,\n addListener,\n removeListener,\n logger: console,\n };\n\n return new Messenger(options);\n }, [addListener, removeListener, sendMessage]);\n\n useEffect(() => {\n if (state.messages.length > lastMessageIndex.current + 1) {\n const messages = state.messages.slice(\n lastMessageIndex.current + 1,\n state.messages.length\n );\n lastMessageIndex.current = state.messages.length - 1;\n messages.forEach((message) => {\n messenger.sendMessage(message);\n });\n }\n }, [state.messages, messenger]);\n\n return [state, dispatch];\n};\n"],"mappings":"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","names":["set","import_react"]}
1
+ {"version":3,"sources":["../../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/index.ts","../../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/communication-layer/index.ts","../../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/reducer.ts","../../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/usePluginState.ts"],"sourcesContent":["export * from \"./communication-layer\";\nexport * from \"./state\";\n","import type {\n ExtensionSupportedEvents,\n MessengerEvent,\n MessengerOptions,\n TransactionMetadata,\n} from \"@player-tools/devtools-types\";\nimport { useEffect, useState } from \"react\";\nimport { type FlipperPluginConnection, flipperClient } from \"js-flipper\";\n\ntype IntoArrays<T> = {\n [P in keyof T]: T[P][];\n};\n\ntype CommunicationLayerMethods = Pick<\n MessengerOptions<ExtensionSupportedEvents>,\n \"sendMessage\" | \"addListener\" | \"removeListener\"\n>;\n\ntype Callbacks = IntoArrays<CommunicationLayerMethods>;\n\n// keep track of the Flipper connection between React renders\nlet flipperConnection: FlipperPluginConnection | null = null;\n\n/** Adds a Flipper client and starts the connection */\nexport const startFlipperConnection = (\n setLayerCallbacks: (\n value: React.SetStateAction<IntoArrays<CommunicationLayerMethods>>\n ) => void\n) => {\n const listeners: Array<\n (\n message: TransactionMetadata & MessengerEvent<ExtensionSupportedEvents>\n ) => void\n > = [];\n\n if (!flipperConnection) {\n flipperClient\n .start(\"player-ui-devtools\")\n .then(() => {\n flipperClient.addPlugin({\n getId() {\n return \"player-ui-devtools\";\n },\n onConnect(conn) {\n flipperConnection = conn;\n\n conn.receive(\"message::flipper\", (message) => {\n listeners.forEach((listener) => listener(message));\n });\n },\n onDisconnect() {\n console.log(\"Flipper client disconnected\");\n flipperConnection = null;\n },\n });\n })\n .catch((error) => {\n console.error(\"Failed to start Flipper client\", error);\n });\n }\n\n const sendMessage: CommunicationLayerMethods[\"sendMessage\"] = async (\n message\n ) => {\n flipperConnection?.send(\"message::plugin\", message);\n };\n\n const addListener: CommunicationLayerMethods[\"addListener\"] = (listener) => {\n listeners.push(listener);\n };\n\n setLayerCallbacks((current) => ({\n sendMessage: [...current.sendMessage, sendMessage],\n addListener: [...current.addListener, addListener],\n removeListener: current.removeListener,\n }));\n};\n\n/** Web extension communication layer leverage by the @player-tools/devtools-messenger */\nexport const useCommunicationLayer = (): Pick<\n MessengerOptions<ExtensionSupportedEvents>,\n \"sendMessage\" | \"addListener\" | \"removeListener\"\n> => {\n const flipperConnectionIsActive = localStorage.getItem(\n \"player-ui-devtools-flipper-active\"\n );\n\n const [layerCallbacks, setLayerCallbacks] = useState<Callbacks>({\n sendMessage: [],\n addListener: [],\n removeListener: [],\n });\n\n useEffect(() => {\n if (flipperConnectionIsActive === \"true\") {\n startFlipperConnection(setLayerCallbacks);\n } else {\n console.warn(\n \"The Flipper connection is disabled. If you want to enable it, use the Player UI extension popup.\"\n );\n }\n\n let windowListener: null | ((event: MessageEvent) => void) = null;\n\n setLayerCallbacks((current) => ({\n sendMessage: [\n ...current.sendMessage,\n async (message) => {\n window.postMessage(message, \"*\");\n },\n ],\n addListener: [\n ...current.addListener,\n (listener) => {\n windowListener = (event: MessageEvent) => listener(event.data);\n window.addEventListener(\"message\", windowListener);\n },\n ],\n removeListener: [\n ...current.removeListener,\n () => {\n if (windowListener) {\n window.removeEventListener(\"message\", windowListener);\n }\n },\n ],\n }));\n }, []);\n\n const layer: Pick<\n MessengerOptions<ExtensionSupportedEvents>,\n \"sendMessage\" | \"addListener\" | \"removeListener\"\n > = {\n sendMessage: async (message) => {\n layerCallbacks.sendMessage.forEach((callback) => callback(message));\n },\n addListener: (listener) => {\n layerCallbacks.addListener.forEach((callback) => callback(listener));\n },\n removeListener: (listener) => {\n layerCallbacks.removeListener.forEach((callback) => callback(listener));\n },\n };\n\n return layer;\n};\n","import { produce } from \"immer\";\nimport { dequal } from \"dequal\";\nimport type {\n DevtoolsDataChangeEvent,\n DevtoolsPluginsStore,\n ExtensionSupportedEvents,\n PlayerInitEvent,\n Transaction,\n} from \"@player-tools/devtools-types\";\nimport { dset } from \"dset/merge\";\n\nconst containsInteraction = (\n interactions: DevtoolsPluginsStore[\"interactions\"],\n interaction: DevtoolsPluginsStore[\"interactions\"][number]\n) => {\n return interactions.filter((i) => dequal(i, interaction)).length > 0;\n};\n\n/** devtools plugin state reducer */\nexport const reducer = (\n state: DevtoolsPluginsStore,\n transaction: Transaction<ExtensionSupportedEvents>\n): DevtoolsPluginsStore => {\n switch (transaction.type) {\n case \"PLAYER_DEVTOOLS_PLAYER_INIT\":\n return produce(state, (draft) => {\n const { payload } = transaction;\n dset(draft, \"plugins\", payload.plugins);\n\n const message: PlayerInitEvent = {\n type: \"PLAYER_DEVTOOLS_PLAYER_INIT\",\n payload,\n };\n\n draft.messages.push(message);\n });\n case \"PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE\":\n return produce(state, (draft) => {\n const { payload } = transaction;\n\n if (!payload.data) return state;\n\n try {\n dset(\n draft,\n [\"plugins\", transaction.payload.pluginID, \"flow\", \"data\"],\n transaction.payload.data\n );\n } catch {\n console.error(\"error setting data:\", transaction.payload.data);\n }\n const message: DevtoolsDataChangeEvent = {\n type: \"PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE\",\n payload,\n };\n\n draft.messages.push(message);\n });\n case \"PLAYER_DEVTOOLS_PLUGIN_INTERACTION\":\n return produce(state, (draft) => {\n if (containsInteraction(draft.interactions, transaction)) return state;\n\n dset(draft, [\"interactions\"], [...draft.interactions, transaction]);\n });\n case \"PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE\":\n const { playerID } = transaction.payload;\n\n if (!playerID) return state;\n return produce(state, (draft) => {\n dset(draft, \"currentPlayer\", playerID);\n });\n default:\n return state;\n }\n};\n","import { Messenger } from \"@player-tools/devtools-messenger\";\nimport type {\n DevtoolsPluginsStore,\n ExtensionSupportedEvents,\n MessengerOptions,\n Transaction,\n} from \"@player-tools/devtools-types\";\nimport { useEffect, useMemo, useReducer, useRef } from \"react\";\nimport { useCommunicationLayer } from \"../communication-layer\";\nimport { reducer } from \"./reducer\";\n\nconst INITIAL_STATE: DevtoolsPluginsStore = {\n messages: [],\n plugins: {},\n interactions: [],\n currentPlayer: \"\",\n};\n\n/** devtools plugin state */\nexport const usePluginState = ({\n playerID,\n}: {\n playerID: string;\n}): [\n DevtoolsPluginsStore,\n React.Dispatch<Transaction<ExtensionSupportedEvents>>\n] => {\n const [state, dispatch] = useReducer(reducer, INITIAL_STATE);\n const lastMessageIndex = useRef<number>(-1);\n const { sendMessage, addListener, removeListener } = useCommunicationLayer();\n\n const messenger = useMemo(() => {\n const options: MessengerOptions<ExtensionSupportedEvents> = {\n id: playerID,\n context: \"player\",\n messageCallback: (message) =>\n dispatch(message as Parameters<typeof dispatch>[0]),\n sendMessage,\n addListener,\n removeListener,\n logger: console,\n };\n\n return new Messenger(options);\n }, [addListener, removeListener, sendMessage]);\n\n useEffect(() => {\n if (state.messages.length > lastMessageIndex.current + 1) {\n const messages = state.messages.slice(\n lastMessageIndex.current + 1,\n state.messages.length\n );\n lastMessageIndex.current = state.messages.length - 1;\n messages.forEach((message) => {\n messenger.sendMessage(message);\n });\n }\n }, [state.messages, messenger]);\n\n return [state, dispatch];\n};\n"],"mappings":"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","names":["import_react"]}
package/dist/index.legacy-esm.js CHANGED
@@ -96,7 +96,7 @@ var useCommunicationLayer = () => {
96
96
  // ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/reducer.ts
97
97
  import { produce } from "immer";
98
98
  import { dequal } from "dequal";
99
- import set from "lodash.set";
99
+ import { dset } from "dset/merge";
100
100
  var containsInteraction = (interactions, interaction) => {
101
101
  return interactions.filter((i) => dequal(i, interaction)).length > 0;
102
102
  };
@@ -105,7 +105,7 @@ var reducer = (state, transaction) => {
105
105
  case "PLAYER_DEVTOOLS_PLAYER_INIT":
106
106
  return produce(state, (draft) => {
107
107
  const { payload } = transaction;
108
- set(draft, "plugins", payload.plugins);
108
+ dset(draft, "plugins", payload.plugins);
109
109
  const message = {
110
110
  type: "PLAYER_DEVTOOLS_PLAYER_INIT",
111
111
  payload
@@ -116,11 +116,15 @@ var reducer = (state, transaction) => {
116
116
  return produce(state, (draft) => {
117
117
  const { payload } = transaction;
118
118
  if (!payload.data) return state;
119
- set(
120
- draft.plugins,
121
- [transaction.payload.pluginID, "flow", "data"],
122
- transaction.payload.data
123
- );
119
+ try {
120
+ dset(
121
+ draft,
122
+ ["plugins", transaction.payload.pluginID, "flow", "data"],
123
+ transaction.payload.data
124
+ );
125
+ } catch {
126
+ console.error("error setting data:", transaction.payload.data);
127
+ }
124
128
  const message = {
125
129
  type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
126
130
  payload
@@ -130,13 +134,13 @@ var reducer = (state, transaction) => {
130
134
  case "PLAYER_DEVTOOLS_PLUGIN_INTERACTION":
131
135
  return produce(state, (draft) => {
132
136
  if (containsInteraction(draft.interactions, transaction)) return state;
133
- set(draft, ["interactions"], [...draft.interactions, transaction]);
137
+ dset(draft, ["interactions"], [...draft.interactions, transaction]);
134
138
  });
135
139
  case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE":
136
140
  const { playerID } = transaction.payload;
137
141
  if (!playerID) return state;
138
142
  return produce(state, (draft) => {
139
- set(draft, "currentPlayer", playerID);
143
+ dset(draft, "currentPlayer", playerID);
140
144
  });
141
145
  default:
142
146
  return state;
package/dist/index.mjs CHANGED
@@ -96,7 +96,7 @@ var useCommunicationLayer = () => {
96
96
  // ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/reducer.ts
97
97
  import { produce } from "immer";
98
98
  import { dequal } from "dequal";
99
- import set from "lodash.set";
99
+ import { dset } from "dset/merge";
100
100
  var containsInteraction = (interactions, interaction) => {
101
101
  return interactions.filter((i) => dequal(i, interaction)).length > 0;
102
102
  };
@@ -105,7 +105,7 @@ var reducer = (state, transaction) => {
105
105
  case "PLAYER_DEVTOOLS_PLAYER_INIT":
106
106
  return produce(state, (draft) => {
107
107
  const { payload } = transaction;
108
- set(draft, "plugins", payload.plugins);
108
+ dset(draft, "plugins", payload.plugins);
109
109
  const message = {
110
110
  type: "PLAYER_DEVTOOLS_PLAYER_INIT",
111
111
  payload
@@ -116,11 +116,15 @@ var reducer = (state, transaction) => {
116
116
  return produce(state, (draft) => {
117
117
  const { payload } = transaction;
118
118
  if (!payload.data) return state;
119
- set(
120
- draft.plugins,
121
- [transaction.payload.pluginID, "flow", "data"],
122
- transaction.payload.data
123
- );
119
+ try {
120
+ dset(
121
+ draft,
122
+ ["plugins", transaction.payload.pluginID, "flow", "data"],
123
+ transaction.payload.data
124
+ );
125
+ } catch {
126
+ console.error("error setting data:", transaction.payload.data);
127
+ }
124
128
  const message = {
125
129
  type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
126
130
  payload
@@ -130,13 +134,13 @@ var reducer = (state, transaction) => {
130
134
  case "PLAYER_DEVTOOLS_PLUGIN_INTERACTION":
131
135
  return produce(state, (draft) => {
132
136
  if (containsInteraction(draft.interactions, transaction)) return state;
133
- set(draft, ["interactions"], [...draft.interactions, transaction]);
137
+ dset(draft, ["interactions"], [...draft.interactions, transaction]);
134
138
  });
135
139
  case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE":
136
140
  const { playerID } = transaction.payload;
137
141
  if (!playerID) return state;
138
142
  return produce(state, (draft) => {
139
- set(draft, "currentPlayer", playerID);
143
+ dset(draft, "currentPlayer", playerID);
140
144
  });
141
145
  default:
142
146
  return state;
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/communication-layer/index.ts","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/reducer.ts","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/usePluginState.ts"],"sourcesContent":["import type {\n ExtensionSupportedEvents,\n MessengerEvent,\n MessengerOptions,\n TransactionMetadata,\n} from \"@player-tools/devtools-types\";\nimport { useEffect, useState } from \"react\";\nimport { type FlipperPluginConnection, flipperClient } from \"js-flipper\";\n\ntype IntoArrays<T> = {\n [P in keyof T]: T[P][];\n};\n\ntype CommunicationLayerMethods = Pick<\n MessengerOptions<ExtensionSupportedEvents>,\n \"sendMessage\" | \"addListener\" | \"removeListener\"\n>;\n\ntype Callbacks = IntoArrays<CommunicationLayerMethods>;\n\n// keep track of the Flipper connection between React renders\nlet flipperConnection: FlipperPluginConnection | null = null;\n\n/** Adds a Flipper client and starts the connection */\nexport const startFlipperConnection = (\n setLayerCallbacks: (\n value: React.SetStateAction<IntoArrays<CommunicationLayerMethods>>\n ) => void\n) => {\n const listeners: Array<\n (\n message: TransactionMetadata & MessengerEvent<ExtensionSupportedEvents>\n ) => void\n > = [];\n\n if (!flipperConnection) {\n flipperClient\n .start(\"player-ui-devtools\")\n .then(() => {\n flipperClient.addPlugin({\n getId() {\n return \"player-ui-devtools\";\n },\n onConnect(conn) {\n flipperConnection = conn;\n\n conn.receive(\"message::flipper\", (message) => {\n listeners.forEach((listener) => listener(message));\n });\n },\n onDisconnect() {\n console.log(\"Flipper client disconnected\");\n flipperConnection = null;\n },\n });\n })\n .catch((error) => {\n console.error(\"Failed to start Flipper client\", error);\n });\n }\n\n const sendMessage: CommunicationLayerMethods[\"sendMessage\"] = async (\n message\n ) => {\n flipperConnection?.send(\"message::plugin\", message);\n };\n\n const addListener: CommunicationLayerMethods[\"addListener\"] = (listener) => {\n listeners.push(listener);\n };\n\n setLayerCallbacks((current) => ({\n sendMessage: [...current.sendMessage, sendMessage],\n addListener: [...current.addListener, addListener],\n removeListener: current.removeListener,\n }));\n};\n\n/** Web extension communication layer leverage by the @player-tools/devtools-messenger */\nexport const useCommunicationLayer = (): Pick<\n MessengerOptions<ExtensionSupportedEvents>,\n \"sendMessage\" | \"addListener\" | \"removeListener\"\n> => {\n const flipperConnectionIsActive = localStorage.getItem(\n \"player-ui-devtools-flipper-active\"\n );\n\n const [layerCallbacks, setLayerCallbacks] = useState<Callbacks>({\n sendMessage: [],\n addListener: [],\n removeListener: [],\n });\n\n useEffect(() => {\n if (flipperConnectionIsActive === \"true\") {\n startFlipperConnection(setLayerCallbacks);\n } else {\n console.warn(\n \"The Flipper connection is disabled. If you want to enable it, use the Player UI extension popup.\"\n );\n }\n\n let windowListener: null | ((event: MessageEvent) => void) = null;\n\n setLayerCallbacks((current) => ({\n sendMessage: [\n ...current.sendMessage,\n async (message) => {\n window.postMessage(message, \"*\");\n },\n ],\n addListener: [\n ...current.addListener,\n (listener) => {\n windowListener = (event: MessageEvent) => listener(event.data);\n window.addEventListener(\"message\", windowListener);\n },\n ],\n removeListener: [\n ...current.removeListener,\n () => {\n if (windowListener) {\n window.removeEventListener(\"message\", windowListener);\n }\n },\n ],\n }));\n }, []);\n\n const layer: Pick<\n MessengerOptions<ExtensionSupportedEvents>,\n \"sendMessage\" | \"addListener\" | \"removeListener\"\n > = {\n sendMessage: async (message) => {\n layerCallbacks.sendMessage.forEach((callback) => callback(message));\n },\n addListener: (listener) => {\n layerCallbacks.addListener.forEach((callback) => callback(listener));\n },\n removeListener: (listener) => {\n layerCallbacks.removeListener.forEach((callback) => callback(listener));\n },\n };\n\n return layer;\n};\n","import { produce } from \"immer\";\nimport { dequal } from \"dequal\";\nimport type {\n DevtoolsDataChangeEvent,\n DevtoolsPluginsStore,\n ExtensionSupportedEvents,\n PlayerInitEvent,\n Transaction,\n} from \"@player-tools/devtools-types\";\nimport set from \"lodash.set\";\n\nconst containsInteraction = (\n interactions: DevtoolsPluginsStore[\"interactions\"],\n interaction: DevtoolsPluginsStore[\"interactions\"][number]\n) => {\n return interactions.filter((i) => dequal(i, interaction)).length > 0;\n};\n\n/** devtools plugin state reducer */\nexport const reducer = (\n state: DevtoolsPluginsStore,\n transaction: Transaction<ExtensionSupportedEvents>\n): DevtoolsPluginsStore => {\n switch (transaction.type) {\n case \"PLAYER_DEVTOOLS_PLAYER_INIT\":\n return produce(state, (draft) => {\n const { payload } = transaction;\n set(draft, \"plugins\", payload.plugins);\n\n const message: PlayerInitEvent = {\n type: \"PLAYER_DEVTOOLS_PLAYER_INIT\",\n payload,\n };\n\n draft.messages.push(message);\n });\n case \"PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE\":\n return produce(state, (draft) => {\n const { payload } = transaction;\n\n if (!payload.data) return state;\n\n set(\n draft.plugins,\n [transaction.payload.pluginID, \"flow\", \"data\"],\n transaction.payload.data\n );\n\n const message: DevtoolsDataChangeEvent = {\n type: \"PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE\",\n payload,\n };\n\n draft.messages.push(message);\n });\n case \"PLAYER_DEVTOOLS_PLUGIN_INTERACTION\":\n return produce(state, (draft) => {\n if (containsInteraction(draft.interactions, transaction)) return state;\n\n set(draft, [\"interactions\"], [...draft.interactions, transaction]);\n });\n case \"PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE\":\n const { playerID } = transaction.payload;\n\n if (!playerID) return state;\n return produce(state, (draft) => {\n set(draft, \"currentPlayer\", playerID);\n });\n default:\n return state;\n }\n};\n","import { Messenger } from \"@player-tools/devtools-messenger\";\nimport type {\n DevtoolsPluginsStore,\n ExtensionSupportedEvents,\n MessengerOptions,\n Transaction,\n} from \"@player-tools/devtools-types\";\nimport { useEffect, useMemo, useReducer, useRef } from \"react\";\nimport { useCommunicationLayer } from \"../communication-layer\";\nimport { reducer } from \"./reducer\";\n\nconst INITIAL_STATE: DevtoolsPluginsStore = {\n messages: [],\n plugins: {},\n interactions: [],\n currentPlayer: \"\",\n};\n\n/** devtools plugin state */\nexport const usePluginState = ({\n playerID,\n}: {\n playerID: string;\n}): [\n DevtoolsPluginsStore,\n React.Dispatch<Transaction<ExtensionSupportedEvents>>\n] => {\n const [state, dispatch] = useReducer(reducer, INITIAL_STATE);\n const lastMessageIndex = useRef<number>(-1);\n const { sendMessage, addListener, removeListener } = useCommunicationLayer();\n\n const messenger = useMemo(() => {\n const options: MessengerOptions<ExtensionSupportedEvents> = {\n id: playerID,\n context: \"player\",\n messageCallback: (message) =>\n dispatch(message as Parameters<typeof dispatch>[0]),\n sendMessage,\n addListener,\n removeListener,\n logger: console,\n };\n\n return new Messenger(options);\n }, [addListener, removeListener, sendMessage]);\n\n useEffect(() => {\n if (state.messages.length > lastMessageIndex.current + 1) {\n const messages = state.messages.slice(\n lastMessageIndex.current + 1,\n state.messages.length\n );\n lastMessageIndex.current = state.messages.length - 1;\n messages.forEach((message) => {\n messenger.sendMessage(message);\n });\n }\n }, [state.messages, messenger]);\n\n return [state, dispatch];\n};\n"],"mappings":"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","names":["useEffect","useEffect"]}
1
+ {"version":3,"sources":["../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/communication-layer/index.ts","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/reducer.ts","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/usePluginState.ts"],"sourcesContent":["import type {\n ExtensionSupportedEvents,\n MessengerEvent,\n MessengerOptions,\n TransactionMetadata,\n} from \"@player-tools/devtools-types\";\nimport { useEffect, useState } from \"react\";\nimport { type FlipperPluginConnection, flipperClient } from \"js-flipper\";\n\ntype IntoArrays<T> = {\n [P in keyof T]: T[P][];\n};\n\ntype CommunicationLayerMethods = Pick<\n MessengerOptions<ExtensionSupportedEvents>,\n \"sendMessage\" | \"addListener\" | \"removeListener\"\n>;\n\ntype Callbacks = IntoArrays<CommunicationLayerMethods>;\n\n// keep track of the Flipper connection between React renders\nlet flipperConnection: FlipperPluginConnection | null = null;\n\n/** Adds a Flipper client and starts the connection */\nexport const startFlipperConnection = (\n setLayerCallbacks: (\n value: React.SetStateAction<IntoArrays<CommunicationLayerMethods>>\n ) => void\n) => {\n const listeners: Array<\n (\n message: TransactionMetadata & MessengerEvent<ExtensionSupportedEvents>\n ) => void\n > = [];\n\n if (!flipperConnection) {\n flipperClient\n .start(\"player-ui-devtools\")\n .then(() => {\n flipperClient.addPlugin({\n getId() {\n return \"player-ui-devtools\";\n },\n onConnect(conn) {\n flipperConnection = conn;\n\n conn.receive(\"message::flipper\", (message) => {\n listeners.forEach((listener) => listener(message));\n });\n },\n onDisconnect() {\n console.log(\"Flipper client disconnected\");\n flipperConnection = null;\n },\n });\n })\n .catch((error) => {\n console.error(\"Failed to start Flipper client\", error);\n });\n }\n\n const sendMessage: CommunicationLayerMethods[\"sendMessage\"] = async (\n message\n ) => {\n flipperConnection?.send(\"message::plugin\", message);\n };\n\n const addListener: CommunicationLayerMethods[\"addListener\"] = (listener) => {\n listeners.push(listener);\n };\n\n setLayerCallbacks((current) => ({\n sendMessage: [...current.sendMessage, sendMessage],\n addListener: [...current.addListener, addListener],\n removeListener: current.removeListener,\n }));\n};\n\n/** Web extension communication layer leverage by the @player-tools/devtools-messenger */\nexport const useCommunicationLayer = (): Pick<\n MessengerOptions<ExtensionSupportedEvents>,\n \"sendMessage\" | \"addListener\" | \"removeListener\"\n> => {\n const flipperConnectionIsActive = localStorage.getItem(\n \"player-ui-devtools-flipper-active\"\n );\n\n const [layerCallbacks, setLayerCallbacks] = useState<Callbacks>({\n sendMessage: [],\n addListener: [],\n removeListener: [],\n });\n\n useEffect(() => {\n if (flipperConnectionIsActive === \"true\") {\n startFlipperConnection(setLayerCallbacks);\n } else {\n console.warn(\n \"The Flipper connection is disabled. If you want to enable it, use the Player UI extension popup.\"\n );\n }\n\n let windowListener: null | ((event: MessageEvent) => void) = null;\n\n setLayerCallbacks((current) => ({\n sendMessage: [\n ...current.sendMessage,\n async (message) => {\n window.postMessage(message, \"*\");\n },\n ],\n addListener: [\n ...current.addListener,\n (listener) => {\n windowListener = (event: MessageEvent) => listener(event.data);\n window.addEventListener(\"message\", windowListener);\n },\n ],\n removeListener: [\n ...current.removeListener,\n () => {\n if (windowListener) {\n window.removeEventListener(\"message\", windowListener);\n }\n },\n ],\n }));\n }, []);\n\n const layer: Pick<\n MessengerOptions<ExtensionSupportedEvents>,\n \"sendMessage\" | \"addListener\" | \"removeListener\"\n > = {\n sendMessage: async (message) => {\n layerCallbacks.sendMessage.forEach((callback) => callback(message));\n },\n addListener: (listener) => {\n layerCallbacks.addListener.forEach((callback) => callback(listener));\n },\n removeListener: (listener) => {\n layerCallbacks.removeListener.forEach((callback) => callback(listener));\n },\n };\n\n return layer;\n};\n","import { produce } from \"immer\";\nimport { dequal } from \"dequal\";\nimport type {\n DevtoolsDataChangeEvent,\n DevtoolsPluginsStore,\n ExtensionSupportedEvents,\n PlayerInitEvent,\n Transaction,\n} from \"@player-tools/devtools-types\";\nimport { dset } from \"dset/merge\";\n\nconst containsInteraction = (\n interactions: DevtoolsPluginsStore[\"interactions\"],\n interaction: DevtoolsPluginsStore[\"interactions\"][number]\n) => {\n return interactions.filter((i) => dequal(i, interaction)).length > 0;\n};\n\n/** devtools plugin state reducer */\nexport const reducer = (\n state: DevtoolsPluginsStore,\n transaction: Transaction<ExtensionSupportedEvents>\n): DevtoolsPluginsStore => {\n switch (transaction.type) {\n case \"PLAYER_DEVTOOLS_PLAYER_INIT\":\n return produce(state, (draft) => {\n const { payload } = transaction;\n dset(draft, \"plugins\", payload.plugins);\n\n const message: PlayerInitEvent = {\n type: \"PLAYER_DEVTOOLS_PLAYER_INIT\",\n payload,\n };\n\n draft.messages.push(message);\n });\n case \"PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE\":\n return produce(state, (draft) => {\n const { payload } = transaction;\n\n if (!payload.data) return state;\n\n try {\n dset(\n draft,\n [\"plugins\", transaction.payload.pluginID, \"flow\", \"data\"],\n transaction.payload.data\n );\n } catch {\n console.error(\"error setting data:\", transaction.payload.data);\n }\n const message: DevtoolsDataChangeEvent = {\n type: \"PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE\",\n payload,\n };\n\n draft.messages.push(message);\n });\n case \"PLAYER_DEVTOOLS_PLUGIN_INTERACTION\":\n return produce(state, (draft) => {\n if (containsInteraction(draft.interactions, transaction)) return state;\n\n dset(draft, [\"interactions\"], [...draft.interactions, transaction]);\n });\n case \"PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE\":\n const { playerID } = transaction.payload;\n\n if (!playerID) return state;\n return produce(state, (draft) => {\n dset(draft, \"currentPlayer\", playerID);\n });\n default:\n return state;\n }\n};\n","import { Messenger } from \"@player-tools/devtools-messenger\";\nimport type {\n DevtoolsPluginsStore,\n ExtensionSupportedEvents,\n MessengerOptions,\n Transaction,\n} from \"@player-tools/devtools-types\";\nimport { useEffect, useMemo, useReducer, useRef } from \"react\";\nimport { useCommunicationLayer } from \"../communication-layer\";\nimport { reducer } from \"./reducer\";\n\nconst INITIAL_STATE: DevtoolsPluginsStore = {\n messages: [],\n plugins: {},\n interactions: [],\n currentPlayer: \"\",\n};\n\n/** devtools plugin state */\nexport const usePluginState = ({\n playerID,\n}: {\n playerID: string;\n}): [\n DevtoolsPluginsStore,\n React.Dispatch<Transaction<ExtensionSupportedEvents>>\n] => {\n const [state, dispatch] = useReducer(reducer, INITIAL_STATE);\n const lastMessageIndex = useRef<number>(-1);\n const { sendMessage, addListener, removeListener } = useCommunicationLayer();\n\n const messenger = useMemo(() => {\n const options: MessengerOptions<ExtensionSupportedEvents> = {\n id: playerID,\n context: \"player\",\n messageCallback: (message) =>\n dispatch(message as Parameters<typeof dispatch>[0]),\n sendMessage,\n addListener,\n removeListener,\n logger: console,\n };\n\n return new Messenger(options);\n }, [addListener, removeListener, sendMessage]);\n\n useEffect(() => {\n if (state.messages.length > lastMessageIndex.current + 1) {\n const messages = state.messages.slice(\n lastMessageIndex.current + 1,\n state.messages.length\n );\n lastMessageIndex.current = state.messages.length - 1;\n messages.forEach((message) => {\n messenger.sendMessage(message);\n });\n }\n }, [state.messages, messenger]);\n\n return [state, dispatch];\n};\n"],"mappings":";AAMA,SAAS,WAAW,gBAAgB;AACpC,SAAuC,qBAAqB;AAc5D,IAAI,oBAAoD;AAGjD,IAAM,yBAAyB,CACpC,sBAGG;AACH,QAAM,YAIF,CAAC;AAEL,MAAI,CAAC,mBAAmB;AACtB,kBACG,MAAM,oBAAoB,EAC1B,KAAK,MAAM;AACV,oBAAc,UAAU;AAAA,QACtB,QAAQ;AACN,iBAAO;AAAA,QACT;AAAA,QACA,UAAU,MAAM;AACd,8BAAoB;AAEpB,eAAK,QAAQ,oBAAoB,CAAC,YAAY;AAC5C,sBAAU,QAAQ,CAAC,aAAa,SAAS,OAAO,CAAC;AAAA,UACnD,CAAC;AAAA,QACH;AAAA,QACA,eAAe;AACb,kBAAQ,IAAI,6BAA6B;AACzC,8BAAoB;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,cAAQ,MAAM,kCAAkC,KAAK;AAAA,IACvD,CAAC;AAAA,EACL;AAEA,QAAM,cAAwD,OAC5D,YACG;AACH,uBAAmB,KAAK,mBAAmB,OAAO;AAAA,EACpD;AAEA,QAAM,cAAwD,CAAC,aAAa;AAC1E,cAAU,KAAK,QAAQ;AAAA,EACzB;AAEA,oBAAkB,CAAC,aAAa;AAAA,IAC9B,aAAa,CAAC,GAAG,QAAQ,aAAa,WAAW;AAAA,IACjD,aAAa,CAAC,GAAG,QAAQ,aAAa,WAAW;AAAA,IACjD,gBAAgB,QAAQ;AAAA,EAC1B,EAAE;AACJ;AAGO,IAAM,wBAAwB,MAGhC;AACH,QAAM,4BAA4B,aAAa;AAAA,IAC7C;AAAA,EACF;AAEA,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAoB;AAAA,IAC9D,aAAa,CAAC;AAAA,IACd,aAAa,CAAC;AAAA,IACd,gBAAgB,CAAC;AAAA,EACnB,CAAC;AAED,YAAU,MAAM;AACd,QAAI,8BAA8B,QAAQ;AACxC,6BAAuB,iBAAiB;AAAA,IAC1C,OAAO;AACL,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAEA,QAAI,iBAAyD;AAE7D,sBAAkB,CAAC,aAAa;AAAA,MAC9B,aAAa;AAAA,QACX,GAAG,QAAQ;AAAA,QACX,OAAO,YAAY;AACjB,iBAAO,YAAY,SAAS,GAAG;AAAA,QACjC;AAAA,MACF;AAAA,MACA,aAAa;AAAA,QACX,GAAG,QAAQ;AAAA,QACX,CAAC,aAAa;AACZ,2BAAiB,CAAC,UAAwB,SAAS,MAAM,IAAI;AAC7D,iBAAO,iBAAiB,WAAW,cAAc;AAAA,QACnD;AAAA,MACF;AAAA,MACA,gBAAgB;AAAA,QACd,GAAG,QAAQ;AAAA,QACX,MAAM;AACJ,cAAI,gBAAgB;AAClB,mBAAO,oBAAoB,WAAW,cAAc;AAAA,UACtD;AAAA,QACF;AAAA,MACF;AAAA,IACF,EAAE;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,QAAM,QAGF;AAAA,IACF,aAAa,OAAO,YAAY;AAC9B,qBAAe,YAAY,QAAQ,CAAC,aAAa,SAAS,OAAO,CAAC;AAAA,IACpE;AAAA,IACA,aAAa,CAAC,aAAa;AACzB,qBAAe,YAAY,QAAQ,CAAC,aAAa,SAAS,QAAQ,CAAC;AAAA,IACrE;AAAA,IACA,gBAAgB,CAAC,aAAa;AAC5B,qBAAe,eAAe,QAAQ,CAAC,aAAa,SAAS,QAAQ,CAAC;AAAA,IACxE;AAAA,EACF;AAEA,SAAO;AACT;;;ACjJA,SAAS,eAAe;AACxB,SAAS,cAAc;AAQvB,SAAS,YAAY;AAErB,IAAM,sBAAsB,CAC1B,cACA,gBACG;AACH,SAAO,aAAa,OAAO,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC,EAAE,SAAS;AACrE;AAGO,IAAM,UAAU,CACrB,OACA,gBACyB;AACzB,UAAQ,YAAY,MAAM;AAAA,IACxB,KAAK;AACH,aAAO,QAAQ,OAAO,CAAC,UAAU;AAC/B,cAAM,EAAE,QAAQ,IAAI;AACpB,aAAK,OAAO,WAAW,QAAQ,OAAO;AAEtC,cAAM,UAA2B;AAAA,UAC/B,MAAM;AAAA,UACN;AAAA,QACF;AAEA,cAAM,SAAS,KAAK,OAAO;AAAA,MAC7B,CAAC;AAAA,IACH,KAAK;AACH,aAAO,QAAQ,OAAO,CAAC,UAAU;AAC/B,cAAM,EAAE,QAAQ,IAAI;AAEpB,YAAI,CAAC,QAAQ,KAAM,QAAO;AAE1B,YAAI;AACF;AAAA,YACE;AAAA,YACA,CAAC,WAAW,YAAY,QAAQ,UAAU,QAAQ,MAAM;AAAA,YACxD,YAAY,QAAQ;AAAA,UACtB;AAAA,QACF,QAAQ;AACN,kBAAQ,MAAM,uBAAuB,YAAY,QAAQ,IAAI;AAAA,QAC/D;AACA,cAAM,UAAmC;AAAA,UACvC,MAAM;AAAA,UACN;AAAA,QACF;AAEA,cAAM,SAAS,KAAK,OAAO;AAAA,MAC7B,CAAC;AAAA,IACH,KAAK;AACH,aAAO,QAAQ,OAAO,CAAC,UAAU;AAC/B,YAAI,oBAAoB,MAAM,cAAc,WAAW,EAAG,QAAO;AAEjE,aAAK,OAAO,CAAC,cAAc,GAAG,CAAC,GAAG,MAAM,cAAc,WAAW,CAAC;AAAA,MACpE,CAAC;AAAA,IACH,KAAK;AACH,YAAM,EAAE,SAAS,IAAI,YAAY;AAEjC,UAAI,CAAC,SAAU,QAAO;AACtB,aAAO,QAAQ,OAAO,CAAC,UAAU;AAC/B,aAAK,OAAO,iBAAiB,QAAQ;AAAA,MACvC,CAAC;AAAA,IACH;AACE,aAAO;AAAA,EACX;AACF;;;AC1EA,SAAS,iBAAiB;AAO1B,SAAS,aAAAA,YAAW,SAAS,YAAY,cAAc;AAIvD,IAAM,gBAAsC;AAAA,EAC1C,UAAU,CAAC;AAAA,EACX,SAAS,CAAC;AAAA,EACV,cAAc,CAAC;AAAA,EACf,eAAe;AACjB;AAGO,IAAM,iBAAiB,CAAC;AAAA,EAC7B;AACF,MAKK;AACH,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,SAAS,aAAa;AAC3D,QAAM,mBAAmB,OAAe,EAAE;AAC1C,QAAM,EAAE,aAAa,aAAa,eAAe,IAAI,sBAAsB;AAE3E,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,UAAsD;AAAA,MAC1D,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,iBAAiB,CAAC,YAChB,SAAS,OAAyC;AAAA,MACpD;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,IACV;AAEA,WAAO,IAAI,UAAU,OAAO;AAAA,EAC9B,GAAG,CAAC,aAAa,gBAAgB,WAAW,CAAC;AAE7C,EAAAC,WAAU,MAAM;AACd,QAAI,MAAM,SAAS,SAAS,iBAAiB,UAAU,GAAG;AACxD,YAAM,WAAW,MAAM,SAAS;AAAA,QAC9B,iBAAiB,UAAU;AAAA,QAC3B,MAAM,SAAS;AAAA,MACjB;AACA,uBAAiB,UAAU,MAAM,SAAS,SAAS;AACnD,eAAS,QAAQ,CAAC,YAAY;AAC5B,kBAAU,YAAY,OAAO;AAAA,MAC/B,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,SAAS,CAAC;AAE9B,SAAO,CAAC,OAAO,QAAQ;AACzB;","names":["useEffect","useEffect"]}
package/package.json CHANGED
@@ -6,15 +6,14 @@
6
6
  "types"
7
7
  ],
8
8
  "name": "@player-tools/devtools-desktop-plugins-common",
9
- "version": "0.8.1",
9
+ "version": "0.9.0-next.0",
10
10
  "main": "dist/cjs/index.cjs",
11
11
  "dependencies": {
12
- "@player-tools/devtools-messenger": "0.8.1",
13
- "@player-tools/devtools-types": "0.8.1",
12
+ "@player-tools/devtools-messenger": "0.9.0-next.0",
13
+ "@player-tools/devtools-types": "0.9.0-next.0",
14
14
  "dequal": "^2.0.2",
15
15
  "immer": "^10.0.3",
16
- "lodash.set": "^4.3.2",
17
- "@types/lodash.set": "^4.3.9",
16
+ "dset": "^3.1.3",
18
17
  "js-flipper": "^0.212.0",
19
18
  "tiny-uid": "^1.1.2",
20
19
  "tslib": "^2.6.2"
package/src/state/__tests__/reducer.test.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { describe, expect, test } from "vitest";
1
+ import { describe, expect, test, vi, beforeEach, afterEach } from "vitest";
2
2
  import { reducer } from "../reducer";
3
3
  import {
4
4
  DevtoolsPluginsStore,
@@ -58,6 +58,28 @@ const mockPluginDataChangeTransaction: Transaction<DevtoolsDataChangeEvent> = {
58
58
  },
59
59
  };
60
60
 
61
+ const mockPluginDataChangeTransactionWithNull: Transaction<DevtoolsDataChangeEvent> =
62
+ {
63
+ ...mockTransactionMetadata,
64
+ type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
65
+ id: mockTransactionID++,
66
+ payload: {
67
+ data: { hello: null },
68
+ pluginID: "test",
69
+ },
70
+ };
71
+
72
+ const mockPluginDataChangeTransactionWithUndefined: Transaction<DevtoolsDataChangeEvent> =
73
+ {
74
+ ...mockTransactionMetadata,
75
+ type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
76
+ id: mockTransactionID++,
77
+ payload: {
78
+ data: { hello: null },
79
+ pluginID: "test",
80
+ },
81
+ };
82
+
61
83
  const mockPluginInteractionTransaction: Transaction<DevtoolsPluginInteractionEvent> =
62
84
  {
63
85
  ...mockTransactionMetadata,
@@ -164,7 +186,7 @@ describe("reducer", () => {
164
186
  {
165
187
  "_messenger_": true,
166
188
  "context": "devtools",
167
- "id": 3,
189
+ "id": 5,
168
190
  "payload": {
169
191
  "payload": "{"expression": "{{foo.bar}}"}",
170
192
  "type": "evaluate-expression",
@@ -194,4 +216,70 @@ describe("reducer", () => {
194
216
  }
195
217
  `);
196
218
  });
219
+
220
+ test("should handle PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE action with valid data", () => {
221
+ const result = reducer(INITIAL_STATE, mockPluginDataChangeTransaction);
222
+ expect(result.plugins.test).toBeDefined();
223
+ expect(result.plugins.test.flow.data).toEqual({ foo: "bar" });
224
+ expect(result.messages).toHaveLength(1);
225
+ expect(result.messages[0].type).toEqual(
226
+ "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE"
227
+ );
228
+ });
229
+
230
+ test("should handle PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE action when data is null", () => {
231
+ const transaction = {
232
+ type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
233
+ plugins: [],
234
+ messages: [],
235
+ };
236
+ const result = reducer(
237
+ transaction,
238
+ mockPluginDataChangeTransactionWithNull
239
+ );
240
+
241
+ expect(result.messages).toHaveLength(1);
242
+ expect(result.plugins.test).toBeUndefined();
243
+ });
244
+
245
+ test("should handle PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE action when data is undefined", () => {
246
+ const transaction = {
247
+ type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
248
+ plugins: [],
249
+ messages: [],
250
+ };
251
+ const result = reducer(
252
+ transaction,
253
+ mockPluginDataChangeTransactionWithUndefined
254
+ );
255
+
256
+ expect(result.messages).toHaveLength(1);
257
+ expect(result.plugins.test).toBeUndefined();
258
+ });
259
+
260
+ test("should not overwrite when there are two plugins", () => {
261
+ const transaction = {
262
+ ...INITIAL_STATE,
263
+ messages: [],
264
+ plugins: {
265
+ multiple: {
266
+ flow: {
267
+ data: {
268
+ hello: "world",
269
+ },
270
+ },
271
+ },
272
+ },
273
+ interactions: [],
274
+ currentPlayer: "",
275
+ type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
276
+ payload: {
277
+ pluginID: "plugin-1",
278
+ data: undefined,
279
+ },
280
+ };
281
+
282
+ const newState = reducer(transaction, mockPluginDataChangeTransaction);
283
+ expect(Object.keys(newState.plugins).length).toEqual(2);
284
+ });
197
285
  });
package/src/state/reducer.ts CHANGED
@@ -7,7 +7,7 @@ import type {
7
7
  PlayerInitEvent,
8
8
  Transaction,
9
9
  } from "@player-tools/devtools-types";
10
- import set from "lodash.set";
10
+ import { dset } from "dset/merge";
11
11
 
12
12
  const containsInteraction = (
13
13
  interactions: DevtoolsPluginsStore["interactions"],
@@ -25,7 +25,7 @@ export const reducer = (
25
25
  case "PLAYER_DEVTOOLS_PLAYER_INIT":
26
26
  return produce(state, (draft) => {
27
27
  const { payload } = transaction;
28
- set(draft, "plugins", payload.plugins);
28
+ dset(draft, "plugins", payload.plugins);
29
29
 
30
30
  const message: PlayerInitEvent = {
31
31
  type: "PLAYER_DEVTOOLS_PLAYER_INIT",
@@ -40,12 +40,15 @@ export const reducer = (
40
40
 
41
41
  if (!payload.data) return state;
42
42
 
43
- set(
44
- draft.plugins,
45
- [transaction.payload.pluginID, "flow", "data"],
46
- transaction.payload.data
47
- );
48
-
43
+ try {
44
+ dset(
45
+ draft,
46
+ ["plugins", transaction.payload.pluginID, "flow", "data"],
47
+ transaction.payload.data
48
+ );
49
+ } catch {
50
+ console.error("error setting data:", transaction.payload.data);
51
+ }
49
52
  const message: DevtoolsDataChangeEvent = {
50
53
  type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
51
54
  payload,
@@ -57,14 +60,14 @@ export const reducer = (
57
60
  return produce(state, (draft) => {
58
61
  if (containsInteraction(draft.interactions, transaction)) return state;
59
62
 
60
- set(draft, ["interactions"], [...draft.interactions, transaction]);
63
+ dset(draft, ["interactions"], [...draft.interactions, transaction]);
61
64
  });
62
65
  case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE":
63
66
  const { playerID } = transaction.payload;
64
67
 
65
68
  if (!playerID) return state;
66
69
  return produce(state, (draft) => {
67
- set(draft, "currentPlayer", playerID);
70
+ dset(draft, "currentPlayer", playerID);
68
71
  });
69
72
  default:
70
73
  return state;