feat: use React v18

koba04 · Jul 6, 2022 · 473187d · 473187d
1 parent da4474f
commit 473187d
Show file tree

Hide file tree

Showing 22 changed files with 192 additions and 246 deletions.
diff --git a/README.md b/README.md
@@ -19,17 +19,19 @@
 
 ### Wrap your application in the SWRDevTools component
 
+**If you use SWR v2.0.0-beta.6 or later versions, you don't need to install `swr-devtools` and wrap your application. SWR Devtools does it for you.**
+
 ```shell
 npm install swr-devtools
 # Install peerDependencies
 npm install react swr
 ```
 
 ```jsx
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { SWRDevTools } from "swr-devtools";
 
-ReactDOM.render(
+createRoot(document.getElementById("app")).render(
   <SWRDevTools>
     <MainApp />
   </SWRDevTools>,

diff --git a/examples/swr-devtools-demo/package.json b/examples/swr-devtools-demo/package.json
@@ -10,11 +10,11 @@
   },
   "dependencies": {
     "next": "^12.2.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "styled-components": "^5.3.5",
     "sugar-high": "^0.4.6",
-    "swr": "^2.0.0-beta.2"
+    "swr": "^2.0.0-beta.6"
   },
   "devDependencies": {
     "@types/node": "^18.0.2",

diff --git a/examples/swr-devtools-demo/pages/_document.tsx b/examples/swr-devtools-demo/pages/_document.tsx
@@ -10,6 +10,7 @@ export default class MyDocument extends Document {
       ctx.renderPage = () =>
         originalRenderPage({
           enhanceApp: (App) => (props) =>
+            // @ts-expect-error  error TS2786: 'App' cannot be used as a JSX component.
             sheet.collectStyles(<App {...props} />),
         });
 

diff --git a/examples/swr-devtools-demo/pages/index.tsx b/examples/swr-devtools-demo/pages/index.tsx
@@ -74,14 +74,13 @@ export default function Home() {
             <code
               dangerouslySetInnerHTML={{
                 __html: highlight(`
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { SWRDevTools } from "swr-devtools";
 
-ReactDOM.render(
+createRoot(document.getElementById("app")).render(
   <SWRDevTools>
     <MainApp />
-  </SWRDevTools>,
-  document.getElementById("app")
+  </SWRDevTools>
 );
           `),
               }}

diff --git a/examples/swr-v1-devtools-demo/components/DevToolsView.tsx b/examples/swr-v1-devtools-demo/components/DevToolsView.tsx
@@ -11,6 +11,7 @@ export const DevToolsView = () => {
         height: "400px",
       }}
     >
+      {/* @ts-expect-error */}
       <SWRDevToolPanel cache={cache} events={null} />
     </div>
   );

diff --git a/examples/swr-v1-devtools-demo/package.json b/examples/swr-v1-devtools-demo/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "next": "^12.2.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "styled-components": "^5.3.5",
     "sugar-high": "^0.4.6",
     "swr": "^1.3.0"

diff --git a/examples/swr-v1-devtools-demo/pages/_document.tsx b/examples/swr-v1-devtools-demo/pages/_document.tsx
@@ -10,6 +10,7 @@ export default class MyDocument extends Document {
       ctx.renderPage = () =>
         originalRenderPage({
           enhanceApp: (App) => (props) =>
+            // @ts-expect-error
             sheet.collectStyles(<App {...props} />),
         });
 

diff --git a/examples/swr-v1-devtools-demo/pages/index.tsx b/examples/swr-v1-devtools-demo/pages/index.tsx
@@ -74,14 +74,13 @@ export default function Home() {
             <code
               dangerouslySetInnerHTML={{
                 __html: highlight(`
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { SWRDevTools } from "swr-devtools";
 
-ReactDOM.render(
+createRoot(document.getElementById("app")).render(
   <SWRDevTools>
     <MainApp />
-  </SWRDevTools>,
-  document.getElementById("app")
+  </SWRDevTools>
 );
           `),
               }}

diff --git a/examples/swr-v1-legacy-devtools-demo/components/DevToolsView.tsx b/examples/swr-v1-legacy-devtools-demo/components/DevToolsView.tsx
@@ -11,6 +11,7 @@ export const DevToolsView = () => {
         height: "400px",
       }}
     >
+      {/* @ts-expect-error */}
       <SWRDevToolPanel cache={cache} events={null} />
     </div>
   );

diff --git a/examples/swr-v1-legacy-devtools-demo/package.json b/examples/swr-v1-legacy-devtools-demo/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "next": "^12.2.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "styled-components": "^5.3.5",
     "sugar-high": "^0.4.6",
     "swr": "1.1.x"

diff --git a/examples/swr-v1-legacy-devtools-demo/pages/_document.tsx b/examples/swr-v1-legacy-devtools-demo/pages/_document.tsx
@@ -10,6 +10,7 @@ export default class MyDocument extends Document {
       ctx.renderPage = () =>
         originalRenderPage({
           enhanceApp: (App) => (props) =>
+            // @ts-expect-error
             sheet.collectStyles(<App {...props} />),
         });
 

diff --git a/examples/swr-v1-legacy-devtools-demo/pages/index.tsx b/examples/swr-v1-legacy-devtools-demo/pages/index.tsx
@@ -74,16 +74,15 @@ export default function Home() {
             <code
               dangerouslySetInnerHTML={{
                 __html: highlight(`
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { SWRDevTools } from "swr-devtools";
 
-ReactDOM.render(
+createRoot(document.getElementById("app")).render(
   <SWRDevTools>
     <MainApp />
-  </SWRDevTools>,
-  document.getElementById("app")
+  </SWRDevTools>
 );
-          `),
+                `),
               }}
             />
           </pre>

diff --git a/packages/swr-devtools-extensions/package.json b/packages/swr-devtools-extensions/package.json
@@ -22,20 +22,20 @@
   },
   "devDependencies": {
     "@types/chrome": "^0.0.193",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/webextension-polyfill": "^0.9.0",
     "copy-webpack-plugin": "^11.0.0",
-    "swr": "^2.0.0-beta.2",
+    "swr": "^2.0.0-beta.6",
     "ts-loader": "^9.3.1",
     "typescript": "^4.7.4",
     "web-ext": "^7.1.0",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "styled-components": "^5.3.5",
     "swr": "^2.0.0-beta.6",
     "swr-devtools": "^0.5.0",

diff --git a/packages/swr-devtools-extensions/src/app.tsx b/packages/swr-devtools-extensions/src/app.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { SWRDevToolPanel } from "swr-devtools-panel";
 import { runtime, devtools, Runtime } from "webextension-polyfill";
 
@@ -22,7 +22,7 @@ class EventEmitter {
 
 const eventEmitter = new EventEmitter();
 const cacheMap = new Map();
-const rootEl = document.getElementById("app");
+const rootEl = document.getElementById("app")!;
 
 const port = runtime.connect({
   name: "panel:" + devtools.inspectedWindow.tabId,
@@ -32,7 +32,7 @@ const port = runtime.connect({
 port.onDisconnect.addListener(() => {
   cache.clear();
   mounted = false;
-  ReactDOM.render(<SWRDevToolPanel cache={null} events={null} />, rootEl);
+  createRoot(rootEl).render(<SWRDevToolPanel cache={null} events={null} />);
 });
 */
 
@@ -57,9 +57,8 @@ port.onMessage.addListener(
     switch (message.type) {
       // loaded a new page
       case "load": {
-        ReactDOM.render(
-          <SWRDevToolPanel cache={null} events={null} key={tabId} />,
-          rootEl
+        createRoot(rootEl).render(
+          <SWRDevToolPanel cache={null} events={null} key={tabId} />
         );
         mounted = false;
         break;
@@ -69,9 +68,8 @@ port.onMessage.addListener(
       case "initialized": {
         cache.clear();
         mounted = true;
-        ReactDOM.render(
-          <SWRDevToolPanel cache={cache} events={eventEmitter} key={tabId} />,
-          rootEl
+        createRoot(rootEl).render(
+          <SWRDevToolPanel cache={cache} events={eventEmitter} key={tabId} />
         );
         break;
       }
@@ -83,9 +81,8 @@ port.onMessage.addListener(
 
         // mount a devtool panel if it hasn't been mounted yet.
         if (mounted === false) {
-          ReactDOM.render(
-            <SWRDevToolPanel cache={cache} events={eventEmitter} key={tabId} />,
-            rootEl
+          createRoot(rootEl).render(
+            <SWRDevToolPanel cache={cache} events={eventEmitter} key={tabId} />
           );
           mounted = true;
         }
@@ -98,9 +95,8 @@ port.onMessage.addListener(
       case "request_discarded": {
         // mount a devtool panel if it hasn't been mounted yet.
         if (mounted === false) {
-          ReactDOM.render(
-            <SWRDevToolPanel cache={cache} events={eventEmitter} key={tabId} />,
-            rootEl
+          createRoot(rootEl).render(
+            <SWRDevToolPanel cache={cache} events={eventEmitter} key={tabId} />
           );
           mounted = true;
         }

diff --git a/packages/swr-devtools-panel/package.json b/packages/swr-devtools-panel/package.json
@@ -36,15 +36,15 @@
     "swr": ">=1.0.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.16",
+    "@types/react": "^18.0.15",
     "@types/styled-components": "^5.1.25",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "styled-components": "^5.3.5",
-    "swr": "^2.0.0-beta.2",
+    "swr": "^2.0.0-beta.6",
     "typescript": "^4.7.4"
   },
   "dependencies": {
-    "react-json-view": "^1.21.3",
+    "react-json-tree": "^0.17.0",
     "swr-devtools": "^0.5.0"
   }
 }
diff --git a/packages/swr-devtools-panel/src/components/CacheData.tsx b/packages/swr-devtools-panel/src/components/CacheData.tsx
@@ -1,5 +1,5 @@
-import React, { lazy, Suspense } from "react";
-import { ReactJsonViewProps } from "react-json-view";
+import React from "react";
+import { JSONTree } from "react-json-tree";
 import styled from "styled-components";
 import { DevToolsCacheData } from "swr-devtools/lib/swr-cache";
 import { CacheKey } from "./CacheKey";
@@ -17,44 +17,34 @@ export const CacheData = React.memo(({ devToolsCacheData }: Props) => (
       <TimestampText>{devToolsCacheData.timestampString}</TimestampText>
     </Title>
     <DataWrapper>
-      {devToolsCacheData.data && (
-        <>
-          <DataTitle>Data</DataTitle>
-          <CacheDataView data={devToolsCacheData.data as any} />
-        </>
-      )}
-      {devToolsCacheData.error && (
-        <>
-          <DataTitle>
-            <ErrorLabel>Error</ErrorLabel>
-          </DataTitle>
-          <CacheDataView data={devToolsCacheData.error as any} />
-        </>
-      )}
+      <>
+        {devToolsCacheData.data && (
+          <>
+            <DataTitle>Data</DataTitle>
+            <CacheDataView data={devToolsCacheData.data as any} />
+          </>
+        )}
+        {devToolsCacheData.error && (
+          <>
+            <DataTitle>
+              <ErrorLabel>Error</ErrorLabel>
+            </DataTitle>
+            <CacheDataView data={devToolsCacheData.error as any} />
+          </>
+        )}
+      </>
     </DataWrapper>
   </Wrapper>
 ));
 CacheData.displayName = "CacheData";
 
-const CacheDataView = ({ data }: { data: ReactJsonViewProps }) => {
+const CacheDataView = ({ data }: { data: any }) => {
   if (typeof window === "undefined") return null;
   return (
-    <Suspense fallback="loading">
-      <AsyncReactJson data={data} />
-    </Suspense>
-  );
-};
-
-const AsyncReactJson = ({ data }: { data: ReactJsonViewProps }) => {
-  const ReactJson = lazy(() => import("react-json-view"));
-  return (
-    <ReactJson
-      src={data}
-      theme={
-        matchMedia("(prefers-color-scheme: dark)").matches
-          ? "railscasts"
-          : "rjv-default"
-      }
+    <JSONTree
+      data={data}
+      theme="railscasts"
+      invertTheme={!matchMedia("(prefers-color-scheme: dark)").matches}
     />
   );
 };

diff --git a/packages/swr-devtools-panel/src/components/CacheKey.tsx b/packages/swr-devtools-panel/src/components/CacheKey.tsx
@@ -22,10 +22,12 @@ export const CacheKey = ({
           : devToolsCacheData.key}
       </div>
       <Labels>
-        {devToolsCacheData.isInfinite && <InfiniteLabel />}
-        {devToolsCacheData.error && <ErrorLabel />}
-        {devToolsCacheData.isLoading && <LoadingLabel />}
-        {devToolsCacheData.isValidating && <ValidationgLabel />}
+        <>
+          {devToolsCacheData.isInfinite && <InfiniteLabel />}
+          {devToolsCacheData.error && <ErrorLabel />}
+          {devToolsCacheData.isLoading && <LoadingLabel />}
+          {devToolsCacheData.isValidating && <ValidationgLabel />}
+        </>
       </Labels>
     </CacheText>
   );

diff --git a/packages/swr-devtools-panel/src/components/NetworkPanel.tsx b/packages/swr-devtools-panel/src/components/NetworkPanel.tsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
+import React, {
+  MouseEvent,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import styled from "styled-components";
 import { Cache } from "swr";
 
@@ -177,7 +183,7 @@ export const NetworkPanel = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [requestsById, startTime, trackScale]);
 
-  const onPointerMove = useCallback((e) => {
+  const onPointerMove = useCallback((e: MouseEvent) => {
     setTimelineHoverX(~~e.nativeEvent.offsetX + 100);
   }, []);
 

diff --git a/packages/swr-devtools-panel/src/components/SWRDevToolPanel.tsx b/packages/swr-devtools-panel/src/components/SWRDevToolPanel.tsx
@@ -79,6 +79,7 @@ export const SWRDevToolPanel = ({ cache, events }: Props) => {
     useState<DevToolsCacheData | null>(null);
   return (
     <DevToolWindow>
+      {/* @ts-expect-error https://github.com/styled-components/styled-components/issues/3738 */}
       <GlobalStyle />
       <Header>
         <HeaderLogoWrapper>