feat(examples): use vite 4.x (#13848)

* chore(deps): update vite & vitejs/plugin-react

* feat: use createRoot

---------

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

examples/class-prefix/package.json

@@ -2,6 +2,7 @@
   "name": "class-prefix",
   "private": true,
   "version": "0.26.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -13,10 +14,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "1.1.3",
+    "@vitejs/plugin-react": "4.0.0",
     "sass": "^1.51.0",
-    "vite": "^2.9.5"
+    "vite": "^4.3.8"
   }
 }

examples/class-prefix/src/App.jsx

@@ -10,7 +10,7 @@ function ExampleComponent() {
   )
 }
 
-function App() {
+export default function App() {
   return (
     <>
       <ExampleComponent />
@@ -20,5 +20,3 @@ function App() {
     </>
   );
 }
-
-export default App

examples/class-prefix/src/main.jsx

@@ -1,12 +1,13 @@
 import './index.scss'
 
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React from 'react';
+import { createRoot } from 'react-dom/client';
 import App from './App'
 
-ReactDOM.render(
+const domNode = document.getElementById('root');
+const root = createRoot(domNode);
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );

examples/class-prefix/vite.config.js

@@ -3,9 +3,5 @@ import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    react({
-      jsxRuntime: 'classic',
-    }),
-  ],
+  plugins: [react()],
 });

examples/codesandbox-styles/package.json

@@ -2,14 +2,15 @@
   "name": "codesandbox-styles",
   "private": true,
   "version": "0.32.0",
+  "type": "module",
   "scripts": {
-    "develop": "vite"
+    "dev": "vite"
   },
   "devDependencies": {
-    "vite": "^2.8.0"
+    "sass": "^1.51.0",
+    "vite": "^4.3.8"
   },
   "dependencies": {
-    "@carbon/styles": "^1.29.0",
-    "sass": "^1.51.0"
+    "@carbon/styles": "^1.29.0"
   }
 }

examples/custom-theme/package.json

@@ -2,6 +2,7 @@
   "name": "custom-theme",
   "private": true,
   "version": "0.27.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -13,10 +14,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "1.1.3",
+    "@vitejs/plugin-react": "4.0.0",
     "sass": "^1.51.0",
-    "vite": "^2.9.5"
+    "vite": "^4.3.8"
   }
 }

examples/custom-theme/src/App.jsx

@@ -1,7 +1,7 @@
 import { Button } from '@carbon/react';
 import React from 'react';
 
-function App() {
+export default function App() {
   return (
     <div>
       <Button>Button with custom theme</Button>
@@ -16,5 +16,3 @@ function App() {
     </div>
   );
 }
-
-export default App;

examples/custom-theme/src/main.jsx

@@ -1,12 +1,13 @@
-import './index.scss'
+import './index.scss';
 
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
 
-ReactDOM.render(
+const domNode = document.getElementById('root');
+const root = createRoot(domNode);
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );

examples/custom-theme/vite.config.js

@@ -3,9 +3,5 @@ import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    react({
-      jsxRuntime: 'classic',
-    }),
-  ],
+  plugins: [react()],
 });

examples/id-prefix/package.json

@@ -2,6 +2,7 @@
   "name": "id-prefix",
   "private": true,
   "version": "0.26.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -13,10 +14,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "1.1.3",
+    "@vitejs/plugin-react": "4.0.0",
     "sass": "^1.51.0",
-    "vite": "^2.9.5"
+    "vite": "^4.3.8"
   }
 }

examples/id-prefix/src/App.jsx

@@ -10,7 +10,7 @@ function ExampleComponent() {
   )
 }
 
-function App() {
+export default function App() {
   return (
     <>
       <ExampleComponent />
@@ -20,5 +20,3 @@ function App() {
     </>
   );
 }
-
-export default App

examples/id-prefix/src/main.jsx

@@ -1,12 +1,13 @@
-import './index.scss'
+import './index.scss';
 
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
 
-ReactDOM.render(
+const domNode = document.getElementById('root');
+const root = createRoot(domNode);
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );

examples/id-prefix/vite.config.js

@@ -3,9 +3,5 @@ import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    react({
-      jsxRuntime: 'classic',
-    }),
-  ],
+  plugins: [react()],
 });

examples/vite/package.json

@@ -2,6 +2,7 @@
   "name": "vite",
   "private": true,
   "version": "0.27.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -13,10 +14,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "1.1.3",
+    "@vitejs/plugin-react": "4.0.0",
     "sass": "^1.51.0",
-    "vite": "^2.9.5"
+    "vite": "^4.3.8"
   }
 }

examples/vite/src/App.jsx

@@ -1,12 +1,10 @@
 import { Button } from '@carbon/react';
 import React from 'react';
 
-function App() {
+export default function App() {
   return (
     <div>
       <Button>Hello world</Button>
     </div>
   );
 }
-
-export default App

examples/vite/src/main.jsx

@@ -1,12 +1,13 @@
 import './index.scss';
 
-import { StrictMode } from 'react';
+import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
 
-const root = createRoot(document.getElementById('root'));
+const domNode = document.getElementById('root');
+const root = createRoot(domNode);
 root.render(
-  <StrictMode>
+  <React.StrictMode>
     <App />
-  </StrictMode>
+  </React.StrictMode>
 );

examples/vite/vite.config.js

@@ -3,9 +3,5 @@ import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    react({
-      jsxRuntime: 'classic',
-    }),
-  ],
+  plugins: [react()],
 });

package.json

@@ -35,8 +35,7 @@
     "node-sass": "^8.0.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "react-is": "~18.2.0",
-    "react-test-renderer": "~17.0.2"
+    "react-is": "~18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.2",