Merge branch 'main' into fix/keyed-mutator-type-error

.github/workflows/test-canary.yml

@@ -22,6 +22,5 @@ jobs:
         run: |
           pnpm clean
           pnpm build
-          pnpm run-all-checks
           pnpm test
           pnpm test:build

.github/workflows/test-legacy-react.yml

@@ -0,0 +1,28 @@
+name: Test React 17
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - v*
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install
+        uses: ./.github/workflows/install
+
+      - name: Test
+        env:
+          TEST_REACT_LEGACY: 1
+        run: |
+          pnpm clean
+          pnpm build
+          pnpm test
+          pnpm test:build

_internal/package.json

@@ -1,6 +1,6 @@
 {
   "main": "../dist/_internal/index.js",
-  "module": "../dist/_internal/index.esm.js",
+  "module": "../dist/_internal/index.mjs",
   "types": "../dist/_internal/index.d.ts",
   "private": true
 }

e2e/site/app/suspense-fallback/layout.tsx

@@ -0,0 +1,17 @@
+import { SWRConfig } from 'swr'
+
+function createPromiseData(data: any, timeout: number) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(data)
+    }, timeout)
+  })
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const fallback = {
+    '/api/promise': createPromiseData({ value: 'async promise' }, 2000)
+  }
+
+  return <SWRConfig value={{ fallback }}>{children}</SWRConfig>
+}

e2e/site/app/suspense-fallback/promise/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import useSWR from 'swr'
+
+export default function Page() {
+  const { data, isLoading } = useSWR('/api/promise')
+
+  return <div>{isLoading ? 'loading...' : data?.value}</div>
+}

e2e/site/next.config.js

@@ -1,8 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental: {
-    serverActions: true,
-  },
-}
+const nextConfig = {}
 
 module.exports = nextConfig

e2e/site/package.json

@@ -12,7 +12,7 @@
     "@types/node": "^20.2.5",
     "@types/react": "^18.2.8",
     "@types/react-dom": "18.2.4",
-    "next": "^13.4.4",
+    "next": "^14.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "5.1.3",

e2e/test/suspense-fallback.test.ts

@@ -0,0 +1,11 @@
+/* eslint-disable testing-library/prefer-screen-queries */
+import { test, expect } from '@playwright/test'
+
+test.describe('suspense fallback', () => {
+  test('should wait for promise fallback value to be resolved', async ({
+    page
+  }) => {
+    await page.goto('./suspense-fallback/promise', { waitUntil: 'commit' })
+    await expect(page.getByText('async promise')).toBeVisible()
+  })
+})

examples/api-hooks/package.json

@@ -5,8 +5,8 @@
   "license": "MIT",
   "dependencies": {
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/autocomplete-suggestions/package.json

@@ -7,8 +7,8 @@
     "@reach/combobox": "0.16.1",
     "lodash.debounce": "4.0.8",
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/axios-typescript/package.json

@@ -6,8 +6,8 @@
   "dependencies": {
     "axios": "0.23.0",
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/axios/package.json

@@ -6,8 +6,8 @@
   "dependencies": {
     "axios": "0.27.2",
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/basic-typescript/package.json

@@ -5,8 +5,8 @@
   "license": "MIT",
   "dependencies": {
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/basic/package.json

@@ -4,8 +4,8 @@
   "license": "MIT",
   "dependencies": {
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/focus-revalidate/package.json

@@ -5,8 +5,8 @@
   "license": "MIT",
   "dependencies": {
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/global-fetcher/package.json

@@ -5,8 +5,8 @@
   "license": "MIT",
   "dependencies": {
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/infinite-scroll/package.json

@@ -5,8 +5,8 @@
   "license": "MIT",
   "dependencies": {
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/infinite/package.json

@@ -5,8 +5,8 @@
   "license": "MIT",
   "dependencies": {
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/local-state-sharing/package.json

@@ -4,8 +4,8 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "next": "latest",
     "swr": "latest"
   },

examples/optimistic-ui-immer/package.json

@@ -6,8 +6,8 @@
   "dependencies": {
     "immer": "9.0.5",
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/optimistic-ui/package.json

@@ -5,8 +5,8 @@
   "license": "MIT",
   "dependencies": {
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/prefetch-preload/package.json

@@ -5,8 +5,8 @@
   "license": "MIT",
   "dependencies": {
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/refetch-interval/package.json

@@ -5,8 +5,8 @@
   "license": "MIT",
   "dependencies": {
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/server-render/package.json

@@ -5,8 +5,8 @@
   "license": "MIT",
   "dependencies": {
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/storage-tab-sync/package.json

@@ -5,8 +5,8 @@
   "license": "MIT",
   "dependencies": {
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "latest",
+    "react-dom": "latest",
     "swr": "latest"
   },
   "scripts": {

examples/suspense/app/layout.jsx

@@ -0,0 +1,9 @@
+export default function RootLayout({
+  children
+}) {
+  return (
+    <html lang="en">
+      <body style={{ textAlign: 'center' }}>{children}</body>
+    </html>
+  )
+}

examples/suspense/app/rsc/[user]/[repo]/error.jsx

@@ -0,0 +1,4 @@
+'use client'
+export default function ErrorPage() {
+  return <div>Error happen</div>;
+}

examples/suspense/app/rsc/[user]/[repo]/loading.jsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <div>Loading...</div>;
+}

examples/suspense/app/rsc/[user]/[repo]/page.jsx

@@ -0,0 +1,23 @@
+import Repo from './repo'
+import fetcher from '../../../../libs/fetch'
+import Link from 'next/link'
+import { Suspense } from 'react'
+const Page = ({ params }) => {
+  const { user, repo } = params
+  const id = `${user}/${repo}`
+  const serverData = fetcher('http://localhost:3000/api/data?id=' + id)
+  return (
+    <div>
+      <div>Repo: {id}</div>
+      <Suspense fallback={<div>Loading stats</div>}>
+        <Repo serverData={serverData} id={id} />
+      </Suspense>
+      <br />
+      <br />
+      <Link href="/rsc">Back</Link>
+    </div>
+  )
+}
+
+
+export default Page

examples/suspense/app/rsc/[user]/[repo]/repo.jsx

@@ -0,0 +1,21 @@
+'use client'
+import fetcher from '../../../../libs/fetch'
+import useSWR from 'swr'
+
+const Repo = ({ id, serverData }) => {
+  const { data } = useSWR('/api/data?id=' + id, fetcher, { suspense: true, fallbackData: serverData })
+  return (
+    <>
+      {data ? (
+        <div>
+          <p>forks: {data.forks_count}</p>
+          <p>stars: {data.stargazers_count}</p>
+          <p>watchers: {data.watchers}</p>
+        </div>
+      ) : null}
+
+    </>
+  )
+}
+
+export default Repo

examples/suspense/app/rsc/loading.jsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <div>Loading...</div>;
+}

examples/suspense/app/rsc/page.jsx

@@ -0,0 +1,8 @@
+import fetcher from '../../libs/fetch'
+import Repos from './repos'
+const Page = () => {
+  const serverData = fetcher('http://localhost:3000/api/data')
+  return <Repos serverData={serverData} />
+}
+
+export default Page