upgrade to react 19

Author: kentcdodds

epicshop/playwright.config.ts

@@ -1,5 +1,4 @@
-import { type PlaywrightTestConfig } from '@playwright/test'
-import { devices } from '@playwright/test'
+import { type PlaywrightTestConfig , devices } from '@playwright/test'
 import 'dotenv/config'
 
 const PORT = process.env.PORT || 3000

eslint.config.js

@@ -1,14 +1,17 @@
 /** @type {import('@types/eslint').Linter.Config} */
 export default {
+	files: ['**/*.js', '**/*.ts', '**/*.tsx'],
 	languageOptions: { parser: await import('@typescript-eslint/parser') },
 	plugins: {
 		'@typescript-eslint': (await import('@typescript-eslint/eslint-plugin'))
 			.default,
+		'react-hooks': (await import('eslint-plugin-react-hooks')).default,
 		import: (await import('eslint-plugin-import')).default,
 	},
 	rules: {
-		// playwright requires destructuring in fixtures even if you don't use anything 🤷‍♂️
-		'no-empty-pattern': 'off',
+		'react-hooks/rules-of-hooks': 'error',
+		'react-hooks/exhaustive-deps': 'warn',
+
 		'@typescript-eslint/consistent-type-imports': [
 			'warn',
 			{

exercises/01.latest-ref/01.solution.ref/increments.test.tsx

@@ -1,6 +1,6 @@
 import { expect, testStep } from '@epic-web/workshop-utils/test'
 import { waitFor, within } from '@testing-library/dom'
-import { userEvent } from '#shared/user-event.cjs'
+import { userEvent } from '@testing-library/user-event'
 import '.'
 
 const screen = within(document.body)

exercises/01.latest-ref/01.solution.ref/step-change.test.tsx

@@ -1,6 +1,6 @@
 import { expect, testStep } from '@epic-web/workshop-utils/test'
 import { fireEvent, waitFor, within } from '@testing-library/dom'
-import { userEvent } from '#shared/user-event.cjs'
+import { userEvent } from '@testing-library/user-event'
 import '.'
 
 const screen = within(document.body)

exercises/02.composition/01.solution/ui-still-works.test.tsx

@@ -1,6 +1,6 @@
 import { expect, testStep } from '@epic-web/workshop-utils/test'
 import { within } from '@testing-library/dom'
-import { userEvent } from '#shared/user-event.cjs'
+import { userEvent } from '@testing-library/user-event'
 import '.'
 
 const screen = within(document.body)

exercises/04.slots/02.solution.generic/toggle.tsx

@@ -1,6 +1,6 @@
 import { createContext, use, useId, useState } from 'react'
-import { Switch } from '#shared/switch.tsx'
 import { SlotContext } from './slots'
+import { Switch } from '#shared/switch.tsx'
 
 type ToggleValue = { on: boolean; toggle: () => void; id: string }
 const ToggleContext = createContext<ToggleValue | null>(null)

exercises/04.slots/03.problem.prop/toggle.tsx

@@ -1,6 +1,6 @@
 import { createContext, use, useId, useState } from 'react'
-import { Switch } from '#shared/switch.tsx'
 import { SlotContext } from './slots'
+import { Switch } from '#shared/switch.tsx'
 
 // 🐨 delete all this context stuff
 type ToggleValue = { on: boolean; toggle: () => void; id: string }

exercises/05.prop-getters/01.problem.collections/app.tsx

@@ -1,5 +1,5 @@
-import { Switch } from '#shared/switch.tsx'
 import { useToggle } from './toggle.tsx'
+import { Switch } from '#shared/switch.tsx'
 
 export function App() {
 	const { on, togglerProps } = useToggle()

exercises/05.prop-getters/01.solution.collections/app.tsx

@@ -1,5 +1,5 @@
-import { Switch } from '#shared/switch.tsx'
 import { useToggle } from './toggle.tsx'
+import { Switch } from '#shared/switch.tsx'
 
 export function App() {
 	const { on, togglerProps } = useToggle()

exercises/05.prop-getters/02.problem.getters/app.tsx

@@ -1,5 +1,5 @@
-import { Switch } from '#shared/switch.tsx'
 import { useToggle } from './toggle.tsx'
+import { Switch } from '#shared/switch.tsx'
 
 export function App() {
 	// 💣 delete this:

exercises/05.prop-getters/02.solution.getters/app.tsx

@@ -1,5 +1,5 @@
-import { Switch } from '#shared/switch.tsx'
 import { useToggle } from './toggle.tsx'
+import { Switch } from '#shared/switch.tsx'
 
 export function App() {
 	const { on, getTogglerProps } = useToggle()

exercises/05.prop-getters/02.solution.getters/forwards-props.test.tsx

@@ -1,6 +1,6 @@
 import { expect, testStep } from '@epic-web/workshop-utils/test'
 import { screen, waitFor } from '@testing-library/dom'
-import { userEvent } from '#shared/user-event.cjs'
+import { userEvent } from '@testing-library/user-event'
 import '.'
 
 const customButton = await testStep('Custom button is rendred', () =>

exercises/06.state-initializers/01.problem.initial/app.tsx

@@ -1,5 +1,5 @@
-import { Switch } from '#shared/switch.tsx'
 import { useToggle } from './toggle.tsx'
+import { Switch } from '#shared/switch.tsx'
 
 export function App() {
 	// 🐨 add an initialOn option (set it to true) and get the reset callback from useToggle

exercises/06.state-initializers/01.solution.initial/app.tsx

@@ -1,5 +1,5 @@
-import { Switch } from '#shared/switch.tsx'
 import { useToggle } from './toggle.tsx'
+import { Switch } from '#shared/switch.tsx'
 
 export function App() {
 	const { on, getTogglerProps, reset } = useToggle({ initialOn: true })

exercises/06.state-initializers/02.problem.stability/app.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { Switch } from '#shared/switch.tsx'
 import { useToggle } from './toggle.tsx'
+import { Switch } from '#shared/switch.tsx'
 
 export function App() {
 	const [initialOn, setInitialOn] = useState(true)

exercises/06.state-initializers/02.solution.stability/app.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { Switch } from '#shared/switch.tsx'
 import { useToggle } from './toggle.tsx'
+import { Switch } from '#shared/switch.tsx'
 
 export function App() {
 	const [initialOn, setInitialOn] = useState(true)

exercises/07.state-reducer/01.problem/app.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { Switch } from '#shared/switch.tsx'
 import { useToggle } from './toggle.tsx'
+import { Switch } from '#shared/switch.tsx'
 
 export function App() {
 	const [timesClicked, setTimesClicked] = useState(0)

exercises/07.state-reducer/01.solution/app.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { Switch } from '#shared/switch.tsx'
 import { useToggle } from './toggle.tsx'
+import { Switch } from '#shared/switch.tsx'
 
 export function App() {
 	const [timesClicked, setTimesClicked] = useState(0)

exercises/07.state-reducer/01.solution/click-limit.test.tsx

@@ -1,6 +1,6 @@
 import { expect, testStep } from '@epic-web/workshop-utils/test'
 import { render, screen } from '@testing-library/react'
-import { userEvent } from '#shared/user-event.cjs'
+import { userEvent } from '@testing-library/user-event'
 import { App } from './app.tsx'
 
 await testStep('can render the app', () => {

exercises/07.state-reducer/02.problem.default/app.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
+import { useToggle } from './toggle.tsx'
 import { Switch } from '#shared/switch.tsx'
 // 🐨 import the toggleReducer
-import { useToggle } from './toggle.tsx'
 
 export function App() {
 	const [timesClicked, setTimesClicked] = useState(0)

exercises/07.state-reducer/02.solution.default/app.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { Switch } from '#shared/switch.tsx'
 import { toggleReducer, useToggle } from './toggle.tsx'
+import { Switch } from '#shared/switch.tsx'
 
 export function App() {
 	const [timesClicked, setTimesClicked] = useState(0)

exercises/07.state-reducer/02.solution.default/click-limit.test.tsx

@@ -1,6 +1,6 @@
 import { expect, testStep } from '@epic-web/workshop-utils/test'
 import { render, screen } from '@testing-library/react'
-import { userEvent } from '#shared/user-event.cjs'
+import { userEvent } from '@testing-library/user-event'
 import { App } from './app.tsx'
 
 await testStep('can render the app', () => {

exercises/08.control-props/01.solution/synchronized.test.tsx

@@ -1,6 +1,6 @@
 import { expect, testStep } from '@epic-web/workshop-utils/test'
 import { render, screen } from '@testing-library/react'
-import { userEvent } from '#shared/user-event.cjs'
+import { userEvent } from '@testing-library/user-event'
 import { App } from './app.tsx'
 
 await testStep('can render the app', () => {

exercises/08.control-props/01.solution/uncontrolled.test.tsx

@@ -1,6 +1,6 @@
 import { expect, testStep } from '@epic-web/workshop-utils/test'
 import { render, screen } from '@testing-library/react'
-import { userEvent } from '#shared/user-event.cjs'
+import { userEvent } from '@testing-library/user-event'
 import { Toggle } from './toggle.tsx'
 
 await testStep('can render Toggle with no props', () => {