upgrading vite and to react 19

Author: bradwestfall

.prettierignore

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

.vscode/settings.json

@@ -1,10 +1,11 @@
 {
   "name": "react-training-workshop",
+  "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "start": "node scripts/start.js",
+    "start": "vite-node scripts/start.ts",
     "kill-db-port": "node scripts/kill-db-port 3333",
-    "template": "cd scripts && plop",
     "install-remix": "cd remix && npm install",
     "test": "jest"
   },
@@ -26,8 +27,8 @@
     "mobx-react": "^7.2.1",
     "mobx-react-lite": "^3.2.3",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0-beta-1beb73de0f-20240503",
+    "react-dom": "^19.0.0-beta-1beb73de0f-20240503",
     "react-hook-form": "^7.48.2",
     "react-icons": "^4.11.0",
     "react-popper": "^2.3.0",
@@ -37,23 +38,27 @@
     "redux-logger": "^3.0.6",
     "zod": "^3.22.2"
   },
+  "overrides": {
+    "@types/react": "npm:types-react@beta",
+    "@types/react-dom": "npm:types-react-dom@beta"
+  },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.16.5",
+    "@types/concurrently": "^6.4.0",
+    "@types/react": "npm:types-react@beta",
+    "@types/react-dom": "npm:types-react-dom@beta",
+    "@types/readline-sync": "^1.4.8",
+    "@types/shelljs": "^0.8.15",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^13.1.1",
     "@types/jest": "^27.4.0",
-    "@types/markdown-it": "^12.2.3",
-    "@types/node": "^16.11.1",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.8.0",
-    "@typescript-eslint/parser": "^5.9.0",
-    "@vitejs/plugin-react": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.14",
     "concurrently": "^6.3.0",
-    "eslint-config-react-app": "^7.0.0",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
     "find-process": "^1.4.5",
     "jest": "^27.5.1",
     "mock-match-media": "^0.3.0",
@@ -63,20 +68,9 @@
     "shelljs": "^0.8.5",
     "tailwindcss": "^3.3.2",
     "ts-jest": "^27.1.3",
-    "typescript": "^4.5.2",
-    "vite": "^2.9.13"
-  },
-  "eslintConfig": {
-    "extends": "react-app",
-    "plugins": [
-      "react-hooks"
-    ],
-    "rules": {
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": "off",
-      "react-hooks/rules-of-hooks": "error",
-      "react-hooks/exhaustive-deps": "warn"
-    }
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-node": "^1.6.0"
   },
   "prettier": {
     "printWidth": 100,

package-lock.json

@@ -2,8 +2,7 @@
 
 import colors from 'tailwindcss/colors'
 
-// eslint-disable-next-line import/no-anonymous-default-export
-export default {
+export const config = {
   // We go up a directory from _full-app to capture all the lessons
   content: ['./index.html', '../**/*.{js,ts,jsx,tsx}'],
   theme: {
@@ -24,3 +23,5 @@ export default {
   },
   plugins: [],
 }
+
+export default config

package.json

@@ -1,17 +1,14 @@
-const path = require('path')
-const fs = require('fs')
-const readlineSync = require('readline-sync')
+import path from 'path'
+import fs from 'fs'
+import readlineSync from 'readline-sync'
 
 const FULL_APP = 'FULL APP'
 
-exports.selectReactLesson = selectReactLesson
-exports.selectRemixLesson = selectRemixLesson
-
 /****************************************
   Select React Lesson
 *****************************************/
 
-function selectReactLesson(coursesPath, preferences, savePreferences) {
+export function selectReactLesson(coursesPath, preferences, savePreferences) {
   /**
    * Choose a Course and Lesson
    */
@@ -140,7 +137,7 @@ function selectReactLesson(coursesPath, preferences, savePreferences) {
   Select Remix Lesson
 *****************************************/
 
-function selectRemixLesson(lessonsPath) {
+export function selectRemixLesson(lessonsPath) {
   /**
    * Choose a Course and Lesson
    */

react/_full-app/postcss.config.js renamed to react/_full-app/postcss.config.cjs

@@ -1,9 +1,9 @@
-const fs = require('fs')
-const path = require('path')
-const shell = require('shelljs')
-const concurrently = require('concurrently')
+import fs from 'fs'
+import path from 'path'
+import shell from 'shelljs'
+import concurrently from 'concurrently'
 
-exports.startDatabase = (dbDir) => {
+export function startDatabase(dbDir: string) {
   const dbPath = path.join(dbDir, 'db.json')
 
   try {
@@ -16,7 +16,7 @@ exports.startDatabase = (dbDir) => {
         command: `npx json-server --watch ${dbPath} -p 3333 --quiet`,
         name: 'npx json-server database',
       },
-    ]).catch((err) => {
+    ]).catch(() => {
       console.error(
         'JSON-SERVER was not able to start. Port 3333 might still be open from a previous run. Try running `npm run kill-db-port` to kill the port\n\n'
       )

react/_full-app/tailwind.config.js renamed to react/_full-app/tailwind.config.ts

@@ -1,11 +1,11 @@
-const shell = require('shelljs')
-const path = require('path')
-const fs = require('fs')
-const readlineSync = require('readline-sync')
-const { createServer } = require('vite')
-const react = require('@vitejs/plugin-react')
-const { selectReactLesson, selectRemixLesson } = require('./select-lesson')
-const { startDatabase } = require('./start-db')
+import shell from 'shelljs'
+import path from 'path'
+import fs from 'fs'
+import readlineSync from 'readline-sync'
+import { createServer } from 'vite'
+import react from '@vitejs/plugin-react'
+import { selectReactLesson, selectRemixLesson } from './select-lesson'
+import { startDatabase } from './start-db'
 
 if (process.cwd().indexOf(' ') >= 0) {
   console.error(`We cant start this app if your path has spaces:\n${process.cwd()}\n\n`)
@@ -17,15 +17,15 @@ if (process.cwd().indexOf(' ') >= 0) {
 *****************************************/
 
 const preferencesPath = path.resolve(__dirname, '..', 'preferences.json')
-let preferences = {}
+let preferences: Record<string, string> = {}
 try {
   const data = fs.readFileSync(preferencesPath, 'utf8')
   preferences = JSON.parse(data)
 } catch (err) {
   // no-op
 }
 
-function savePreferences(updates) {
+function savePreferences(updates: Record<string, string>) {
   try {
     fs.writeFileSync(preferencesPath, JSON.stringify({ ...preferences, ...updates }, null, 2))
   } catch (err) {
@@ -94,7 +94,7 @@ function startRemix() {
   React SPA (Vite Server)
 *****************************************/
 
-async function startReact(coursesPath) {
+async function startReact(coursesPath: string) {
   // const coursesPath = path.resolve(__dirname, '..', 'react')
 
   const { lessonPath, selectedLessonType, selectedLesson } = selectReactLesson(
@@ -111,7 +111,7 @@ async function startReact(coursesPath) {
   const appRoot = '~'
 
   // Get aliases
-  const alias = {}
+  const alias: Record<string, string> = {}
 
   if (lessonPath) {
     // const aliasBasePath = `${courseAppNames[selectedCourse]}`
@@ -139,13 +139,15 @@ async function startReact(coursesPath) {
 
   const port = 3000
   const server = await createServer({
+    configFile: false,
+    root: appPath,
+    server: {
+      port,
+    },
     plugins: [react()],
     resolve: {
       alias,
     },
-    server: {
-      port,
-    },
     optimizeDeps: { include: ['firebase/app', 'firebase/firestore'] },
   })
 

react/core/09-testing/Counter/test.js renamed to react/core/09-testing/Counter/test.tsx

@@ -1,25 +1,31 @@
 {
   "compilerOptions": {
-    "strict": true,
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": false,
-    "target": "ESNext",
+    "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "skipLibCheck": false,
-    "forceConsistentCasingInFileNames": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    // Only needed for types with react 18 beta
-    "types": ["react/next", "react-dom/next", "jest"],
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
     "baseUrl": "./",
     "paths": {
       "~/*": ["react/_full-app/*"]
     }
-  }
+  },
+  "include": ["react"],
+  "exclude": ["node_modules"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

react/core/09-testing/VacationDetailsPage/test.js renamed to react/core/09-testing/VacationDetailsPage/test.tsx

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  // Without this empty include, we were getting
+  // JSX linting errors and import errors
+  "include": [""]
+}