feat: support SWR v2

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/
-extension.zip
+extension.zip
+*.tsbuildinfo

examples/swr-devtools-demo/package.json

@@ -14,7 +14,7 @@
     "react-dom": "17.0.2",
     "styled-components": "^5.3.0",
     "sugar-high": "^0.4.2",
-    "swr": "^1.1.0"
+    "swr": "^2.0.0-beta.2"
   },
   "devDependencies": {
     "@types/node": "^14.14.27",

examples/swr-devtools-demo/tsconfig.json

@@ -17,7 +17,6 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
   },
   "include": [
     "next-env.d.ts",

examples/swr-v1-devtools-demo/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["next/babel"],
+    "plugins": [["styled-components", { "ssr": true }]]
+  }

examples/swr-v1-devtools-demo/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+.tsbuildinfo

examples/swr-v1-devtools-demo/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Toru Kobayashi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

examples/swr-v1-devtools-demo/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/swr-v1-devtools-demo/components/DevToolsView.tsx

@@ -0,0 +1,17 @@
+import { useSWRConfig } from "swr";
+import { SWRDevToolPanel } from "swr-devtools-panel";
+
+// The way to use SWR DevTools as a React Component
+export const DevToolsView = () => {
+  const { cache } = useSWRConfig();
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "400px",
+      }}
+    >
+      <SWRDevToolPanel cache={cache} />
+    </div>
+  );
+};

examples/swr-v1-devtools-demo/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/swr-v1-devtools-demo/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "swr-v1-devtools-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "^12.0.7",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "styled-components": "^5.3.0",
+    "sugar-high": "^0.4.2",
+    "swr": "^1.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.27",
+    "babel-plugin-styled-components": "^1.13.2"
+  }
+}

examples/swr-v1-devtools-demo/pages/_app.tsx

@@ -0,0 +1,24 @@
+import "../styles/globals.css";
+import { SWRConfig } from "swr";
+import { SWRDevTools } from "swr-devtools";
+
+const fetcher = async (url) => {
+  const res = await fetch(url);
+  const json = await res.json();
+  if (res.ok) {
+    return json;
+  }
+  throw new Error(json.message);
+};
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <SWRConfig value={{ fetcher }}>
+      <SWRDevTools>
+        <Component {...pageProps} />
+      </SWRDevTools>
+    </SWRConfig>
+  );
+}
+
+export default MyApp;

examples/swr-v1-devtools-demo/pages/_document.tsx

@@ -0,0 +1,30 @@
+import Document, { DocumentContext } from "next/document";
+import { ServerStyleSheet } from "styled-components";
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}

examples/swr-v1-devtools-demo/pages/api/hello.ts

@@ -0,0 +1,12 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+let counter = 1;
+
+export default (req, res) => {
+  ++counter;
+  if (req.query.error) {
+    res.status(500).json({ message: "this is an error message" });
+  } else {
+    res.status(200).json({ name: `Hello World ${counter}` });
+  }
+};

examples/swr-v1-devtools-demo/pages/api/list.ts

@@ -0,0 +1,74 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+const pages = {
+  1: [
+    {
+      name: "Array.prototype.at()",
+      url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at",
+    },
+    {
+      name: "Array.prototype.concat()",
+      url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat",
+    },
+    {
+      name: "Array.prototype.copyWithin()",
+      url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin",
+    },
+    {
+      name: "Array.prototype.entries()",
+      url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries",
+    },
+    {
+      name: "Array.prototype.every()",
+      url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every",
+    },
+  ],
+  2: [
+    {
+      name: "HTMLElement.accessKey",
+      url: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/accessKey",
+    },
+    {
+      name: "HTMLElement.contentEditable",
+      url: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable",
+    },
+    {
+      name: "HTMLElement.inert",
+      url: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert",
+    },
+    {
+      name: "HTMLElement.nonce",
+      url: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/nonce",
+    },
+    {
+      name: "HTMLElement.tabIndex",
+      url: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex",
+    },
+  ],
+  3: [
+    {
+      name: "animation",
+      url: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation",
+    },
+    {
+      name: "background",
+      url: "https://developer.mozilla.org/en-US/docs/Web/CSS/background",
+    },
+    {
+      name: "border",
+      url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border",
+    },
+    {
+      name: "display",
+      url: "https://developer.mozilla.org/en-US/docs/Web/CSS/display",
+    },
+    {
+      name: "env()",
+      url: "https://developer.mozilla.org/en-US/docs/Web/CSS/env()",
+    },
+  ],
+};
+
+export default (req, res) => {
+  res.status(200).json(pages[req.query.page] || null);
+};