Skip to content

Commit 77e5a58

Browse files
koba04koba04
authored
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
1 parent 0d141cd commit 77e5a58

File tree

13 files changed

+545
-5
lines changed

13 files changed

+545
-5
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"typescript.tsdk": "../../node_modules/typescript/lib",
3+
"typescript.enablePromptUseWorkspaceTsdk": true
4+
}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import useSWR from "swr";
2+
3+
const sleep = (ms: number) =>
4+
new Promise((resolve) => setTimeout(resolve, Math.random() * 1000));
5+
6+
const randomNumber = (len: number) =>
7+
Math.floor(Math.random() * Math.pow(10, len));
8+
9+
const fetcher = async () => {
10+
await sleep(Math.random() * 2000);
11+
return randomNumber(3);
12+
};
13+
14+
export const SWREntry = ({
15+
swrKey,
16+
options,
17+
}: {
18+
swrKey: string;
19+
options: any;
20+
}) => {
21+
const { data, isLoading, isValidating } = useSWR(
22+
"/api/debug?key=" + swrKey,
23+
fetcher,
24+
options
25+
);
26+
if (isLoading) return <p>Loading...</p>;
27+
if (isValidating) return <p>Validating...</p>;
28+
return <p>{data}</p>;
29+
};

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.container {
2+
min-height: 100vh;
3+
padding: 0;
4+
display: flex;
5+
flex-direction: column;
6+
justify-content: center;
7+
align-items: center;
8+
}
9+
10+
.main {
11+
width: 90%;
12+
}
13+
14+
.grid {
15+
display: grid;
16+
grid-template-columns: repeat(10, 1fr);
17+
gap: 10;
18+
}
19+
20+
@media (max-width: 780px){
21+
.grid {
22+
grid-template-columns: repeat(5, 1fr);
23+
}
24+
}
25+
26+
.nav {
27+
font-size: 1.2rem;
28+
text-align: center;
29+
}
30+
31+
.label {
32+
display: block;
33+
}
34+
35+
.label > span {
36+
display: inline-block;
37+
padding: 0 5px;
38+
width: 150px;
39+
}
40+
.label > input {
41+
max-width: 50px;
42+
}
43+
44+
.title {
45+
line-height: 1.15;
46+
font-size: 3rem;
47+
text-align: center;
48+
}
49+
50+
.section {
51+
margin-bottom: 20px;
52+
}
53+
54+
.subtitle {
55+
font-size: 2rem;
56+
margin: 10px 0;
57+
}

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.container {
2+
min-height: 100vh;
3+
padding: 0;
4+
display: flex;
5+
flex-direction: column;
6+
justify-content: center;
7+
align-items: center;
8+
}
9+
10+
.main {
11+
padding: 0;
12+
flex: 1;
13+
}
14+
15+
.content {
16+
flex-direction: column;
17+
}
18+
19+
.list {
20+
margin: 0 auto;
21+
max-width: 80%;
22+
list-style: none;
23+
}
24+
25+
.listItem {
26+
font-size: 1.2rem;
27+
padding-bottom: 10px;
28+
}
29+
30+
.buttonArea {
31+
display: flex;
32+
justify-content: center;
33+
padding: 1rem;
34+
}
35+
.button {
36+
font-size: 1rem;
37+
padding: 0.3rem 0.5rem;
38+
border-radius: 5px;
39+
border: solid 2px #ccc;
40+
}
41+
42+
.nav {
43+
font-size: 1.2rem;
44+
text-align: center;
45+
}
46+
47+
.title {
48+
line-height: 1.15;
49+
font-size: 3rem;
50+
text-align: center;
51+
}
52+

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

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
"use client";
2+
import Head from "next/head";
3+
import Link from "next/link";
4+
import useSWRInfinite from "swr/infinite";
5+
6+
import styles from "./infinite.module.css";
7+
8+
const dummyData = {
9+
1: [
10+
{
11+
name: "Array.prototype.at()",
12+
url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at",
13+
},
14+
{
15+
name: "Array.prototype.concat()",
16+
url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat",
17+
},
18+
{
19+
name: "Array.prototype.copyWithin()",
20+
url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin",
21+
},
22+
{
23+
name: "Array.prototype.entries()",
24+
url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries",
25+
},
26+
{
27+
name: "Array.prototype.every()",
28+
url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every",
29+
},
30+
],
31+
2: [
32+
{
33+
name: "HTMLElement.accessKey",
34+
url: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/accessKey",
35+
},
36+
{
37+
name: "HTMLElement.contentEditable",
38+
url: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable",
39+
},
40+
{
41+
name: "HTMLElement.inert",
42+
url: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert",
43+
},
44+
{
45+
name: "HTMLElement.nonce",
46+
url: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/nonce",
47+
},
48+
{
49+
name: "HTMLElement.tabIndex",
50+
url: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex",
51+
},
52+
],
53+
3: [
54+
{
55+
name: "animation",
56+
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation",
57+
},
58+
{
59+
name: "background",
60+
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/background",
61+
},
62+
{
63+
name: "border",
64+
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border",
65+
},
66+
{
67+
name: "display",
68+
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/display",
69+
},
70+
{
71+
name: "env()",
72+
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/env()",
73+
},
74+
],
75+
};
76+
77+
const sleep = (ms: number) =>
78+
new Promise((resolve) => setTimeout(resolve, Math.random() * 2000));
79+
80+
const fetcher = async (url) => {
81+
await sleep(Math.random() * 2000);
82+
const searchParams = new URL(location.origin + url).searchParams;
83+
return dummyData[searchParams.get("page")] || [];
84+
};
85+
86+
export default function Home() {
87+
const { data, setSize, isValidating } = useSWRInfinite(
88+
(index) => `/api/list?page=${index + 1}`,
89+
fetcher
90+
);
91+
92+
const pages = data ? data.reduce((acc, page) => acc.concat(page), []) : [];
93+
94+
return (
95+
<div className={styles.container}>
96+
<Head>
97+
<title>Debug</title>
98+
<link rel="icon" href="/favicon.ico" />
99+
</Head>
100+
101+
<main className={styles.main}>
102+
<h1 className={styles.title}>Debug</h1>
103+
<section className={styles.content}>
104+
<ul className={styles.list}>
105+
{pages.map((page) => (
106+
<li key={page.name} className={styles.listItem}>
107+
<a href={page.url} target="_blank" rel="noreferrer">
108+
{page.name}
109+
</a>
110+
</li>
111+
))}
112+
</ul>
113+
<div className={styles.buttonArea}>
114+
<button
115+
className={styles.button}
116+
onClick={() => {
117+
console.log("click");
118+
setSize((size) => size + 1);
119+
}}
120+
>
121+
{isValidating ? "...loading" : "Load more"}
122+
</button>
123+
</div>
124+
</section>
125+
<nav className={styles.nav}>
126+
<Link href="/">Go back</Link>
127+
</nav>
128+
</main>
129+
<footer>
130+
<p>SWR DevTools</p>
131+
</footer>
132+
</div>
133+
);
134+
}

0 commit comments

Comments
 (0)