first commit

test/integration/react-current-version/app/components/foo.js

@@ -0,0 +1 @@
+export default () => 'foo'

test/integration/react-current-version/app/components/red.tsx

@@ -0,0 +1,21 @@
+import React, { Suspense } from 'react'
+import { createStreamingData } from './streaming-data'
+
+const Data = createStreamingData()
+
+export default function Styled() {
+  return (
+    <Suspense fallback={`fallback`}>
+      <Data>
+        <div>
+          <p>This is Red.</p>
+          <style jsx>{`
+            p {
+              color: red;
+            }
+          `}</style>
+        </div>
+      </Data>
+    </Suspense>
+  )
+}

test/integration/react-current-version/app/components/streaming-data.js

@@ -0,0 +1,16 @@
+export function createStreamingData() {
+  let result
+  let promise
+  function Data({ children, duration = 500 }) {
+    if (result) return result
+    if (!promise)
+      promise = new Promise((res) => {
+        setTimeout(() => {
+          result = children
+          res()
+        }, duration)
+      })
+    throw promise
+  }
+  return Data
+}

test/integration/react-current-version/app/next.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  reactStrictMode: true,
+  images: {
+    deviceSizes: [480, 1024, 1600, 2000],
+    imageSizes: [16, 32, 48, 64],
+    formats: ['image/avif', 'image/webp'],
+  },
+}

test/integration/react-current-version/app/package.json

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}

test/integration/react-current-version/app/pages/dynamic.js

@@ -0,0 +1,9 @@
+import dynamic from 'next/dynamic'
+
+const Foo = dynamic(() => import('../components/foo'))
+
+export default () => (
+  <div>
+    <Foo />
+  </div>
+)

test/integration/react-current-version/app/pages/index.js

@@ -0,0 +1,25 @@
+import ReactDOM from 'react-dom'
+import Image from 'next/image'
+
+export default function Index() {
+  if (typeof window !== 'undefined') {
+    window.didHydrate = true
+  }
+  console.log('__render__')
+  return (
+    <div>
+      <p id="react-dom-version">{ReactDOM.version}</p>
+      <Image
+        id="priority-image"
+        priority
+        src="/noop.png"
+        width={300}
+        height={400}
+      />
+    </div>
+  )
+}
+
+export const config = {
+  // runtime: 'experimental-edge'
+}

test/integration/react-current-version/app/pages/use-flush-effect/styled-jsx.tsx

@@ -0,0 +1,30 @@
+// use tsx to cover typescript usage of next/dynamic + suspense: true
+
+import React from 'react'
+import dynamic from 'next/dynamic'
+
+const Red = dynamic(() => import('../../components/red'))
+
+function Blue() {
+  return (
+    <div>
+      <p>This is Blue.</p>
+      <style jsx>{`
+        p {
+          color: blue;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default function StyledJsx() {
+  return (
+    <>
+      <Blue />
+      <React.Suspense fallback="Loading...">
+        <Red />
+      </React.Suspense>
+    </>
+  )
+}

test/integration/react-current-version/app/pages/use-id.js

@@ -0,0 +1,5 @@
+import { useId } from 'react'
+
+export default function Page() {
+  return <div id="id">{useId()}</div>
+}

test/integration/react-current-version/app/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
+}