on demand

vercel · Sep 12, 2024 · e1f6e13 · e1f6e13
1 parent 9a41a6b
commit e1f6e13
Show file tree

Hide file tree

Showing 7 changed files with 197 additions and 29 deletions.
diff --git a/test/e2e/pages-dir/css-module/next-dynamic.test.ts b/test/e2e/pages-dir/css-module/next-dynamic.test.ts
@@ -19,9 +19,7 @@ describe('pages-dir-css-module-next-dynamic-client-navigation', () => {
       const buttonBgColor = await browser.eval(
         `window.getComputedStyle(document.querySelector('button')).backgroundColor`
       )
-      // not gray
-      expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
-      // but red
+      // red
       expect(buttonBgColor).toBe('rgb(255, 0, 0)')
     })
 
@@ -38,9 +36,41 @@ describe('pages-dir-css-module-next-dynamic-client-navigation', () => {
       const buttonBgColor = await browser.eval(
         `window.getComputedStyle(document.querySelector('button')).backgroundColor`
       )
-      // not gray
-      expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
-      // but red
+      // red
+      expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+    })
+
+    it('should not remove style when navigating from static imported component to on demand next/dynamic', async () => {
+      const browser = await next.browser('/next-dynamic/nodejs')
+      expect(
+        await browser
+          .elementByCss('a[href="/next-dynamic/on-demand"]')
+          .click()
+          .waitForElementByCss('#red-button')
+          .text()
+      ).toBe('My background should be red!')
+
+      const buttonBgColor = await browser.eval(
+        `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+      )
+      // red
+      expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+    })
+
+    it('should not remove style when navigating from static imported component with on demand next/dynamic to on demand next/dynamic', async () => {
+      const browser = await next.browser('/next-dynamic/nodejs/on-demand')
+      expect(
+        await browser
+          .elementByCss('a[href="/next-dynamic/on-demand"]')
+          .click()
+          .waitForElementByCss('#red-button')
+          .text()
+      ).toBe('My background should be red!')
+
+      const buttonBgColor = await browser.eval(
+        `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+      )
+      // red
       expect(buttonBgColor).toBe('rgb(255, 0, 0)')
     })
   })
@@ -59,9 +89,7 @@ describe('pages-dir-css-module-next-dynamic-client-navigation', () => {
       const buttonBgColor = await browser.eval(
         `window.getComputedStyle(document.querySelector('button')).backgroundColor`
       )
-      // not gray
-      expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
-      // but red
+      // red
       expect(buttonBgColor).toBe('rgb(255, 0, 0)')
     })
 
@@ -78,9 +106,41 @@ describe('pages-dir-css-module-next-dynamic-client-navigation', () => {
       const buttonBgColor = await browser.eval(
         `window.getComputedStyle(document.querySelector('button')).backgroundColor`
       )
-      // not gray
-      expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
-      // but red
+      // red
+      expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+    })
+
+    it('should not remove style when navigating from static imported component to on demand next/dynamic', async () => {
+      const browser = await next.browser('/next-dynamic/edge')
+      expect(
+        await browser
+          .elementByCss('a[href="/next-dynamic/on-demand"]')
+          .click()
+          .waitForElementByCss('#red-button')
+          .text()
+      ).toBe('My background should be red!')
+
+      const buttonBgColor = await browser.eval(
+        `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+      )
+      // red
+      expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+    })
+
+    it('should not remove style when navigating from static imported component with on demand next/dynamic to on demand next/dynamic', async () => {
+      const browser = await next.browser('/next-dynamic/edge/on-demand')
+      expect(
+        await browser
+          .elementByCss('a[href="/next-dynamic/on-demand"]')
+          .click()
+          .waitForElementByCss('#red-button')
+          .text()
+      ).toBe('My background should be red!')
+
+      const buttonBgColor = await browser.eval(
+        `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+      )
+      // red
       expect(buttonBgColor).toBe('rgb(255, 0, 0)')
     })
   })

diff --git a/test/e2e/pages-dir/css-module/pages/index.tsx b/test/e2e/pages-dir/css-module/pages/index.tsx
@@ -0,0 +1,19 @@
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
+      <Link href="/next-dynamic/nodejs">/next-dynamic/nodejs</Link>
+      <Link href="/next-dynamic/edge">/next-dynamic/edge</Link>
+      <Link href="/dynamic-import/nodejs">/dynamic-import/nodejs</Link>
+      <Link href="/dynamic-import/edge">/dynamic-import/edge</Link>
+    </div>
+  )
+}
diff --git a/...ir/css-module/pages/next-dynamic/edge.tsx → ...-module/pages/next-dynamic/edge/index.tsx b/...ir/css-module/pages/next-dynamic/edge.tsx → ...-module/pages/next-dynamic/edge/index.tsx
@@ -1,15 +1,22 @@
 import Link from 'next/link'
-import { RedButton } from '../../components/red-button'
+import { RedButton } from '../../../components/red-button'
 
 export default function Home() {
   return (
-    <>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
       <Link href="/next-dynamic/basic">/next-dynamic/basic</Link>
       <Link href="/next-dynamic/ssr-false">/next-dynamic/ssr-false</Link>
       <Link href="/next-dynamic/on-demand">/next-dynamic/on-demand</Link>
       {/* RedButton should be imported to reproduce the issue */}
       <RedButton />
-    </>
+    </div>
   )
 }
 

diff --git a/test/e2e/pages-dir/css-module/pages/next-dynamic/edge/on-demand.tsx b/test/e2e/pages-dir/css-module/pages/next-dynamic/edge/on-demand.tsx
@@ -0,0 +1,37 @@
+import Link from 'next/link'
+import dynamic from 'next/dynamic'
+import { useState } from 'react'
+import { RedButton } from '../../../components/red-button'
+
+const NextDynamicRedButton = dynamic(
+  () =>
+    import('../../../components/red-button').then((module) => module.RedButton),
+  { ssr: false }
+)
+
+export default function Home() {
+  const [button, setButton] = useState(<button>Red Button on Standby</button>)
+  const handleClick = () => {
+    setButton(<NextDynamicRedButton />)
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
+      <Link href="/next-dynamic/on-demand">/next-dynamic/on-demand</Link>
+      <button onClick={handleClick}>Click to load red button</button>
+      <RedButton />
+      {button}
+    </div>
+  )
+}
+
+export const config = {
+  runtime: 'experimental-edge',
+}
diff --git a/.../css-module/pages/next-dynamic/nodejs.tsx → ...odule/pages/next-dynamic/nodejs/index.tsx b/.../css-module/pages/next-dynamic/nodejs.tsx → ...odule/pages/next-dynamic/nodejs/index.tsx
@@ -1,14 +1,21 @@
 import Link from 'next/link'
-import { RedButton } from '../../components/red-button'
+import { RedButton } from '../../../components/red-button'
 
 export default function Home() {
   return (
-    <>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
       <Link href="/next-dynamic/basic">/next-dynamic/basic</Link>
       <Link href="/next-dynamic/ssr-false">/next-dynamic/ssr-false</Link>
       <Link href="/next-dynamic/on-demand">/next-dynamic/on-demand</Link>
       {/* RedButton should be imported to reproduce the issue */}
       <RedButton />
-    </>
+    </div>
   )
 }
diff --git a/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/on-demand.tsx b/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/on-demand.tsx
@@ -0,0 +1,33 @@
+import Link from 'next/link'
+import dynamic from 'next/dynamic'
+import { useState } from 'react'
+import { RedButton } from '../../../components/red-button'
+
+const NextDynamicRedButton = dynamic(
+  () =>
+    import('../../../components/red-button').then((module) => module.RedButton),
+  { ssr: false }
+)
+
+export default function Home() {
+  const [button, setButton] = useState(<button>Red Button on Standby</button>)
+  const handleClick = () => {
+    setButton(<NextDynamicRedButton />)
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
+      <Link href="/next-dynamic/on-demand">/next-dynamic/on-demand</Link>
+      <button onClick={handleClick}>Click to load red button</button>
+      <RedButton />
+      {button}
+    </div>
+  )
+}
diff --git a/test/e2e/pages-dir/css-module/pages/next-dynamic/on-demand.tsx b/test/e2e/pages-dir/css-module/pages/next-dynamic/on-demand.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link'
 import dynamic from 'next/dynamic'
 import { useState } from 'react'
 
@@ -7,20 +8,24 @@ const NextDynamicRedButton = dynamic(
   { ssr: false }
 )
 
-export default function NextDynamic() {
-  const [showRedButton, setShowRedButton] = useState(false)
-
+export default function Home() {
+  const [button, setButton] = useState(<button>Red Button on Standby</button>)
   const handleClick = () => {
-    setShowRedButton(true)
+    setButton(<NextDynamicRedButton />)
   }
 
   return (
-    <>
-      {showRedButton ? (
-        <NextDynamicRedButton />
-      ) : (
-        <button onClick={handleClick}>My background should be gray!</button>
-      )}
-    </>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
+      <Link href="/">/</Link>
+      <button onClick={handleClick}>Click to load red button</button>
+      {button}
+    </div>
   )
 }