upgrade to react 19

epicweb-dev · Apr 26, 2024 · 80a20a2 · 80a20a2
1 parent 3f6711c
commit 80a20a2
Show file tree

Hide file tree

Showing 29 changed files with 548 additions and 418 deletions.
diff --git a/epicshop/playwright.config.ts b/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

diff --git a/eslint.config.js b/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',
  {

diff --git a/exercises/01.latest-ref/01.solution.ref/increments.test.tsx b/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)

diff --git a/exercises/01.latest-ref/01.solution.ref/step-change.test.tsx b/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)

diff --git a/exercises/02.composition/01.solution/ui-still-works.test.tsx b/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)

diff --git a/exercises/04.slots/02.solution.generic/toggle.tsx b/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)

diff --git a/exercises/04.slots/03.problem.prop/toggle.tsx b/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 }

diff --git a/exercises/05.prop-getters/01.problem.collections/app.tsx b/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()

diff --git a/exercises/05.prop-getters/01.solution.collections/app.tsx b/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()

diff --git a/exercises/05.prop-getters/02.problem.getters/app.tsx b/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:

diff --git a/exercises/05.prop-getters/02.solution.getters/app.tsx b/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()

diff --git a/exercises/05.prop-getters/02.solution.getters/forwards-props.test.tsx b/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', () =>

diff --git a/exercises/06.state-initializers/01.problem.initial/app.tsx b/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

diff --git a/exercises/06.state-initializers/01.solution.initial/app.tsx b/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 })

diff --git a/exercises/06.state-initializers/02.problem.stability/app.tsx b/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)

diff --git a/exercises/06.state-initializers/02.solution.stability/app.tsx b/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)

diff --git a/exercises/07.state-reducer/01.problem/app.tsx b/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)

diff --git a/exercises/07.state-reducer/01.solution/app.tsx b/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)

diff --git a/exercises/07.state-reducer/01.solution/click-limit.test.tsx b/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', () => {

diff --git a/exercises/07.state-reducer/02.problem.default/app.tsx b/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)

diff --git a/exercises/07.state-reducer/02.solution.default/app.tsx b/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)

diff --git a/exercises/07.state-reducer/02.solution.default/click-limit.test.tsx b/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', () => {

diff --git a/exercises/08.control-props/01.solution/synchronized.test.tsx b/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', () => {

diff --git a/exercises/08.control-props/01.solution/uncontrolled.test.tsx b/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', () => {