From d21a770be7378c0c8ab04be8f5746b607773b4af Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 13 Jul 2022 02:34:13 +0200
Subject: [PATCH 1/3] Mark dynamic as client component

---
 packages/next/build/webpack/loaders/utils.ts          |  2 +-
 .../app-dir/app/app/dashboard/index/dynamic.client.js |  7 +++++++
 .../app/app/dashboard/index/dynamic.module.css        |  3 +++
 .../app-dir/app/app/dashboard/index/lazy.client.js    |  4 +++-
 .../app-dir/app/app/dashboard/index/lazy.module.css   |  3 +++
 .../app/app/dashboard/index/next-dynamic.server.js    | 11 +++++++++++
 .../app-dir/app/app/dashboard/index/page.server.js    |  6 ++++--
 .../index/{test.client.js => react-lazy.client.js}    |  2 +-
 8 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 test/e2e/app-dir/app/app/dashboard/index/dynamic.client.js
 create mode 100644 test/e2e/app-dir/app/app/dashboard/index/dynamic.module.css
 create mode 100644 test/e2e/app-dir/app/app/dashboard/index/lazy.module.css
 create mode 100644 test/e2e/app-dir/app/app/dashboard/index/next-dynamic.server.js
 rename test/e2e/app-dir/app/app/dashboard/index/{test.client.js => react-lazy.client.js} (85%)

diff --git a/packages/next/build/webpack/loaders/utils.ts b/packages/next/build/webpack/loaders/utils.ts
index d6e113f1f93c..c1a3ecd91a0a 100644
--- a/packages/next/build/webpack/loaders/utils.ts
+++ b/packages/next/build/webpack/loaders/utils.ts
@@ -1,6 +1,6 @@
 export const defaultJsFileExtensions = ['js', 'mjs', 'jsx', 'ts', 'tsx']
 const imageExtensions = ['jpg', 'jpeg', 'png', 'webp', 'avif']
-const nextClientComponents = ['link', 'image', 'head', 'script']
+const nextClientComponents = ['link', 'image', 'head', 'script', 'dynamic']
 
 const NEXT_BUILT_IN_CLIENT_RSC_REGEX = new RegExp(
   `[\\\\/]next[\\\\/](${nextClientComponents.join('|')})\\.js$`
diff --git a/test/e2e/app-dir/app/app/dashboard/index/dynamic.client.js b/test/e2e/app-dir/app/app/dashboard/index/dynamic.client.js
new file mode 100644
index 000000000000..6a92077bb527
--- /dev/null
+++ b/test/e2e/app-dir/app/app/dashboard/index/dynamic.client.js
@@ -0,0 +1,7 @@
+import { useState } from 'react'
+import styles from './dynamic.module.css'
+
+export default function Dynamic() {
+  let [state] = useState('next dynamic')
+  return <p className={styles.dynamic}>hello from modern the {state}</p>
+}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/dynamic.module.css b/test/e2e/app-dir/app/app/dashboard/index/dynamic.module.css
new file mode 100644
index 000000000000..97af642339e0
--- /dev/null
+++ b/test/e2e/app-dir/app/app/dashboard/index/dynamic.module.css
@@ -0,0 +1,3 @@
+.dynamic {
+  color: blue;
+}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/lazy.client.js b/test/e2e/app-dir/app/app/dashboard/index/lazy.client.js
index 5f03b364a88f..7fea867ede54 100644
--- a/test/e2e/app-dir/app/app/dashboard/index/lazy.client.js
+++ b/test/e2e/app-dir/app/app/dashboard/index/lazy.client.js
@@ -1,7 +1,9 @@
+import styles from './lazy.module.css'
+
 export default function LazyComponent() {
   return (
     <>
-      <p>hello from lazy</p>
+      <p className={styles.lazy}>hello from lazy</p>
     </>
   )
 }
diff --git a/test/e2e/app-dir/app/app/dashboard/index/lazy.module.css b/test/e2e/app-dir/app/app/dashboard/index/lazy.module.css
new file mode 100644
index 000000000000..4369b2c770ee
--- /dev/null
+++ b/test/e2e/app-dir/app/app/dashboard/index/lazy.module.css
@@ -0,0 +1,3 @@
+.lazy {
+  color: purple;
+}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/next-dynamic.server.js b/test/e2e/app-dir/app/app/dashboard/index/next-dynamic.server.js
new file mode 100644
index 000000000000..9d2ce63ebc99
--- /dev/null
+++ b/test/e2e/app-dir/app/app/dashboard/index/next-dynamic.server.js
@@ -0,0 +1,11 @@
+import dynamic from 'next/dynamic'
+
+const Dynamic = dynamic(() => import('./dynamic.client.js'), { suspense: true })
+
+export function NextDynamicClientComponent() {
+  return (
+    <>
+      <Dynamic />
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/page.server.js b/test/e2e/app-dir/app/app/dashboard/index/page.server.js
index 8cf1ff530d6c..19e257a2c2a3 100644
--- a/test/e2e/app-dir/app/app/dashboard/index/page.server.js
+++ b/test/e2e/app-dir/app/app/dashboard/index/page.server.js
@@ -1,10 +1,12 @@
-import { ClientComponent } from './test.client.js'
+import { LazyClientComponent } from './react-lazy.client.js'
+import { NextDynamicClientComponent } from './next-dynamic.server.js'
 
 export default function DashboardIndexPage() {
   return (
     <>
       <p>hello from app/dashboard/index</p>
-      <ClientComponent />
+      <NextDynamicClientComponent />
+      <LazyClientComponent />
     </>
   )
 }
diff --git a/test/e2e/app-dir/app/app/dashboard/index/test.client.js b/test/e2e/app-dir/app/app/dashboard/index/react-lazy.client.js
similarity index 85%
rename from test/e2e/app-dir/app/app/dashboard/index/test.client.js
rename to test/e2e/app-dir/app/app/dashboard/index/react-lazy.client.js
index d04b4ce04b3a..7188966f4c8e 100644
--- a/test/e2e/app-dir/app/app/dashboard/index/test.client.js
+++ b/test/e2e/app-dir/app/app/dashboard/index/react-lazy.client.js
@@ -2,7 +2,7 @@ import { useState, lazy } from 'react'
 
 const Lazy = lazy(() => import('./lazy.client.js'))
 
-export function ClientComponent() {
+export function LazyClientComponent() {
   let [state] = useState('client')
   return (
     <>

From 3ea78c9e39fc3d70b9be1c2460a852a7c1b608b0 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 13 Jul 2022 07:05:19 +0200
Subject: [PATCH 2/3] update tests and keep dynamic in client component

---
 .../app/app/dashboard/index/dynamic.client.js |  6 +++++-
 .../app/app/dashboard/index/lazy.client.js    |  4 +++-
 .../dashboard/index/next-dynamic.client.js    |  7 +++++++
 .../dashboard/index/next-dynamic.server.js    | 11 ----------
 .../app/app/dashboard/index/page.server.js    |  4 ++--
 test/e2e/app-dir/index.test.ts                | 21 +++++++++++++++----
 test/e2e/app-dir/rsc-basic.test.ts            |  2 ++
 7 files changed, 36 insertions(+), 19 deletions(-)
 create mode 100644 test/e2e/app-dir/app/app/dashboard/index/next-dynamic.client.js
 delete mode 100644 test/e2e/app-dir/app/app/dashboard/index/next-dynamic.server.js

diff --git a/test/e2e/app-dir/app/app/dashboard/index/dynamic.client.js b/test/e2e/app-dir/app/app/dashboard/index/dynamic.client.js
index 6a92077bb527..a754ecb2082a 100644
--- a/test/e2e/app-dir/app/app/dashboard/index/dynamic.client.js
+++ b/test/e2e/app-dir/app/app/dashboard/index/dynamic.client.js
@@ -3,5 +3,9 @@ import styles from './dynamic.module.css'
 
 export default function Dynamic() {
   let [state] = useState('next dynamic')
-  return <p className={styles.dynamic}>hello from modern the {state}</p>
+  return (
+    <p id="css-text-dynamic" className={styles.dynamic}>
+      hello from modern the {state}
+    </p>
+  )
 }
diff --git a/test/e2e/app-dir/app/app/dashboard/index/lazy.client.js b/test/e2e/app-dir/app/app/dashboard/index/lazy.client.js
index 7fea867ede54..1c225c38b190 100644
--- a/test/e2e/app-dir/app/app/dashboard/index/lazy.client.js
+++ b/test/e2e/app-dir/app/app/dashboard/index/lazy.client.js
@@ -3,7 +3,9 @@ import styles from './lazy.module.css'
 export default function LazyComponent() {
   return (
     <>
-      <p className={styles.lazy}>hello from lazy</p>
+      <p id="css-text-lazy" className={styles.lazy}>
+        hello from lazy
+      </p>
     </>
   )
 }
diff --git a/test/e2e/app-dir/app/app/dashboard/index/next-dynamic.client.js b/test/e2e/app-dir/app/app/dashboard/index/next-dynamic.client.js
new file mode 100644
index 000000000000..6728a87f463c
--- /dev/null
+++ b/test/e2e/app-dir/app/app/dashboard/index/next-dynamic.client.js
@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic'
+
+const Dynamic = dynamic(() => import('./dynamic.client'))
+
+export function NextDynamicClientComponent() {
+  return <Dynamic />
+}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/next-dynamic.server.js b/test/e2e/app-dir/app/app/dashboard/index/next-dynamic.server.js
deleted file mode 100644
index 9d2ce63ebc99..000000000000
--- a/test/e2e/app-dir/app/app/dashboard/index/next-dynamic.server.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import dynamic from 'next/dynamic'
-
-const Dynamic = dynamic(() => import('./dynamic.client.js'), { suspense: true })
-
-export function NextDynamicClientComponent() {
-  return (
-    <>
-      <Dynamic />
-    </>
-  )
-}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/page.server.js b/test/e2e/app-dir/app/app/dashboard/index/page.server.js
index 19e257a2c2a3..d12da1104893 100644
--- a/test/e2e/app-dir/app/app/dashboard/index/page.server.js
+++ b/test/e2e/app-dir/app/app/dashboard/index/page.server.js
@@ -1,5 +1,5 @@
-import { LazyClientComponent } from './react-lazy.client.js'
-import { NextDynamicClientComponent } from './next-dynamic.server.js'
+import { LazyClientComponent } from './react-lazy.client'
+import { NextDynamicClientComponent } from './next-dynamic.client'
 
 export default function DashboardIndexPage() {
   return (
diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
index 2bb7586f05f5..6971ab82c11d 100644
--- a/test/e2e/app-dir/index.test.ts
+++ b/test/e2e/app-dir/index.test.ts
@@ -1,6 +1,6 @@
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
-import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
+import { check, fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
 import path from 'path'
 import cheerio from 'cheerio'
 import webdriver from 'next-webdriver'
@@ -64,11 +64,24 @@ describe('app dir', () => {
   it('should serve /index as separate page', async () => {
     const html = await renderViaHTTP(next.url, '/dashboard/index')
     expect(html).toContain('hello from app/dashboard/index')
+    // should load chunks generated via async import correctly
+    expect(html).toContain('hello from lazy')
   })
 
-  it('should load chunks generated via async import correctly', async () => {
-    const html = await renderViaHTTP(next.url, '/dashboard/index')
-    expect(html).toContain('hello from lazy')
+  // TODO-APP: handle css modules fouc in dev
+  it.skip('should handle css imports in next/dynamic correctly', async () => {
+    const browser = await webdriver(next.url, '/dashboard/index')
+
+    expect(
+      await browser.eval(
+        `window.getComputedStyle(document.querySelector('#css-text-dynamic')).color`
+      )
+    ).toBe('rgb(0, 0, 255)')
+    expect(
+      await browser.eval(
+        `window.getComputedStyle(document.querySelector('#css-text-lazy')).color`
+      )
+    ).toBe('rgb(128, 0, 128)')
   })
 
   it('should include layouts when no direct parent layout', async () => {
diff --git a/test/e2e/app-dir/rsc-basic.test.ts b/test/e2e/app-dir/rsc-basic.test.ts
index cd2d4d22ed56..c00edef461c9 100644
--- a/test/e2e/app-dir/rsc-basic.test.ts
+++ b/test/e2e/app-dir/rsc-basic.test.ts
@@ -361,7 +361,9 @@ describe('app dir - react server components', () => {
         expect(gotInlinedData).toBe(true)
       }
     )
+  })
 
+  it('should support partial hydration with inlined server data in browser', async () => {
     // Should end up with "next_streaming_data".
     const browser = await webdriver(next.url, '/partial-hydration', {
       waitHydration: false,

From 5ad61136cc7f2b0f7f8499399acc27e6ca296e52 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 13 Jul 2022 07:11:49 +0200
Subject: [PATCH 3/3] fix lint

---
 test/e2e/app-dir/index.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
index 6971ab82c11d..30cb129cc8c9 100644
--- a/test/e2e/app-dir/index.test.ts
+++ b/test/e2e/app-dir/index.test.ts
@@ -1,6 +1,6 @@
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
-import { check, fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
+import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
 import path from 'path'
 import cheerio from 'cheerio'
 import webdriver from 'next-webdriver'