native ESM + update dependencies (#118)

.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

exercises/03.compound-components/01.solution/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.solution/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.solution/toggle.test.tsx

@@ -1,4 +1,4 @@
-import { verifySimpleToggleWithText } from '~/shared/toggle.test'
+import { verifySimpleToggleWithText } from '~/shared/toggle.test.tsx'
 import '.'
 
 await verifySimpleToggleWithText()

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Switch } from '~/shared/switch'
+import { Switch } from '~/shared/switch.tsx'
 
 type ToggleValue = { on: boolean; toggle: () => void }
 const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)

exercises/03.compound-components/02.problem.validation/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/02.problem.validation/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/02.problem.validation/toggle.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Switch } from '~/shared/switch'
+import { Switch } from '~/shared/switch.tsx'
 
 type ToggleValue = { on: boolean; toggle: () => void }
 const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)

exercises/03.compound-components/02.solution.validation/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/02.solution.validation/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/02.solution.validation/toggle.test.tsx

@@ -1,4 +1,4 @@
-import { verifySimpleToggleWithText } from '~/shared/toggle.test'
+import { verifySimpleToggleWithText } from '~/shared/toggle.test.tsx'
 import '.'
 
 await verifySimpleToggleWithText()

exercises/03.compound-components/02.solution.validation/toggle.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Switch } from '~/shared/switch'
+import { Switch } from '~/shared/switch.tsx'
 
 type ToggleValue = { on: boolean; toggle: () => void }
 const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)

exercises/03.compound-components/02.solution.validation/validation.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import { expect, testStep } from '@kentcdodds/workshop-app/test'
-import { ToggleButton, ToggleOff, ToggleOn } from './toggle'
+import { ToggleButton, ToggleOff, ToggleOn } from './toggle.tsx'
 
 const expectedErrorMessage =
 	'Cannot find ToggleContext. All Toggle components must be rendered within <Toggle />'

exercises/03.compound-components/README.mdx

@@ -37,12 +37,12 @@ it's selected? We can easily add API surface area to support these use cases,
 but that's just more for us to code and more for users to learn. That's where
 compound components come in really handy!
 
-import {Toggle} from '../07.control-props/02.solution.warnings/toggle'
+import { Toggle } from '../07.control-props/02.solution.warnings/toggle'
 
 For the rest of the exercises in this workshop, we'll be working with a Toggle
 component. Specifically, this one:
 
-<div style={{display: 'flex', justifyContent: 'center'}}>
+<div style={{ display: 'flex', justifyContent: 'center' }}>
 	<Toggle />
 </div>
 

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

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

exercises/04.prop-getters/01.problem.collections/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/04.prop-getters/01.solution.collections/app.tsx

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

exercises/04.prop-getters/01.solution.collections/custom-button.test.tsx

@@ -1,5 +1,5 @@
 import { screen } from '@testing-library/dom'
-import { verifyIsToggle } from '~/shared/toggle.test'
+import { verifyIsToggle } from '~/shared/toggle.test.tsx'
 import '.'
 
 await verifyIsToggle(await screen.findByLabelText('custom-button'))

exercises/04.prop-getters/01.solution.collections/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/04.prop-getters/01.solution.collections/toggle.test.tsx

@@ -1,4 +1,4 @@
-import { verifySimpleToggle } from '~/shared/toggle.test'
+import { verifySimpleToggle } from '~/shared/toggle.test.tsx'
 import '.'
 
 await verifySimpleToggle()

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

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

exercises/04.prop-getters/02.problem.getters/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/04.prop-getters/02.solution.getters/app.tsx

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

exercises/04.prop-getters/02.solution.getters/custom-button.test.tsx

@@ -1,5 +1,5 @@
 import { screen } from '@testing-library/dom'
-import { verifyIsToggle } from '~/shared/toggle.test'
+import { verifyIsToggle } from '~/shared/toggle.test.tsx'
 import '.'
 
 await verifyIsToggle(await screen.findByLabelText('custom-button'))

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

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

exercises/04.prop-getters/02.solution.getters/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/04.prop-getters/02.solution.getters/toggle.test.tsx

@@ -1,4 +1,4 @@
-import { verifySimpleToggle } from '~/shared/toggle.test'
+import { verifySimpleToggle } from '~/shared/toggle.test.tsx'
 import '.'
 
 await verifySimpleToggle()

exercises/05.state-initializer/01.problem/app.tsx

@@ -1,5 +1,5 @@
-import { Switch } from '~/shared/switch'
-import { useToggle } from './toggle'
+import { Switch } from '~/shared/switch.tsx'
+import { useToggle } from './toggle.tsx'
 
 export function App() {
 	// 🐨 pass an object with the initialOn property set to true

exercises/05.state-initializer/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/05.state-initializer/01.solution/app.tsx

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

exercises/05.state-initializer/01.solution/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/05.state-initializer/01.solution/initial-on.test.tsx

@@ -1,6 +1,6 @@
 import { expect, testStep } from '@kentcdodds/workshop-app/test'
 import { renderHook, act } from '@testing-library/react'
-import { useToggle } from './toggle'
+import { useToggle } from './toggle.tsx'
 
 await testStep('useToggle still maintains the old API and works', () => {
 	const { result } = renderHook(() => useToggle())

exercises/05.state-initializer/01.solution/toggle.test.tsx

@@ -1,4 +1,4 @@
-import { verifySimpleToggleOnToStart } from '~/shared/toggle.test'
+import { verifySimpleToggleOnToStart } from '~/shared/toggle.test.tsx'
 import '.'
 
 await verifySimpleToggleOnToStart()

exercises/05.state-initializer/02.problem.initial/app.tsx

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

exercises/05.state-initializer/02.problem.initial/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/05.state-initializer/02.solution.initial/app.tsx

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

exercises/05.state-initializer/02.solution.initial/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/05.state-initializer/02.solution.initial/initial-on-change.test.tsx

@@ -1,6 +1,6 @@
 import { expect, testStep } from '@kentcdodds/workshop-app/test'
 import { renderHook, act } from '@testing-library/react'
-import { useToggle } from './toggle'
+import { useToggle } from './toggle.tsx'
 
 await testStep(
 	result =>

exercises/05.state-initializer/02.solution.initial/initial-on.test.tsx

@@ -1,6 +1,6 @@
 import { expect, testStep } from '@kentcdodds/workshop-app/test'
 import { renderHook, act } from '@testing-library/react'
-import { useToggle } from './toggle'
+import { useToggle } from './toggle.tsx'
 
 await testStep('useToggle still maintains the old API and works', () => {
 	const { result } = renderHook(() => useToggle())

exercises/05.state-initializer/02.solution.initial/toggle.test.tsx

@@ -1,4 +1,4 @@
-import { verifySimpleToggleOnToStart } from '~/shared/toggle.test'
+import { verifySimpleToggleOnToStart } from '~/shared/toggle.test.tsx'
 import '.'
 
 await verifySimpleToggleOnToStart()

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

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

exercises/06.state-reducer/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)