@player-tools/devtools-desktop-plugins-common 0.10.0-next.0 → 0.10.1

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 (11) hide show
  1. package/dist/cjs/index.cjs +2 -1
  2. package/dist/cjs/index.cjs.map +1 -1
  3. package/dist/index.legacy-esm.js +2 -1
  4. package/dist/index.mjs +2 -1
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +3 -3
  7. package/src/communication-layer/__tests__/index.test.ts +1 -1
  8. package/src/communication-layer/index.ts +6 -6
  9. package/src/state/__tests__/reducer.test.ts +5 -5
  10. package/src/state/reducer.ts +5 -4
  11. package/src/state/usePluginState.ts +2 -2
package/dist/cjs/index.cjs CHANGED
@@ -165,12 +165,13 @@ var reducer = (state, transaction) => {
165
165
  if (containsInteraction(draft.interactions, transaction)) return state;
166
166
  (0, import_merge.dset)(draft, ["interactions"], [...draft.interactions, transaction]);
167
167
  });
168
- case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE":
168
+ case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE": {
169
169
  const { playerID } = transaction.payload;
170
170
  if (!playerID) return state;
171
171
  return (0, import_immer.produce)(state, (draft) => {
172
172
  (0, import_merge.dset)(draft, "currentPlayer", playerID);
173
173
  });
174
+ }
174
175
  default:
175
176
  return state;
176
177
  }
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 { 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"]}
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 }\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
@@ -136,12 +136,13 @@ var reducer = (state, transaction) => {
136
136
  if (containsInteraction(draft.interactions, transaction)) return state;
137
137
  dset(draft, ["interactions"], [...draft.interactions, transaction]);
138
138
  });
139
- case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE":
139
+ case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE": {
140
140
  const { playerID } = transaction.payload;
141
141
  if (!playerID) return state;
142
142
  return produce(state, (draft) => {
143
143
  dset(draft, "currentPlayer", playerID);
144
144
  });
145
+ }
145
146
  default:
146
147
  return state;
147
148
  }
package/dist/index.mjs CHANGED
@@ -136,12 +136,13 @@ var reducer = (state, transaction) => {
136
136
  if (containsInteraction(draft.interactions, transaction)) return state;
137
137
  dset(draft, ["interactions"], [...draft.interactions, transaction]);
138
138
  });
139
- case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE":
139
+ case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE": {
140
140
  const { playerID } = transaction.payload;
141
141
  if (!playerID) return state;
142
142
  return produce(state, (draft) => {
143
143
  dset(draft, "currentPlayer", playerID);
144
144
  });
145
+ }
145
146
  default:
146
147
  return state;
147
148
  }
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 { 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":["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 }\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"]}
package/package.json CHANGED
@@ -6,11 +6,11 @@
6
6
  "types"
7
7
  ],
8
8
  "name": "@player-tools/devtools-desktop-plugins-common",
9
- "version": "0.10.0-next.0",
9
+ "version": "0.10.1",
10
10
  "main": "dist/cjs/index.cjs",
11
11
  "dependencies": {
12
- "@player-tools/devtools-messenger": "0.10.0-next.0",
13
- "@player-tools/devtools-types": "0.10.0-next.0",
12
+ "@player-tools/devtools-messenger": "0.10.1",
13
+ "@player-tools/devtools-types": "0.10.1",
14
14
  "dequal": "^2.0.2",
15
15
  "immer": "^10.0.3",
16
16
  "dset": "^3.1.3",
package/src/communication-layer/__tests__/index.test.ts CHANGED
@@ -37,7 +37,7 @@ describe("useCommunicationLayer", () => {
37
37
  const { result } = renderHook(() => useCommunicationLayer());
38
38
  expect(flipperClient.start).not.toHaveBeenCalled();
39
39
  expect(consoleWarnSpy).toHaveBeenCalledWith(
40
- "The Flipper connection is disabled. If you want to enable it, use the Player UI extension popup."
40
+ "The Flipper connection is disabled. If you want to enable it, use the Player UI extension popup.",
41
41
  );
42
42
  expect(result.current).toMatchInlineSnapshot(`
43
43
  {
package/src/communication-layer/index.ts CHANGED
@@ -24,12 +24,12 @@ let flipperConnection: FlipperPluginConnection | null = null;
24
24
  /** Adds a Flipper client and starts the connection */
25
25
  export const startFlipperConnection = (
26
26
  setLayerCallbacks: (
27
- value: React.SetStateAction<IntoArrays<CommunicationLayerMethods>>
28
- ) => void
27
+ value: React.SetStateAction<IntoArrays<CommunicationLayerMethods>>,
28
+ ) => void,
29
29
  ) => {
30
30
  const listeners: Array<
31
31
  (
32
- message: TransactionMetadata & MessengerEvent<ExtensionSupportedEvents>
32
+ message: TransactionMetadata & MessengerEvent<ExtensionSupportedEvents>,
33
33
  ) => void
34
34
  > = [];
35
35
 
@@ -60,7 +60,7 @@ export const startFlipperConnection = (
60
60
  }
61
61
 
62
62
  const sendMessage: CommunicationLayerMethods["sendMessage"] = async (
63
- message
63
+ message,
64
64
  ) => {
65
65
  flipperConnection?.send("message::plugin", message);
66
66
  };
@@ -82,7 +82,7 @@ export const useCommunicationLayer = (): Pick<
82
82
  "sendMessage" | "addListener" | "removeListener"
83
83
  > => {
84
84
  const flipperConnectionIsActive = localStorage.getItem(
85
- "player-ui-devtools-flipper-active"
85
+ "player-ui-devtools-flipper-active",
86
86
  );
87
87
 
88
88
  const [layerCallbacks, setLayerCallbacks] = useState<Callbacks>({
@@ -96,7 +96,7 @@ export const useCommunicationLayer = (): Pick<
96
96
  startFlipperConnection(setLayerCallbacks);
97
97
  } else {
98
98
  console.warn(
99
- "The Flipper connection is disabled. If you want to enable it, use the Player UI extension popup."
99
+ "The Flipper connection is disabled. If you want to enable it, use the Player UI extension popup.",
100
100
  );
101
101
  }
102
102
 
package/src/state/__tests__/reducer.test.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { describe, expect, test, vi, beforeEach, afterEach } from "vitest";
1
+ import { describe, expect, test } from "vitest";
2
2
  import { reducer } from "../reducer";
3
3
  import {
4
4
  DevtoolsPluginsStore,
@@ -205,7 +205,7 @@ describe("reducer", () => {
205
205
  test("handles PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE", () => {
206
206
  const newState = reducer(
207
207
  INITIAL_STATE,
208
- mockDevtoolSelectedPlayerChangeInteractionTransaction
208
+ mockDevtoolSelectedPlayerChangeInteractionTransaction,
209
209
  );
210
210
  expect(newState).toMatchInlineSnapshot(`
211
211
  {
@@ -223,7 +223,7 @@ describe("reducer", () => {
223
223
  expect(result.plugins.test.flow.data).toEqual({ foo: "bar" });
224
224
  expect(result.messages).toHaveLength(1);
225
225
  expect(result.messages[0].type).toEqual(
226
- "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE"
226
+ "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
227
227
  );
228
228
  });
229
229
 
@@ -235,7 +235,7 @@ describe("reducer", () => {
235
235
  };
236
236
  const result = reducer(
237
237
  transaction,
238
- mockPluginDataChangeTransactionWithNull
238
+ mockPluginDataChangeTransactionWithNull,
239
239
  );
240
240
 
241
241
  expect(result.messages).toHaveLength(1);
@@ -250,7 +250,7 @@ describe("reducer", () => {
250
250
  };
251
251
  const result = reducer(
252
252
  transaction,
253
- mockPluginDataChangeTransactionWithUndefined
253
+ mockPluginDataChangeTransactionWithUndefined,
254
254
  );
255
255
 
256
256
  expect(result.messages).toHaveLength(1);
package/src/state/reducer.ts CHANGED
@@ -11,7 +11,7 @@ import { dset } from "dset/merge";
11
11
 
12
12
  const containsInteraction = (
13
13
  interactions: DevtoolsPluginsStore["interactions"],
14
- interaction: DevtoolsPluginsStore["interactions"][number]
14
+ interaction: DevtoolsPluginsStore["interactions"][number],
15
15
  ) => {
16
16
  return interactions.filter((i) => dequal(i, interaction)).length > 0;
17
17
  };
@@ -19,7 +19,7 @@ const containsInteraction = (
19
19
  /** devtools plugin state reducer */
20
20
  export const reducer = (
21
21
  state: DevtoolsPluginsStore,
22
- transaction: Transaction<ExtensionSupportedEvents>
22
+ transaction: Transaction<ExtensionSupportedEvents>,
23
23
  ): DevtoolsPluginsStore => {
24
24
  switch (transaction.type) {
25
25
  case "PLAYER_DEVTOOLS_PLAYER_INIT":
@@ -44,7 +44,7 @@ export const reducer = (
44
44
  dset(
45
45
  draft,
46
46
  ["plugins", transaction.payload.pluginID, "flow", "data"],
47
- transaction.payload.data
47
+ transaction.payload.data,
48
48
  );
49
49
  } catch {
50
50
  console.error("error setting data:", transaction.payload.data);
@@ -62,13 +62,14 @@ export const reducer = (
62
62
 
63
63
  dset(draft, ["interactions"], [...draft.interactions, transaction]);
64
64
  });
65
- case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE":
65
+ case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE": {
66
66
  const { playerID } = transaction.payload;
67
67
 
68
68
  if (!playerID) return state;
69
69
  return produce(state, (draft) => {
70
70
  dset(draft, "currentPlayer", playerID);
71
71
  });
72
+ }
72
73
  default:
73
74
  return state;
74
75
  }
package/src/state/usePluginState.ts CHANGED
@@ -23,7 +23,7 @@ export const usePluginState = ({
23
23
  playerID: string;
24
24
  }): [
25
25
  DevtoolsPluginsStore,
26
- React.Dispatch<Transaction<ExtensionSupportedEvents>>
26
+ React.Dispatch<Transaction<ExtensionSupportedEvents>>,
27
27
  ] => {
28
28
  const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
29
29
  const lastMessageIndex = useRef<number>(-1);
@@ -48,7 +48,7 @@ export const usePluginState = ({
48
48
  if (state.messages.length > lastMessageIndex.current + 1) {
49
49
  const messages = state.messages.slice(
50
50
  lastMessageIndex.current + 1,
51
- state.messages.length
51
+ state.messages.length,
52
52
  );
53
53
  lastMessageIndex.current = state.messages.length - 1;
54
54
  messages.forEach((message) => {