Skip to content

Commit 6ca4214

Browse files
eps1loneps1lon
committed
Current behavior of import conditions
1 parent d7d5117 commit 6ca4214

File tree

20 files changed

+447
-0
lines changed

20 files changed

+447
-0
lines changed

‎test/e2e/import-conditions/app/app/ClientPage.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
'use client'
2+
import * as React from 'react'
3+
import * as react from 'library-with-exports/react'
4+
import * as serverFavoringBrowser from 'library-with-exports/server-favoring-browser'
5+
import * as serverFavoringEdge from 'library-with-exports/server-favoring-edge'
6+
7+
export default function ClientPage({ server }: { server: unknown }) {
8+
const [client, setClient] = React.useState<unknown | null>(null)
9+
React.useEffect(() => {
10+
setClient({
11+
react: react.condition,
12+
serverFavoringBrowser: serverFavoringBrowser.condition,
13+
serverFavoringEdge: serverFavoringEdge.condition,
14+
})
15+
}, [])
16+
17+
return client === null ? (
18+
<pre aria-busy={true}>{JSON.stringify({ server }, null, 2)}</pre>
19+
) : (
20+
<pre>{JSON.stringify({ server, client }, null, 2)}</pre>
21+
)
22+
}

‎test/e2e/import-conditions/app/app/edge-page/page.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as react from 'library-with-exports/react'
2+
import * as serverFavoringBrowser from 'library-with-exports/server-favoring-browser'
3+
import * as serverFavoringEdge from 'library-with-exports/server-favoring-edge'
4+
import ClientPage from '../ClientPage'
5+
6+
export const runtime = 'edge'
7+
8+
export default function Page() {
9+
return (
10+
<ClientPage
11+
server={{
12+
react: react.condition,
13+
serverFavoringBrowser: serverFavoringBrowser.condition,
14+
serverFavoringEdge: serverFavoringEdge.condition,
15+
}}
16+
/>
17+
)
18+
}

‎test/e2e/import-conditions/app/app/node-page/page.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as react from 'library-with-exports/react'
2+
import * as serverFavoringBrowser from 'library-with-exports/server-favoring-browser'
3+
import * as serverFavoringEdge from 'library-with-exports/server-favoring-edge'
4+
import ClientPage from '../ClientPage'
5+
6+
export const runtime = 'nodejs'
7+
8+
export default function Page() {
9+
return (
10+
<ClientPage
11+
server={{
12+
react: react.condition,
13+
serverFavoringBrowser: serverFavoringBrowser.condition,
14+
serverFavoringEdge: serverFavoringEdge.condition,
15+
}}
16+
/>
17+
)
18+
}

‎test/e2e/import-conditions/app/edge-route/route.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as react from 'library-with-exports/react'
2+
import * as serverFavoringBrowser from 'library-with-exports/server-favoring-browser'
3+
import * as serverFavoringEdge from 'library-with-exports/server-favoring-edge'
4+
5+
export const runtime = 'edge'
6+
7+
export function GET() {
8+
return Response.json({
9+
react: react.condition,
10+
serverFavoringBrowser: serverFavoringBrowser.condition,
11+
serverFavoringEdge: serverFavoringEdge.condition,
12+
})
13+
}

‎test/e2e/import-conditions/app/layout.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function Root({ children }: { children: React.ReactNode }) {
2+
return (
3+
<html>
4+
<body>{children}</body>
5+
</html>
6+
)
7+
}

‎test/e2e/import-conditions/app/node-route/route.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as react from 'library-with-exports/react'
2+
import * as serverFavoringBrowser from 'library-with-exports/server-favoring-browser'
3+
import * as serverFavoringEdge from 'library-with-exports/server-favoring-edge'
4+
5+
export const runtime = 'nodejs'
6+
7+
export function GET() {
8+
return Response.json({
9+
react: react.condition,
10+
serverFavoringBrowser: serverFavoringBrowser.condition,
11+
serverFavoringEdge: serverFavoringEdge.condition,
12+
})
13+
}

‎test/e2e/import-conditions/import-conditions.test.ts‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
import { nextTestSetup } from 'e2e-utils'
2+
3+
describe('react version', () => {
4+
const { next } = nextTestSetup({
5+
files: __dirname,
6+
})
7+
8+
it('Pages Router page headers with edge runtime', async () => {
9+
const response = await next.fetch('/pages/edge-page')
10+
11+
const middlewareHeaders = {
12+
react: response.headers.get('x-react-condition'),
13+
serverFavoringBrowser: response.headers.get(
14+
'x-server-favoring-browser-condition'
15+
),
16+
serverFavoringEdge: response.headers.get(
17+
'x-server-favoring-edge-condition'
18+
),
19+
}
20+
expect(middlewareHeaders).toEqual({
21+
react: 'react-server',
22+
serverFavoringBrowser: 'worker',
23+
serverFavoringEdge: 'worker',
24+
})
25+
})
26+
27+
it('Pages Router page with edge runtime', async () => {
28+
const browser = await next.browser('/pages/edge-page')
29+
30+
const json = await browser.elementByCss('body').text()
31+
expect(JSON.parse(json)).toEqual({
32+
server: {
33+
react: 'default',
34+
serverFavoringBrowser: 'worker',
35+
serverFavoringEdge: 'worker',
36+
},
37+
client: {
38+
react: 'default',
39+
serverFavoringBrowser: 'browser',
40+
serverFavoringEdge: 'browser',
41+
},
42+
})
43+
})
44+
45+
it('Pages Router page headers with nodejs runtime', async () => {
46+
const response = await next.fetch('/pages/node-page')
47+
48+
const middlewareHeaders = {
49+
react: response.headers.get('x-react-condition'),
50+
serverFavoringBrowser: response.headers.get(
51+
'x-server-favoring-browser-condition'
52+
),
53+
serverFavoringEdge: response.headers.get(
54+
'x-server-favoring-edge-condition'
55+
),
56+
}
57+
expect(middlewareHeaders).toEqual({
58+
react: 'react-server',
59+
serverFavoringBrowser: 'worker',
60+
serverFavoringEdge: 'worker',
61+
})
62+
})
63+
64+
it('Pages Router page with nodejs runtime after hydration', async () => {
65+
const browser = await next.browser('/pages/node-page')
66+
67+
const json = await browser.elementByCss('body').text()
68+
expect(JSON.parse(json)).toEqual({
69+
server: {
70+
react: 'default',
71+
serverFavoringBrowser: 'node',
72+
serverFavoringEdge: 'node',
73+
},
74+
client: {
75+
react: 'default',
76+
serverFavoringBrowser: 'browser',
77+
serverFavoringEdge: 'browser',
78+
},
79+
})
80+
})
81+
82+
it('App Router page headers with edge runtime', async () => {
83+
const response = await next.fetch('/app/edge-page')
84+
85+
const middlewareHeaders = {
86+
react: response.headers.get('x-react-condition'),
87+
serverFavoringBrowser: response.headers.get(
88+
'x-server-favoring-browser-condition'
89+
),
90+
serverFavoringEdge: response.headers.get(
91+
'x-server-favoring-edge-condition'
92+
),
93+
}
94+
expect(middlewareHeaders).toEqual({
95+
react: 'react-server',
96+
serverFavoringBrowser: 'worker',
97+
serverFavoringEdge: 'worker',
98+
})
99+
})
100+
101+
it('App Router page with edge runtime', async () => {
102+
const browser = await next.browser('/app/edge-page')
103+
104+
const json = await browser.elementByCss('body').text()
105+
expect(JSON.parse(json)).toEqual({
106+
server: {
107+
react: 'react-server',
108+
serverFavoringBrowser: 'worker',
109+
serverFavoringEdge: 'worker',
110+
},
111+
client: {
112+
react: 'default',
113+
serverFavoringBrowser: 'browser',
114+
serverFavoringEdge: 'browser',
115+
},
116+
})
117+
})
118+
119+
it('App Router page headers with nodejs runtime', async () => {
120+
const response = await next.fetch('/app/node-page')
121+
122+
const middlewareHeaders = {
123+
react: response.headers.get('x-react-condition'),
124+
serverFavoringBrowser: response.headers.get(
125+
'x-server-favoring-browser-condition'
126+
),
127+
serverFavoringEdge: response.headers.get(
128+
'x-server-favoring-edge-condition'
129+
),
130+
}
131+
expect(middlewareHeaders).toEqual({
132+
react: 'react-server',
133+
serverFavoringBrowser: 'worker',
134+
serverFavoringEdge: 'worker',
135+
})
136+
})
137+
138+
it('App Router page with nodejs runtime after hydration', async () => {
139+
const browser = await next.browser('/app/node-page')
140+
141+
const json = await browser.elementByCss('body').text()
142+
expect(JSON.parse(json)).toEqual({
143+
server: {
144+
react: 'react-server',
145+
serverFavoringBrowser: 'node',
146+
serverFavoringEdge: 'node',
147+
},
148+
client: {
149+
react: 'default',
150+
serverFavoringBrowser: 'browser',
151+
serverFavoringEdge: 'browser',
152+
},
153+
})
154+
})
155+
156+
it('App Router Route Handler with nodejs runtime', async () => {
157+
const response = await next.fetch('/node-route')
158+
159+
const middlewareHeaders = {
160+
react: response.headers.get('x-react-condition'),
161+
serverFavoringBrowser: response.headers.get(
162+
'x-server-favoring-browser-condition'
163+
),
164+
serverFavoringEdge: response.headers.get(
165+
'x-server-favoring-edge-condition'
166+
),
167+
}
168+
const data = await response.json()
169+
expect({ middlewareHeaders, data }).toEqual({
170+
middlewareHeaders: {
171+
react: 'react-server',
172+
serverFavoringBrowser: 'worker',
173+
serverFavoringEdge: 'worker',
174+
},
175+
data: {
176+
react: 'react-server',
177+
serverFavoringBrowser: 'node',
178+
serverFavoringEdge: 'node',
179+
},
180+
})
181+
})
182+
183+
it('App Router Route Handler with edge runtime', async () => {
184+
const response = await next.fetch('/edge-route')
185+
186+
const middlewareHeaders = {
187+
react: response.headers.get('x-react-condition'),
188+
serverFavoringBrowser: response.headers.get(
189+
'x-server-favoring-browser-condition'
190+
),
191+
serverFavoringEdge: response.headers.get(
192+
'x-server-favoring-edge-condition'
193+
),
194+
}
195+
const data = await response.json()
196+
expect({ middlewareHeaders, data }).toEqual({
197+
middlewareHeaders: {
198+
react: 'react-server',
199+
serverFavoringBrowser: 'worker',
200+
serverFavoringEdge: 'worker',
201+
},
202+
data: {
203+
react: 'react-server',
204+
serverFavoringBrowser: 'worker',
205+
serverFavoringEdge: 'worker',
206+
},
207+
})
208+
})
209+
})

‎test/e2e/import-conditions/library-with-exports/browser.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const condition = 'browser'

‎test/e2e/import-conditions/library-with-exports/default.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const condition = 'default'

‎test/e2e/import-conditions/library-with-exports/edge-light.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const condition = 'edge-light'

0 commit comments

Comments
 (0)