Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: update react to v18 #67

Merged
merged 2 commits into from
Jul 6, 2022
Merged

feat: update react to v18 #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3f3232
feat: use React v18
koba04 Jul 6, 2022
2326ff7
fix: tsc errors
koba04 Jul 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>,
Expand Down
6 changes: 3 additions & 3 deletions examples/swr-devtools-demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
7 changes: 3 additions & 4 deletions examples/swr-devtools-demo/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
`),
}}
Expand Down
1 change: 1 addition & 0 deletions examples/swr-v1-devtools-demo/components/DevToolsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const DevToolsView = () => {
height: "400px",
}}
>
{/* @ts-expect-error */}
<SWRDevToolPanel cache={cache} events={null} />
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions examples/swr-v1-devtools-demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
7 changes: 3 additions & 4 deletions examples/swr-v1-devtools-demo/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
`),
}}
Expand Down
1 change: 1 addition & 0 deletions examples/swr-v1-legacy-devtools-demo/components/DevToolsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const DevToolsView = () => {
height: "400px",
}}
>
{/* @ts-expect-error */}
<SWRDevToolPanel cache={cache} events={null} />
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions examples/swr-v1-legacy-devtools-demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
1 change: 1 addition & 0 deletions examples/swr-v1-legacy-devtools-demo/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const fetcher = async (url) => {

function MyApp({ Component, pageProps }) {
return (
// @ts-expect-error
<SWRConfig value={{ fetcher }}>
<SWRDevTools>
<Component {...pageProps} />
Expand Down
9 changes: 4 additions & 5 deletions examples/swr-v1-legacy-devtools-demo/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions packages/swr-devtools-extensions/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
26 changes: 11 additions & 15 deletions packages/swr-devtools-extensions/src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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,
Expand All @@ -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} />);
});
*/

Expand All @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand Down
8 changes: 4 additions & 4 deletions packages/swr-devtools-panel/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

react-json-view hasn't supported React v18 yet, so I've migrated to react-json-tree, which is used in Redux DevTools.

"swr-devtools": "^0.5.0"
}
}
56 changes: 23 additions & 33 deletions packages/swr-devtools-panel/src/components/CacheData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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}
/>
);
};
Expand Down
10 changes: 6 additions & 4 deletions packages/swr-devtools-panel/src/components/CacheKey.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
10 changes: 8 additions & 2 deletions packages/swr-devtools-panel/src/components/NetworkPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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);
}, []);

Expand Down
1 change: 1 addition & 0 deletions packages/swr-devtools-panel/src/components/SWRDevToolPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 3 additions & 4 deletions packages/swr-devtools/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,13 @@ npm install react swr
### Wrap your application in the SWRDevTools component

```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>,
document.getElementById("app")
</SWRDevTools>
);
```

Expand Down
Loading