test: add react-classic-18 playground

Author: sapphi-red

.github/renovate.json5

@@ -10,7 +10,11 @@
       "enabled": false,
     },
     {
-      "matchFileNames": ["**/react-18/**", "**/compiler-react-18/**"],
+      "matchFileNames": [
+        "**/react-18/**",
+        "**/react-classic-18/**",
+        "**/compiler-react-18/**",
+      ],
       "ignoreDeps": ["react", "react-dom", "@types/react", "@types/react-dom"],
     },
     {

playground/react-classic-18/App.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+
+function App() {
+  const [count, setCount] = useState(0)
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>Hello Vite + React</h1>
+        <p>
+          <button onClick={() => setCount((count) => count + 1)}>
+            count is: {count}
+          </button>
+        </p>
+        <p>
+          Edit <code>App.jsx</code> and save to test HMR updates.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  )
+}
+
+export default App

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

@@ -0,0 +1,39 @@
+import { expect, test } from 'vitest'
+import { editFile, isServe, page, untilUpdated } from '~utils'
+
+test('should render', async () => {
+  expect(await page.textContent('h1')).toMatch('Hello Vite + React')
+})
+
+test('should update', async () => {
+  expect(await page.textContent('button')).toMatch('count is: 0')
+  await page.click('button')
+  expect(await page.textContent('button')).toMatch('count is: 1')
+})
+
+test.runIf(isServe)('should hmr', async () => {
+  editFile('App.jsx', (code) => code.replace('Vite + React', 'Updated'))
+  await untilUpdated(() => page.textContent('h1'), 'Hello Updated')
+  // preserve state
+  expect(await page.textContent('button')).toMatch('count is: 1')
+})
+
+test.runIf(isServe)(
+  'should have annotated jsx with file location metadata',
+  async () => {
+    const meta = await page.evaluate(() => {
+      const button = document.querySelector('button')
+      const key = Object.keys(button).find(
+        (key) => key.indexOf('__reactFiber') === 0,
+      )
+      return button[key]._debugSource
+    })
+    // If the evaluate call doesn't crash, and the returned metadata has
+    // the expected fields, we're good.
+    expect(Object.keys(meta).sort()).toEqual([
+      'columnNumber',
+      'fileName',
+      'lineNumber',
+    ])
+  },
+)

playground/react-classic-18/index.html

@@ -0,0 +1,10 @@
+<div id="app"></div>
+<script type="module">
+  import React from 'react'
+  import ReactDOM from 'react-dom/client'
+  import App from './App.jsx'
+
+  ReactDOM.createRoot(document.getElementById('app')).render(
+    React.createElement(App),
+  )
+</script>

playground/react-classic-18/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@vitejs/test-react-classic-18",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "workspace:*"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env"
+    ]
+  }
+}

playground/react-classic-18/vite.config.ts

@@ -0,0 +1,17 @@
+import react from '@vitejs/plugin-react'
+import type { UserConfig } from 'vite'
+
+const config: UserConfig = {
+  server: { port: 8903 /* Should be unique */ },
+  plugins: [
+    react({
+      jsxRuntime: 'classic',
+    }),
+  ],
+  build: {
+    // to make tests faster
+    minify: false,
+  },
+}
+
+export default config