Merge pull request #32 from player-ui/fix/upgrade-devtools-client-0.16.1-next.3

Upgrade to @player-devtools 0.16.1-next.3, fix minified react crash

Author: AngelaVilladiego

package.json

@@ -21,10 +21,11 @@
     "@auto-it/git-tag": "^11.1.6",
     "@auto-it/version-file": "^11.1.6",
     "@plasmohq/storage": "^1.10.0",
-    "@player-tools/devtools-client": "0.9.0-next.0",
-    "@player-tools/devtools-types": "0.9.0-next.0",
-    "@player-ui/pubsub-plugin": "0.7.2-next.4",
-    "@player-ui/react": "0.7.2-next.4",
+    "@player-devtools/client-react": "0.16.1-next.3",
+    "@player-devtools/types": "0.16.1-next.3",
+    "@player-ui/player": ">=0.15.4",
+    "@player-ui/pubsub-plugin": ">=0.15.4",
+    "@player-ui/react": ">=0.15.4",
     "dequal": "^2.0.3",
     "dset": "^3.1.3",
     "immer": "^10.0.3",

panels/devtools/index.tsx

@@ -1,12 +1,18 @@
-import { Panel } from "@player-tools/devtools-client"
-import type { CommunicationLayerMethods } from "@player-tools/devtools-types"
-import React from "react"
-import ReactDOM from "react-dom"
+import { Panel } from "@player-devtools/client-react"
+import type {
+  ExtensionSupportedEvents,
+  MessengerOptions
+} from "@player-devtools/types"
+import React, { Suspense } from "react"
+import { createRoot } from "react-dom/client"
 import browser from "webextension-polyfill"
 
 const port = browser.runtime.connect()
 
-const communicationLayer: CommunicationLayerMethods = {
+const communicationLayer: Pick<
+  MessengerOptions<ExtensionSupportedEvents>,
+  "sendMessage" | "addListener" | "removeListener"
+> = {
   sendMessage: async (message) =>
     port.postMessage({
       tabId: browser.devtools.inspectedWindow.tabId,
@@ -20,7 +26,8 @@ const communicationLayer: CommunicationLayerMethods = {
   }
 }
 
-ReactDOM.render(
-  <Panel communicationLayer={communicationLayer} />,
-  document.getElementById("root")
+createRoot(document.getElementById("root")!).render(
+  <Suspense fallback={null}>
+    <Panel communicationLayer={communicationLayer} />
+  </Suspense>
 )