chore: move playground to root (#8072)

playground/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "vite-playground",
+  "private": true,
+  "version": "1.0.0",
+  "devDependencies": {
+    "convert-source-map": "^1.8.0",
+    "css-color-names": "^1.0.1"
+  }
+}

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

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')
+})

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>

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 ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.5.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-switch": "^6.0.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-pipeline-operator": "^7.16.0",
+    "@emotion/babel-plugin": "^11.3.0",
+    "@vitejs/plugin-react": "workspace:*"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env"
+    ]
+  }
+}

playground/react-emotion/vite.config.ts

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

playground/react/App.jsx

@@ -0,0 +1,33 @@
+import { useState } from 'react'
+import Dummy from './components/Dummy?qs-should-not-break-plugin-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>
+
+      <Dummy />
+    </div>
+  )
+}
+
+export default App

playground/react/__tests__/react.spec.ts

@@ -0,0 +1,39 @@
+import { editFile, untilUpdated, isBuild } from '../../testUtils'
+
+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('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('should have annotated jsx with file location metadata', async () => {
+  // we're not annotating in prod,
+  // so we skip this test when isBuild is true
+  if (isBuild) return
+
+  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/components/Dummy.jsx

@@ -0,0 +1,3 @@
+export default function Dummy() {
+  return <></>
+}

playground/react/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>

playground/react/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "test-react",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "workspace:*"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env"
+    ]
+  }
+}

playground/react/vite.config.ts

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

playground/shims.d.ts

@@ -0,0 +1,10 @@
+declare module 'css-color-names' {
+  const colors: Record<string, string>
+  export default colors
+}
+
+declare module '*.vue' {
+  import type { ComponentOptions } from 'vue'
+  const component: ComponentOptions
+  export default component
+}

playground/ssr-react/__tests__/serve.js

@@ -0,0 +1,63 @@
+// @ts-check
+// this is automtically detected by scripts/jestPerTestSetup.ts and will replace
+// the default e2e test serve behavior
+
+const path = require('path')
+const { ports } = require('../../testUtils')
+
+const port = (exports.port = ports['ssr-react'])
+
+/**
+ * @param {string} root
+ * @param {boolean} isProd
+ */
+exports.serve = async function serve(root, isProd) {
+  if (isProd) {
+    // build first
+    const { build } = require('vite')
+    // client build
+    await build({
+      root,
+      logLevel: 'silent', // exceptions are logged by Jest
+      build: {
+        target: 'esnext',
+        minify: false,
+        ssrManifest: true,
+        outDir: 'dist/client'
+      }
+    })
+    // server build
+    await build({
+      root,
+      logLevel: 'silent',
+      build: {
+        target: 'esnext',
+        ssr: 'src/entry-server.jsx',
+        outDir: 'dist/server'
+      }
+    })
+  }
+
+  const { createServer } = require(path.resolve(root, 'server.js'))
+  const { app, vite } = await createServer(root, isProd)
+
+  return new Promise((resolve, reject) => {
+    try {
+      const server = app.listen(port, () => {
+        resolve({
+          // for test teardown
+          async close() {
+            await new Promise((resolve) => {
+              server.close(resolve)
+            })
+            if (vite) {
+              await vite.close()
+            }
+          }
+        })
+      })
+    } catch (e) {
+      reject(e)
+    }
+  })
+}