chore: upgrade playground deps (#8587)

.github/renovate.json5

@@ -19,8 +19,6 @@
     "typescript",
 
     // breaking changes
-    "react-router", // `react-router:v6.0.0+` has breaking changes
-    "react-router-dom", // `react-router-dom:v6.0.0+` has breaking changes
     "source-map", // `source-map:v0.7.0+` needs more investigation
     "dotenv-expand", // `dotenv-expand:6.0.0+` has breaking changes (#6858)
     "kill-port", // `kill-port:^2.0.0 has perf issues (#8392)

playground/backend-integration/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "tailwindcss": "^2.2.19"
+    "tailwindcss": "^3.1.2"
   },
   "devDependencies": {
     "fast-glob": "^3.2.11"

playground/backend-integration/tailwind.config.js

@@ -1,7 +1,5 @@
 module.exports = {
-  mode: 'jit',
-  purge: [__dirname + '/frontend/**/*.{css,html,ts,js}'],
-  darkMode: false, // or 'media' or 'class'
+  content: [__dirname + '/frontend/**/*.{css,html,ts,js}'],
   theme: {
     extend: {}
   },

playground/file-delete-restore/index.html

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

playground/file-delete-restore/package.json

@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "workspace:*"

playground/optimize-deps/cjs-dynamic.js

@@ -4,7 +4,7 @@
 ;(async () => {
   const { useState } = await import('react')
   const React = (await import('react')).default
-  const ReactDOM = await import('react-dom')
+  const ReactDOM = await import('react-dom/client')
 
   const clip = await import('clipboard')
   if (typeof clip.default === 'function') {
@@ -42,9 +42,8 @@
     )
   }
 
-  ReactDOM.render(
-    React.createElement(App),
-    document.querySelector('.cjs-dynamic')
+  ReactDOM.createRoot(document.querySelector('.cjs-dynamic')).render(
+    React.createElement(App)
   )
 
   function text(el, text) {

playground/optimize-deps/cjs.js

@@ -2,7 +2,7 @@
 // React is the ultimate test of this because its dynamic exports assignments
 // are not statically detectable by @rollup/plugin-commonjs.
 import React, { useState } from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import { Socket } from 'phoenix'
 import clip from 'clipboard'
 
@@ -28,7 +28,9 @@ function App() {
   )
 }
 
-ReactDOM.render(React.createElement(App), document.querySelector('.cjs'))
+ReactDOM.createRoot(document.querySelector('.cjs')).render(
+  React.createElement(App)
+)
 
 function text(el, text) {
   document.querySelector(el).textContent = text

playground/optimize-deps/dedupe.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 
 // #1302: The linked package has a different version of React in its deps
 // and is itself optimized. Without `dedupe`, the linked package is optimized
@@ -20,4 +20,6 @@ function App() {
   )
 }
 
-ReactDOM.render(React.createElement(App), document.querySelector('.dedupe'))
+ReactDOM.createRoot(document.querySelector('.dedupe')).render(
+  React.createElement(App)
+)

playground/optimize-deps/dep-linked-include/package.json

@@ -4,6 +4,6 @@
   "version": "0.0.0",
   "main": "index.mjs",
   "dependencies": {
-    "react": "17.0.2"
+    "react": "18.1.0"
   }
 }

playground/optimize-deps/package.json

@@ -26,8 +26,8 @@
     "lodash-es": "^4.17.21",
     "nested-exclude": "file:./nested-exclude",
     "phoenix": "^1.6.10",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "resolve-linked": "workspace:0.0.0",
     "url": "^0.11.0",
     "vue": "^3.2.37",

playground/react-emotion/index.html

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

playground/react-emotion/package.json

@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "@emotion/react": "^11.9.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-switch": "^6.1.0"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-switch": "^7.0.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-pipeline-operator": "^7.18.2",

playground/react/index.html

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

playground/react/package.json

@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "jsx-entry": "file:./jsx-entry",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "workspace:*"

playground/ssr-react/package.json

@@ -13,10 +13,9 @@
     "debug": "node --inspect-brk server"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router": "^5.3.3",
-    "react-router-dom": "^5.3.3"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "workspace:*",

playground/ssr-react/src/App.jsx

@@ -1,4 +1,4 @@
-import { Link, Route, Switch } from 'react-router-dom'
+import { Link, Route, Routes } from 'react-router-dom'
 
 // Auto generates routes from files under ./pages
 // https://vitejs.dev/guide/features.html#glob-import
@@ -27,15 +27,11 @@ export function App() {
           })}
         </ul>
       </nav>
-      <Switch>
+      <Routes>
         {routes.map(({ path, component: RouteComp }) => {
-          return (
-            <Route key={path} path={path}>
-              <RouteComp />
-            </Route>
-          )
+          return <Route key={path} path={path} element={<RouteComp />}></Route>
         })}
-      </Switch>
+      </Routes>
     </>
   )
 }

playground/ssr-react/src/entry-client.jsx

@@ -1,10 +1,10 @@
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import { App } from './App'
 
-ReactDOM.hydrate(
+ReactDOM.hydrateRoot(
+  document.getElementById('app'),
   <BrowserRouter>
     <App />
-  </BrowserRouter>,
-  document.getElementById('app')
+  </BrowserRouter>
 )

playground/ssr-react/src/entry-server.jsx

@@ -1,5 +1,5 @@
 import ReactDOMServer from 'react-dom/server'
-import { StaticRouter } from 'react-router-dom'
+import { StaticRouter } from 'react-router-dom/server'
 import { App } from './App'
 
 export function render(url, context) {

playground/ssr-webworker/package.json

@@ -8,7 +8,7 @@
     "build:worker": "vite build --ssr src/entry-worker.jsx --outDir dist/worker"
   },
   "dependencies": {
-    "react": "^17.0.2"
+    "react": "^18.1.0"
   },
   "devDependencies": {
     "miniflare": "^1.4.1",

playground/tailwind/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.7",
-    "tailwindcss": "^2.2.19",
+    "tailwindcss": "^3.1.2",
     "vue": "^3.2.37",
     "vue-router": "^4.0.16"
   },

playground/tailwind/tailwind.config.js

@@ -1,12 +1,10 @@
 module.exports = {
-  mode: 'jit',
-  purge: [
+  content: [
     // Before editing this section, make sure no paths are matching with `/src/App.vue`
     // Look https://github.com/vitejs/vite/pull/6959 for more details
     __dirname + '/src/{components,views}/**/*.vue',
     __dirname + '/src/App.vue'
   ],
-  darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {}
   },