upgrade to React 19

kentcdodds · kentcdodds · commit 4686a3ca14e2 · 2024-12-05T13:14:29.000-07:00
diff --git a/epicshop/package-lock.json b/epicshop/package-lock.json
diff --git a/epicshop/package.json b/epicshop/package.json
@@ -5,10 +5,10 @@
     "test": "playwright test"
   },
   "dependencies": {
-    "@epic-web/config": "^1.5.3",
+    "@epic-web/config": "^1.16.3",
     "@epic-web/workshop-app": "^5.9.0",
     "@epic-web/workshop-utils": "^5.9.0",
-    "execa": "^8.0.1",
+    "execa": "^9.5.1",
     "fs-extra": "^11.2.0"
   }
 }
diff --git a/epicshop/update-deps.sh b/epicshop/update-deps.sh
@@ -1,7 +1,7 @@
 set -e
 
-npx npm-check-updates --dep prod,dev --upgrade --root --reject react,react-dom
-cd epicshop && npx npm-check-updates --dep prod,dev --upgrade --root react,react-dom
+npx npm-check-updates --dep prod,dev --upgrade --root
+cd epicshop && npx npm-check-updates --dep prod,dev --upgrade --root
 cd ..
 rm -rf node_modules package-lock.json ./epicshop/package-lock.json ./epicshop/node_modules ./exercises/**/node_modules
 npm install
diff --git a/exercises/02.raw-react/02.solution.nesting/index.test.ts b/exercises/02.raw-react/02.solution.nesting/index.test.ts
@@ -33,6 +33,6 @@ await testStep('"Hello World" is rendered to the DOM', async () => {
 	expect(hello, 'Hello span not found').to.be.instanceOf(HTMLElement)
 	expect(world, 'World span not found').to.be.instanceOf(HTMLElement)
 
-	expect(hello.textContent, 'hello text is not correct').to.equal('Hello')
-	expect(world.textContent, 'world text is not correct').to.equal('World')
+	expect(hello?.textContent, 'hello text is not correct').to.equal('Hello')
+	expect(world?.textContent, 'world text is not correct').to.equal('World')
 })
diff --git a/exercises/02.raw-react/03.solution.deep-nesting/index.test.ts b/exercises/02.raw-react/03.solution.deep-nesting/index.test.ts
@@ -31,8 +31,8 @@ await testStep('Proper elements are rendered to the DOM', async () => {
 
 	const [greenEggs, ham] = ul!.querySelectorAll('li')
 
-	expect(greenEggs.textContent, 'green eggs text is not correct').to.equal(
+	expect(greenEggs?.textContent, 'green eggs text is not correct').to.equal(
 		'Green eggs',
 	)
-	expect(ham.textContent, 'ham text is not correct').to.equal('Ham')
+	expect(ham?.textContent, 'ham text is not correct').to.equal('Ham')
 })
diff --git a/exercises/03.using-jsx/04.solution.nesting/content.test.ts b/exercises/03.using-jsx/04.solution.nesting/content.test.ts
@@ -32,8 +32,8 @@ await testStep('Proper elements are rendered to the DOM', async () => {
 
 	const [greenEggs, ham] = ul!.querySelectorAll('li')
 
-	expect(greenEggs.textContent, 'green eggs text is not correct').to.equal(
+	expect(greenEggs?.textContent, 'green eggs text is not correct').to.equal(
 		'Green eggs',
 	)
-	expect(ham.textContent, 'ham text is not correct').to.equal('Ham')
+	expect(ham?.textContent, 'ham text is not correct').to.equal('Ham')
 })
diff --git a/exercises/03.using-jsx/05.solution.fragments/content.test.ts b/exercises/03.using-jsx/05.solution.fragments/content.test.ts
@@ -28,8 +28,8 @@ await testStep('Proper elements are rendered to the DOM', async () => {
 
 	const [greenEggs, ham] = ul!.querySelectorAll('li')
 
-	expect(greenEggs.textContent, 'green eggs text is not correct').to.equal(
+	expect(greenEggs?.textContent, 'green eggs text is not correct').to.equal(
 		'Green eggs',
 	)
-	expect(ham.textContent, 'ham text is not correct').to.equal('Ham')
+	expect(ham?.textContent, 'ham text is not correct').to.equal('Ham')
 })
diff --git a/exercises/04.components/01.solution.function/content.test.ts b/exercises/04.components/01.solution.function/content.test.ts
@@ -21,6 +21,6 @@ await testStep('Proper elements are rendered to the DOM', async () => {
 	const messages = Array.from(element.querySelectorAll('.message'))
 	expect(messages, 'messages not found').to.have.length(2)
 	const [helloMessage, goodbyeMessage] = messages
-	expect(helloMessage.textContent).to.equal('Hello World')
-	expect(goodbyeMessage.textContent).to.equal('Goodbye World')
+	expect(helloMessage?.textContent).to.equal('Hello World')
+	expect(goodbyeMessage?.textContent).to.equal('Goodbye World')
 })
diff --git a/exercises/04.components/02.solution.raw/content.test.ts b/exercises/04.components/02.solution.raw/content.test.ts
@@ -21,6 +21,6 @@ await testStep('Proper elements are rendered to the DOM', async () => {
 	const messages = Array.from(element.querySelectorAll('.message'))
 	expect(messages, 'messages not found').to.have.length(2)
 	const [helloMessage, goodbyeMessage] = messages
-	expect(helloMessage.textContent).to.equal('Hello World')
-	expect(goodbyeMessage.textContent).to.equal('Goodbye World')
+	expect(helloMessage?.textContent).to.equal('Hello World')
+	expect(goodbyeMessage?.textContent).to.equal('Goodbye World')
 })
diff --git a/exercises/04.components/03.solution.jsx/content.test.ts b/exercises/04.components/03.solution.jsx/content.test.ts
@@ -21,6 +21,6 @@ await testStep('Proper elements are rendered to the DOM', async () => {
 	const messages = Array.from(element.querySelectorAll('.message'))
 	expect(messages, 'messages not found').to.have.length(2)
 	const [helloMessage, goodbyeMessage] = messages
-	expect(helloMessage.textContent).to.equal('Hello World')
-	expect(goodbyeMessage.textContent).to.equal('Goodbye World')
+	expect(helloMessage?.textContent).to.equal('Hello World')
+	expect(goodbyeMessage?.textContent).to.equal('Goodbye World')
 })
diff --git a/exercises/10.arrays/02.problem.focus-state/index.tsx b/exercises/10.arrays/02.problem.focus-state/index.tsx
@@ -21,8 +21,8 @@ function App() {
 	function getChangeHandler(item: (typeof items)[number]) {
 		return (event: React.ChangeEvent<HTMLInputElement>) => {
 			const newValue = event.currentTarget.value
-			setItems(allItems =>
-				allItems.map(i => ({
+			setItems((allItems) =>
+				allItems.map((i) => ({
 					...i,
 					value: i.id === item.id ? newValue : i.value,
 				})),
@@ -98,7 +98,7 @@ function App() {
 						id="autoshuffle"
 						type="checkbox"
 						checked={autoShuffle}
-						onChange={event => setAutoShuffle(event.target.checked)}
+						onChange={(event) => setAutoShuffle(event.target.checked)}
 					/>
 					<label htmlFor="autoshuffle">Auto-shuffle inputs</label>
 				</div>
@@ -119,7 +119,9 @@ function shuffle<ArrayType>(originalArray: Array<ArrayType>) {
 		currentIndex -= 1
 		// And swap it with the current element.
 		temporaryValue = array[currentIndex]
+		// @ts-expect-error
 		array[currentIndex] = array[randomIndex]
+		// @ts-expect-error
 		array[randomIndex] = temporaryValue
 	}
 	return array
diff --git a/exercises/10.arrays/02.solution.focus-state/index.tsx b/exercises/10.arrays/02.solution.focus-state/index.tsx
@@ -21,8 +21,8 @@ function App() {
 	function getChangeHandler(item: (typeof items)[number]) {
 		return (event: React.ChangeEvent<HTMLInputElement>) => {
 			const newValue = event.currentTarget.value
-			setItems(allItems =>
-				allItems.map(i => ({
+			setItems((allItems) =>
+				allItems.map((i) => ({
 					...i,
 					value: i.id === item.id ? newValue : i.value,
 				})),
@@ -94,7 +94,7 @@ function App() {
 						id="autoshuffle"
 						type="checkbox"
 						checked={autoShuffle}
-						onChange={event => setAutoShuffle(event.target.checked)}
+						onChange={(event) => setAutoShuffle(event.target.checked)}
 					/>
 					<label htmlFor="autoshuffle">Auto-shuffle inputs</label>
 				</div>
@@ -115,7 +115,9 @@ function shuffle<ArrayType>(originalArray: Array<ArrayType>) {
 		currentIndex -= 1
 		// And swap it with the current element.
 		temporaryValue = array[currentIndex]
+		// @ts-expect-error
 		array[currentIndex] = array[randomIndex]
+		// @ts-expect-error
 		array[randomIndex] = temporaryValue
 	}
 	return array
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -5,10 +5,10 @@`
`5`	`5`	`"test": "playwright test"`
`6`	`6`	`},`
`7`	`7`	`"dependencies": {`
`8`		`- "@epic-web/config": "^1.5.3",`
	`8`	`+ "@epic-web/config": "^1.16.3",`
`9`	`9`	`"@epic-web/workshop-app": "^5.9.0",`
`10`	`10`	`"@epic-web/workshop-utils": "^5.9.0",`
`11`		`- "execa": "^8.0.1",`
	`11`	`+ "execa": "^9.5.1",`
`12`	`12`	`"fs-extra": "^11.2.0"`
`13`	`13`	`}`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -31,8 +31,8 @@ await testStep('Proper elements are rendered to the DOM', async () => {`
`31`	`31`
`32`	`32`	`const [greenEggs, ham] = ul!.querySelectorAll('li')`
`33`	`33`
`34`		`- expect(greenEggs.textContent, 'green eggs text is not correct').to.equal(`
	`34`	`+ expect(greenEggs?.textContent, 'green eggs text is not correct').to.equal(`
`35`	`35`	`'Green eggs',`
`36`	`36`	`)`
`37`		`- expect(ham.textContent, 'ham text is not correct').to.equal('Ham')`
	`37`	`+ expect(ham?.textContent, 'ham text is not correct').to.equal('Ham')`
`38`	`38`	`})`
Original file line number	Diff line number	Diff line change
`@@ -32,8 +32,8 @@ await testStep('Proper elements are rendered to the DOM', async () => {`
`32`	`32`
`33`	`33`	`const [greenEggs, ham] = ul!.querySelectorAll('li')`
`34`	`34`
`35`		`- expect(greenEggs.textContent, 'green eggs text is not correct').to.equal(`
	`35`	`+ expect(greenEggs?.textContent, 'green eggs text is not correct').to.equal(`
`36`	`36`	`'Green eggs',`
`37`	`37`	`)`
`38`		`- expect(ham.textContent, 'ham text is not correct').to.equal('Ham')`
	`38`	`+ expect(ham?.textContent, 'ham text is not correct').to.equal('Ham')`
`39`	`39`	`})`
Original file line number	Diff line number	Diff line change
`@@ -28,8 +28,8 @@ await testStep('Proper elements are rendered to the DOM', async () => {`
`28`	`28`
`29`	`29`	`const [greenEggs, ham] = ul!.querySelectorAll('li')`
`30`	`30`
`31`		`- expect(greenEggs.textContent, 'green eggs text is not correct').to.equal(`
	`31`	`+ expect(greenEggs?.textContent, 'green eggs text is not correct').to.equal(`
`32`	`32`	`'Green eggs',`
`33`	`33`	`)`
`34`		`- expect(ham.textContent, 'ham text is not correct').to.equal('Ham')`
	`34`	`+ expect(ham?.textContent, 'ham text is not correct').to.equal('Ham')`
`35`	`35`	`})`