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

package/dist/cjs/index.cjs

@@ -171,6 +171,12 @@ var reducer = (state, transaction) => {
         if (containsInteraction(draft.interactions, transaction)) return state;
         (0, import_lodash.default)(draft, ["interactions"], [...draft.interactions, transaction]);
       });
+    case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE":
+      const { playerID } = transaction.payload;
+      if (!playerID) return state;
+      return (0, import_immer.produce)(state, (draft) => {
+        (0, import_lodash.default)(draft, "currentPlayer", playerID);
+      });
     default:
       return state;
   }
@@ -179,14 +185,15 @@ var reducer = (state, transaction) => {
 // ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/usePluginState.ts
 var import_devtools_messenger = require("@player-tools/devtools-messenger");
 var import_react2 = require("react");
-var import_tiny_uid = __toESM(require("tiny-uid"));
-var playerID = (0, import_tiny_uid.default)();
 var INITIAL_STATE = {
   messages: [],
   plugins: {},
-  interactions: []
+  interactions: [],
+  currentPlayer: ""
 };
-var usePluginState = () => {
+var usePluginState = ({
+  playerID
+}) => {
   const [state, dispatch] = (0, import_react2.useReducer)(reducer, INITIAL_STATE);
   const lastMessageIndex = (0, import_react2.useRef)(-1);
   const { sendMessage, addListener, removeListener } = useCommunicationLayer();
@@ -214,7 +221,7 @@ var usePluginState = () => {
       });
     }
   }, [state.messages, messenger]);
-  return [state, playerID, dispatch];
+  return [state, dispatch];
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/index.cjs.map

@@ -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    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 uid from \"tiny-uid\";\nimport { useCommunicationLayer } from \"../communication-layer\";\nimport { reducer } from \"./reducer\";\n\nconst playerID = uid();\n\nconst INITIAL_STATE: DevtoolsPluginsStore = {\n  messages: [],\n  plugins: {},\n  interactions: [],\n};\n\n/** devtools plugin state */\nexport const usePluginState = (): [\n  DevtoolsPluginsStore,\n  string,\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, playerID, dispatch];\n};\n"],"mappings":"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","names":["set","import_react","uid"]}
+{"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"]}

package/dist/index.legacy-esm.js

@@ -132,6 +132,12 @@ var reducer = (state, transaction) => {
         if (containsInteraction(draft.interactions, transaction)) return state;
         set(draft, ["interactions"], [...draft.interactions, transaction]);
       });
+    case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE":
+      const { playerID } = transaction.payload;
+      if (!playerID) return state;
+      return produce(state, (draft) => {
+        set(draft, "currentPlayer", playerID);
+      });
     default:
       return state;
   }
@@ -140,14 +146,15 @@ var reducer = (state, transaction) => {
 // ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/usePluginState.ts
 import { Messenger } from "@player-tools/devtools-messenger";
 import { useEffect as useEffect2, useMemo, useReducer, useRef } from "react";
-import uid from "tiny-uid";
-var playerID = uid();
 var INITIAL_STATE = {
   messages: [],
   plugins: {},
-  interactions: []
+  interactions: [],
+  currentPlayer: ""
 };
-var usePluginState = () => {
+var usePluginState = ({
+  playerID
+}) => {
   const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
   const lastMessageIndex = useRef(-1);
   const { sendMessage, addListener, removeListener } = useCommunicationLayer();
@@ -175,7 +182,7 @@ var usePluginState = () => {
       });
     }
   }, [state.messages, messenger]);
-  return [state, playerID, dispatch];
+  return [state, dispatch];
 };
 export {
   reducer,

package/dist/index.mjs

@@ -132,6 +132,12 @@ var reducer = (state, transaction) => {
         if (containsInteraction(draft.interactions, transaction)) return state;
         set(draft, ["interactions"], [...draft.interactions, transaction]);
       });
+    case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE":
+      const { playerID } = transaction.payload;
+      if (!playerID) return state;
+      return produce(state, (draft) => {
+        set(draft, "currentPlayer", playerID);
+      });
     default:
       return state;
   }
@@ -140,14 +146,15 @@ var reducer = (state, transaction) => {
 // ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/usePluginState.ts
 import { Messenger } from "@player-tools/devtools-messenger";
 import { useEffect as useEffect2, useMemo, useReducer, useRef } from "react";
-import uid from "tiny-uid";
-var playerID = uid();
 var INITIAL_STATE = {
   messages: [],
   plugins: {},
-  interactions: []
+  interactions: [],
+  currentPlayer: ""
 };
-var usePluginState = () => {
+var usePluginState = ({
+  playerID
+}) => {
   const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
   const lastMessageIndex = useRef(-1);
   const { sendMessage, addListener, removeListener } = useCommunicationLayer();
@@ -175,7 +182,7 @@ var usePluginState = () => {
       });
     }
   }, [state.messages, messenger]);
-  return [state, playerID, dispatch];
+  return [state, dispatch];
 };
 export {
   reducer,

package/dist/index.mjs.map

@@ -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    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 uid from \"tiny-uid\";\nimport { useCommunicationLayer } from \"../communication-layer\";\nimport { reducer } from \"./reducer\";\n\nconst playerID = uid();\n\nconst INITIAL_STATE: DevtoolsPluginsStore = {\n  messages: [],\n  plugins: {},\n  interactions: [],\n};\n\n/** devtools plugin state */\nexport const usePluginState = (): [\n  DevtoolsPluginsStore,\n  string,\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, playerID, dispatch];\n};\n"],"mappings":"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","names":["useEffect","useEffect"]}
+{"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"]}

package/package.json

@@ -1,10 +1,16 @@
 {
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
   "name": "@player-tools/devtools-desktop-plugins-common",
-  "version": "0.8.0-next.0",
+  "version": "0.8.0",
   "main": "dist/cjs/index.cjs",
   "dependencies": {
-    "@player-tools/devtools-messenger": "0.8.0-next.0",
-    "@player-tools/devtools-types": "0.8.0-next.0",
+    "@player-tools/devtools-messenger": "0.8.0",
+    "@player-tools/devtools-types": "0.8.0",
     "dequal": "^2.0.2",
     "immer": "^10.0.3",
     "lodash.set": "^4.3.2",
@@ -15,7 +21,6 @@
   },
   "module": "dist/index.legacy-esm.js",
   "types": "types/index.d.ts",
-  "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
     "./dist/index.css": "./dist/index.css",
@@ -25,11 +30,6 @@
       "default": "./dist/cjs/index.cjs"
     }
   },
-  "files": [
-    "dist",
-    "src",
-    "types"
-  ],
   "peerDependencies": {
     "react": "^18.2.0",
     "@types/react": "^18.2.51"

package/src/state/__tests__/reducer.test.ts

@@ -6,12 +6,14 @@ import {
   DevtoolsDataChangeEvent,
   PlayerInitEvent,
   DevtoolsPluginInteractionEvent,
+  DevtoolsPluginSelectedPlayerEvent,
 } from "@player-tools/devtools-types";
 
 const INITIAL_STATE: DevtoolsPluginsStore = {
   messages: [],
   plugins: {},
   interactions: [],
+  currentPlayer: "",
 };
 
 let mockTransactionID = 1;
@@ -67,11 +69,22 @@ const mockPluginInteractionTransaction: Transaction<DevtoolsPluginInteractionEve
     },
   };
 
+const mockDevtoolSelectedPlayerChangeInteractionTransaction: Transaction<DevtoolsPluginSelectedPlayerEvent> =
+  {
+    ...mockTransactionMetadata,
+    type: "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE",
+    id: mockTransactionID++,
+    payload: {
+      playerID: "playerID",
+    },
+  };
+
 describe("reducer", () => {
   test("handles PLAYER_DEVTOOLS_PLAYER_INIT", () => {
     const newState = reducer(INITIAL_STATE, mockPlayerInitTransaction);
     expect(newState).toMatchInlineSnapshot(`
       {
+        "currentPlayer": "",
         "interactions": [],
         "messages": [
           {
@@ -116,6 +129,7 @@ describe("reducer", () => {
     const newState = reducer(INITIAL_STATE, mockPluginDataChangeTransaction);
     expect(newState).toMatchInlineSnapshot(`
       {
+        "currentPlayer": "",
         "interactions": [],
         "messages": [
           {
@@ -145,6 +159,7 @@ describe("reducer", () => {
     const newState = reducer(INITIAL_STATE, mockPluginInteractionTransaction);
     expect(newState).toMatchInlineSnapshot(`
       {
+        "currentPlayer": "",
         "interactions": [
           {
             "_messenger_": true,
@@ -165,4 +180,18 @@ describe("reducer", () => {
       }
     `);
   });
+  test("handles PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE", () => {
+    const newState = reducer(
+      INITIAL_STATE,
+      mockDevtoolSelectedPlayerChangeInteractionTransaction
+    );
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "currentPlayer": "playerID",
+        "interactions": [],
+        "messages": [],
+        "plugins": {},
+      }
+    `);
+  });
 });

package/src/state/reducer.ts

@@ -59,6 +59,13 @@ export const reducer = (
 
         set(draft, ["interactions"], [...draft.interactions, transaction]);
       });
+    case "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE":
+      const { playerID } = transaction.payload;
+
+      if (!playerID) return state;
+      return produce(state, (draft) => {
+        set(draft, "currentPlayer", playerID);
+      });
     default:
       return state;
   }

package/src/state/usePluginState.ts

@@ -6,22 +6,23 @@ import type {
   Transaction,
 } from "@player-tools/devtools-types";
 import { useEffect, useMemo, useReducer, useRef } from "react";
-import uid from "tiny-uid";
 import { useCommunicationLayer } from "../communication-layer";
 import { reducer } from "./reducer";
 
-const playerID = uid();
-
 const INITIAL_STATE: DevtoolsPluginsStore = {
   messages: [],
   plugins: {},
   interactions: [],
+  currentPlayer: "",
 };
 
 /** devtools plugin state */
-export const usePluginState = (): [
+export const usePluginState = ({
+  playerID,
+}: {
+  playerID: string;
+}): [
   DevtoolsPluginsStore,
-  string,
   React.Dispatch<Transaction<ExtensionSupportedEvents>>
 ] => {
   const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
@@ -56,5 +57,5 @@ export const usePluginState = (): [
     }
   }, [state.messages, messenger]);
 
-  return [state, playerID, dispatch];
+  return [state, dispatch];
 };

package/types/state/usePluginState.d.ts

@@ -1,4 +1,6 @@
 import type { DevtoolsPluginsStore, ExtensionSupportedEvents, Transaction } from "@player-tools/devtools-types";
 /** devtools plugin state */
-export declare const usePluginState: () => [DevtoolsPluginsStore, string, React.Dispatch<Transaction<ExtensionSupportedEvents>>];
+export declare const usePluginState: ({ playerID, }: {
+    playerID: string;
+}) => [DevtoolsPluginsStore, React.Dispatch<Transaction<ExtensionSupportedEvents>>];
 //# sourceMappingURL=usePluginState.d.ts.map