Merge pull request #19 from opensumi/feat/compatible-with-3.0

opensumi · Apr 18, 2024 · 9ddecf3 · 9ddecf3
2 parents 9ae9822 + 036bde0
commit 9ddecf3
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -4,10 +4,7 @@
   "type": "module",
   "description": "A Chrome DevTools Extension for OpenSumi.",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": ""
-  },
+  "repository": "[email protected]:opensumi/devtools.git",
   "scripts": {
     "build": "cross-env NODE_ENV='production' BABEL_ENV='production' node utils/build.js",
     "start": "cross-env NODE_ENV='development' BABEL_ENV='development' node utils/server.js",
@@ -17,22 +14,21 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@hot-loader/react-dom": "^17.0.2",
-    "react": "^17.0.2",
-    "react-data-grid": "^7.0.0-beta.13",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-data-grid": "^7.0.0-beta.43",
+    "react-dom": "^18.2.0",
     "react-hot-loader": "^4.13.0",
     "react-json-view": "^1.21.3",
-    "react-tabs": "^4.2.1"
+    "react-tabs": "^6.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.17.0",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@types/chrome": "^0.0.177",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.3",
     "babel-preset-react-app": "^10.0.1",
@@ -68,4 +64,4 @@
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.3.1"
   }
-}
+}
diff --git a/src/pages/Panel/index.jsx b/src/pages/Panel/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import Devtools from '../../ui/index';
 
-render(<Devtools />, window.document.querySelector('#panel'));
-
-if (module.hot) module.hot.accept();
+const client = createRoot(window.document.querySelector('#panel'));
+client.render(<Devtools />);
diff --git a/src/ui/Ipc/Ipc.jsx b/src/ui/Ipc/Ipc.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, useMemo, createContext } from 'react';
 import ResizableTable from '../ResizableTable/ResizableTable';
+import 'react-data-grid/lib/styles.css';
 import DataGrid from 'react-data-grid';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import JsonView from 'react-json-view';
@@ -43,7 +44,7 @@ const Ipc = ({ isCompact }) => {
 
   // run if autoScroll or bottomRow changes
   useEffect(() => {
-    gridRef.current && autoScroll && gridRef.current.scrollToRow(bottomRow);
+    gridRef.current && autoScroll && gridRef.current.scrollToCell({ rowIdx: bottomRow });
   }, [autoScroll, bottomRow]);
 
   // it is not very elegent to use two variables to store same thing

diff --git a/src/ui/Rpc/Rpc.jsx b/src/ui/Rpc/Rpc.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useMemo, createContext } from 'reac
 import ResizableTable from '../ResizableTable/ResizableTable';
 import NetSpeed from '../NetSpeed/NetSpeed';
 import NetLatency from '../NetLatency/NetLatency';
+import 'react-data-grid/lib/styles.css';
 import DataGrid from 'react-data-grid';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import JsonView from 'react-json-view';
@@ -38,6 +39,7 @@ const Rpc = ({ isCompact, isElectron }) => {
     send: 0, // the unit is bytes/s
     receive: 0,
   });
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
   const [latency, setLatency] = useState(null);
 
   const timer = useRef(null);
@@ -51,7 +53,7 @@ const Rpc = ({ isCompact, isElectron }) => {
 
   // run if autoScroll or bottomRow changes
   useEffect(() => {
-    gridRef.current && autoScroll && gridRef.current.scrollToRow(bottomRow);
+    gridRef.current && autoScroll && gridRef.current.scrollToCell({ rowIdx: bottomRow });
   }, [autoScroll, bottomRow]);
 
   // it is not very elegent to use two variables to store same thing
@@ -260,13 +262,29 @@ const Rpc = ({ isCompact, isElectron }) => {
             rowKeyGetter={(row) => row.id}
             headerRowHeight={filters.enabled ? 52 : 25}
             rowHeight={20}
-            onRowClick={(row) => {
-              setSelectedRow(row);
+            onCellClick={(cell) => {
+              if (cell.column) {
+                const { key } = cell.column;
+                if (key === 'send') {
+                  setSelectedTabIndex(0);
+                } else if (key === 'receive') {
+                  setSelectedTabIndex(1);
+                }
+              }
+              if (cell.row) {
+                setSelectedRow(cell.row);
+              }
             }}
           />
         </FilterContext.Provider>
         <div>
-          <Tabs forceRenderTabPanel={true}>
+          <Tabs
+            forceRenderTabPanel={true}
+            selectedIndex={selectedTabIndex}
+            onSelect={(index) => {
+              setSelectedTabIndex(index);
+            }}
+          >
             <TabList>
               <Tab>Send</Tab>
               <Tab>Receive</Tab>

diff --git a/src/ui/Rpc/messageHelper.js b/src/ui/Rpc/messageHelper.js
@@ -2,6 +2,11 @@ const serviceMethodSplit = (serviceMethod) => {
   if (serviceMethod.startsWith('on')) {
     serviceMethod = serviceMethod.slice(3);
   }
+  if (serviceMethod.includes('||')) {
+    // for ExtProtocol
+    return serviceMethod.split('||');
+  }
+
   return serviceMethod.split(':');
 };
 
@@ -56,7 +61,7 @@ const updateMessages = (oldMessages, newRawMessages) => {
       msg.method = serviceMethodSplitResult[1];
       msg.receive = JSON.stringify(message.arguments);
     } else if (msg.type === 'onRequest') {
-      msg.type = '↓↑';
+      msg.type = '↓';
       msg.requestId = message.requestId;
       msg.service = serviceMethodSplitResult[0];
       msg.method = serviceMethodSplitResult[1];

diff --git a/src/ui/Rpc/rdgHelper.jsx b/src/ui/Rpc/rdgHelper.jsx
@@ -30,6 +30,7 @@ const generateColumns = (FilterContext, setFilters, services, methods) => {
       name: 'ID',
       minWidth: 40,
       width: 50,
+      maxWidth: 70,
       cellClass: 'rdg-body-cell',
       headerCellClass: 'rdg-header-cell',
       frozen: true,
@@ -39,6 +40,7 @@ const generateColumns = (FilterContext, setFilters, services, methods) => {
       name: 'Time',
       minWidth: 75,
       width: 75,
+      maxWidth: 100,
       cellClass: 'rdg-body-cell',
       headerCellClass: 'rdg-header-cell',
     },
@@ -47,6 +49,7 @@ const generateColumns = (FilterContext, setFilters, services, methods) => {
       name: 'Type',
       minWidth: 40,
       width: 50,
+      maxWidth: 70,
       cellClass: 'rdg-body-cell column-type',
       headerCellClass: 'rdg-header-cell filter-cell',
       headerRenderer: (p) => (
@@ -133,6 +136,7 @@ const generateColumns = (FilterContext, setFilters, services, methods) => {
     {
       key: 'send',
       name: 'Send',
+      width: 150,
       cellClass: 'rdg-body-cell',
       headerCellClass: 'rdg-header-cell filter-cell',
       headerRenderer: (p) => (
@@ -154,8 +158,12 @@ const generateColumns = (FilterContext, setFilters, services, methods) => {
     {
       key: 'receive',
       name: 'Receive',
+      width: 150,
       cellClass: 'rdg-body-cell',
       headerCellClass: 'rdg-header-cell filter-cell',
+      onclick: (e) => {
+        console.log('clicked');
+      },
       headerRenderer: (p) => (
         <FilterRenderer {...p}>
           {({ filters, ...rest }) => (

diff --git a/webpack.config.js b/webpack.config.js
@@ -13,17 +13,13 @@ const __dirname = dirname(__filename);
 
 const ASSET_PATH = process.env.ASSET_PATH || '/';
 
-const alias = {
-  'react-dom': '@hot-loader/react-dom',
-  'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
-  'react/jsx-runtime': 'react/jsx-runtime.js',
-};
-
 // load the secrets
 const secretsPath = path.join(__dirname, 'secrets.' + env.NODE_ENV + '.js');
 
 const fileExtensions = ['jpg', 'jpeg', 'png', 'gif', 'eot', 'otf', 'svg', 'ttf', 'woff', 'woff2'];
 
+const alias = {};
+
 if (fileSystem.existsSync(secretsPath)) {
   alias['secrets'] = secretsPath;
 }

diff --git a/yarn.lock b/yarn.lock
@@ -1057,15 +1057,6 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@hot-loader/react-dom@^17.0.2":
-  version "17.0.2"
-  resolved "https://registry.npmmirror.com/@hot-loader/react-dom/-/react-dom-17.0.2.tgz#0b24e484093e8f97eb5c72bebdda44fc20bc8400"
-  integrity sha512-G2RZrFhsQClS+bdDh/Ojpk3SgocLPUGnvnJDTQYnmKSSwXtU+Yh+8QMs+Ia3zaAvBiOSpIIDSUxuN69cvKqrWg==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
-
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.5"
   resolved "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"
@@ -1324,32 +1315,26 @@
   resolved "https://registry.npmmirror.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@^17.0.11":
-  version "17.0.17"
-  resolved "https://registry.npmmirror.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1"
-  integrity sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==
+"@types/react-dom@^18.2.25":
+  version "18.2.25"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.25.tgz#2946a30081f53e7c8d585eb138277245caedc521"
+  integrity sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==
   dependencies:
-    "@types/react" "^17"
+    "@types/react" "*"
 
-"@types/react@^17", "@types/react@^17.0.39":
-  version "17.0.47"
-  resolved "https://registry.npmmirror.com/@types/react/-/react-17.0.47.tgz#4ee71aaf4c5a9e290e03aa4d0d313c5d666b3b78"
-  integrity sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==
+"@types/react@*", "@types/react@^18.2.79":
+  version "18.2.79"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.79.tgz#c40efb4f255711f554d47b449f796d1c7756d865"
+  integrity sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==
   dependencies:
     "@types/prop-types" "*"
-    "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/[email protected]":
   version "0.12.0"
   resolved "https://registry.npmmirror.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
-"@types/scheduler@*":
-  version "0.16.2"
-  resolved "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
-  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
-
 "@types/serve-index@^1.9.1":
   version "1.9.1"
   resolved "https://registry.npmmirror.com/@types/serve-index/-/serve-index-1.9.1.tgz#1b5e85370a192c01ec6cec4735cf2917337a6278"
@@ -2095,10 +2080,10 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
-clsx@^1.1.0, clsx@^1.1.1:
-  version "1.2.1"
-  resolved "https://registry.npmmirror.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+clsx@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
+  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
 
 color-convert@^1.9.0:
   version "1.9.3"
@@ -4580,21 +4565,20 @@ react-base16-styling@^0.6.0:
     lodash.flow "^3.3.0"
     pure-color "^1.2.0"
 
-react-data-grid@^7.0.0-beta.13:
-  version "7.0.0-beta.13"
-  resolved "https://registry.npmmirror.com/react-data-grid/-/react-data-grid-7.0.0-beta.13.tgz#c0728258cbbb033af611eed50ed124744a76ee76"
-  integrity sha512-vhBdkC2KqAawmmzYTcNlfhfjcYFQsinNr5pPTUG6/3DzLfYWo1S6nl48wgPWgyD9uDclV3H5NWvKSSwQTTsYMQ==
+react-data-grid@^7.0.0-beta.43:
+  version "7.0.0-beta.43"
+  resolved "https://registry.yarnpkg.com/react-data-grid/-/react-data-grid-7.0.0-beta.43.tgz#102832abf4f23cdc6dc7ddf865612caa39be8061"
+  integrity sha512-uqzhXsaeIpCnNsB1zODWzP88od6r5Q5UA5GnEhba9XmUMFUy2VcUTTfABmbAiVGdJkUzWJTx1l0hZn0WNGE/hQ==
   dependencies:
-    clsx "^1.1.1"
+    clsx "^2.0.0"
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.npmmirror.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.0"
 
 react-hot-loader@^4.13.0:
   version "4.13.0"
@@ -4630,12 +4614,12 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmmirror.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-tabs@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.npmmirror.com/react-tabs/-/react-tabs-4.2.1.tgz#82e2dc787555e791f909746dd64164d780d7d477"
-  integrity sha512-nQcEN3KrAsSry6f9Jz2oyMQsnh+sLEy31YjlskL/mnI3KU/c7BeyD1VzHZmmcJ15UEFu12pYOXYkdTzZ0uyIbw==
+react-tabs@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/react-tabs/-/react-tabs-6.0.2.tgz#bc1065c3828561fee285a8fd045f22e0fcdde1eb"
+  integrity sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==
   dependencies:
-    clsx "^1.1.0"
+    clsx "^2.0.0"
     prop-types "^15.5.0"
 
 react-textarea-autosize@^8.3.2:
@@ -4647,13 +4631,12 @@ react-textarea-autosize@^8.3.2:
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.npmmirror.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 readable-stream@^2.0.1:
   version "2.3.7"
@@ -4877,13 +4860,12 @@ sass@^1.52.3:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.npmmirror.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@^2.6.5:
   version "2.7.1"