native ESM + update dependencies

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/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)

exercises/06.state-reducer/01.solution/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.solution/click-limit.test.tsx

@@ -1,7 +1,7 @@
 import { expect, testStep } from '@kentcdodds/workshop-app/test'
 import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { App } from './app'
+import { userEvent } from '~/shared/user-event.cjs'
+import { App } from './app.jsx'
 
 await testStep('can render the app', () => {
  render(<App />)

exercises/06.state-reducer/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/06.state-reducer/01.solution/toggle.test.tsx

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