P442:[{"_457":107,"_458":111,"_459":460},"app1","app2","diffPatch","diff --git a/package.json b/package.json\nindex b2e3e0a..6dbd007 100644\n--- a/package.json\n+++ b/package.json\n@@ -1,6 +1,6 @@\n {\n \"type\": \"module\",\n- \"name\": \"exercises_03.best-practices_05.solution.page-navigation\",\n+ \"name\": \"exercises_04.debugging_01.problem.dom-snapshots\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"test\": \"vitest\",\n@@ -8,8 +8,7 @@\n },\n \"dependencies\": {\n \"react\": \"^19.0.0\",\n- \"react-dom\": \"^19.0.0\",\n- \"react-router\": \"^7.2.0\"\n+ \"react-dom\": \"^19.0.0\"\n },\n \"devDependencies\": {\n \"@tailwindcss/vite\": \"^4.0.11\",\n@@ -17,15 +16,9 @@\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^4.3.4\",\n \"@vitest/browser\": \"^3.2.0\",\n- \"msw\": \"^2.7.3\",\n \"playwright\": \"^1.49.1\",\n \"tailwindcss\": \"^4.0.11\",\n \"vite\": \"^6.2.0\",\n \"vitest\": \"^3.2.0\"\n- },\n- \"msw\": {\n- \"workerDirectory\": [\n- \"public\"\n- ]\n }\n }\ndiff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js\ndeleted file mode 100644\nindex ec47a9a..0000000\n--- a/public/mockServiceWorker.js\n+++ /dev/null\n@@ -1,307 +0,0 @@\n-/* eslint-disable */\n-/* tslint:disable */\n-\n-/**\n- * Mock Service Worker.\n- * @see https://github.com/mswjs/msw\n- * - Please do NOT modify this file.\n- * - Please do NOT serve this file on production.\n- */\n-\n-const PACKAGE_VERSION = '2.7.0'\n-const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'\n-const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')\n-const activeClientIds = new Set()\n-\n-self.addEventListener('install', function () {\n- self.skipWaiting()\n-})\n-\n-self.addEventListener('activate', function (event) {\n- event.waitUntil(self.clients.claim())\n-})\n-\n-self.addEventListener('message', async function (event) {\n- const clientId = event.source.id\n-\n- if (!clientId || !self.clients) {\n- return\n- }\n-\n- const client = await self.clients.get(clientId)\n-\n- if (!client) {\n- return\n- }\n-\n- const allClients = await self.clients.matchAll({\n- type: 'window',\n- })\n-\n- switch (event.data) {\n- case 'KEEPALIVE_REQUEST': {\n- sendToClient(client, {\n- type: 'KEEPALIVE_RESPONSE',\n- })\n- break\n- }\n-\n- case 'INTEGRITY_CHECK_REQUEST': {\n- sendToClient(client, {\n- type: 'INTEGRITY_CHECK_RESPONSE',\n- payload: {\n- packageVersion: PACKAGE_VERSION,\n- checksum: INTEGRITY_CHECKSUM,\n- },\n- })\n- break\n- }\n-\n- case 'MOCK_ACTIVATE': {\n- activeClientIds.add(clientId)\n-\n- sendToClient(client, {\n- type: 'MOCKING_ENABLED',\n- payload: {\n- client: {\n- id: client.id,\n- frameType: client.frameType,\n- },\n- },\n- })\n- break\n- }\n-\n- case 'MOCK_DEACTIVATE': {\n- activeClientIds.delete(clientId)\n- break\n- }\n-\n- case 'CLIENT_CLOSED': {\n- activeClientIds.delete(clientId)\n-\n- const remainingClients = allClients.filter((client) => {\n- return client.id !== clientId\n- })\n-\n- // Unregister itself when there are no more clients\n- if (remainingClients.length === 0) {\n- self.registration.unregister()\n- }\n-\n- break\n- }\n- }\n-})\n-\n-self.addEventListener('fetch', function (event) {\n- const { request } = event\n-\n- // Bypass navigation requests.\n- if (request.mode === 'navigate') {\n- return\n- }\n-\n- // Opening the DevTools triggers the \"only-if-cached\" request\n- // that cannot be handled by the worker. Bypass such requests.\n- if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {\n- return\n- }\n-\n- // Bypass all requests when there are no active clients.\n- // Prevents the self-unregistered worked from handling requests\n- // after it's been deleted (still remains active until the next reload).\n- if (activeClientIds.size === 0) {\n- return\n- }\n-\n- // Generate unique request ID.\n- const requestId = crypto.randomUUID()\n- event.respondWith(handleRequest(event, requestId))\n-})\n-\n-async function handleRequest(event, requestId) {\n- const client = await resolveMainClient(event)\n- const response = await getResponse(event, client, requestId)\n-\n- // Send back the response clone for the \"response:*\" life-cycle events.\n- // Ensure MSW is active and ready to handle the message, otherwise\n- // this message will pend indefinitely.\n- if (client && activeClientIds.has(client.id)) {\n- ;(async function () {\n- const responseClone = response.clone()\n-\n- sendToClient(\n- client,\n- {\n- type: 'RESPONSE',\n- payload: {\n- requestId,\n- isMockedResponse: IS_MOCKED_RESPONSE in response,\n- type: responseClone.type,\n- status: responseClone.status,\n- statusText: responseClone.statusText,\n- body: responseClone.body,\n- headers: Object.fromEntries(responseClone.headers.entries()),\n- },\n- },\n- [responseClone.body],\n- )\n- })()\n- }\n-\n- return response\n-}\n-\n-// Resolve the main client for the given event.\n-// Client that issues a request doesn't necessarily equal the client\n-// that registered the worker. It's with the latter the worker should\n-// communicate with during the response resolving phase.\n-async function resolveMainClient(event) {\n- const client = await self.clients.get(event.clientId)\n-\n- if (activeClientIds.has(event.clientId)) {\n- return client\n- }\n-\n- if (client?.frameType === 'top-level') {\n- return client\n- }\n-\n- const allClients = await self.clients.matchAll({\n- type: 'window',\n- })\n-\n- return allClients\n- .filter((client) => {\n- // Get only those clients that are currently visible.\n- return client.visibilityState === 'visible'\n- })\n- .find((client) => {\n- // Find the client ID that's recorded in the\n- // set of clients that have registered the worker.\n- return activeClientIds.has(client.id)\n- })\n-}\n-\n-async function getResponse(event, client, requestId) {\n- const { request } = event\n-\n- // Clone the request because it might've been already used\n- // (i.e. its body has been read and sent to the client).\n- const requestClone = request.clone()\n-\n- function passthrough() {\n- // Cast the request headers to a new Headers instance\n- // so the headers can be manipulated with.\n- const headers = new Headers(requestClone.headers)\n-\n- // Remove the \"accept\" header value that marked this request as passthrough.\n- // This prevents request alteration and also keeps it compliant with the\n- // user-defined CORS policies.\n- const acceptHeader = headers.get('accept')\n- if (acceptHeader) {\n- const values = acceptHeader.split(',').map((value) => value.trim())\n- const filteredValues = values.filter(\n- (value) => value !== 'msw/passthrough',\n- )\n-\n- if (filteredValues.length > 0) {\n- headers.set('accept', filteredValues.join(', '))\n- } else {\n- headers.delete('accept')\n- }\n- }\n-\n- return fetch(requestClone, { headers })\n- }\n-\n- // Bypass mocking when the client is not active.\n- if (!client) {\n- return passthrough()\n- }\n-\n- // Bypass initial page load requests (i.e. static assets).\n- // The absence of the immediate/parent client in the map of the active clients\n- // means that MSW hasn't dispatched the \"MOCK_ACTIVATE\" event yet\n- // and is not ready to handle requests.\n- if (!activeClientIds.has(client.id)) {\n- return passthrough()\n- }\n-\n- // Notify the client that a request has been intercepted.\n- const requestBuffer = await request.arrayBuffer()\n- const clientMessage = await sendToClient(\n- client,\n- {\n- type: 'REQUEST',\n- payload: {\n- id: requestId,\n- url: request.url,\n- mode: request.mode,\n- method: request.method,\n- headers: Object.fromEntries(request.headers.entries()),\n- cache: request.cache,\n- credentials: request.credentials,\n- destination: request.destination,\n- integrity: request.integrity,\n- redirect: request.redirect,\n- referrer: request.referrer,\n- referrerPolicy: request.referrerPolicy,\n- body: requestBuffer,\n- keepalive: request.keepalive,\n- },\n- },\n- [requestBuffer],\n- )\n-\n- switch (clientMessage.type) {\n- case 'MOCK_RESPONSE': {\n- return respondWithMock(clientMessage.data)\n- }\n-\n- case 'PASSTHROUGH': {\n- return passthrough()\n- }\n- }\n-\n- return passthrough()\n-}\n-\n-function sendToClient(client, message, transferrables = []) {\n- return new Promise((resolve, reject) => {\n- const channel = new MessageChannel()\n-\n- channel.port1.onmessage = (event) => {\n- if (event.data && event.data.error) {\n- return reject(event.data.error)\n- }\n-\n- resolve(event.data)\n- }\n-\n- client.postMessage(\n- message,\n- [channel.port2].concat(transferrables.filter(Boolean)),\n- )\n- })\n-}\n-\n-async function respondWithMock(response) {\n- // Setting response status code to 0 is a no-op.\n- // However, when responding with a \"Response.error()\", the produced Response\n- // instance will have status code set to 0. Since it's not possible to create\n- // a Response instance with status code 0, handle that use-case separately.\n- if (response.status === 0) {\n- return Response.error()\n- }\n-\n- const mockedResponse = new Response(response.body, response)\n-\n- Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {\n- value: true,\n- enumerable: true,\n- })\n-\n- return mockedResponse\n-}\ndiff --git a/src/app.tsx b/src/app.tsx\nindex f09995b..b734b8e 100644\n--- a/src/app.tsx\n+++ b/src/app.tsx\n@@ -1,22 +1,5 @@\n-import { BrowserRouter, Routes, Route } from 'react-router'\n-import { DiscountCodeForm } from './discount-code-form.js'\n+import { TicTacToe } from './tic-tac-toe.js'\n \n export function App() {\n-\treturn (\n-\t\t\n-\t\t\t\n-\t\t\t\t} />\n-\t\t\t\t\n-\t\t\t\t\t\t\t

Cart

\n-\t\t\t\t\t\t\t

This is a cart page.

\n-\t\t\t\t\t\t\n-\t\t\t\t\t}\n-\t\t\t\t/>\n-\t\t\t\tPage not found

} />\n-\t\t\t\n-\t\t\n-\t)\n+\treturn \n }\ndiff --git a/src/discount-code-form.browser.test.tsx b/src/discount-code-form.browser.test.tsx\ndeleted file mode 100644\nindex 0fcf285..0000000\n--- a/src/discount-code-form.browser.test.tsx\n+++ /dev/null\n@@ -1,118 +0,0 @@\n-import { page } from '@vitest/browser/context'\n-import { render } from 'vitest-browser-react'\n-import { http, HttpResponse } from 'msw'\n-import { MemoryRouter } from 'react-router'\n-import { test } from '../test-extend'\n-import { DiscountCodeForm, type Discount } from './discount-code-form.js'\n-\n-const wrapper: React.JSXElementConstructor<{\n-\tchildren: React.ReactNode\n-}> = ({ children }) => {\n-\treturn {children}\n-}\n-\n-test('applies a discount code', async () => {\n-\trender(, { wrapper })\n-\n-\tconst discountInput = page.getByLabelText('Discount code')\n-\tawait discountInput.fill('EPIC2025')\n-\n-\tconst applyDiscountButton = page.getByRole('button', {\n-\t\tname: 'Apply discount',\n-\t})\n-\tawait applyDiscountButton.click()\n-\n-\tawait expect\n-\t\t.element(page.getByText('Discount: EPIC2025 (-20%)'))\n-\t\t.toBeVisible()\n-})\n-\n-test('displays a warning for legacy discount codes', async ({ worker }) => {\n-\tworker.use(\n-\t\thttp.post(\n-\t\t\t'https://api.example.com/discount/code',\n-\t\t\tasync ({ request }) => {\n-\t\t\t\tconst code = await request.text()\n-\n-\t\t\t\treturn HttpResponse.json({\n-\t\t\t\t\tcode,\n-\t\t\t\t\tamount: 10,\n-\t\t\t\t\tisLegacy: true,\n-\t\t\t\t})\n-\t\t\t},\n-\t\t),\n-\t)\n-\n-\trender(, { wrapper })\n-\n-\tconst discountInput = page.getByLabelText('Discount code')\n-\tawait discountInput.fill('LEGA2000')\n-\n-\tconst applyDiscountButton = page.getByRole('button', {\n-\t\tname: 'Apply discount',\n-\t})\n-\tawait applyDiscountButton.click()\n-\n-\tawait expect\n-\t\t.element(page.getByText('Discount: LEGA2000 (-10%)'))\n-\t\t.toBeVisible()\n-\tawait expect\n-\t\t.element(page.getByRole('alert'))\n-\t\t.toHaveTextContent('\"LEGA2000\" is a legacy code. Discount amount halved.')\n-})\n-\n-test('displays an error when fetching the discount fails', async ({\n-\tworker,\n-}) => {\n-\tworker.use(\n-\t\thttp.post(\n-\t\t\t'https://api.example.com/discount/code',\n-\t\t\t() => {\n-\t\t\t\treturn new HttpResponse(null, { status: 500 })\n-\t\t\t},\n-\t\t),\n-\t)\n-\n-\trender(, { wrapper })\n-\n-\tconst discountInput = page.getByLabelText('Discount code')\n-\tawait discountInput.fill('CODE1234')\n-\n-\tconst applyDiscountButton = page.getByRole('button', {\n-\t\tname: 'Apply discount',\n-\t})\n-\tawait applyDiscountButton.click()\n-\n-\tawait expect\n-\t\t.element(page.getByRole('alert'))\n-\t\t.toHaveTextContent('Failed to apply the discount code')\n-})\n-\n-test('removes the applied discount code', async () => {\n-\trender(, { wrapper })\n-\n-\tconst discountInput = page.getByLabelText('Discount code')\n-\tawait discountInput.fill('EPIC2025')\n-\n-\tconst applyDiscountButton = page.getByRole('button', {\n-\t\tname: 'Apply discount',\n-\t})\n-\tawait applyDiscountButton.click()\n-\n-\tconst discountText = page.getByText('Discount: EPIC2025 (-20%)')\n-\tawait expect.element(discountText).toBeVisible()\n-\n-\tconst removeDiscountButton = page.getByRole('button', {\n-\t\tname: 'Remove discount',\n-\t})\n-\tawait removeDiscountButton.click()\n-\n-\tawait expect.element(discountText).not.toBeInTheDocument()\n-})\n-\n-test('displays the \"Back to cart\" link', async () => {\n-\trender(, { wrapper })\n-\n-\tconst backToCartLink = page.getByRole('link', { name: 'Back to cart' })\n-\tawait expect.element(backToCartLink).toHaveAttribute('href', '/cart')\n-})\ndiff --git a/src/discount-code-form.tsx b/src/discount-code-form.tsx\ndeleted file mode 100644\nindex 6a254e7..0000000\n--- a/src/discount-code-form.tsx\n+++ /dev/null\n@@ -1,208 +0,0 @@\n-import { useReducer, useState, type FormEventHandler } from 'react'\n-import { Link } from 'react-router'\n-\n-interface Notification {\n-\ttype: 'error' | 'warning'\n-\ttext: string\n-}\n-\n-export interface Discount {\n-\tcode: string\n-\tamount: number\n-\tisLegacy?: true\n-}\n-\n-type DiscountFormState =\n-\t| { submitting: false; discount?: never }\n-\t| { submitting: false; discount: Discount }\n-\t| { submitting: true }\n-\n-type DiscountFormAction =\n-\t| { type: 'idle' }\n-\t| { type: 'submitting' }\n-\t| { type: 'success'; discount: Discount }\n-\n-function discountFormReducer(\n-\t_state: DiscountFormState,\n-\taction: DiscountFormAction,\n-): DiscountFormState {\n-\tswitch (action.type) {\n-\t\tcase 'idle': {\n-\t\t\treturn {\n-\t\t\t\tsubmitting: false,\n-\t\t\t}\n-\t\t}\n-\t\tcase 'submitting': {\n-\t\t\treturn {\n-\t\t\t\tsubmitting: true,\n-\t\t\t}\n-\t\t}\n-\t\tcase 'success': {\n-\t\t\treturn {\n-\t\t\t\tsubmitting: false,\n-\t\t\t\tdiscount: action.discount,\n-\t\t\t}\n-\t\t}\n-\t}\n-}\n-\n-async function fetchDiscount(code: string): Promise {\n-\tconst response = await fetch('https://api.example.com/discount/code', {\n-\t\tmethod: 'POST',\n-\t\tbody: code,\n-\t})\n-\tconst data = (await response.json()) as Discount\n-\treturn data\n-}\n-\n-async function removeDiscount(code: string): Promise {\n-\tconst response = await fetch('https://api.example.com/discount/code', {\n-\t\tmethod: 'DELETE',\n-\t\tbody: code,\n-\t})\n-\n-\tif (!response.ok) {\n-\t\tthrow new Error(`Failed to remove the discount code (${response.status})`)\n-\t}\n-}\n-\n-export function DiscountCodeForm() {\n-\tconst [state, dispatch] = useReducer(discountFormReducer, {\n-\t\tsubmitting: false,\n-\t})\n-\tconst [notification, setNotification] = useState()\n-\n-\tconst notify = (text: string, type: Notification['type'] = 'warning') => {\n-\t\tsetNotification({ type, text })\n-\t\tsetTimeout(() => setNotification(undefined), 5000)\n-\t}\n-\n-\tconst handleApplyDiscount: FormEventHandler = async (\n-\t\tevent,\n-\t) => {\n-\t\tevent.preventDefault()\n-\t\tdispatch({ type: 'submitting' })\n-\n-\t\tconst data = new FormData(event.currentTarget)\n-\t\tconst code = data.get('discountCode')\n-\n-\t\tif (!code) {\n-\t\t\tnotify('Missing discount code', 'error')\n-\t\t\treturn\n-\t\t}\n-\n-\t\tif (typeof code !== 'string') {\n-\t\t\tnotify(\n-\t\t\t\t`Expected discount code to be a string but got ${typeof code}`,\n-\t\t\t\t'error',\n-\t\t\t)\n-\t\t\treturn\n-\t\t}\n-\n-\t\tawait fetchDiscount(code)\n-\t\t\t.then((discount) => {\n-\t\t\t\tdispatch({ type: 'success', discount })\n-\n-\t\t\t\tif (discount.isLegacy) {\n-\t\t\t\t\tnotify(`\"${code}\" is a legacy code. Discount amount halved.`)\n-\t\t\t\t}\n-\t\t\t})\n-\t\t\t.catch(() => {\n-\t\t\t\tnotify('Failed to apply the discount code', 'error')\n-\t\t\t\tdispatch({ type: 'idle' })\n-\t\t\t})\n-\t}\n-\n-\tconst handleRemoveDiscount: FormEventHandler = async (\n-\t\tevent,\n-\t) => {\n-\t\tevent.preventDefault()\n-\n-\t\tconst data = new FormData(event.currentTarget)\n-\t\tconst code = data.get('discountCode') as string\n-\n-\t\tawait removeDiscount(code)\n-\t\t\t.catch((error) => {\n-\t\t\t\tconsole.error(error)\n-\t\t\t\tnotify('Failed to remove the discount code', 'error')\n-\t\t\t})\n-\t\t\t.finally(() => {\n-\t\t\t\tdispatch({ type: 'idle' })\n-\t\t\t})\n-\t}\n-\n-\treturn (\n-\t\t

\n-\t\t\t{state.submitting ? (\n-\t\t\t\t

\n-\t\t\t\t\t{'◡'}\n-\t\t\t\t

\n-\t\t\t) : state.discount ? (\n-\t\t\t\t\n-\t\t\t\t\t

\n-\t\t\t\t\t\tDiscount: {state.discount.code} (-\n-\t\t\t\t\t\t{state.discount.amount}%)\n-\t\t\t\t\t

\n-\n-\t\t\t\t\t\n-\t\t\t\t\t\n-\t\t\t\t\t\t✕\n-\t\t\t\t\t\n-\t\t\t\t\n-\t\t\t) : (\n-\t\t\t\t

\n-\t)\n-}\ndiff --git a/src/main.tsx b/src/main.tsx\nindex 7876383..c65b6ba 100644\n--- a/src/main.tsx\n+++ b/src/main.tsx\n@@ -3,16 +3,8 @@ import { createRoot } from 'react-dom/client'\n import './index.css'\n import { App } from './app.jsx'\n \n-async function enableMocking() {\n-\tif (process.env.NODE_ENV === 'development') {\n-\t\tconst { worker } = await import('./mocks/browser.js')\n-\t\tawait worker.start()\n-\t}\n-}\n-enableMocking().then(() => {\n-\tcreateRoot(document.getElementById('root')!).render(\n+createRoot(document.getElementById('root')!).render(\n \t\n \t\t\n \t,\n-\t)\n-})\n+)\ndiff --git a/src/mocks/browser.ts b/src/mocks/browser.ts\ndeleted file mode 100644\nindex 4dd03f0..0000000\n--- a/src/mocks/browser.ts\n+++ /dev/null\n@@ -1,4 +0,0 @@\n-import { setupWorker } from 'msw/browser'\n-import { handlers } from './handlers'\n-\n-export const worker = setupWorker(...handlers)\ndiff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts\ndeleted file mode 100644\nindex f7acb69..0000000\n--- a/src/mocks/handlers.ts\n+++ /dev/null\n@@ -1,20 +0,0 @@\n-import { delay, http, HttpResponse } from 'msw'\n-import type { Discount } from '../discount-code-form.js'\n-\n-export const handlers = [\n-\thttp.post(\n-\t\t'https://api.example.com/discount/code',\n-\t\tasync ({ request }) => {\n-\t\t\tconst code = await request.text()\n-\n-\t\t\treturn HttpResponse.json({\n-\t\t\t\tcode,\n-\t\t\t\tamount: 20,\n-\t\t\t})\n-\t\t},\n-\t),\n-\thttp.delete('https://api.example.com/discount/code', async () => {\n-\t\tawait delay(500)\n-\t\treturn new HttpResponse()\n-\t}),\n-]\ndiff --git a/src/tic-tac-toe.browser.test.tsx b/src/tic-tac-toe.browser.test.tsx\nnew file mode 100644\nindex 0000000..358f39a\n--- /dev/null\n+++ b/src/tic-tac-toe.browser.test.tsx\n@@ -0,0 +1,21 @@\n+import { page } from '@vitest/browser/context'\n+import { render } from 'vitest-browser-react'\n+import { TicTacToe } from './tic-tac-toe'\n+\n+test('places cross marks in a horizontal line', async () => {\n+\t// 🐨 Destructure the object returned from the `render` function\n+\t// and get the `debug` function from there.\n+\t// 💰 const { debug } = render()\n+\trender()\n+\n+\tawait page.getByRole('button', { name: 'left middle' }).click()\n+\tawait page.getByRole('button', { name: 'middle', exact: true }).click()\n+\tawait page.getByRole('button', { name: 'right middle' }).click()\n+\n+\t// 🐨 Call the `debug` function after the test interacts with the game.\n+\t// Can you spot what's wrong with the marked squares?\n+\t// 🐨 Fix the issue in the component to see this test pass.\n+\n+\tconst squares = page.getByRole('button').elements().slice(3, 6)\n+\texpect(squares.map((element) => element.textContent)).toEqual(['✗', '✗', '✗'])\n+})\ndiff --git a/src/tic-tac-toe.tsx b/src/tic-tac-toe.tsx\nnew file mode 100644\nindex 0000000..3bd7431\n--- /dev/null\n+++ b/src/tic-tac-toe.tsx\n@@ -0,0 +1,44 @@\n+import { useState } from 'react'\n+\n+export function TicTacToe() {\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t)\n+}\n+\n+function Button(\n+\tprops: Omit<\n+\t\tReact.DetailedHTMLProps<\n+\t\t\tReact.ButtonHTMLAttributes,\n+\t\t\tHTMLButtonElement\n+\t\t>,\n+\t\t'children' | 'onClick'\n+\t>,\n+) {\n+\tconst [selected, setSelected] = useState(false)\n+\tconst text = selected ? '✗' : ''\n+\n+\treturn (\n+\t\t setSelected(!selected)}\n+\t\t>\n+\t\t\t{text}\n+\t\t\n+\t)\n+}\ndiff --git a/test-extend.ts b/test-extend.ts\ndeleted file mode 100644\nindex 47a6182..0000000\n--- a/test-extend.ts\n+++ /dev/null\n@@ -1,21 +0,0 @@\n-import { test as testBase } from 'vitest'\n-import { worker } from './src/mocks/browser'\n-\n-type TestContext = {\n-\tworker: typeof worker\n-}\n-\n-export const test = testBase.extend({\n-\tworker: [\n-\t\tasync ({}, use) => {\n-\t\t\tawait worker.start({\n-\t\t\t\tquiet: true,\n-\t\t\t\tonUnhandledRequest: 'error',\n-\t\t\t})\n-\t\t\tawait use(worker)\n-\t\t\tworker.resetHandlers()\n-\t\t\tworker.stop()\n-\t\t},\n-\t\t{ auto: true },\n-\t],\n-})\ndiff --git a/tsconfig.app.json b/tsconfig.app.json\nindex b9068b0..bd1d0f4 100644\n--- a/tsconfig.app.json\n+++ b/tsconfig.app.json\n@@ -1,9 +1,9 @@\n {\n \t\"extends\": \"./tsconfig.base.json\",\n+\t\"include\": [\"src/**/*\"],\n+\t\"exclude\": [\"src/**/*.browser.test.ts*\"],\n \t\"compilerOptions\": {\n-\t\t\"target\": \"ES2020\",\n-\t\t\"module\": \"ESNext\"\n-\t},\n-\t\"include\": [\"src\"],\n-\t\"exclude\": [\"**/*.test.ts*\"]\n+\t\t\"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"],\n+\t\t\"jsx\": \"react-jsx\"\n+\t}\n }\ndiff --git a/tsconfig.base.json b/tsconfig.base.json\nindex 6c88d0c..529764a 100644\n--- a/tsconfig.base.json\n+++ b/tsconfig.base.json\n@@ -1,8 +1,9 @@\n {\n \t\"compilerOptions\": {\n+\t\t\"target\": \"ESNext\",\n+\t\t\"module\": \"ESNext\",\n \t\t\"useDefineForClassFields\": true,\n \t\t\"skipLibCheck\": true,\n-\t\t\"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"],\n \n \t\t/* Bundler mode */\n \t\t\"moduleResolution\": \"bundler\",\n@@ -10,7 +11,6 @@\n \t\t\"isolatedModules\": true,\n \t\t\"moduleDetection\": \"force\",\n \t\t\"noEmit\": true,\n-\t\t\"jsx\": \"react-jsx\",\n \t\t\"verbatimModuleSyntax\": true,\n \n \t\t/* Linting */\ndiff --git a/tsconfig.node.json b/tsconfig.node.json\nindex 9563206..35dc190 100644\n--- a/tsconfig.node.json\n+++ b/tsconfig.node.json\n@@ -1,24 +1,7 @@\n {\n+\t\"extends\": \"./tsconfig.base.json\",\n \t\"compilerOptions\": {\n-\t\t\"target\": \"ES2022\",\n-\t\t\"lib\": [\"ES2023\"],\n-\t\t\"module\": \"ESNext\",\n-\t\t\"skipLibCheck\": true,\n-\t\t\"types\": [\"vitest/globals\"],\n-\n-\t\t/* Bundler mode */\n-\t\t\"moduleResolution\": \"bundler\",\n-\t\t\"allowImportingTsExtensions\": true,\n-\t\t\"isolatedModules\": true,\n-\t\t\"moduleDetection\": \"force\",\n-\t\t\"noEmit\": true,\n-\n-\t\t/* Linting */\n-\t\t\"strict\": true,\n-\t\t\"noUnusedLocals\": false,\n-\t\t\"noUnusedParameters\": false,\n-\t\t\"noFallthroughCasesInSwitch\": true,\n-\t\t\"noUncheckedSideEffectImports\": true\n+\t\t\"lib\": [\"ES2023\"]\n \t},\n \t\"include\": [\"vite.config.ts\", \"tailwind.config.ts\"]\n }\ndiff --git a/tsconfig.test.browser.json b/tsconfig.test.browser.json\nindex ace611a..c59f172 100644\n--- a/tsconfig.test.browser.json\n+++ b/tsconfig.test.browser.json\n@@ -1,13 +1,13 @@\n {\n-\t\"extends\": \"./tsconfig.base.json\",\n+\t\"extends\": \"./tsconfig.app.json\",\n \t\"include\": [\n \t\t\"vitest.browser.setup.ts\",\n-\t\t\"**/*.browser.test.ts*\",\n+\t\t\"src/**/*\",\n+\t\t\"src/**/*.browser.test.ts*\",\n \t\t\"test-extend.ts\"\n \t],\n+\t\"exclude\": [],\n \t\"compilerOptions\": {\n-\t\t\"target\": \"esnext\",\n-\t\t\"module\": \"preserve\",\n \t\t\"types\": [\"vitest/globals\", \"@vitest/browser/providers/playwright\"]\n \t}\n }"]

package.json-29+22App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

public/mockServiceWorker.js-307+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/app.tsx-22+5App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/discount-code-form.browser.test.tsx-118+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/discount-code-form.tsx-208+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/main.tsx-16+8App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/mocks/browser.ts-4+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/mocks/handlers.ts-20+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/tic-tac-toe.browser.test.tsx-0+21App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/tic-tac-toe.tsx-0+44App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

test-extend.ts-21+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tsconfig.app.json-9+9App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tsconfig.base.json-15+15App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tsconfig.node.json-24+7App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tsconfig.test.browser.json-13+13App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

package.json-29+22App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

public/mockServiceWorker.js-307+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/app.tsx-22+5App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/discount-code-form.browser.test.tsx-118+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/discount-code-form.tsx-208+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/main.tsx-16+8App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/mocks/browser.ts-4+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/mocks/handlers.ts-20+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/tic-tac-toe.browser.test.tsx-0+21App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/tic-tac-toe.tsx-0+44App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

test-extend.ts-21+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tsconfig.app.json-9+9App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tsconfig.base.json-15+15App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tsconfig.node.json-24+7App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tsconfig.test.browser.json-13+13App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2