Error: Snapshot `code router in typescript on npm 1` mismatched - Expected + Received @@ -8,11 +8,11 @@ "/public/robots.txt": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n", "/src/App.css": ".App {\n text-align: center;\n}\n\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}", "/src/App.tsx": "import logo from './logo.svg'\n\nfunction App() {\n return (\n <main class=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] text-center\">\n <img\n src={logo}\n class=\"h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]\"\n alt=\"logo\"\n />\n <p>\n Edit <code>src/App.tsx</code> and save to reload.\n </p>\n <a\n class=\"text-[#61dafb] hover:underline\"\n href=\"https://solidjs.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn Solid\n </a>\n <a\n class=\"text-[#61dafb] hover:underline\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </main>\n )\n}\n\nexport default App\n", "/src/main.tsx": "import {\n Outlet,\n RouterProvider,\n createRootRoute,\n createRoute,\n createRouter,\n} from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\nimport { render } from 'solid-js/web'\n\nimport './styles.css'\n\nimport App from './App.tsx'\n\nconst rootRoute = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n})\n\nconst indexRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: '/',\n component: App,\n})\n\nconst routeTree = rootRoute.addChildren([indexRoute])\n\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n scrollRestoration: true,\n})\n\ndeclare module '@tanstack/solid-router' {\n interface Register {\n router: typeof router\n }\n}\n\nfunction MainApp() {\n return (\n <>\n <RouterProvider router={router} />\n </>\n )\n}\n\nconst rootElement = document.getElementById('app')\nif (rootElement) {\n render(() => <MainApp />, rootElement)\n}\n", "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n @apply m-0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", - "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpx start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpx build\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.tsx` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/file-based-routing) guide.\n\n### Adding A Route\n\nTo add a new route to your application just add another `createRoute` call to the `.

Error: Snapshot `code router in javascript on npm 1` mismatched - Expected + Received @@ -8,11 +8,11 @@ "/public/robots.txt": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n", "/src/App.css": ".App {\n text-align: center;\n}\n\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}", "/src/App.jsx": "import logo from './logo.svg'\n\nfunction App() {\n return (\n <main class=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] text-center\">\n <img\n src={logo}\n class=\"h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]\"\n alt=\"logo\"\n />\n <p>\n Edit <code>src/App.jsx</code> and save to reload.\n </p>\n <a\n class=\"text-[#61dafb] hover:underline\"\n href=\"https://solidjs.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn Solid\n </a>\n <a\n class=\"text-[#61dafb] hover:underline\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </main>\n )\n}\n\nexport default App\n", "/src/main.jsx": "import {\n Outlet,\n RouterProvider,\n createRootRoute,\n createRoute,\n createRouter,\n} from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\nimport { render } from 'solid-js/web'\n\nimport './styles.css'\n\nimport App from './App.jsx'\n\nconst rootRoute = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n})\n\nconst indexRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: '/',\n component: App,\n})\n\nconst routeTree = rootRoute.addChildren([indexRoute])\n\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n scrollRestoration: true,\n})\n\nfunction MainApp() {\n return (\n <>\n <RouterProvider router={router} />\n </>\n )\n}\n\nconst rootElement = document.getElementById('app')\nif (rootElement) {\n render(() => <MainApp />, rootElement)\n}\n", "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n @apply m-0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", - "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpx start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpx build\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.jsx` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/file-based-routing) guide.\n\n### Adding A Route\n\nTo add a new route to your application just add another `createRoute` call to the `./src/main.jsx` file. The example below adds a new `/about`route to the root route.\n\n```tsx\nconst abou

Error: Snapshot `file router with add-on start on npm 2` mismatched - Expected + Received @@ -17,11 +17,11 @@ "/src/routes/demo.start.server-funcs.tsx": "import * as fs from 'node:fs'\nimport { createFileRoute, useRouter } from '@tanstack/react-router'\nimport { createServerFn } from '@tanstack/react-start'\n\nconst filePath = 'count.txt'\n\nasync function readCount() {\n return parseInt(\n await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),\n )\n}\n\nconst getCount = createServerFn({\n method: 'GET',\n}).handler(() => {\n return readCount()\n})\n\nconst updateCount = createServerFn({ method: 'POST' })\n .validator((d: number) => d)\n .handler(async ({ data }) => {\n const count = await readCount()\n await fs.promises.writeFile(filePath, `${count + data}`)\n })\n\nexport const Route = createFileRoute('/demo/start/server-funcs')({\n component: Home,\n loader: async () => await getCount(),\n})\n\nfunction Home() {\n const router = useRouter()\n const state = Route.useLoaderData()\n\n return (\n <div className=\"p-4\">\n <button\n type=\"button\"\n onClick={() => {\n updateCount({ data: 1 }).then(() => {\n router.invalidate()\n })\n }}\n className=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"\n >\n Add 1 to {state}?\n </button>\n </div>\n )\n}\n", "/src/routes/demo.tanstack-query.tsx": "import { createFileRoute } from '@tanstack/react-router'\nimport { useQuery } from '@tanstack/react-query'\n\nexport const Route = createFileRoute('/demo/tanstack-query')({\n component: TanStackQueryDemo,\n})\n\nfunction TanStackQueryDemo() {\n const { data } = useQuery({\n queryKey: ['people'],\n queryFn: () =>\n Promise.resolve([{ name: 'John Doe' }, { name: 'Jane Doe' }]),\n initialData: [],\n })\n\n return (\n <div className=\"p-4\">\n <h1 className=\"text-2xl mb-4\">People list</h1>\n <ul>\n {data.map((person) => (\n <li key={person.name}>{person.name}</li>\n ))}\n </ul>\n </div>\n )\n}\n", "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/react-router'\nimport logo from '../logo.svg'\n\nexport const Route = createFileRoute('/')({\n component: App,\n})\n\nfunction App() {\n return (\n <div className=\"text-center\">\n <header className=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]\">\n <img\n src={logo}\n className=\"h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]\"\n alt=\"logo\"\n />\n <p>\n Edit <code>src/routes/index.tsx</code> and save to reload.\n </p>\n <a\n className=\"text-[#61dafb] hover:underline\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn React\n </a>\n <a\n className=\"text-[#61dafb] hover:underline\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </header>\n </div>\n )\n}\n", "/src/ssr.tsx": "import {\n createStartHandler,\n defaultStreamHandler,\n} from '@tanstack/react-start/server'\nimport { getRouterManifest } from '@tanstack/react-start/router-manifest'\n\nimport { createRouter } from './router'\n\nexport default createStartHandler({\n createRouter,\n getRouterManifest,\n})(defaultStreamHandler)\n", "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n @apply m-0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", - "README.md":

Error: Snapshot `file router with add-on start on npm 1` mismatched - Expected + Received @@ -14,11 +14,11 @@ "/src/routes/demo.start.api-request.tsx": "import { useEffect, useState } from 'react'\n\nimport { createFileRoute } from '@tanstack/react-router'\n\nfunction getNames() {\n return fetch('/api/demo-names').then((res) => res.json())\n}\n\nexport const Route = createFileRoute('/demo/start/api-request')({\n component: Home,\n})\n\nfunction Home() {\n const [names, setNames] = useState<Array<string>>([])\n useEffect(() => {\n getNames().then(setNames)\n }, [])\n\n return (\n <div className=\"p-4\">\n <div>{names.join(', ')}</div>\n </div>\n )\n}\n", "/src/routes/demo.start.server-funcs.tsx": "import * as fs from 'node:fs'\nimport { createFileRoute, useRouter } from '@tanstack/react-router'\nimport { createServerFn } from '@tanstack/react-start'\n\nconst filePath = 'count.txt'\n\nasync function readCount() {\n return parseInt(\n await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),\n )\n}\n\nconst getCount = createServerFn({\n method: 'GET',\n}).handler(() => {\n return readCount()\n})\n\nconst updateCount = createServerFn({ method: 'POST' })\n .validator((d: number) => d)\n .handler(async ({ data }) => {\n const count = await readCount()\n await fs.promises.writeFile(filePath, `${count + data}`)\n })\n\nexport const Route = createFileRoute('/demo/start/server-funcs')({\n component: Home,\n loader: async () => await getCount(),\n})\n\nfunction Home() {\n const router = useRouter()\n const state = Route.useLoaderData()\n\n return (\n <div className=\"p-4\">\n <button\n type=\"button\"\n onClick={() => {\n updateCount({ data: 1 }).then(() => {\n router.invalidate()\n })\n }}\n className=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"\n >\n Add 1 to {state}?\n </button>\n </div>\n )\n}\n", "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/react-router'\nimport logo from '../logo.svg'\n\nexport const Route = createFileRoute('/')({\n component: App,\n})\n\nfunction App() {\n return (\n <div className=\"text-center\">\n <header className=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]\">\n <img\n src={logo}\n className=\"h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]\"\n alt=\"logo\"\n />\n <p>\n Edit <code>src/routes/index.tsx</code> and save to reload.\n </p>\n <a\n className=\"text-[#61dafb] hover:underline\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn React\n </a>\n <a\n className=\"text-[#61dafb] hover:underline\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </header>\n </div>\n )\n}\n", "/src/ssr.tsx": "import {\n createStartHandler,\n defaultStreamHandler,\n} from '@tanstack/react-start/server'\nimport { getRouterManifest } from '@tanstack/react-start/router-manifest'\n\nimport { createRouter } from './router'\n\nexport default createStartHandler({\n createRouter,\n getRouterManifest,\n})(defaultStreamHandler)\n", "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n @apply m-0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", - "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpx start \n```\n\n# B

Error: Snapshot `file router with tailwind on npm 1` mismatched - Expected + Received @@ -8,11 +8,11 @@ "/src/main.tsx": "import { StrictMode } from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\nimport './styles.css'\nimport reportWebVitals from './reportWebVitals.ts'\n\n// Create a new router instance\nconst router = createRouter({\n routeTree,\n context: {},\n defaultPreload: 'intent',\n scrollRestoration: true,\n defaultStructuralSharing: true,\n defaultPreloadStaleTime: 0,\n})\n\n// Register the router instance for type safety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\n// Render the app\nconst rootElement = document.getElementById('app')\nif (rootElement && !rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render(\n <StrictMode>\n <RouterProvider router={router} />\n </StrictMode>,\n )\n}\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals()\n", "/src/reportWebVitals.ts": "const reportWebVitals = (onPerfEntry?: () => void) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {\n onCLS(onPerfEntry)\n onINP(onPerfEntry)\n onFCP(onPerfEntry)\n onLCP(onPerfEntry)\n onTTFB(onPerfEntry)\n })\n }\n}\n\nexport default reportWebVitals\n", "/src/routes/__root.tsx": "import { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nexport const Route = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n})\n", "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/react-router'\nimport logo from '../logo.svg'\n\nexport const Route = createFileRoute('/')({\n component: App,\n})\n\nfunction App() {\n return (\n <div className=\"text-center\">\n <header className=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]\">\n <img\n src={logo}\n className=\"h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]\"\n alt=\"logo\"\n />\n <p>\n Edit <code>src/routes/index.tsx</code> and save to reload.\n </p>\n <a\n className=\"text-[#61dafb] hover:underline\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn React\n </a>\n <a\n className=\"text-[#61dafb] hover:underline\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </header>\n </div>\n )\n}\n", "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n @apply m-0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", - "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpx start \n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpx build\n```\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:\n\n```bash\nnpx test\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailw

Error: Snapshot `file router on npm with biome 1` mismatched - Expected + Received @@ -10,11 +10,11 @@ "/src/main.tsx": "import { StrictMode } from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\nimport './styles.css'\nimport reportWebVitals from './reportWebVitals.ts'\n\n// Create a new router instance\nconst router = createRouter({\n routeTree,\n context: {},\n defaultPreload: 'intent',\n scrollRestoration: true,\n defaultStructuralSharing: true,\n defaultPreloadStaleTime: 0,\n})\n\n// Register the router instance for type safety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\n// Render the app\nconst rootElement = document.getElementById('app')\nif (rootElement && !rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render(\n <StrictMode>\n <RouterProvider router={router} />\n </StrictMode>,\n )\n}\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals()\n", "/src/reportWebVitals.ts": "const reportWebVitals = (onPerfEntry?: () => void) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {\n onCLS(onPerfEntry)\n onINP(onPerfEntry)\n onFCP(onPerfEntry)\n onLCP(onPerfEntry)\n onTTFB(onPerfEntry)\n })\n }\n}\n\nexport default reportWebVitals\n", "/src/routes/__root.tsx": "import { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nimport Header from '../components/Header'\n\nexport const Route = createRootRoute({\n component: () => (\n <>\n <Header />\n\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n})\n", "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/react-router'\nimport logo from '../logo.svg'\nimport '../App.css'\n\nexport const Route = createFileRoute('/')({\n component: App,\n})\n\nfunction App() {\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <p>\n Edit <code>src/routes/index.tsx</code> and save to reload.\n </p>\n <a\n className=\"App-link\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn React\n </a>\n <a\n className=\"App-link\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </header>\n </div>\n )\n}\n", "/src/styles.css": "\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", - "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpx start \n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpx build\n```\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:\n\n```bash\nnpx test\n```\n\n## Styling\n\nThis project uses CSS for styling.\n\n\n## Linting & Formatting\n\nThis project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available:\n\n\n```bash\nnpx lint\nnpx format\nnpx check\n```\

Error: Snapshot `file router on npm 1` mismatched - Expected + Received @@ -9,11 +9,11 @@ "/src/main.tsx": "import { StrictMode } from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\nimport './styles.css'\nimport reportWebVitals from './reportWebVitals.ts'\n\n// Create a new router instance\nconst router = createRouter({\n routeTree,\n context: {},\n defaultPreload: 'intent',\n scrollRestoration: true,\n defaultStructuralSharing: true,\n defaultPreloadStaleTime: 0,\n})\n\n// Register the router instance for type safety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\n// Render the app\nconst rootElement = document.getElementById('app')\nif (rootElement && !rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render(\n <StrictMode>\n <RouterProvider router={router} />\n </StrictMode>,\n )\n}\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals()\n", "/src/reportWebVitals.ts": "const reportWebVitals = (onPerfEntry?: () => void) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {\n onCLS(onPerfEntry)\n onINP(onPerfEntry)\n onFCP(onPerfEntry)\n onLCP(onPerfEntry)\n onTTFB(onPerfEntry)\n })\n }\n}\n\nexport default reportWebVitals\n", "/src/routes/__root.tsx": "import { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nexport const Route = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n})\n", "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/react-router'\nimport logo from '../logo.svg'\nimport '../App.css'\n\nexport const Route = createFileRoute('/')({\n component: App,\n})\n\nfunction App() {\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <p>\n Edit <code>src/routes/index.tsx</code> and save to reload.\n </p>\n <a\n className=\"App-link\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn React\n </a>\n <a\n className=\"App-link\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </header>\n </div>\n )\n}\n", "/src/styles.css": "\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", - "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpx start \n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpx build\n```\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:\n\n```bash\nnpx test\n```\n\n## Styling\n\nThis project uses CSS for styling.\n\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add anothe

Error: Snapshot `code router in typescript on npm 1` mismatched - Expected + Received @@ -9,11 +9,11 @@ "/src/App.test.tsx": "import { describe, expect, test } from 'vitest'\nimport { render, screen } from '@testing-library/react'\nimport App from './App.tsx'\n\ndescribe('App', () => {\n test('renders', () => {\n render(<App />)\n expect(screen.getByText('Learn React')).toBeDefined()\n })\n})\n", "/src/App.tsx": "import logo from './logo.svg'\nimport './App.css'\n\nfunction App() {\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <p>\n Edit <code>src/App.tsx</code> and save to reload.\n </p>\n <a\n className=\"App-link\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn React\n </a>\n <a\n className=\"App-link\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </header>\n </div>\n )\n}\n\nexport default App\n", "/src/main.tsx": "import { StrictMode } from 'react'\nimport ReactDOM from 'react-dom/client'\nimport {\n Outlet,\n RouterProvider,\n createRootRoute,\n createRoute,\n createRouter,\n} from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nimport './styles.css'\nimport reportWebVitals from './reportWebVitals.ts'\n\nimport App from './App.tsx'\n\nconst rootRoute = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n})\n\nconst indexRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: '/',\n component: App,\n})\n\nconst routeTree = rootRoute.addChildren([indexRoute])\n\nconst router = createRouter({\n routeTree,\n context: {},\n defaultPreload: 'intent',\n scrollRestoration: true,\n defaultStructuralSharing: true,\n defaultPreloadStaleTime: 0,\n})\n\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')\nif (rootElement && !rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render(\n <StrictMode>\n <RouterProvider router={router} />\n </StrictMode>,\n )\n}\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals()\n", "/src/reportWebVitals.ts": "const reportWebVitals = (onPerfEntry?: () => void) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {\n onCLS(onPerfEntry)\n onINP(onPerfEntry)\n onFCP(onPerfEntry)\n onLCP(onPerfEntry)\n onTTFB(onPerfEntry)\n })\n }\n}\n\nexport default reportWebVitals\n", "/src/styles.css": "\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", - "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpx start \n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpx build\n```\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:\n\n```bash\nnpx test\n```\n\n## Styling\n\nThis project uses CSS for styling.\n\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a cod

Error: Snapshot `code router with form add-on on npm 1` mismatched - Expected + Received @@ -15,11 +15,11 @@ "/src/routes/__root.jsx": "import { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nimport Header from '../components/Header'\n\nexport const Route = createRootRoute({\n component: () => (\n <>\n <Header />\n\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n})\n", "/src/routes/demo.form.address.jsx": "import { createFileRoute } from '@tanstack/react-router'\n\nimport { useAppForm } from '../hooks/demo.form'\n\nexport const Route = createFileRoute('/demo/form')({\n component: AddressForm,\n})\n\nfunction AddressForm() {\n const form = useAppForm({\n defaultValues: {\n fullName: '',\n email: '',\n address: {\n street: '',\n city: '',\n state: '',\n zipCode: '',\n country: '',\n },\n phone: '',\n },\n validators: {\n onBlur: ({ value }) => {\n const errors = {\n fields: {},\n } as {\n fields: Record<string, string>\n }\n if (value.fullName.trim().length === 0) {\n errors.fields.fullName = 'Full name is required'\n }\n return errors\n },\n },\n onSubmit: ({ value }) => {\n console.log(value)\n // Show success message\n alert('Form submitted successfully!')\n },\n })\n\n return (\n <div\n className=\"flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white\"\n style={{\n backgroundImage:\n 'radial-gradient(50% 50% at 5% 40%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',\n }}\n >\n <div className=\"w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10\">\n <form\n onSubmit={(e) => {\n e.preventDefault()\n e.stopPropagation()\n form.handleSubmit()\n }}\n className=\"space-y-6\"\n >\n <form.AppField name=\"fullName\">\n {(field) => <field.TextField label=\"Full Name\" />}\n </form.AppField>\n\n <form.AppField\n name=\"email\"\n validators={{\n onBlur: ({ value }) => {\n if (!value || value.trim().length === 0) {\n return 'Email is required'\n }\n if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i.test(value)) {\n return 'Invalid email address'\n }\n return undefined\n },\n }}\n >\n {(field) => <field.TextField label=\"Email\" />}\n </form.AppField>\n\n <form.AppField\n name=\"address.street\"\n validators={{\n onBlur: ({ value }) => {\n if (!value || value.trim().length === 0) {\n return 'Street address is required'\n }\n return undefined\n },\n }}\n >\n {(field) => <field.TextField label=\"Street Address\" />}\n </form.AppField>\n\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n <form.AppField\n name=\"address.city\"\n validators={{\n onBlur: ({ value }) => {\n if (!value || value.trim().length === 0) {\n return 'City is required'\n }\n return undefined\n },\n }}\n >\n {(field) => <field.TextField label=\"City\" />}\n </form.AppField>\n <form.AppField\n name=\"address.state\"\n validators={{\n onBlur: ({ value }) => {\n if (!value || value.trim().length === 0) {\n return 'State is required'\n }\n return undefined\n