chore(examples): add debug entry points (#117)

* chore(examples): bump Next.js to v13 and enable appDir

* chore(examples): add demo entry points

* chore(examples): add SWREntry & settings

* docs(example): polish styles

examples/swr-devtools-demo/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "../../node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

examples/swr-devtools-demo/app/debug/SWREntry.tsx

@@ -0,0 +1,29 @@
+import useSWR from "swr";
+
+const sleep = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, Math.random() * 1000));
+
+const randomNumber = (len: number) =>
+  Math.floor(Math.random() * Math.pow(10, len));
+
+const fetcher = async () => {
+  await sleep(Math.random() * 2000);
+  return randomNumber(3);
+};
+
+export const SWREntry = ({
+  swrKey,
+  options,
+}: {
+  swrKey: string;
+  options: any;
+}) => {
+  const { data, isLoading, isValidating } = useSWR(
+    "/api/debug?key=" + swrKey,
+    fetcher,
+    options
+  );
+  if (isLoading) return <p>Loading...</p>;
+  if (isValidating) return <p>Validating...</p>;
+  return <p>{data}</p>;
+};

examples/swr-devtools-demo/app/debug/debug.module.css

@@ -0,0 +1,57 @@
+.container {
+  min-height: 100vh;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.main {
+  width: 90%;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 10;
+}
+
+@media (max-width: 780px){
+  .grid {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+.nav {
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.label {
+  display: block;
+}
+
+.label > span {
+  display: inline-block;
+  padding: 0 5px;
+  width: 150px;
+}
+.label > input {
+  max-width: 50px;
+}
+
+.title {
+  line-height: 1.15;
+  font-size: 3rem;
+  text-align: center;
+}
+
+.section {
+  margin-bottom: 20px;
+}
+
+.subtitle {
+  font-size: 2rem;
+  margin: 10px 0;
+}

examples/swr-devtools-demo/app/debug/infinite/infinite.module.css

@@ -0,0 +1,52 @@
+.container {
+  min-height: 100vh;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.main {
+  padding: 0;
+  flex: 1;
+}
+
+.content {
+  flex-direction: column;
+}
+
+.list {
+  margin: 0 auto;
+  max-width: 80%;
+  list-style: none;
+}
+
+.listItem {
+  font-size: 1.2rem;
+  padding-bottom: 10px;
+}
+
+.buttonArea {
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+}
+.button {
+  font-size: 1rem;
+  padding: 0.3rem 0.5rem;
+  border-radius: 5px;
+  border: solid 2px #ccc;
+}
+
+.nav {
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.title {
+  line-height: 1.15;
+  font-size: 3rem;
+  text-align: center;
+}
+

examples/swr-devtools-demo/app/debug/infinite/page.tsx

@@ -0,0 +1,134 @@
+"use client";
+import Head from "next/head";
+import Link from "next/link";
+import useSWRInfinite from "swr/infinite";
+
+import styles from "./infinite.module.css";
+
+const dummyData = {
+  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()",
+    },
+  ],
+};
+
+const sleep = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, Math.random() * 2000));
+
+const fetcher = async (url) => {
+  await sleep(Math.random() * 2000);
+  const searchParams = new URL(location.origin + url).searchParams;
+  return dummyData[searchParams.get("page")] || [];
+};
+
+export default function Home() {
+  const { data, setSize, isValidating } = useSWRInfinite(
+    (index) => `/api/list?page=${index + 1}`,
+    fetcher
+  );
+
+  const pages = data ? data.reduce((acc, page) => acc.concat(page), []) : [];
+
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Debug</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>Debug</h1>
+        <section className={styles.content}>
+          <ul className={styles.list}>
+            {pages.map((page) => (
+              <li key={page.name} className={styles.listItem}>
+                <a href={page.url} target="_blank" rel="noreferrer">
+                  {page.name}
+                </a>
+              </li>
+            ))}
+          </ul>
+          <div className={styles.buttonArea}>
+            <button
+              className={styles.button}
+              onClick={() => {
+                console.log("click");
+                setSize((size) => size + 1);
+              }}
+            >
+              {isValidating ? "...loading" : "Load more"}
+            </button>
+          </div>
+        </section>
+        <nav className={styles.nav}>
+          <Link href="/">Go back</Link>
+        </nav>
+      </main>
+      <footer>
+        <p>SWR DevTools</p>
+      </footer>
+    </div>
+  );
+}