@player-tools/devtools-desktop-plugins-common 0.5.3--canary.90.2515

package/dist/cjs/index.cjs

@@ -0,0 +1,219 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  reducer: () => reducer,
+  startFlipperConnection: () => startFlipperConnection,
+  useCommunicationLayer: () => useCommunicationLayer,
+  usePluginState: () => usePluginState
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/communication-layer/index.ts
+var import_react = require("react");
+var import_js_flipper = require("js-flipper");
+var flipperConnection = null;
+var startFlipperConnection = (setLayerCallbacks) => {
+  const listeners = [];
+  if (!flipperConnection) {
+    import_js_flipper.flipperClient.start("player-ui-devtools").then(() => {
+      import_js_flipper.flipperClient.addPlugin({
+        getId() {
+          return "player-ui-devtools";
+        },
+        onConnect(conn) {
+          flipperConnection = conn;
+          conn.receive("message::flipper", (message) => {
+            listeners.forEach((listener) => listener(message));
+          });
+        },
+        onDisconnect() {
+          console.log("Flipper client disconnected");
+          flipperConnection = null;
+        }
+      });
+    }).catch((error) => {
+      console.error("Failed to start Flipper client", error);
+    });
+  }
+  const sendMessage = async (message) => {
+    flipperConnection?.send("message::plugin", message);
+  };
+  const addListener = (listener) => {
+    listeners.push(listener);
+  };
+  setLayerCallbacks((current) => ({
+    sendMessage: [...current.sendMessage, sendMessage],
+    addListener: [...current.addListener, addListener],
+    removeListener: current.removeListener
+  }));
+};
+var useCommunicationLayer = () => {
+  const [layerCallbacks, setLayerCallbacks] = (0, import_react.useState)({
+    sendMessage: [],
+    addListener: [],
+    removeListener: []
+  });
+  (0, import_react.useEffect)(() => {
+    startFlipperConnection(setLayerCallbacks);
+    let windowListener = null;
+    setLayerCallbacks((current) => ({
+      sendMessage: [
+        ...current.sendMessage,
+        async (message) => {
+          window.postMessage(message, "*");
+        }
+      ],
+      addListener: [
+        ...current.addListener,
+        (listener) => {
+          windowListener = (event) => listener(event.data);
+          window.addEventListener("message", windowListener);
+        }
+      ],
+      removeListener: [
+        ...current.removeListener,
+        () => {
+          if (windowListener) {
+            window.removeEventListener("message", windowListener);
+          }
+        }
+      ]
+    }));
+  }, []);
+  const layer = {
+    sendMessage: async (message) => {
+      layerCallbacks.sendMessage.forEach((callback) => callback(message));
+    },
+    addListener: (listener) => {
+      layerCallbacks.addListener.forEach((callback) => callback(listener));
+    },
+    removeListener: (listener) => {
+      layerCallbacks.removeListener.forEach((callback) => callback(listener));
+    }
+  };
+  return layer;
+};
+
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/reducer.ts
+var import_immer = require("immer");
+var import_merge = require("dset/merge");
+var import_dequal = require("dequal");
+var containsInteraction = (interactions, interaction) => {
+  return interactions.filter((i) => (0, import_dequal.dequal)(i, interaction)).length > 0;
+};
+var reducer = (state, transaction) => {
+  switch (transaction.type) {
+    case "PLAYER_DEVTOOLS_PLAYER_INIT":
+      return (0, import_immer.produce)(state, (draft) => {
+        const { payload } = transaction;
+        (0, import_merge.dset)(draft, "plugins", payload.plugins);
+        const message = {
+          type: "PLAYER_DEVTOOLS_PLAYER_INIT",
+          payload
+        };
+        draft.messages.push(message);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE":
+      return (0, import_immer.produce)(state, (draft) => {
+        const { payload } = transaction;
+        if (!payload.data)
+          return state;
+        (0, import_merge.dset)(
+          draft.plugins,
+          [transaction.payload.pluginID, "flow", "data"],
+          transaction.payload.data
+        );
+        const message = {
+          type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
+          payload
+        };
+        draft.messages.push(message);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_INTERACTION":
+      return (0, import_immer.produce)(state, (draft) => {
+        if (containsInteraction(draft.interactions, transaction))
+          return state;
+        (0, import_merge.dset)(draft, ["interactions"], [...draft.interactions, transaction]);
+      });
+    default:
+      return state;
+  }
+};
+
+// ../../../../../../../../../../../../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: []
+};
+var usePluginState = () => {
+  const [state, dispatch] = (0, import_react2.useReducer)(reducer, INITIAL_STATE);
+  const lastMessageIndex = (0, import_react2.useRef)(-1);
+  const { sendMessage, addListener, removeListener } = useCommunicationLayer();
+  const messenger = (0, import_react2.useMemo)(() => {
+    const options = {
+      id: playerID,
+      context: "player",
+      messageCallback: (message) => dispatch(message),
+      sendMessage,
+      addListener,
+      removeListener,
+      logger: console
+    };
+    return new import_devtools_messenger.Messenger(options);
+  }, [addListener, removeListener, sendMessage]);
+  (0, import_react2.useEffect)(() => {
+    if (state.messages.length > lastMessageIndex.current + 1) {
+      const messages = state.messages.slice(
+        lastMessageIndex.current + 1,
+        state.messages.length
+      );
+      lastMessageIndex.current = state.messages.length - 1;
+      messages.forEach((message) => {
+        messenger.sendMessage(message);
+      });
+    }
+  }, [state.messages, messenger]);
+  return [state, playerID, dispatch];
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  reducer,
+  startFlipperConnection,
+  useCommunicationLayer,
+  usePluginState
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +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\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 [layerCallbacks, setLayerCallbacks] = useState<Callbacks>({\n    sendMessage: [],\n    addListener: [],\n    removeListener: [],\n  });\n\n  useEffect(() => {\n    startFlipperConnection(setLayerCallbacks);\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 { dset } from \"dset/merge\";\nimport { dequal } from \"dequal\";\nimport type {\n  DevtoolsDataChangeEvent,\n  DevtoolsPluginsStore,\n  ExtensionSupportedEvents,\n  PlayerInitEvent,\n  Transaction,\n} from \"@player-tools/devtools-types\";\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        dset(\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        dset(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":["import_react","uid"]}

package/dist/index.legacy-esm.js

@@ -0,0 +1,179 @@
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/communication-layer/index.ts
+import { useEffect, useState } from "react";
+import { flipperClient } from "js-flipper";
+var flipperConnection = null;
+var startFlipperConnection = (setLayerCallbacks) => {
+  const listeners = [];
+  if (!flipperConnection) {
+    flipperClient.start("player-ui-devtools").then(() => {
+      flipperClient.addPlugin({
+        getId() {
+          return "player-ui-devtools";
+        },
+        onConnect(conn) {
+          flipperConnection = conn;
+          conn.receive("message::flipper", (message) => {
+            listeners.forEach((listener) => listener(message));
+          });
+        },
+        onDisconnect() {
+          console.log("Flipper client disconnected");
+          flipperConnection = null;
+        }
+      });
+    }).catch((error) => {
+      console.error("Failed to start Flipper client", error);
+    });
+  }
+  const sendMessage = async (message) => {
+    flipperConnection?.send("message::plugin", message);
+  };
+  const addListener = (listener) => {
+    listeners.push(listener);
+  };
+  setLayerCallbacks((current) => ({
+    sendMessage: [...current.sendMessage, sendMessage],
+    addListener: [...current.addListener, addListener],
+    removeListener: current.removeListener
+  }));
+};
+var useCommunicationLayer = () => {
+  const [layerCallbacks, setLayerCallbacks] = useState({
+    sendMessage: [],
+    addListener: [],
+    removeListener: []
+  });
+  useEffect(() => {
+    startFlipperConnection(setLayerCallbacks);
+    let windowListener = null;
+    setLayerCallbacks((current) => ({
+      sendMessage: [
+        ...current.sendMessage,
+        async (message) => {
+          window.postMessage(message, "*");
+        }
+      ],
+      addListener: [
+        ...current.addListener,
+        (listener) => {
+          windowListener = (event) => listener(event.data);
+          window.addEventListener("message", windowListener);
+        }
+      ],
+      removeListener: [
+        ...current.removeListener,
+        () => {
+          if (windowListener) {
+            window.removeEventListener("message", windowListener);
+          }
+        }
+      ]
+    }));
+  }, []);
+  const layer = {
+    sendMessage: async (message) => {
+      layerCallbacks.sendMessage.forEach((callback) => callback(message));
+    },
+    addListener: (listener) => {
+      layerCallbacks.addListener.forEach((callback) => callback(listener));
+    },
+    removeListener: (listener) => {
+      layerCallbacks.removeListener.forEach((callback) => callback(listener));
+    }
+  };
+  return layer;
+};
+
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/reducer.ts
+import { produce } from "immer";
+import { dset } from "dset/merge";
+import { dequal } from "dequal";
+var containsInteraction = (interactions, interaction) => {
+  return interactions.filter((i) => dequal(i, interaction)).length > 0;
+};
+var reducer = (state, transaction) => {
+  switch (transaction.type) {
+    case "PLAYER_DEVTOOLS_PLAYER_INIT":
+      return produce(state, (draft) => {
+        const { payload } = transaction;
+        dset(draft, "plugins", payload.plugins);
+        const message = {
+          type: "PLAYER_DEVTOOLS_PLAYER_INIT",
+          payload
+        };
+        draft.messages.push(message);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE":
+      return produce(state, (draft) => {
+        const { payload } = transaction;
+        if (!payload.data)
+          return state;
+        dset(
+          draft.plugins,
+          [transaction.payload.pluginID, "flow", "data"],
+          transaction.payload.data
+        );
+        const message = {
+          type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
+          payload
+        };
+        draft.messages.push(message);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_INTERACTION":
+      return produce(state, (draft) => {
+        if (containsInteraction(draft.interactions, transaction))
+          return state;
+        dset(draft, ["interactions"], [...draft.interactions, transaction]);
+      });
+    default:
+      return state;
+  }
+};
+
+// ../../../../../../../../../../../../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: []
+};
+var usePluginState = () => {
+  const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
+  const lastMessageIndex = useRef(-1);
+  const { sendMessage, addListener, removeListener } = useCommunicationLayer();
+  const messenger = useMemo(() => {
+    const options = {
+      id: playerID,
+      context: "player",
+      messageCallback: (message) => dispatch(message),
+      sendMessage,
+      addListener,
+      removeListener,
+      logger: console
+    };
+    return new Messenger(options);
+  }, [addListener, removeListener, sendMessage]);
+  useEffect2(() => {
+    if (state.messages.length > lastMessageIndex.current + 1) {
+      const messages = state.messages.slice(
+        lastMessageIndex.current + 1,
+        state.messages.length
+      );
+      lastMessageIndex.current = state.messages.length - 1;
+      messages.forEach((message) => {
+        messenger.sendMessage(message);
+      });
+    }
+  }, [state.messages, messenger]);
+  return [state, playerID, dispatch];
+};
+export {
+  reducer,
+  startFlipperConnection,
+  useCommunicationLayer,
+  usePluginState
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs

@@ -0,0 +1,179 @@
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/communication-layer/index.ts
+import { useEffect, useState } from "react";
+import { flipperClient } from "js-flipper";
+var flipperConnection = null;
+var startFlipperConnection = (setLayerCallbacks) => {
+  const listeners = [];
+  if (!flipperConnection) {
+    flipperClient.start("player-ui-devtools").then(() => {
+      flipperClient.addPlugin({
+        getId() {
+          return "player-ui-devtools";
+        },
+        onConnect(conn) {
+          flipperConnection = conn;
+          conn.receive("message::flipper", (message) => {
+            listeners.forEach((listener) => listener(message));
+          });
+        },
+        onDisconnect() {
+          console.log("Flipper client disconnected");
+          flipperConnection = null;
+        }
+      });
+    }).catch((error) => {
+      console.error("Failed to start Flipper client", error);
+    });
+  }
+  const sendMessage = async (message) => {
+    flipperConnection?.send("message::plugin", message);
+  };
+  const addListener = (listener) => {
+    listeners.push(listener);
+  };
+  setLayerCallbacks((current) => ({
+    sendMessage: [...current.sendMessage, sendMessage],
+    addListener: [...current.addListener, addListener],
+    removeListener: current.removeListener
+  }));
+};
+var useCommunicationLayer = () => {
+  const [layerCallbacks, setLayerCallbacks] = useState({
+    sendMessage: [],
+    addListener: [],
+    removeListener: []
+  });
+  useEffect(() => {
+    startFlipperConnection(setLayerCallbacks);
+    let windowListener = null;
+    setLayerCallbacks((current) => ({
+      sendMessage: [
+        ...current.sendMessage,
+        async (message) => {
+          window.postMessage(message, "*");
+        }
+      ],
+      addListener: [
+        ...current.addListener,
+        (listener) => {
+          windowListener = (event) => listener(event.data);
+          window.addEventListener("message", windowListener);
+        }
+      ],
+      removeListener: [
+        ...current.removeListener,
+        () => {
+          if (windowListener) {
+            window.removeEventListener("message", windowListener);
+          }
+        }
+      ]
+    }));
+  }, []);
+  const layer = {
+    sendMessage: async (message) => {
+      layerCallbacks.sendMessage.forEach((callback) => callback(message));
+    },
+    addListener: (listener) => {
+      layerCallbacks.addListener.forEach((callback) => callback(listener));
+    },
+    removeListener: (listener) => {
+      layerCallbacks.removeListener.forEach((callback) => callback(listener));
+    }
+  };
+  return layer;
+};
+
+// ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/common/src/state/reducer.ts
+import { produce } from "immer";
+import { dset } from "dset/merge";
+import { dequal } from "dequal";
+var containsInteraction = (interactions, interaction) => {
+  return interactions.filter((i) => dequal(i, interaction)).length > 0;
+};
+var reducer = (state, transaction) => {
+  switch (transaction.type) {
+    case "PLAYER_DEVTOOLS_PLAYER_INIT":
+      return produce(state, (draft) => {
+        const { payload } = transaction;
+        dset(draft, "plugins", payload.plugins);
+        const message = {
+          type: "PLAYER_DEVTOOLS_PLAYER_INIT",
+          payload
+        };
+        draft.messages.push(message);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE":
+      return produce(state, (draft) => {
+        const { payload } = transaction;
+        if (!payload.data)
+          return state;
+        dset(
+          draft.plugins,
+          [transaction.payload.pluginID, "flow", "data"],
+          transaction.payload.data
+        );
+        const message = {
+          type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
+          payload
+        };
+        draft.messages.push(message);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_INTERACTION":
+      return produce(state, (draft) => {
+        if (containsInteraction(draft.interactions, transaction))
+          return state;
+        dset(draft, ["interactions"], [...draft.interactions, transaction]);
+      });
+    default:
+      return state;
+  }
+};
+
+// ../../../../../../../../../../../../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: []
+};
+var usePluginState = () => {
+  const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
+  const lastMessageIndex = useRef(-1);
+  const { sendMessage, addListener, removeListener } = useCommunicationLayer();
+  const messenger = useMemo(() => {
+    const options = {
+      id: playerID,
+      context: "player",
+      messageCallback: (message) => dispatch(message),
+      sendMessage,
+      addListener,
+      removeListener,
+      logger: console
+    };
+    return new Messenger(options);
+  }, [addListener, removeListener, sendMessage]);
+  useEffect2(() => {
+    if (state.messages.length > lastMessageIndex.current + 1) {
+      const messages = state.messages.slice(
+        lastMessageIndex.current + 1,
+        state.messages.length
+      );
+      lastMessageIndex.current = state.messages.length - 1;
+      messages.forEach((message) => {
+        messenger.sendMessage(message);
+      });
+    }
+  }, [state.messages, messenger]);
+  return [state, playerID, dispatch];
+};
+export {
+  reducer,
+  startFlipperConnection,
+  useCommunicationLayer,
+  usePluginState
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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\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 [layerCallbacks, setLayerCallbacks] = useState<Callbacks>({\n    sendMessage: [],\n    addListener: [],\n    removeListener: [],\n  });\n\n  useEffect(() => {\n    startFlipperConnection(setLayerCallbacks);\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 { dset } from \"dset/merge\";\nimport { dequal } from \"dequal\";\nimport type {\n  DevtoolsDataChangeEvent,\n  DevtoolsPluginsStore,\n  ExtensionSupportedEvents,\n  PlayerInitEvent,\n  Transaction,\n} from \"@player-tools/devtools-types\";\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        dset(\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        dset(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"]}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@player-tools/devtools-desktop-plugins-common",
+  "version": "0.5.3--canary.90.2515",
+  "main": "dist/cjs/index.cjs",
+  "dependencies": {
+    "@player-tools/devtools-messenger": "0.5.3--canary.90.2515",
+    "@player-tools/devtools-types": "0.5.3--canary.90.2515",
+    "dset": "^3.1.3",
+    "dequal": "^2.0.2",
+    "immer": "^10.0.3",
+    "js-flipper": "^0.212.0",
+    "tiny-uid": "^1.1.2",
+    "tslib": "^2.6.2"
+  },
+  "module": "dist/index.legacy-esm.js",
+  "types": "types/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    "./dist/index.css": "./dist/index.css",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/cjs/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "@types/react": "^18.2.51"
+  }
+}

package/src/communication-layer/index.ts

@@ -0,0 +1,135 @@
+import type {
+  ExtensionSupportedEvents,
+  MessengerEvent,
+  MessengerOptions,
+  TransactionMetadata,
+} from "@player-tools/devtools-types";
+import { useEffect, useState } from "react";
+import { type FlipperPluginConnection, flipperClient } from "js-flipper";
+
+type IntoArrays<T> = {
+  [P in keyof T]: T[P][];
+};
+
+type CommunicationLayerMethods = Pick<
+  MessengerOptions<ExtensionSupportedEvents>,
+  "sendMessage" | "addListener" | "removeListener"
+>;
+
+type Callbacks = IntoArrays<CommunicationLayerMethods>;
+
+// keep track of the Flipper connection between React renders
+let flipperConnection: FlipperPluginConnection | null = null;
+
+export const startFlipperConnection = (
+  setLayerCallbacks: (
+    value: React.SetStateAction<IntoArrays<CommunicationLayerMethods>>
+  ) => void
+) => {
+  const listeners: Array<
+    (
+      message: TransactionMetadata & MessengerEvent<ExtensionSupportedEvents>
+    ) => void
+  > = [];
+
+  if (!flipperConnection) {
+    flipperClient
+      .start("player-ui-devtools")
+      .then(() => {
+        flipperClient.addPlugin({
+          getId() {
+            return "player-ui-devtools";
+          },
+          onConnect(conn) {
+            flipperConnection = conn;
+
+            conn.receive("message::flipper", (message) => {
+              listeners.forEach((listener) => listener(message));
+            });
+          },
+          onDisconnect() {
+            console.log("Flipper client disconnected");
+            flipperConnection = null;
+          },
+        });
+      })
+      .catch((error) => {
+        console.error("Failed to start Flipper client", error);
+      });
+  }
+
+  const sendMessage: CommunicationLayerMethods["sendMessage"] = async (
+    message
+  ) => {
+    flipperConnection?.send("message::plugin", message);
+  };
+
+  const addListener: CommunicationLayerMethods["addListener"] = (listener) => {
+    listeners.push(listener);
+  };
+
+  setLayerCallbacks((current) => ({
+    sendMessage: [...current.sendMessage, sendMessage],
+    addListener: [...current.addListener, addListener],
+    removeListener: current.removeListener,
+  }));
+};
+
+/** Web extension communication layer leverage by the @player-tools/devtools-messenger */
+export const useCommunicationLayer = (): Pick<
+  MessengerOptions<ExtensionSupportedEvents>,
+  "sendMessage" | "addListener" | "removeListener"
+> => {
+  const [layerCallbacks, setLayerCallbacks] = useState<Callbacks>({
+    sendMessage: [],
+    addListener: [],
+    removeListener: [],
+  });
+
+  useEffect(() => {
+    startFlipperConnection(setLayerCallbacks);
+
+    let windowListener: null | ((event: MessageEvent) => void) = null;
+
+    setLayerCallbacks((current) => ({
+      sendMessage: [
+        ...current.sendMessage,
+        async (message) => {
+          window.postMessage(message, "*");
+        },
+      ],
+      addListener: [
+        ...current.addListener,
+        (listener) => {
+          windowListener = (event: MessageEvent) => listener(event.data);
+          window.addEventListener("message", windowListener);
+        },
+      ],
+      removeListener: [
+        ...current.removeListener,
+        () => {
+          if (windowListener) {
+            window.removeEventListener("message", windowListener);
+          }
+        },
+      ],
+    }));
+  }, []);
+
+  const layer: Pick<
+    MessengerOptions<ExtensionSupportedEvents>,
+    "sendMessage" | "addListener" | "removeListener"
+  > = {
+    sendMessage: async (message) => {
+      layerCallbacks.sendMessage.forEach((callback) => callback(message));
+    },
+    addListener: (listener) => {
+      layerCallbacks.addListener.forEach((callback) => callback(listener));
+    },
+    removeListener: (listener) => {
+      layerCallbacks.removeListener.forEach((callback) => callback(listener));
+    },
+  };
+
+  return layer;
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./communication-layer";
+export * from "./state";

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

@@ -0,0 +1,168 @@
+import { describe, expect, test } from "vitest";
+import { reducer } from "../reducer";
+import {
+  DevtoolsPluginsStore,
+  Transaction,
+  DevtoolsDataChangeEvent,
+  PlayerInitEvent,
+  DevtoolsPluginInteractionEvent,
+} from "@player-tools/devtools-types";
+
+const INITIAL_STATE: DevtoolsPluginsStore = {
+  messages: [],
+  plugins: {},
+  interactions: [],
+};
+
+let mockTransactionID = 1;
+
+const mockTransactionMetadata = {
+  timestamp: 0,
+  sender: "senderID",
+  target: "player",
+  context: "devtools",
+  _messenger_: true,
+} as const;
+
+const mockPlayerInitTransaction: Transaction<PlayerInitEvent> = {
+  ...mockTransactionMetadata,
+  type: "PLAYER_DEVTOOLS_PLAYER_INIT",
+  id: mockTransactionID++,
+  payload: {
+    plugins: {
+      test: {
+        id: "test",
+        version: "0.0.1",
+        name: "Test",
+        description: "Test Plugin",
+        flow: {
+          id: "TestFlow",
+          navigation: {
+            BEGIN: "TestFlow",
+          },
+        },
+      },
+    },
+  },
+};
+
+const mockPluginDataChangeTransaction: Transaction<DevtoolsDataChangeEvent> = {
+  ...mockTransactionMetadata,
+  type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
+  id: mockTransactionID++,
+  payload: {
+    data: { foo: "bar" },
+    pluginID: "test",
+  },
+};
+
+const mockPluginInteractionTransaction: Transaction<DevtoolsPluginInteractionEvent> =
+  {
+    ...mockTransactionMetadata,
+    type: "PLAYER_DEVTOOLS_PLUGIN_INTERACTION",
+    id: mockTransactionID++,
+    payload: {
+      type: "evaluate-expression",
+      payload: '{"expression": "{{foo.bar}}"}',
+    },
+  };
+
+describe("reducer", () => {
+  test("handles PLAYER_DEVTOOLS_PLAYER_INIT", () => {
+    const newState = reducer(INITIAL_STATE, mockPlayerInitTransaction);
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "interactions": [],
+        "messages": [
+          {
+            "payload": {
+              "plugins": {
+                "test": {
+                  "description": "Test Plugin",
+                  "flow": {
+                    "id": "TestFlow",
+                    "navigation": {
+                      "BEGIN": "TestFlow",
+                    },
+                  },
+                  "id": "test",
+                  "name": "Test",
+                  "version": "0.0.1",
+                },
+              },
+            },
+            "type": "PLAYER_DEVTOOLS_PLAYER_INIT",
+          },
+        ],
+        "plugins": {
+          "test": {
+            "description": "Test Plugin",
+            "flow": {
+              "id": "TestFlow",
+              "navigation": {
+                "BEGIN": "TestFlow",
+              },
+            },
+            "id": "test",
+            "name": "Test",
+            "version": "0.0.1",
+          },
+        },
+      }
+    `);
+  });
+
+  test("handles PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE", () => {
+    const newState = reducer(INITIAL_STATE, mockPluginDataChangeTransaction);
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "interactions": [],
+        "messages": [
+          {
+            "payload": {
+              "data": {
+                "foo": "bar",
+              },
+              "pluginID": "test",
+            },
+            "type": "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
+          },
+        ],
+        "plugins": {
+          "test": {
+            "flow": {
+              "data": {
+                "foo": "bar",
+              },
+            },
+          },
+        },
+      }
+    `);
+  });
+
+  test("handles PLAYER_DEVTOOLS_PLUGIN_INTERACTION", () => {
+    const newState = reducer(INITIAL_STATE, mockPluginInteractionTransaction);
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "interactions": [
+          {
+            "_messenger_": true,
+            "context": "devtools",
+            "id": 3,
+            "payload": {
+              "payload": "{"expression": "{{foo.bar}}"}",
+              "type": "evaluate-expression",
+            },
+            "sender": "senderID",
+            "target": "player",
+            "timestamp": 0,
+            "type": "PLAYER_DEVTOOLS_PLUGIN_INTERACTION",
+          },
+        ],
+        "messages": [],
+        "plugins": {},
+      }
+    `);
+  });
+});

package/src/state/index.ts

@@ -0,0 +1,2 @@
+export * from "./reducer";
+export * from "./usePluginState";

package/src/state/reducer.ts

@@ -0,0 +1,65 @@
+import { produce } from "immer";
+import { dset } from "dset/merge";
+import { dequal } from "dequal";
+import type {
+  DevtoolsDataChangeEvent,
+  DevtoolsPluginsStore,
+  ExtensionSupportedEvents,
+  PlayerInitEvent,
+  Transaction,
+} from "@player-tools/devtools-types";
+
+const containsInteraction = (
+  interactions: DevtoolsPluginsStore["interactions"],
+  interaction: DevtoolsPluginsStore["interactions"][number]
+) => {
+  return interactions.filter((i) => dequal(i, interaction)).length > 0;
+};
+
+/** devtools plugin state reducer */
+export const reducer = (
+  state: DevtoolsPluginsStore,
+  transaction: Transaction<ExtensionSupportedEvents>
+): DevtoolsPluginsStore => {
+  switch (transaction.type) {
+    case "PLAYER_DEVTOOLS_PLAYER_INIT":
+      return produce(state, (draft) => {
+        const { payload } = transaction;
+        dset(draft, "plugins", payload.plugins);
+
+        const message: PlayerInitEvent = {
+          type: "PLAYER_DEVTOOLS_PLAYER_INIT",
+          payload,
+        };
+
+        draft.messages.push(message);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE":
+      return produce(state, (draft) => {
+        const { payload } = transaction;
+
+        if (!payload.data) return state;
+
+        dset(
+          draft.plugins,
+          [transaction.payload.pluginID, "flow", "data"],
+          transaction.payload.data
+        );
+
+        const message: DevtoolsDataChangeEvent = {
+          type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
+          payload,
+        };
+
+        draft.messages.push(message);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_INTERACTION":
+      return produce(state, (draft) => {
+        if (containsInteraction(draft.interactions, transaction)) return state;
+
+        dset(draft, ["interactions"], [...draft.interactions, transaction]);
+      });
+    default:
+      return state;
+  }
+};

package/src/state/usePluginState.ts

@@ -0,0 +1,60 @@
+import { Messenger } from "@player-tools/devtools-messenger";
+import type {
+  DevtoolsPluginsStore,
+  ExtensionSupportedEvents,
+  MessengerOptions,
+  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: [],
+};
+
+/** devtools plugin state */
+export const usePluginState = (): [
+  DevtoolsPluginsStore,
+  string,
+  React.Dispatch<Transaction<ExtensionSupportedEvents>>
+] => {
+  const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
+  const lastMessageIndex = useRef<number>(-1);
+  const { sendMessage, addListener, removeListener } = useCommunicationLayer();
+
+  const messenger = useMemo(() => {
+    const options: MessengerOptions<ExtensionSupportedEvents> = {
+      id: playerID,
+      context: "player",
+      messageCallback: (message) =>
+        dispatch(message as Parameters<typeof dispatch>[0]),
+      sendMessage,
+      addListener,
+      removeListener,
+      logger: console,
+    };
+
+    return new Messenger(options);
+  }, [addListener, removeListener, sendMessage]);
+
+  useEffect(() => {
+    if (state.messages.length > lastMessageIndex.current + 1) {
+      const messages = state.messages.slice(
+        lastMessageIndex.current + 1,
+        state.messages.length
+      );
+      lastMessageIndex.current = state.messages.length - 1;
+      messages.forEach((message) => {
+        messenger.sendMessage(message);
+      });
+    }
+  }, [state.messages, messenger]);
+
+  return [state, playerID, dispatch];
+};

package/types/communication-layer/index.d.ts

@@ -0,0 +1,10 @@
+import type { ExtensionSupportedEvents, MessengerOptions } from "@player-tools/devtools-types";
+type IntoArrays<T> = {
+    [P in keyof T]: T[P][];
+};
+type CommunicationLayerMethods = Pick<MessengerOptions<ExtensionSupportedEvents>, "sendMessage" | "addListener" | "removeListener">;
+export declare const startFlipperConnection: (setLayerCallbacks: (value: React.SetStateAction<IntoArrays<CommunicationLayerMethods>>) => void) => void;
+/** Web extension communication layer leverage by the @player-tools/devtools-messenger */
+export declare const useCommunicationLayer: () => Pick<MessengerOptions<ExtensionSupportedEvents>, "sendMessage" | "addListener" | "removeListener">;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./communication-layer";
+export * from "./state";
+//# sourceMappingURL=index.d.ts.map

package/types/state/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./reducer";
+export * from "./usePluginState";
+//# sourceMappingURL=index.d.ts.map

package/types/state/reducer.d.ts

@@ -0,0 +1,4 @@
+import type { DevtoolsPluginsStore, ExtensionSupportedEvents, Transaction } from "@player-tools/devtools-types";
+/** devtools plugin state reducer */
+export declare const reducer: (state: DevtoolsPluginsStore, transaction: Transaction<ExtensionSupportedEvents>) => DevtoolsPluginsStore;
+//# sourceMappingURL=reducer.d.ts.map

package/types/state/usePluginState.d.ts

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