diff --git a/frameworks/react-cra/add-ons/start/assets/src/router.tsx.ejs b/frameworks/react-cra/add-ons/start/assets/src/router.tsx.ejs index a43e42d7..6473741f 100644 --- a/frameworks/react-cra/add-ons/start/assets/src/router.tsx.ejs +++ b/frameworks/react-cra/add-ons/start/assets/src/router.tsx.ejs @@ -6,8 +6,6 @@ import * as TanstackQuery from './integrations/tanstack-query/root-provider' // Import the generated route tree import { routeTree } from './routeTree.gen' -import './styles.css' - // Create a new router instance export const createRouter = () => { <% if (addOnEnabled['tanstack-query']) { %> diff --git a/frameworks/react-cra/tests/snapshots/react-cra/cr-ts-start-npm.json b/frameworks/react-cra/tests/snapshots/react-cra/cr-ts-start-npm.json index 2089ee73..b2b8f672 100644 --- a/frameworks/react-cra/tests/snapshots/react-cra/cr-ts-start-npm.json +++ b/frameworks/react-cra/tests/snapshots/react-cra/cr-ts-start-npm.json @@ -6,7 +6,7 @@ "/public/manifest.json": "{\n \"short_name\": \"TanStack App\",\n \"name\": \"Create TanStack App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image/x-icon\"\n },\n {\n \"src\": \"logo192.png\",\n \"type\": \"image/png\",\n \"sizes\": \"192x192\"\n },\n {\n \"src\": \"logo512.png\",\n \"type\": \"image/png\",\n \"sizes\": \"512x512\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}\n", "/public/robots.txt": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n", "/src/components/Header.tsx": "import { Link } from '@tanstack/react-router'\n\nexport default function Header() {\n return (\n
\n \n
\n )\n}\n", - "/src/router.tsx": "import { createRouter as createTanstackRouter } from '@tanstack/react-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\nimport './styles.css'\n\n// Create a new router instance\nexport const createRouter = () => {\n const router = createTanstackRouter({\n routeTree,\n scrollRestoration: true,\n defaultPreloadStaleTime: 0,\n })\n\n return router\n}\n\n// Register the router instance for type safety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: ReturnType\n }\n}\n", + "/src/router.tsx": "import { createRouter as createTanstackRouter } from '@tanstack/react-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nexport const createRouter = () => {\n const router = createTanstackRouter({\n routeTree,\n scrollRestoration: true,\n defaultPreloadStaleTime: 0,\n })\n\n return router\n}\n\n// Register the router instance for type safety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: ReturnType\n }\n}\n", "/src/routes/__root.tsx": "import {\n Outlet,\n HeadContent,\n Scripts,\n createRootRoute,\n} from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nimport Header from '../components/Header'\n\nimport appCss from '../styles.css?url'\n\nexport const Route = createRootRoute({\n head: () => ({\n meta: [\n {\n charSet: 'utf-8',\n },\n {\n name: 'viewport',\n content: 'width=device-width, initial-scale=1',\n },\n {\n title: 'TanStack Start Starter',\n },\n ],\n links: [\n {\n rel: 'stylesheet',\n href: appCss,\n },\n ],\n }),\n\n component: () => (\n \n
\n\n \n \n \n ),\n})\n\nfunction RootDocument({ children }: { children: React.ReactNode }) {\n return (\n \n \n \n \n \n {children}\n \n \n \n )\n}\n", "/src/routes/api.demo-names.ts": "export const ServerRoute = createServerFileRoute().methods({\n GET: async ({ request }) => {\n return new Response(JSON.stringify(['Alice', 'Bob', 'Charlie']), {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n },\n})\n", "/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>([])\n useEffect(() => {\n getNames().then(setNames)\n }, [])\n\n return (\n
\n
{names.join(', ')}
\n
\n )\n}\n", diff --git a/frameworks/react-cra/tests/snapshots/react-cra/cr-ts-start-tanstack-query-npm.json b/frameworks/react-cra/tests/snapshots/react-cra/cr-ts-start-tanstack-query-npm.json index ab27c306..b8f52ecd 100644 --- a/frameworks/react-cra/tests/snapshots/react-cra/cr-ts-start-tanstack-query-npm.json +++ b/frameworks/react-cra/tests/snapshots/react-cra/cr-ts-start-tanstack-query-npm.json @@ -8,7 +8,7 @@ "/src/components/Header.tsx": "import { Link } from '@tanstack/react-router'\n\nexport default function Header() {\n return (\n
\n \n
\n )\n}\n", "/src/integrations/tanstack-query/layout.tsx": "import { ReactQueryDevtools } from '@tanstack/react-query-devtools'\n\nexport default function LayoutAddition() {\n return \n}\n", "/src/integrations/tanstack-query/root-provider.tsx": "import { QueryClient, QueryClientProvider } from '@tanstack/react-query'\n\nconst queryClient = new QueryClient()\n\nexport function getContext() {\n return {\n queryClient,\n }\n}\n\nexport function Provider({ children }: { children: React.ReactNode }) {\n return (\n {children}\n )\n}\n", - "/src/router.tsx": "import { createRouter as createTanstackRouter } from '@tanstack/react-router'\nimport { routerWithQueryClient } from '@tanstack/react-router-with-query'\nimport * as TanstackQuery from './integrations/tanstack-query/root-provider'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\nimport './styles.css'\n\n// Create a new router instance\nexport const createRouter = () => {\n const router = routerWithQueryClient(\n createTanstackRouter({\n routeTree,\n context: {\n ...TanstackQuery.getContext(),\n },\n scrollRestoration: true,\n defaultPreloadStaleTime: 0,\n }),\n TanstackQuery.getContext().queryClient,\n )\n\n return router\n}\n\n// Register the router instance for type safety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: ReturnType\n }\n}\n", + "/src/router.tsx": "import { createRouter as createTanstackRouter } from '@tanstack/react-router'\nimport { routerWithQueryClient } from '@tanstack/react-router-with-query'\nimport * as TanstackQuery from './integrations/tanstack-query/root-provider'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nexport const createRouter = () => {\n const router = routerWithQueryClient(\n createTanstackRouter({\n routeTree,\n context: {\n ...TanstackQuery.getContext(),\n },\n scrollRestoration: true,\n defaultPreloadStaleTime: 0,\n }),\n TanstackQuery.getContext().queryClient,\n )\n\n return router\n}\n\n// Register the router instance for type safety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: ReturnType\n }\n}\n", "/src/routes/__root.tsx": "import {\n Outlet,\n HeadContent,\n Scripts,\n createRootRouteWithContext,\n} from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nimport Header from '../components/Header'\n\nimport TanStackQueryLayout from '../integrations/tanstack-query/layout.tsx'\n\nimport appCss from '../styles.css?url'\n\nimport type { QueryClient } from '@tanstack/react-query'\n\ninterface MyRouterContext {\n queryClient: QueryClient\n}\n\nexport const Route = createRootRouteWithContext()({\n head: () => ({\n meta: [\n {\n charSet: 'utf-8',\n },\n {\n name: 'viewport',\n content: 'width=device-width, initial-scale=1',\n },\n {\n title: 'TanStack Start Starter',\n },\n ],\n links: [\n {\n rel: 'stylesheet',\n href: appCss,\n },\n ],\n }),\n\n component: () => (\n \n
\n\n \n \n\n \n \n ),\n})\n\nfunction RootDocument({ children }: { children: React.ReactNode }) {\n return (\n \n \n \n \n \n {children}\n \n \n \n )\n}\n", "/src/routes/api.demo-names.ts": "export const ServerRoute = createServerFileRoute().methods({\n GET: async ({ request }) => {\n return new Response(JSON.stringify(['Alice', 'Bob', 'Charlie']), {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n },\n})\n", "/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>([])\n useEffect(() => {\n getNames().then(setNames)\n }, [])\n\n return (\n
\n
{names.join(', ')}
\n
\n )\n}\n",