docs(examples): add react 18 example about problem of suspense preren…

…dering siblings (#1233) Thanks to @minsour @sonsurim @2-NOW. I added you guys as co-author --------- Co-authored-by: Minsoo Park <[email protected]> Co-authored-by: 2-NOW <[email protected]> Co-authored-by: Sonny <[email protected]> Co-authored-by: GwanSik Kim <[email protected]>
toss · Aug 23, 2024 · c403372 · c403372
1 parent 454bbc6
commit c403372
Show file tree

Hide file tree

Showing 11 changed files with 265 additions and 0 deletions.
diff --git a/examples/vite-react-18-suspense-prerender-siblings-problem/.eslintrc.cjs b/examples/vite-react-18-suspense-prerender-siblings-problem/.eslintrc.cjs
@@ -0,0 +1,10 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['@suspensive/eslint-config/react-ts'],
+  ignorePatterns: ['dist', 'coverage'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: 'tsconfig.json',
+  },
+}
diff --git a/examples/vite-react-18-suspense-prerender-siblings-problem/index.html b/examples/vite-react-18-suspense-prerender-siblings-problem/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Suspensive - Example Problem of Suspense Prerender Siblings</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/vite-react-18-suspense-prerender-siblings-problem/package.json b/examples/vite-react-18-suspense-prerender-siblings-problem/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@suspensive/vite-react-18-suspense-prerender-siblings-problem",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "dev": "vite",
+    "ci:eslint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "@tanstack/react-query": "^5.52.1",
+    "@tanstack/react-query-devtools": "^5.52.1"
+  },
+  "devDependencies": {
+    "@suspensive/eslint-config": "workspace:*",
+    "@suspensive/tsconfig": "workspace:*",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "^4.3.1",
+    "globals": "^15.9.0"
+  }
+}
diff --git a/examples/vite-react-18-suspense-prerender-siblings-problem/src/App.css b/examples/vite-react-18-suspense-prerender-siblings-problem/src/App.css
@@ -0,0 +1,6 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
diff --git a/examples/vite-react-18-suspense-prerender-siblings-problem/src/App.tsx b/examples/vite-react-18-suspense-prerender-siblings-problem/src/App.tsx
@@ -0,0 +1,56 @@
+import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'
+import { Suspense, useState } from 'react'
+import './App.css'
+
+export default function App() {
+  const [isClicked, setIsClicked] = useState(false)
+  return (
+    <>
+      <button onClick={() => setIsClicked(true)}>click to render</button>
+      {isClicked ? (
+        <Suspense fallback={<Fallback />}>
+          {Array.from({ length: 10 }, (_, i) => (
+            <Suspend key={i} i={i} />
+          ))}
+          <Slow />
+        </Suspense>
+      ) : (
+        ' not clicked. before start, open devtools(console, network)'
+      )}
+    </>
+  )
+}
+
+const Fallback = () => {
+  console.log({ Fallback: 'Fallback' })
+  return 'loading...'
+}
+
+const Slow = () => {
+  console.log({ Slow: 'start' })
+  const startTime = new Date().getTime()
+  while (new Date().getTime() - startTime < 3000) {
+    // slow trigger
+  }
+  console.log({ Slow: 'end' })
+
+  return <span style={{ padding: 4, backgroundColor: 'red', marginLeft: 4 }}>Slow</span>
+}
+
+const Suspend = ({ i }: { i: number }) => {
+  console.log({ Suspend: `before Suspend${i + 1}` })
+  useSuspenseQuery(query.dummy(i))
+  console.log({ Suspend: `after Suspend${i + 1}` })
+  return <span style={{ padding: 4, backgroundColor: 'black', marginLeft: 4 }}>{i}</span>
+}
+
+const query = {
+  dummy: (ms: number) =>
+    queryOptions({
+      queryKey: ['dummy', ms],
+      queryFn: async () => {
+        console.log({ fetch: `fetch${ms + 1}` })
+        return fetch(`https://dummyjson.com/users/${ms + 1}`).then((res) => res.json())
+      },
+    }),
+}
diff --git a/examples/vite-react-18-suspense-prerender-siblings-problem/src/index.css b/examples/vite-react-18-suspense-prerender-siblings-problem/src/index.css
@@ -0,0 +1,14 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/examples/vite-react-18-suspense-prerender-siblings-problem/src/main.tsx b/examples/vite-react-18-suspense-prerender-siblings-problem/src/main.tsx
@@ -0,0 +1,25 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: Infinity,
+      staleTime: Infinity,
+    },
+  },
+})
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={client}>
+      <App />
+      <ReactQueryDevtools client={client} />
+    </QueryClientProvider>
+  </StrictMode>
+)
diff --git a/examples/vite-react-18-suspense-prerender-siblings-problem/src/vite-env.d.ts b/examples/vite-react-18-suspense-prerender-siblings-problem/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/vite-react-18-suspense-prerender-siblings-problem/tsconfig.json b/examples/vite-react-18-suspense-prerender-siblings-problem/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", ".eslintrc.cjs", "vite.config.ts"]
+}
diff --git a/examples/vite-react-18-suspense-prerender-siblings-problem/vite.config.ts b/examples/vite-react-18-suspense-prerender-siblings-problem/vite.config.ts
@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml