chore: test against React 18 & React 19 (#261)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/renovate.json5

@@ -2,7 +2,13 @@
   extends: ["config:base", "schedule:weekly", "group:allNonMajor"],
   labels: ["dependencies"],
   rangeStrategy: "bump",
-  packageRules: [{ depTypeList: ["peerDependencies"], enabled: false }],
+  packageRules: [
+    { depTypeList: ["peerDependencies"], enabled: false },
+    {
+      "matchFileNames": ["**/react-18/**"],
+      "ignoreDeps": ["react", "react-dom", "@types/react", "@types/react-dom"]
+    }
+  ],
   ignoreDeps: [
     "generouted", // testing lib shipping JSX (new version ship transpiled JS)
     "prettier", // waiting for stable choice on ternaries

playground/base-path/package.json

@@ -8,12 +8,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react-swc": "../../dist"
   }
 }

playground/class-components/package.json

@@ -8,12 +8,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react-swc": "../../dist"
   }
 }

playground/decorators/package.json

@@ -8,12 +8,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react-swc": "../../dist"
   }
 }

playground/emotion-plugin/package.json

@@ -10,12 +10,12 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react-swc": "../../dist",
     "@swc/plugin-emotion": "^4.0.2"
   }

playground/emotion/package.json

@@ -10,12 +10,12 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react-swc": "../../dist"
   }
 }

playground/hmr/package.json

@@ -8,12 +8,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react-swc": "../../dist"
   }
 }

playground/mdx/package.json

@@ -8,13 +8,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@mdx-js/rollup": "^3.0.1",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react-swc": "../../dist"
   }
 }

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

@@ -0,0 +1,97 @@
+import { expect, test } from "@playwright/test";
+import {
+  setupDevServer,
+  setupBuildAndPreview,
+  setupWaitForLogs,
+} from "../../utils.ts";
+
+test("Default build", async ({ page }) => {
+  const { testUrl, server } = await setupBuildAndPreview("react-18");
+  await page.goto(testUrl);
+
+  await page.click("button");
+  await expect(page.locator("button")).toHaveText("count is 1");
+
+  await server.httpServer.close();
+});
+
+test("HMR invalidate", async ({ page }) => {
+  const { testUrl, server, editFile } = await setupDevServer("react-18");
+  const waitForLogs = await setupWaitForLogs(page);
+  await page.goto(testUrl);
+  await waitForLogs("[vite] connected.");
+
+  await page.click("button");
+  await expect(page.locator("button")).toHaveText("count is 1");
+
+  editFile("src/App.tsx", ["{count}", "{count}!"]);
+  await waitForLogs("[vite] hot updated: /src/App.tsx");
+  await expect(page.locator("button")).toHaveText("count is 1!");
+
+  // Edit component
+  editFile("src/TitleWithExport.tsx", ["Vite +", "Vite *"]);
+  await waitForLogs("[vite] hot updated: /src/TitleWithExport.tsx");
+
+  // Edit export
+  editFile("src/TitleWithExport.tsx", ["React", "React!"]);
+  await waitForLogs(
+    '[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',
+    "[vite] hot updated: /src/App.tsx",
+  );
+  await expect(page.locator("h1")).toHaveText("Vite * React!");
+
+  // Add non-component export
+  editFile("src/TitleWithExport.tsx", [
+    'React!";',
+    'React!";\nexport const useless = 3;',
+  ]);
+  await waitForLogs(
+    "[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh (new export)",
+    "[vite] hot updated: /src/App.tsx",
+  );
+
+  // Add component export
+  editFile("src/TitleWithExport.tsx", [
+    "</h1>;",
+    "</h1>;\nexport const Title2 = () => <h2>Title2</h2>;",
+  ]);
+  await waitForLogs("[vite] hot updated: /src/TitleWithExport.tsx");
+
+  // Import new component
+  editFile(
+    "src/App.tsx",
+    ["import { TitleWithExport", "import { TitleWithExport, Title2"],
+    ["<TitleWithExport />", "<TitleWithExport /> <Title2 />"],
+  );
+  await waitForLogs("[vite] hot updated: /src/App.tsx");
+  await expect(page.locator("h2")).toHaveText("Title2");
+
+  // Remove component export
+  editFile("src/TitleWithExport.tsx", [
+    "\nexport const Title2 = () => <h2>Title2</h2>;",
+    "",
+  ]);
+  await waitForLogs(
+    "[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh (export removed)",
+    "[vite] hot updated: /src/App.tsx",
+    /Failed to reload \/src\/App\.tsx. This could be due to syntax errors or importing non-existent modules\. \(see errors above\)$/,
+  );
+
+  // Remove usage from App
+  editFile(
+    "src/App.tsx",
+    ["import { TitleWithExport, Title2", "import { TitleWithExport"],
+    ["<TitleWithExport /> <Title2 />", "<TitleWithExport />"],
+  );
+  await waitForLogs("[vite] hot updated: /src/App.tsx");
+  await expect(page.locator("button")).toHaveText("count is 1!");
+
+  // Remove useless export
+  editFile("src/TitleWithExport.tsx", ["\nexport const useless = 3;", ""]);
+  await waitForLogs(
+    "[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh (export removed)",
+    "[vite] hot updated: /src/App.tsx",
+  );
+
+  await server.close();
+});

playground/react-18/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

playground/react-18/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "playground-react-18",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react-swc": "../../dist"
+  }
+}

playground/react-18/src/App.css

@@ -0,0 +1,41 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

playground/react-18/src/App.tsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import reactLogo from "./react.svg";
+import "./App.css";
+import { TitleWithExport, framework } from "./TitleWithExport.tsx";
+
+export const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <div>
+        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+          <img src="/vite.svg" className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://reactjs.org" target="_blank" rel="noreferrer">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <TitleWithExport />
+      <div className="card">
+        <button onClick={() => setCount(count + 1)}>count is {count}</button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and {framework} logos to learn more
+      </p>
+    </div>
+  );
+};

playground/react-18/src/TitleWithExport.tsx

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