refactor: migrate plugin-react-refresh to plugin-react

See vitejs#3588 for full commit history

Co-authored-by: Shinigami <[email protected]>
Co-authored-by: Peng Xiao <[email protected]>

.github/workflows/ci.yml

@@ -58,6 +58,9 @@ jobs:
       - name: Build plugin-vue
         run: yarn build-plugin-vue
 
+      - name: Build plugin-react
+        run: yarn build-plugin-react
+
       - name: Test serve
         run: yarn test-serve --runInBand
 

package.json

@@ -19,9 +19,10 @@
     "docs": "vitepress dev docs",
     "build-docs": "vitepress build docs",
     "serve-docs": "vitepress serve docs",
-    "build": "run-s build-vite build-plugin-vue",
+    "build": "run-s build-vite build-plugin-vue build-plugin-react",
     "build-vite": "cd packages/vite && yarn build",
     "build-plugin-vue": "cd packages/plugin-vue && yarn build",
+    "build-plugin-react": "cd packages/plugin-react && yarn build",
     "ci-build-vite": "cd packages/vite && yarn ci-build",
     "ci-docs": "run-s build-vite build-plugin-vue build-docs"
   },

packages/playground/file-delete-restore/package.json

@@ -13,6 +13,6 @@
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-react-refresh": "^1.3.1"
+    "@vitejs/plugin-react": "^1.0.0"
   }
 }

packages/playground/file-delete-restore/vite.config.js

@@ -1,15 +1,12 @@
-const reactRefresh = require('@vitejs/plugin-react-refresh')
+const react = require('@vitejs/plugin-react')
 
 /**
  * @type {import('vite').UserConfig}
  */
 module.exports = {
-  plugins: [reactRefresh()],
+  plugins: [react()],
   build: {
     // to make tests faster
     minify: false
-  },
-  esbuild: {
-    jsxInject: `import React from 'react'`
   }
 }

packages/playground/react-emotion/App.jsx

@@ -0,0 +1,56 @@
+import { useState } from 'react'
+import { css } from '@emotion/react'
+
+import _Switch from 'react-switch'
+const Switch = _Switch.default || _Switch;
+
+export function Counter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <button
+      css={css`
+        border: 2px solid #000;
+      `}
+      onClick={() => setCount((count) => count + 1)}
+    >
+      count is: {count}
+    </button>
+  )
+}
+
+function FragmentTest() {
+  const [checked, setChecked] = useState(false)
+  return (
+    <>
+      <Switch checked={checked} onChange={setChecked} />
+      <p>
+        <Counter />
+      </p>
+    </>
+  )
+}
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>Hello Vite + React + @emotion/react</h1>
+        <FragmentTest />
+        <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

packages/playground/react-emotion/__tests__/react.spec.ts

@@ -0,0 +1,45 @@
+import { editFile, untilUpdated } from '../../testUtils'
+
+test('should render', async () => {
+  expect(await page.textContent('h1')).toMatch(
+    'Hello Vite + React + @emotion/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('should hmr', async () => {
+  editFile('App.jsx', (code) =>
+    code.replace('Vite + React + @emotion/react', 'Updated')
+  )
+  await untilUpdated(() => page.textContent('h1'), 'Hello Updated')
+  // preserve state
+  expect(await page.textContent('button')).toMatch('count is: 1')
+})
+
+test('should update button style', async () => {
+  function getButtonBorderStyle() {
+    return page.evaluate(() => {
+      return window.getComputedStyle(document.querySelector('button')).border
+    })
+  }
+
+  const styles = await page.evaluate(() => {
+    return document.querySelector('button').style
+  })
+
+  expect(await getButtonBorderStyle()).toMatch('2px solid rgb(0, 0, 0)')
+
+  editFile('App.jsx', (code) =>
+    code.replace('border: 2px solid #000', 'border: 4px solid red')
+  )
+
+  await untilUpdated(getButtonBorderStyle, '4px solid rgb(255, 0, 0)')
+
+  // preserve state
+  expect(await page.textContent('button')).toMatch('count is: 1')
+})

packages/playground/react-emotion/index.html

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

packages/playground/react-emotion/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "test-react-emotion",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.4.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-switch": "^6.0.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-pipeline-operator": "^7.14.5",
+    "@emotion/babel-plugin": "^11.3.0",
+    "@vitejs/plugin-react": "^1.0.0"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env"
+    ]
+  }
+}

packages/playground/react-emotion/vite.config.ts

@@ -0,0 +1,19 @@
+import react from '@vitejs/plugin-react'
+
+const config: import('vite').UserConfig = {
+  plugins: [
+    react({
+      jsxImportSource: '@emotion/react',
+      babel: {
+        plugins: ['@emotion/babel-plugin']
+      }
+    })
+  ],
+  clearScreen: false,
+  build: {
+    // to make tests faster
+    minify: false
+  }
+}
+
+export default config

packages/playground/react/package.json

@@ -13,7 +13,7 @@
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-react-refresh": "^1.3.1"
+    "@vitejs/plugin-react": "^1.0.0"
   },
   "babel": {
     "presets": [

packages/playground/react/vite.config.ts

@@ -0,0 +1,11 @@
+import react from '@vitejs/plugin-react'
+
+const config: import('vite').UserConfig = {
+  plugins: [react()],
+  build: {
+    // to make tests faster
+    minify: false
+  }
+}
+
+export default config

packages/playground/ssr-react/package.json

@@ -18,7 +18,7 @@
     "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react-refresh": "^1.3.1",
+    "@vitejs/plugin-react": "^1.0.0",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
     "express": "^4.17.1",

packages/playground/ssr-react/vite.config.js

@@ -1,13 +1,10 @@
-const reactRefresh = require('@vitejs/plugin-react-refresh')
+const react = require('@vitejs/plugin-react')
 
 /**
  * @type {import('vite').UserConfig}
  */
 module.exports = {
-  plugins: [reactRefresh()],
-  esbuild: {
-    jsxInject: `import React from 'react';`
-  },
+  plugins: [react()],
   build: {
     minify: false
   }