upgrade to react 19

epicweb-dev · Apr 26, 2024 · 7de49f9 · 7de49f9
1 parent 796317d
commit 7de49f9
Show file tree

Hide file tree

Showing 43 changed files with 1,288 additions and 3,616 deletions.
diff --git a/epicshop/package-lock.json b/epicshop/package-lock.json
diff --git a/epicshop/update-deps.sh b/epicshop/update-deps.sh
@@ -1,5 +1,9 @@
-npx npm-check-updates --dep prod,dev --upgrade --root
-rm -rf node_modules package-lock.json ./exercises/**/node_modules
+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
+cd ..
+rm -rf node_modules package-lock.json ./epicshop/package-lock.json ./epicshop/node_modules ./exercises/**/node_modules
 npm install
 npm run setup
 npm run typecheck

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.managing-ui-state/01.problem.use-state/index.tsx b/exercises/01.managing-ui-state/01.problem.use-state/index.tsx
@@ -1,4 +1,4 @@
-import * as ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 
 function App() {
@@ -64,4 +64,4 @@ function MatchingPosts({ query }: { query: string }) {
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)
-ReactDOM.createRoot(rootEl).render(<App />)
+createRoot(rootEl).render(<App />)
diff --git a/exercises/01.managing-ui-state/01.solution.use-state/index.tsx b/exercises/01.managing-ui-state/01.solution.use-state/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import * as ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 
 function App() {
@@ -64,4 +64,4 @@ function MatchingPosts({ query }: { query: string }) {
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)
-ReactDOM.createRoot(rootEl).render(<App />)
+createRoot(rootEl).render(<App />)
diff --git a/exercises/01.managing-ui-state/02.problem.control/index.tsx b/exercises/01.managing-ui-state/02.problem.control/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import * as ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 
 function App() {
@@ -80,4 +80,4 @@ function MatchingPosts({ query }: { query: string }) {
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)
-ReactDOM.createRoot(rootEl).render(<App />)
+createRoot(rootEl).render(<App />)
diff --git a/exercises/01.managing-ui-state/02.solution.control/index.tsx b/exercises/01.managing-ui-state/02.solution.control/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import * as ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 
 function App() {
@@ -85,4 +85,4 @@ function MatchingPosts({ query }: { query: string }) {
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)
-ReactDOM.createRoot(rootEl).render(<App />)
+createRoot(rootEl).render(<App />)
diff --git a/exercises/01.managing-ui-state/03.problem.derive/index.tsx b/exercises/01.managing-ui-state/03.problem.derive/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import * as ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 
 function App() {
@@ -95,4 +95,4 @@ function MatchingPosts({ query }: { query: string }) {
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)
-ReactDOM.createRoot(rootEl).render(<App />)
+createRoot(rootEl).render(<App />)
diff --git a/exercises/01.managing-ui-state/03.solution.derive/index.tsx b/exercises/01.managing-ui-state/03.solution.derive/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import * as ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 
 function App() {
@@ -92,4 +92,4 @@ function MatchingPosts({ query }: { query: string }) {
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)
-ReactDOM.createRoot(rootEl).render(<App />)
+createRoot(rootEl).render(<App />)
diff --git a/exercises/01.managing-ui-state/04.problem.init/index.tsx b/exercises/01.managing-ui-state/04.problem.init/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import * as ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 
 function App() {
@@ -96,4 +96,4 @@ function MatchingPosts({ query }: { query: string }) {
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)
-ReactDOM.createRoot(rootEl).render(<App />)
+createRoot(rootEl).render(<App />)
diff --git a/exercises/01.managing-ui-state/04.solution.init/index.tsx b/exercises/01.managing-ui-state/04.solution.init/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import * as ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 
 function App() {
@@ -95,4 +95,4 @@ function MatchingPosts({ query }: { query: string }) {
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)
-ReactDOM.createRoot(rootEl).render(<App />)
+createRoot(rootEl).render(<App />)
diff --git a/exercises/01.managing-ui-state/05.problem.cb/index.tsx b/exercises/01.managing-ui-state/05.problem.cb/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import * as ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 
 // 🐨 make a function here called getQueryParam
@@ -100,4 +100,4 @@ function MatchingPosts({ query }: { query: string }) {
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)
-ReactDOM.createRoot(rootEl).render(<App />)
+createRoot(rootEl).render(<App />)
diff --git a/exercises/01.managing-ui-state/05.solution.cb/index.tsx b/exercises/01.managing-ui-state/05.solution.cb/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import * as ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 
 function getQueryParam() {
@@ -97,4 +97,4 @@ function MatchingPosts({ query }: { query: string }) {
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)
-ReactDOM.createRoot(rootEl).render(<App />)
+createRoot(rootEl).render(<App />)
diff --git a/exercises/02.side-effects/01.problem.effects/index.tsx b/exercises/02.side-effects/01.problem.effects/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import * as ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 import { setGlobalSearchParams } from '#shared/utils'
 
@@ -109,4 +109,4 @@ function MatchingPosts({ query }: { query: string }) {
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)
-ReactDOM.createRoot(rootEl).render(<App />)
+createRoot(rootEl).render(<App />)
diff --git a/exercises/02.side-effects/01.solution.effects/index.tsx b/exercises/02.side-effects/01.solution.effects/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import * as ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 import { setGlobalSearchParams } from '#shared/utils'
 
@@ -108,4 +108,4 @@ function MatchingPosts({ query }: { query: string }) {
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)
-ReactDOM.createRoot(rootEl).render(<App />)
+createRoot(rootEl).render(<App />)
diff --git a/exercises/02.side-effects/02.problem.cleanup/index.tsx b/exercises/02.side-effects/02.problem.cleanup/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import * as ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 import { setGlobalSearchParams } from '#shared/utils'
 
@@ -138,4 +138,4 @@ function DemoApp() {
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)
-ReactDOM.createRoot(rootEl).render(<DemoApp />)
+createRoot(rootEl).render(<DemoApp />)
diff --git a/exercises/02.side-effects/02.solution.cleanup/index.tsx b/exercises/02.side-effects/02.solution.cleanup/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import * as ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 import { setGlobalSearchParams } from '#shared/utils'
 
@@ -141,4 +141,4 @@ function DemoApp() {
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)
-ReactDOM.createRoot(rootEl).render(<DemoApp />)
+createRoot(rootEl).render(<DemoApp />)