native ESM + update dependencies (#118)

Author: onemen

.prettierrc

@@ -16,5 +16,15 @@
 	"singleQuote": true,
 	"tabWidth": 2,
 	"trailingComma": "all",
-	"useTabs": true
-}
+	"useTabs": true,
+	"overrides": [
+		{
+			"files": [
+				"**/*.json"
+			],
+			"options": {
+				"useTabs": false
+			}
+		}
+	]
+}

examples/resetting-via-key-prop/index.tsx

@@ -4,7 +4,7 @@
 
 import * as React from 'react'
 import * as ReactDOM from 'react-dom/client'
-import { Switch } from '~/shared/switch'
+import { Switch } from '~/shared/switch.tsx'
 
 function callAll<Args extends Array<unknown>>(
 	...fns: Array<((...args: Args) => unknown) | undefined>

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

@@ -1,5 +1,5 @@
 import { waitFor, within } from '@testing-library/dom'
-import userEvent from '@testing-library/user-event'
+import { userEvent } from '~/shared/user-event.cjs'
 import { expect, testStep } from '@kentcdodds/workshop-app/test'
 import '.'
 

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

@@ -1,5 +1,5 @@
 import { waitFor, within, fireEvent } from '@testing-library/dom'
-import userEvent from '@testing-library/user-event'
+import { userEvent } from '~/shared/user-event.cjs'
 import { expect, testStep } from '@kentcdodds/workshop-app/test'
 import '.'
 

exercises/02.composition/01.problem/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom/client'
-import { allPokemon, PokemonDataView } from '~/shared/pokemon'
-import type { PokemonData, User } from '~/shared/types'
+import { allPokemon, PokemonDataView } from '~/shared/pokemon.tsx'
+import type { PokemonData, User } from '~/shared/types.tsx'
 
 function App() {
 	const [user] = React.useState<User>({ name: 'Kody', image: '/img/kody.png' })
@@ -22,7 +22,7 @@ function App() {
 			*/}
 			<Nav user={user} />
 			<div className="spacer" data-size="lg" />
-			{/* 
+			{/*
 				🐨 make Main accept ReactElement props called "sidebar" and "content"
 				instead of the props it accepts right now.
 			*/}

exercises/02.composition/01.solution/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom/client'
-import { allPokemon, PokemonDataView } from '~/shared/pokemon'
-import type { PokemonData, User } from '~/shared/types'
+import { allPokemon, PokemonDataView } from '~/shared/pokemon.tsx'
+import type { PokemonData, User } from '~/shared/types.tsx'
 
 function App() {
 	const [user] = React.useState<User>({ name: 'Kody', image: '/img/kody.png' })

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

@@ -1,5 +1,5 @@
 import { within } from '@testing-library/dom'
-import userEvent from '@testing-library/user-event'
+import { userEvent } from '~/shared/user-event.cjs'
 import { expect, testStep } from '@kentcdodds/workshop-app/test'
 import '.'
 

exercises/03.compound-components/01.problem/app.tsx

@@ -1,4 +1,4 @@
-import { Toggle, ToggleOn, ToggleOff, ToggleButton } from './toggle'
+import { Toggle, ToggleOn, ToggleOff, ToggleButton } from './toggle.tsx'
 
 export function App() {
 	return (

exercises/03.compound-components/01.problem/index.tsx

@@ -1,5 +1,5 @@
 import * as ReactDOM from 'react-dom/client'
-import { App } from './app'
+import { App } from './app.tsx'
 
 const rootEl = document.createElement('div')
 document.body.append(rootEl)

exercises/03.compound-components/01.problem/toggle.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Switch } from '~/shared/switch'
+import { Switch } from '~/shared/switch.tsx'
 
 // 🐨 create your ToggleContext context here
 // 📜 https://reactjs.org/docs/context.html#reactcreatecontext