update all deps and format

kentcdodds · kentcdodds · commit d5fd01b27e17 · 2025-11-21T13:23:12.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,11 +5,11 @@
     "test": "playwright test"
   },
   "dependencies": {
-    "@epic-web/config": "^1.16.3",
+    "@epic-web/config": "^1.21.3",
     "@epic-web/workshop-app": "^6.41.3",
     "@epic-web/workshop-utils": "^6.41.3",
-    "execa": "^9.5.1",
-    "fs-extra": "^11.2.0",
+    "execa": "^9.6.0",
+    "fs-extra": "^11.3.2",
     "@epic-web/workshop-cli": "^6.41.3"
   }
 }
diff --git a/epicshop/post-set-playground.js b/epicshop/post-set-playground.js
@@ -8,7 +8,9 @@ const exclude = [
 	'exercises/04.',
 ]
 
-if (exclude.every(e => !process.env.EPICSHOP_PLAYGROUND_SRC_DIR.includes(e))) {
+if (
+	exclude.every((e) => !process.env.EPICSHOP_PLAYGROUND_SRC_DIR.includes(e))
+) {
 	fs.writeFileSync(
 		path.join(process.env.EPICSHOP_PLAYGROUND_DEST_DIR, 'tsconfig.json'),
 		JSON.stringify({ extends: '../tsconfig' }, null, 2),
diff --git a/epicshop/update-deps.sh b/epicshop/update-deps.sh
@@ -7,4 +7,4 @@ rm -rf node_modules package-lock.json ./epicshop/package-lock.json ./epicshop/no
 npm install
 npm run setup
 npm run typecheck
-npm run lint --fix
+npm run lint -- --fix
diff --git a/exercises/02.raw-react/01.problem.elements/README.mdx b/exercises/02.raw-react/01.problem.elements/README.mdx
@@ -11,7 +11,7 @@ like [npm](https://npmjs.com) where packages we use are ([react](https://npm.im/
 
 <callout-info class="aside">
 	A package registry is a centralized repository where developers can publish
-	and share reusable code packages. 
+	and share reusable code packages.
 </callout-info>
 
 To keep things simple for these exercises, we'll import React from slightly different locations:
diff --git a/exercises/02.raw-react/01.solution.elements/index.test.ts b/exercises/02.raw-react/01.solution.elements/index.test.ts
@@ -25,7 +25,7 @@ await testStep('The DOM element is created by React', () => {
 	expect(element, 'element not found').to.be.instanceOf(HTMLElement)
 	if (!element) return
 
-	const reactKeys = Object.keys(element).filter(key =>
+	const reactKeys = Object.keys(element).filter((key) =>
 		key.startsWith('__react'),
 	)
 	expect(
diff --git a/exercises/03.using-jsx/01.solution.compiler/README.mdx b/exercises/03.using-jsx/01.solution.compiler/README.mdx
@@ -5,7 +5,6 @@
 🦉 Let's break down the key changes in our `script` tag:
 
 1. `type="text/babel"` and `data-type="module"`:
-
    - `type="text/babel"` tells Babel to transpile this script, allowing us to use JSX and modern JavaScript features.
    - `data-type="module"` indicates that this script should be treated as a module after Babel transpilation. This enables us to use `import` statements.
 
@@ -25,7 +24,6 @@
    ```
 
    This imports all exports from React as a namespace called `React`. It's beneficial because:
-
    - It provides access to all React APIs, not just `createElement`.
    - When using JSX, the transpiler will convert JSX elements to `React.createElement` calls, so we need the `React` namespace in scope.
 
diff --git a/exercises/03.using-jsx/02.solution.interpolation/index.test.ts b/exercises/03.using-jsx/02.solution.interpolation/index.test.ts
@@ -20,5 +20,8 @@ await testStep('children is interpolated', async () => {
 		inlineScript.textContent,
 		'children should be interpolated',
 	).not.to.include('>Hello World<')
-	expect(inlineScript.textContent, 'expected script to include { children }').to.match(/{\s*children\s*}/)
+	expect(
+		inlineScript.textContent,
+		'expected script to include { children }',
+	).to.match(/{\s*children\s*}/)
 })
diff --git a/exercises/07.forms/04.problem.submit/README.mdx b/exercises/07.forms/04.problem.submit/README.mdx
@@ -100,7 +100,7 @@ submission in JavaScript and prevent the browser's default behavior.
 	action="api/onboarding"
 	method="POST"
 	encType="multipart/form-data"
-	onSubmit={event => {
+	onSubmit={(event) => {
 		event.preventDefault()
 		// ...
 	}}
diff --git a/exercises/07.forms/04.solution.submit/index.tsx b/exercises/07.forms/04.solution.submit/index.tsx
@@ -10,7 +10,7 @@ function App() {
 			method="POST"
 			encType="multipart/form-data"
 			// 🦉 by the end of the exercise, this is all you'll actually need:
-			onSubmit={event => {
+			onSubmit={(event) => {
 				event.preventDefault()
 				const formData = new FormData(event.currentTarget)
 				console.log(Object.fromEntries(formData))
diff --git a/exercises/07.forms/05.problem.action/index.tsx b/exercises/07.forms/05.problem.action/index.tsx
@@ -13,7 +13,7 @@ function App() {
 			//   warning says before removing them.
 			method="POST"
 			encType="multipart/form-data"
-			onSubmit={event => {
+			onSubmit={(event) => {
 				event.preventDefault()
 				const formData = new FormData(event.currentTarget)
 				console.log(Object.fromEntries(formData))
diff --git a/exercises/07.forms/README.mdx b/exercises/07.forms/README.mdx
@@ -31,7 +31,7 @@ form.
 
 ```tsx
 <form
-	onSubmit={event => {
+	onSubmit={(event) => {
 		event.preventDefault() // prevent the default browser behavior
 		const formData = new FormData(event.currentTarget)
 		// do something with the form data
diff --git a/exercises/08.inputs/03.problem.radio/README.mdx b/exercises/08.inputs/03.problem.radio/README.mdx
@@ -15,9 +15,9 @@ can use a `<fieldset>` and a `<legend>`.
 
 <callout-info>
 	Note: Similar to checkboxes, to set the default value, you can set the
-	`checked` attribute to the input you want to be selected by default... but
-	in React, that will make your input read-only! We'll learn more about how
-	to set default values in React in a future lesson.
+	`checked` attribute to the input you want to be selected by default... but in
+	React, that will make your input read-only! We'll learn more about how to set
+	default values in React in a future lesson.
 </callout-info>
 
 Similar to a select `option`, you need to set the `value` on the input to
diff --git a/exercises/09.errors/01.problem.composition/index.tsx b/exercises/09.errors/01.problem.composition/index.tsx
@@ -8,7 +8,7 @@ function App() {
 			action="api/onboarding"
 			method="POST"
 			encType="multipart/form-data"
-			onSubmit={event => {
+			onSubmit={(event) => {
 				event.preventDefault()
 				const formData = new FormData(event.currentTarget)
 				console.log(Object.fromEntries(formData))
diff --git a/exercises/09.errors/01.solution.composition/index.tsx b/exercises/09.errors/01.solution.composition/index.tsx
@@ -7,7 +7,7 @@ function OnboardingForm() {
 			action="api/onboarding"
 			method="POST"
 			encType="multipart/form-data"
-			onSubmit={event => {
+			onSubmit={(event) => {
 				event.preventDefault()
 				const formData = new FormData(event.currentTarget)
 				console.log(Object.fromEntries(formData))
diff --git a/exercises/09.errors/02.problem.show-boundary/index.tsx b/exercises/09.errors/02.problem.show-boundary/index.tsx
@@ -9,7 +9,7 @@ function OnboardingForm() {
 			action="api/onboarding"
 			method="POST"
 			encType="multipart/form-data"
-			onSubmit={event => {
+			onSubmit={(event) => {
 				// 🐨 wrap all of this in a try/catch block
 				// 🐨 call showBoundary with the error in the catch block
 				event.preventDefault()
diff --git a/exercises/09.errors/02.solution.show-boundary/index.tsx b/exercises/09.errors/02.solution.show-boundary/index.tsx
@@ -12,7 +12,7 @@ function OnboardingForm() {
 			action="api/onboarding"
 			method="POST"
 			encType="multipart/form-data"
-			onSubmit={event => {
+			onSubmit={(event) => {
 				try {
 					event.preventDefault()
 					const formData = new FormData(event.currentTarget)
diff --git a/exercises/09.errors/03.problem.reset/index.tsx b/exercises/09.errors/03.problem.reset/index.tsx
@@ -12,7 +12,7 @@ function OnboardingForm() {
 			action="api/onboarding"
 			method="POST"
 			encType="multipart/form-data"
-			onSubmit={event => {
+			onSubmit={(event) => {
 				try {
 					event.preventDefault()
 					const formData = new FormData(event.currentTarget)
diff --git a/exercises/09.errors/03.solution.reset/index.tsx b/exercises/09.errors/03.solution.reset/index.tsx
@@ -12,7 +12,7 @@ function OnboardingForm() {
 			action="api/onboarding"
 			method="POST"
 			encType="multipart/form-data"
-			onSubmit={event => {
+			onSubmit={(event) => {
 				try {
 					event.preventDefault()
 					const formData = new FormData(event.currentTarget)
diff --git a/exercises/09.errors/README.mdx b/exercises/09.errors/README.mdx
@@ -10,7 +10,7 @@ your application will be removed from the page, leaving the user with a blank
 screen... Kind of awkward...
 
 The problem is, you can't just wrap your entire application in a `try`/`catch`
-because of the way JavaScript works. If you recall from earlier lessons, then 
+because of the way JavaScript works. If you recall from earlier lessons, then
 you'll remember this:
 
 ```tsx
diff --git a/exercises/10.arrays/01.problem.key-prop/index.tsx b/exercises/10.arrays/01.problem.key-prop/index.tsx
@@ -12,13 +12,13 @@ function App() {
 	const [items, setItems] = useState(allItems)
 
 	function addItem() {
-		const itemIds = items.map(i => i.id)
-		const itemToAdd = allItems.find(i => !itemIds.includes(i.id))
+		const itemIds = items.map((i) => i.id)
+		const itemToAdd = allItems.find((i) => !itemIds.includes(i.id))
 		if (itemToAdd) setItems([...items, itemToAdd])
 	}
 
 	function removeItem(id: string) {
-		setItems(items.filter(i => i.id !== id))
+		setItems(items.filter((i) => i.id !== id))
 	}
 
 	return (
@@ -27,7 +27,7 @@ function App() {
 				add item
 			</button>
 			<ul>
-				{items.map(item => (
+				{items.map((item) => (
 					// 🐨 add a key prop to the <li> below. Set it to item.id
 					// 💣 you can then delete this eslint-disable line:
 					// eslint-disable-next-line react/jsx-key
diff --git a/exercises/10.arrays/01.solution.key-prop/README.mdx b/exercises/10.arrays/01.solution.key-prop/README.mdx
@@ -11,7 +11,7 @@ fine:
 ```tsx
 const element = (
 	<ul>
-		{list.map(listItem => (
+		{list.map((listItem) => (
 			<li key={listItem.id}>{listItem.value}</li>
 		))}
 	</ul>
diff --git a/exercises/10.arrays/01.solution.key-prop/index.tsx b/exercises/10.arrays/01.solution.key-prop/index.tsx
@@ -12,13 +12,13 @@ function App() {
 	const [items, setItems] = useState(allItems)
 
 	function addItem() {
-		const itemIds = items.map(i => i.id)
-		const itemToAdd = allItems.find(i => !itemIds.includes(i.id))
+		const itemIds = items.map((i) => i.id)
+		const itemToAdd = allItems.find((i) => !itemIds.includes(i.id))
 		if (itemToAdd) setItems([...items, itemToAdd])
 	}
 
 	function removeItem(id: string) {
-		setItems(items.filter(i => i.id !== id))
+		setItems(items.filter((i) => i.id !== id))
 	}
 
 	return (
@@ -27,7 +27,7 @@ function App() {
 				add item
 			</button>
 			<ul>
-				{items.map(item => (
+				{items.map((item) => (
 					<li key={item.id}>
 						<button onClick={() => removeItem(item.id)}>remove</button>{' '}
 						<label htmlFor={`${item.id}-input`}>{item.value}</label>{' '}
diff --git a/exercises/10.arrays/03.problem.key-reset/index.tsx b/exercises/10.arrays/03.problem.key-reset/index.tsx
@@ -7,7 +7,7 @@ function App() {
 		<div>
 			{/* 🐨 add a key prop to this input and set it to the key state */}
 			<input />
-			<button onClick={() => setKey(key => key + 1)}>Reset</button>
+			<button onClick={() => setKey((key) => key + 1)}>Reset</button>
 		</div>
 	)
 }
diff --git a/exercises/10.arrays/03.solution.key-reset/index.tsx b/exercises/10.arrays/03.solution.key-reset/index.tsx
@@ -6,7 +6,7 @@ function App() {
 	return (
 		<div>
 			<input key={key} />
-			<button onClick={() => setKey(key => key + 1)}>Reset</button>
+			<button onClick={() => setKey((key) => key + 1)}>Reset</button>
 		</div>
 	)
 }
diff --git a/exercises/10.arrays/README.mdx b/exercises/10.arrays/README.mdx
@@ -24,7 +24,7 @@ const list = ['One', 'Two', 'Three']
 
 const ui = (
 	<ul>
-		{list.map(listItem => (
+		{list.map((listItem) => (
 			<li>{listItem}</li>
 		))}
 	</ul>
@@ -36,7 +36,7 @@ different. Let's re-write it to see that difference:
 
 ```tsx
 const list = ['One', 'Two', 'Three']
-const listUI = list.map(listItem => <li>{listItem}</li>)
+const listUI = list.map((listItem) => <li>{listItem}</li>)
 // notice that listUI is an array
 const ui = <ul>{listUI}</ul>
 ```
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
`@@ -25,7 +25,7 @@ await testStep('The DOM element is created by React', () => {`
`25`	`25`	`expect(element, 'element not found').to.be.instanceOf(HTMLElement)`
`26`	`26`	`if (!element) return`
`27`	`27`
`28`		`- const reactKeys = Object.keys(element).filter(key =>`
	`28`	`+ const reactKeys = Object.keys(element).filter((key) =>`
`29`	`29`	`key.startsWith('__react'),`
`30`	`30`	`)`
`31`	`31`	`expect(`