Skip to content

Commit e546701

Browse files
ArnaudBarrerenovate[bot]
ArnaudBarre
and
renovate[bot]
authored
chore: test against React 18 & React 19 (#261)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
1 parent b55e68f commit e546701

25 files changed

+558
-179
lines changed

‎.github/renovate.json5

+7-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22
extends: ["config:base", "schedule:weekly", "group:allNonMajor"],
33
labels: ["dependencies"],
44
rangeStrategy: "bump",
5-
packageRules: [{ depTypeList: ["peerDependencies"], enabled: false }],
5+
packageRules: [
6+
{ depTypeList: ["peerDependencies"], enabled: false },
7+
{
8+
"matchFileNames": ["**/react-18/**"],
9+
"ignoreDeps": ["react", "react-dom", "@types/react", "@types/react-dom"]
10+
}
11+
],
612
ignoreDeps: [
713
"generouted", // testing lib shipping JSX (new version ship transpiled JS)
814
"prettier", // waiting for stable choice on ternaries

‎playground/base-path/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11-
"react": "^18.3.1",
12-
"react-dom": "^18.3.1"
11+
"react": "^19.0.0",
12+
"react-dom": "^19.0.0"
1313
},
1414
"devDependencies": {
15-
"@types/react": "^18.3.10",
16-
"@types/react-dom": "^18.3.0",
15+
"@types/react": "^19.0.8",
16+
"@types/react-dom": "^19.0.3",
1717
"@vitejs/plugin-react-swc": "../../dist"
1818
}
1919
}

‎playground/class-components/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11-
"react": "^18.3.1",
12-
"react-dom": "^18.3.1"
11+
"react": "^19.0.0",
12+
"react-dom": "^19.0.0"
1313
},
1414
"devDependencies": {
15-
"@types/react": "^18.3.10",
16-
"@types/react-dom": "^18.3.0",
15+
"@types/react": "^19.0.8",
16+
"@types/react-dom": "^19.0.3",
1717
"@vitejs/plugin-react-swc": "../../dist"
1818
}
1919
}

‎playground/decorators/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11-
"react": "^18.3.1",
12-
"react-dom": "^18.3.1"
11+
"react": "^19.0.0",
12+
"react-dom": "^19.0.0"
1313
},
1414
"devDependencies": {
15-
"@types/react": "^18.3.10",
16-
"@types/react-dom": "^18.3.0",
15+
"@types/react": "^19.0.8",
16+
"@types/react-dom": "^19.0.3",
1717
"@vitejs/plugin-react-swc": "../../dist"
1818
}
1919
}

‎playground/emotion-plugin/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@
1010
"dependencies": {
1111
"@emotion/react": "^11.13.3",
1212
"@emotion/styled": "^11.13.0",
13-
"react": "^18.3.1",
14-
"react-dom": "^18.3.1"
13+
"react": "^19.0.0",
14+
"react-dom": "^19.0.0"
1515
},
1616
"devDependencies": {
17-
"@types/react": "^18.3.10",
18-
"@types/react-dom": "^18.3.0",
17+
"@types/react": "^19.0.8",
18+
"@types/react-dom": "^19.0.3",
1919
"@vitejs/plugin-react-swc": "../../dist",
2020
"@swc/plugin-emotion": "^4.0.2"
2121
}

‎playground/emotion/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@
1010
"dependencies": {
1111
"@emotion/react": "^11.13.3",
1212
"@emotion/styled": "^11.13.0",
13-
"react": "^18.3.1",
14-
"react-dom": "^18.3.1"
13+
"react": "^19.0.0",
14+
"react-dom": "^19.0.0"
1515
},
1616
"devDependencies": {
17-
"@types/react": "^18.3.10",
18-
"@types/react-dom": "^18.3.0",
17+
"@types/react": "^19.0.8",
18+
"@types/react-dom": "^19.0.3",
1919
"@vitejs/plugin-react-swc": "../../dist"
2020
}
2121
}

‎playground/hmr/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11-
"react": "^18.3.1",
12-
"react-dom": "^18.3.1"
11+
"react": "^19.0.0",
12+
"react-dom": "^19.0.0"
1313
},
1414
"devDependencies": {
15-
"@types/react": "^18.3.10",
16-
"@types/react-dom": "^18.3.0",
15+
"@types/react": "^19.0.8",
16+
"@types/react-dom": "^19.0.3",
1717
"@vitejs/plugin-react-swc": "../../dist"
1818
}
1919
}

‎playground/mdx/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11-
"react": "^18.3.1",
12-
"react-dom": "^18.3.1"
11+
"react": "^19.0.0",
12+
"react-dom": "^19.0.0"
1313
},
1414
"devDependencies": {
1515
"@mdx-js/rollup": "^3.0.1",
16-
"@types/react": "^18.3.10",
17-
"@types/react-dom": "^18.3.0",
16+
"@types/react": "^19.0.8",
17+
"@types/react-dom": "^19.0.3",
1818
"@vitejs/plugin-react-swc": "../../dist"
1919
}
2020
}

‎playground/react-18/__tests__/react-18.spec.ts

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { expect, test } from "@playwright/test";
2+
import {
3+
setupDevServer,
4+
setupBuildAndPreview,
5+
setupWaitForLogs,
6+
} from "../../utils.ts";
7+
8+
test("Default build", async ({ page }) => {
9+
const { testUrl, server } = await setupBuildAndPreview("react-18");
10+
await page.goto(testUrl);
11+
12+
await page.click("button");
13+
await expect(page.locator("button")).toHaveText("count is 1");
14+
15+
await server.httpServer.close();
16+
});
17+
18+
test("HMR invalidate", async ({ page }) => {
19+
const { testUrl, server, editFile } = await setupDevServer("react-18");
20+
const waitForLogs = await setupWaitForLogs(page);
21+
await page.goto(testUrl);
22+
await waitForLogs("[vite] connected.");
23+
24+
await page.click("button");
25+
await expect(page.locator("button")).toHaveText("count is 1");
26+
27+
editFile("src/App.tsx", ["{count}", "{count}!"]);
28+
await waitForLogs("[vite] hot updated: /src/App.tsx");
29+
await expect(page.locator("button")).toHaveText("count is 1!");
30+
31+
// Edit component
32+
editFile("src/TitleWithExport.tsx", ["Vite +", "Vite *"]);
33+
await waitForLogs("[vite] hot updated: /src/TitleWithExport.tsx");
34+
35+
// Edit export
36+
editFile("src/TitleWithExport.tsx", ["React", "React!"]);
37+
await waitForLogs(
38+
'[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh ("framework" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react-swc#consistent-components-exports',
39+
"[vite] hot updated: /src/App.tsx",
40+
);
41+
await expect(page.locator("h1")).toHaveText("Vite * React!");
42+
43+
// Add non-component export
44+
editFile("src/TitleWithExport.tsx", [
45+
'React!";',
46+
'React!";\nexport const useless = 3;',
47+
]);
48+
await waitForLogs(
49+
"[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh (new export)",
50+
"[vite] hot updated: /src/App.tsx",
51+
);
52+
53+
// Add component export
54+
editFile("src/TitleWithExport.tsx", [
55+
"</h1>;",
56+
"</h1>;\nexport const Title2 = () => <h2>Title2</h2>;",
57+
]);
58+
await waitForLogs("[vite] hot updated: /src/TitleWithExport.tsx");
59+
60+
// Import new component
61+
editFile(
62+
"src/App.tsx",
63+
["import { TitleWithExport", "import { TitleWithExport, Title2"],
64+
["<TitleWithExport />", "<TitleWithExport /> <Title2 />"],
65+
);
66+
await waitForLogs("[vite] hot updated: /src/App.tsx");
67+
await expect(page.locator("h2")).toHaveText("Title2");
68+
69+
// Remove component export
70+
editFile("src/TitleWithExport.tsx", [
71+
"\nexport const Title2 = () => <h2>Title2</h2>;",
72+
"",
73+
]);
74+
await waitForLogs(
75+
"[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh (export removed)",
76+
"[vite] hot updated: /src/App.tsx",
77+
/Failed to reload \/src\/App\.tsx. This could be due to syntax errors or importing non-existent modules\. \(see errors above\)$/,
78+
);
79+
80+
// Remove usage from App
81+
editFile(
82+
"src/App.tsx",
83+
["import { TitleWithExport, Title2", "import { TitleWithExport"],
84+
["<TitleWithExport /> <Title2 />", "<TitleWithExport />"],
85+
);
86+
await waitForLogs("[vite] hot updated: /src/App.tsx");
87+
await expect(page.locator("button")).toHaveText("count is 1!");
88+
89+
// Remove useless export
90+
editFile("src/TitleWithExport.tsx", ["\nexport const useless = 3;", ""]);
91+
await waitForLogs(
92+
"[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh (export removed)",
93+
"[vite] hot updated: /src/App.tsx",
94+
);
95+
96+
await server.close();
97+
});

‎playground/react-18/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/index.tsx"></script>
12+
</body>
13+
</html>

‎playground/react-18/package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "playground-react-18",
3+
"type": "module",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"react": "^18.3.1",
12+
"react-dom": "^18.3.1"
13+
},
14+
"devDependencies": {
15+
"@types/react": "^18.3.18",
16+
"@types/react-dom": "^18.3.5",
17+
"@vitejs/plugin-react-swc": "../../dist"
18+
}
19+
}

‎playground/react-18/public/vite.svg

+1
Loading

‎playground/react-18/src/App.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
#root {
2+
max-width: 1280px;
3+
margin: 0 auto;
4+
padding: 2rem;
5+
text-align: center;
6+
}
7+
8+
.logo {
9+
height: 6em;
10+
padding: 1.5em;
11+
will-change: filter;
12+
}
13+
.logo:hover {
14+
filter: drop-shadow(0 0 2em #646cffaa);
15+
}
16+
.logo.react:hover {
17+
filter: drop-shadow(0 0 2em #61dafbaa);
18+
}
19+
20+
@keyframes logo-spin {
21+
from {
22+
transform: rotate(0deg);
23+
}
24+
to {
25+
transform: rotate(360deg);
26+
}
27+
}
28+
29+
@media (prefers-reduced-motion: no-preference) {
30+
a:nth-of-type(2) .logo {
31+
animation: logo-spin infinite 20s linear;
32+
}
33+
}
34+
35+
.card {
36+
padding: 2em;
37+
}
38+
39+
.read-the-docs {
40+
color: #888;
41+
}

‎playground/react-18/src/App.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { useState } from "react";
2+
import reactLogo from "./react.svg";
3+
import "./App.css";
4+
import { TitleWithExport, framework } from "./TitleWithExport.tsx";
5+
6+
export const App = () => {
7+
const [count, setCount] = useState(0);
8+
9+
return (
10+
<div>
11+
<div>
12+
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
13+
<img src="/vite.svg" className="logo" alt="Vite logo" />
14+
</a>
15+
<a href="https://reactjs.org" target="_blank" rel="noreferrer">
16+
<img src={reactLogo} className="logo react" alt="React logo" />
17+
</a>
18+
</div>
19+
<TitleWithExport />
20+
<div className="card">
21+
<button onClick={() => setCount(count + 1)}>count is {count}</button>
22+
<p>
23+
Edit <code>src/App.tsx</code> and save to test HMR
24+
</p>
25+
</div>
26+
<p className="read-the-docs">
27+
Click on the Vite and {framework} logos to learn more
28+
</p>
29+
</div>
30+
);
31+
};

‎playground/react-18/src/TitleWithExport.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const framework = "React";
2+
3+
export const TitleWithExport = () => <h1>Vite + {framework}</h1>;

0 commit comments

Comments
 (0)