feat: support swr v1 beta

BREAKING CHANGE: drop swr v0.x support
koba04 · Aug 25, 2021 · 9170f48 · 9170f48
1 parent 5a55a6a
commit 9170f48
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 23 deletions.
diff --git a/examples/swr-devtools-demo/package.json b/examples/swr-devtools-demo/package.json
@@ -13,6 +13,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "styled-components": "^5.3.0",
+    "swr": "^1.0.0-beta.13",
     "swr-devtools": "0.1.0"
   },
   "devDependencies": {

diff --git a/examples/swr-devtools-demo/pages/_app.tsx b/examples/swr-devtools-demo/pages/_app.tsx
@@ -1,11 +1,5 @@
 import "../styles/globals.css";
-import { SWRDevTools, launch } from "swr-devtools";
-import { cache } from "swr";
-
-// The way to use SWR DevTools as a Chrome extension
-if (typeof window !== "undefined") {
-  launch(cache);
-}
+import { /* SWRDevToolPanel, */ SWRDevTools } from "swr-devtools";
 
 // The way to use SWR DevTools as a React Component
 const DevToolsArea = () => (
@@ -17,16 +11,16 @@ const DevToolsArea = () => (
       height: "400px",
     }}
   >
-    <SWRDevTools cache={cache} />
+    {/* <SWRDevToolPanel cache={cache} /> */}
   </div>
 );
 
 function MyApp({ Component, pageProps }) {
   return (
-    <>
+    <SWRDevTools>
       <Component {...pageProps} />
       <DevToolsArea />
-    </>
+    </SWRDevTools>
   );
 }
 

diff --git a/packages/swr-devtools-extensions/package.json b/packages/swr-devtools-extensions/package.json
@@ -27,7 +27,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "styled-components": "^5.3.0",
-    "swr": "^0.5.6",
+    "swr": "^1.0.0-beta.13",
     "swr-devtools": "0.1.0"
   }
 }
diff --git a/packages/swr-devtools-extensions/src/app.tsx b/packages/swr-devtools-extensions/src/app.tsx
@@ -1,11 +1,11 @@
 import ReactDOM from "react-dom";
-import { SWRDevTools } from "swr-devtools";
+import { SWRDevToolPanel } from "swr-devtools";
 
 const cache = new Map();
 
 const render = () => {
   ReactDOM.render(
-    <SWRDevTools cache={cache} />,
+    <SWRDevToolPanel cache={cache} />,
     document.getElementById("app")
   );
 };

diff --git a/packages/swr-devtools-extensions/webpack.config.js b/packages/swr-devtools-extensions/webpack.config.js
@@ -7,7 +7,6 @@ module.exports = {
     background: "./src/background.ts",
     content: "./src/content.ts",
     devtools: "./src/devtools.ts",
-    runtime: "./src/runtime.ts",
   },
   output: {
     path: path.resolve(__dirname, "dist"),

diff --git a/packages/swr-devtools/package.json b/packages/swr-devtools/package.json
@@ -11,14 +11,14 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "styled-components": "^5.3.0",
-    "swr": "^0.5.6"
+    "swr": "^1.0.0-beta.13"
   },
   "devDependencies": {
     "@types/react": "^17.0.16",
     "@types/styled-components": "^5.1.12",
     "react": "^17.0.2",
     "styled-components": "^5.3.0",
-    "swr": "^0.5.6",
+    "swr": "^1.0.0-beta.13",
     "typescript": "^4.1.3"
   },
   "dependencies": {

diff --git a/packages/swr-devtools/src/SWRDevTools.tsx b/packages/swr-devtools/src/SWRDevTools.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { SWRConfig, Middleware } from "swr";
+import { SWRCache } from "./devtools-cache";
+
+import { injectSWRCache, isMetaCache } from "./swr-cache";
+
+const injected = new WeakSet();
+
+const inject = (cache: SWRCache) =>
+  injectSWRCache(cache, (key: string, value: any) => {
+    if (isMetaCache(key)) {
+      return;
+    }
+    window.postMessage(
+      { __SWR_DEVTOOLS__: { cacheData: { key, value } } },
+      "*"
+    );
+  });
+
+const swrdevtools: Middleware = (useSWRNext) => (key, fn, config) => {
+  // @ts-expect-error
+  if (!injected.has(config.cache)) {
+    // @ts-expect-error
+    inject(config.cache);
+  }
+  console.log({ key, fn, config });
+  return useSWRNext(key, fn, config);
+};
+
+export const SWRDevTools = ({ children }: { children: React.ReactNode }) => {
+  return <SWRConfig value={{ use: [swrdevtools] }}>{children}</SWRConfig>;
+};
diff --git a/...wr-devtools/src/components/SWRDevTool.tsx → ...vtools/src/components/SWRDevToolPanel.tsx b/...wr-devtools/src/components/SWRDevTool.tsx → ...vtools/src/components/SWRDevToolPanel.tsx
@@ -55,7 +55,7 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-export const SWRDevTools = ({ cache }: Props) => {
+export const SWRDevToolPanel = ({ cache }: Props) => {
   const [currentCache, historyCache] = useDevToolsCache(cache);
   const [activePanel, setActivePanel] = useState<Panel["key"]>("current");
   const [selectedItemKey, setSelectedItemKey] = useState<ItemKey | null>(null);

diff --git a/packages/swr-devtools/src/components/Tab.tsx b/packages/swr-devtools/src/components/Tab.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { PanelType, Panel } from "./SWRDevTool";
+import { PanelType, Panel } from "./SWRDevToolPanel";
 
 type TabProps = {
   onChange: (panel: PanelType) => void;

diff --git a/packages/swr-devtools/src/index.ts b/packages/swr-devtools/src/index.ts
@@ -1,2 +1,3 @@
-export { SWRDevTools } from "./components/SWRDevTool";
+export { SWRDevToolPanel } from "./components/SWRDevToolPanel";
+export { SWRDevTools } from "./SWRDevTools";
 export { launch } from "./runtime";
diff --git a/yarn.lock b/yarn.lock
@@ -4473,10 +4473,10 @@ supports-color@^8.0.0:
   dependencies:
     has-flag "^4.0.0"
 
-swr@^0.5.6:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-0.5.6.tgz#70bfe9bc9d7ac49a064be4a0f4acf57982e55a31"
-  integrity sha512-Bmx3L4geMZjYT5S2Z6EE6/5Cx6v1Ka0LhqZKq8d6WL2eu9y6gHWz3dUzfIK/ymZVHVfwT/EweFXiYGgfifei3w==
+swr@^1.0.0-beta.13:
+  version "1.0.0-beta.13"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-1.0.0-beta.13.tgz#f555bc1d314c69d42d665016f6c39e0881b9c58d"
+  integrity sha512-m5+KB6wA4YS1BVUfnZA51NbTF7uQ5YqP3crRwF1CrUvoRXn7TU0U/Zb2Il4hvW9QzzqwZwcbJQnlysLTdnYb/A==
   dependencies:
     dequal "2.0.2"