suspense is neat

epicweb-dev · Feb 23, 2024 · 0bbbe97 · 0bbbe97
1 parent 30b5a30
commit 0bbbe97
Show file tree

Hide file tree

Showing 174 changed files with 1,578 additions and 1,865 deletions.
diff --git a/exercises/01.code-splitting/01.problem.lazy/index.html b/exercises/01.code-splitting/01.problem.lazy/index.html
@@ -6,7 +6,7 @@
 		<link rel="mask-icon" href="/favicon.svg" />
 		<link rel="alternate icon" type="image/png" href="/favicon.png" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<title>Code Splitting</title>
+		<title>React Performance Exercise</title>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/exercises/01.code-splitting/01.problem.lazy/package.json b/exercises/01.code-splitting/01.problem.lazy/package.json
@@ -17,6 +17,7 @@
     "topojson-client": "^3.1.0"
   },
   "devDependencies": {
+    "@total-typescript/ts-reset": "^0.5.1",
     "@types/node": "^20.9.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

diff --git a/exercises/01.code-splitting/01.problem.lazy/src/reset.d.ts b/exercises/01.code-splitting/01.problem.lazy/src/reset.d.ts
@@ -0,0 +1,13 @@
+import '@total-typescript/ts-reset'
+import '@total-typescript/ts-reset/dom'
+
+// eslint-disable-next-line react/no-typos
+import 'react'
+
+declare module 'react' {
+	interface CSSProperties {
+		[key: `--${string}`]: string | number
+	}
+
+	function use<T>(context: React.Context<T> | Promise<T>): T
+}
diff --git a/exercises/01.code-splitting/01.solution.lazy/index.html b/exercises/01.code-splitting/01.solution.lazy/index.html
@@ -6,7 +6,7 @@
 		<link rel="mask-icon" href="/favicon.svg" />
 		<link rel="alternate icon" type="image/png" href="/favicon.png" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<title>Code Splitting</title>
+		<title>React Performance Exercise</title>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/exercises/01.code-splitting/01.solution.lazy/package.json b/exercises/01.code-splitting/01.solution.lazy/package.json
@@ -17,6 +17,7 @@
     "topojson-client": "^3.1.0"
   },
   "devDependencies": {
+    "@total-typescript/ts-reset": "^0.5.1",
     "@types/node": "^20.9.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

diff --git a/exercises/01.code-splitting/01.solution.lazy/src/reset.d.ts b/exercises/01.code-splitting/01.solution.lazy/src/reset.d.ts
@@ -0,0 +1,13 @@
+import '@total-typescript/ts-reset'
+import '@total-typescript/ts-reset/dom'
+
+// eslint-disable-next-line react/no-typos
+import 'react'
+
+declare module 'react' {
+	interface CSSProperties {
+		[key: `--${string}`]: string | number
+	}
+
+	function use<T>(context: React.Context<T> | Promise<T>): T
+}
diff --git a/exercises/01.code-splitting/02.problem.eager/index.html b/exercises/01.code-splitting/02.problem.eager/index.html
@@ -6,7 +6,7 @@
 		<link rel="mask-icon" href="/favicon.svg" />
 		<link rel="alternate icon" type="image/png" href="/favicon.png" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<title>Code Splitting</title>
+		<title>React Performance Exercise</title>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/exercises/01.code-splitting/02.problem.eager/package.json b/exercises/01.code-splitting/02.problem.eager/package.json
@@ -17,6 +17,7 @@
     "topojson-client": "^3.1.0"
   },
   "devDependencies": {
+    "@total-typescript/ts-reset": "^0.5.1",
     "@types/node": "^20.9.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

diff --git a/exercises/01.code-splitting/02.problem.eager/src/reset.d.ts b/exercises/01.code-splitting/02.problem.eager/src/reset.d.ts
@@ -0,0 +1,13 @@
+import '@total-typescript/ts-reset'
+import '@total-typescript/ts-reset/dom'
+
+// eslint-disable-next-line react/no-typos
+import 'react'
+
+declare module 'react' {
+	interface CSSProperties {
+		[key: `--${string}`]: string | number
+	}
+
+	function use<T>(context: React.Context<T> | Promise<T>): T
+}
diff --git a/exercises/01.code-splitting/02.solution.eager/index.html b/exercises/01.code-splitting/02.solution.eager/index.html
@@ -6,7 +6,7 @@
 		<link rel="mask-icon" href="/favicon.svg" />
 		<link rel="alternate icon" type="image/png" href="/favicon.png" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<title>Code Splitting</title>
+		<title>React Performance Exercise</title>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/exercises/01.code-splitting/02.solution.eager/package.json b/exercises/01.code-splitting/02.solution.eager/package.json
@@ -17,6 +17,7 @@
     "topojson-client": "^3.1.0"
   },
   "devDependencies": {
+    "@total-typescript/ts-reset": "^0.5.1",
     "@types/node": "^20.9.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

diff --git a/exercises/01.code-splitting/02.solution.eager/src/reset.d.ts b/exercises/01.code-splitting/02.solution.eager/src/reset.d.ts
@@ -0,0 +1,13 @@
+import '@total-typescript/ts-reset'
+import '@total-typescript/ts-reset/dom'
+
+// eslint-disable-next-line react/no-typos
+import 'react'
+
+declare module 'react' {
+	interface CSSProperties {
+		[key: `--${string}`]: string | number
+	}
+
+	function use<T>(context: React.Context<T> | Promise<T>): T
+}
diff --git a/exercises/01.code-splitting/03.problem.transition/index.html b/exercises/01.code-splitting/03.problem.transition/index.html
@@ -6,7 +6,7 @@
 		<link rel="mask-icon" href="/favicon.svg" />
 		<link rel="alternate icon" type="image/png" href="/favicon.png" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<title>Code Splitting</title>
+		<title>React Performance Exercise</title>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/exercises/01.code-splitting/03.problem.transition/package.json b/exercises/01.code-splitting/03.problem.transition/package.json
@@ -17,6 +17,7 @@
     "topojson-client": "^3.1.0"
   },
   "devDependencies": {
+    "@total-typescript/ts-reset": "^0.5.1",
     "@types/node": "^20.9.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

diff --git a/exercises/01.code-splitting/03.problem.transition/src/reset.d.ts b/exercises/01.code-splitting/03.problem.transition/src/reset.d.ts
@@ -0,0 +1,13 @@
+import '@total-typescript/ts-reset'
+import '@total-typescript/ts-reset/dom'
+
+// eslint-disable-next-line react/no-typos
+import 'react'
+
+declare module 'react' {
+	interface CSSProperties {
+		[key: `--${string}`]: string | number
+	}
+
+	function use<T>(context: React.Context<T> | Promise<T>): T
+}
diff --git a/exercises/01.code-splitting/03.solution.transition/index.html b/exercises/01.code-splitting/03.solution.transition/index.html
@@ -6,7 +6,7 @@
 		<link rel="mask-icon" href="/favicon.svg" />
 		<link rel="alternate icon" type="image/png" href="/favicon.png" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<title>Code Splitting</title>
+		<title>React Performance Exercise</title>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/exercises/01.code-splitting/03.solution.transition/package.json b/exercises/01.code-splitting/03.solution.transition/package.json
@@ -17,6 +17,7 @@
     "topojson-client": "^3.1.0"
   },
   "devDependencies": {
+    "@total-typescript/ts-reset": "^0.5.1",
     "@types/node": "^20.9.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

diff --git a/exercises/01.code-splitting/03.solution.transition/src/reset.d.ts b/exercises/01.code-splitting/03.solution.transition/src/reset.d.ts
@@ -0,0 +1,13 @@
+import '@total-typescript/ts-reset'
+import '@total-typescript/ts-reset/dom'
+
+// eslint-disable-next-line react/no-typos
+import 'react'
+
+declare module 'react' {
+	interface CSSProperties {
+		[key: `--${string}`]: string | number
+	}
+
+	function use<T>(context: React.Context<T> | Promise<T>): T
+}
diff --git a/exercises/02.calculations/01.problem.use-memo/index.html b/exercises/02.calculations/01.problem.use-memo/index.html
@@ -6,7 +6,7 @@
 		<link rel="mask-icon" href="/favicon.svg" />
 		<link rel="alternate icon" type="image/png" href="/favicon.png" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<title>Code Splitting</title>
+		<title>React Performance Exercise</title>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/exercises/02.calculations/01.problem.use-memo/package.json b/exercises/02.calculations/01.problem.use-memo/package.json
@@ -17,6 +17,7 @@
     "spin-delay": "^1.2.0"
   },
   "devDependencies": {
+    "@total-typescript/ts-reset": "^0.5.1",
     "@types/node": "^20.9.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

diff --git a/exercises/02.calculations/01.problem.use-memo/src/app.tsx b/exercises/02.calculations/01.problem.use-memo/src/app.tsx
@@ -1,35 +1,35 @@
 import { useState } from 'react'
-import { searchItems } from './cities'
+import { searchCities } from './cities'
 import './index.css'
 import { useCombobox, useForceRerender } from './utils'
 
 export function App() {
 	const forceRerender = useForceRerender()
 	const [inputValue, setInputValue] = useState('')
 
-	// 🐨 wrap this searchItems in a call to `useMemo`
-	const items = searchItems(inputValue).slice(0, 500)
+	// 🐨 wrap this searchCities in a call to `useMemo`
+	const cities = searchCities(inputValue).slice(0, 500)
 
 	const {
-		selectedItem,
+		selectedItem: selectedCity,
 		highlightedIndex,
 		getInputProps,
 		getItemProps,
 		getLabelProps,
 		getMenuProps,
 		selectItem,
 	} = useCombobox({
-		items,
+		items: cities,
 		inputValue,
 		onInputValueChange: ({ inputValue: newValue = '' }) =>
 			setInputValue(newValue),
-		onSelectedItemChange: ({ selectedItem }) =>
+		onSelectedItemChange: ({ selectedItem: selectedCity }) =>
 			alert(
-				selectedItem
-					? `You selected ${selectedItem.name}`
+				selectedCity
+					? `You selected ${selectedCity.name}`
 					: 'Selection Cleared',
 			),
-		itemToString: item => (item ? item.name : ''),
+		itemToString: city => (city ? city.name : ''),
 	})
 
 	return (
@@ -44,22 +44,22 @@ export function App() {
 					</button>
 				</div>
 				<ul {...getMenuProps()}>
-					{items.map((item, index) => {
-						const isSelected = selectedItem?.id === item.id
+					{cities.map((city, index) => {
+						const isSelected = selectedCity?.id === city.id
 						const isHighlighted = highlightedIndex === index
 						return (
 							<li
-								key={item.id}
+								key={city.id}
 								{...getItemProps({
 									index,
-									item,
+									item: city,
 									style: {
 										fontWeight: isSelected ? 'bold' : 'normal',
 										backgroundColor: isHighlighted ? 'lightgray' : 'inherit',
 									},
 								})}
 							>
-								{item.name}
+								{city.name}
 							</li>
 						)
 					})}

diff --git a/exercises/02.calculations/01.problem.use-memo/src/cities/index.ts b/exercises/02.calculations/01.problem.use-memo/src/cities/index.ts
@@ -1,15 +1,8 @@
 import { matchSorter } from 'match-sorter'
 import cities from './us-cities.json'
 
-const allItems = cities.map((city, index) => ({
-	...city,
-	id: String(index),
-}))
+const allCities = cities.map((city, index) => ({ ...city, id: String(index) }))
 
-export function searchItems(filter: string) {
-	return matchSorter(allItems, filter, { keys: ['name'] })
-}
-
-export function getById(id: string) {
-	return allItems.find(item => item.id === id)
+export function searchCities(filter: string) {
+	return matchSorter(allCities, filter, { keys: ['name'] })
 }
diff --git a/exercises/02.calculations/01.problem.use-memo/src/index.css b/exercises/02.calculations/01.problem.use-memo/src/index.css
@@ -2,6 +2,7 @@
 	height: 300px;
 	width: 300px;
 	overflow-y: scroll;
+	margin: 0;
 	background-color: #eee;
 	padding: 0;
 	list-style: none;

diff --git a/exercises/02.calculations/01.problem.use-memo/src/index.tsx b/exercises/02.calculations/01.problem.use-memo/src/index.tsx
@@ -1,4 +1,5 @@
 import * as ReactDOM from 'react-dom/client'
+import './index.css'
 import { App } from './app'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
diff --git a/exercises/02.calculations/01.problem.use-memo/src/reset.d.ts b/exercises/02.calculations/01.problem.use-memo/src/reset.d.ts
@@ -0,0 +1,13 @@
+import '@total-typescript/ts-reset'
+import '@total-typescript/ts-reset/dom'
+
+// eslint-disable-next-line react/no-typos
+import 'react'
+
+declare module 'react' {
+	interface CSSProperties {
+		[key: `--${string}`]: string | number
+	}
+
+	function use<T>(context: React.Context<T> | Promise<T>): T
+}
diff --git a/exercises/02.calculations/01.problem.use-memo/src/utils.tsx b/exercises/02.calculations/01.problem.use-memo/src/utils.tsx
@@ -1,7 +1,7 @@
 import { useCombobox as useDownshiftCombobox } from 'downshift'
 import { useReducer } from 'react'
 
-export const useForceRerender = () => useReducer(x => x + 1, 0)[1]
+export const useForceRerender = () => useReducer(() => Symbol(), Symbol())[1]
 
 export function useCombobox<Item>(
 	options: Parameters<typeof useDownshiftCombobox<Item>>[0],

diff --git a/exercises/02.calculations/01.solution.use-memo/index.html b/exercises/02.calculations/01.solution.use-memo/index.html
@@ -6,7 +6,7 @@
 		<link rel="mask-icon" href="/favicon.svg" />
 		<link rel="alternate icon" type="image/png" href="/favicon.png" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<title>Code Splitting</title>
+		<title>React Performance Exercise</title>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/exercises/02.calculations/01.solution.use-memo/package.json b/exercises/02.calculations/01.solution.use-memo/package.json
@@ -17,6 +17,7 @@
     "spin-delay": "^1.2.0"
   },
   "devDependencies": {
+    "@total-typescript/ts-reset": "^0.5.1",
     "@types/node": "^20.9.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",