chore: fixes for solid

Author: jherr

templates/solid/add-ons/start/assets/app.config.ts renamed to templates/solid/add-ons/start/assets/app.config.ts.ejs

@@ -1,5 +1,7 @@
 import { defineConfig } from '@tanstack/solid-start/config'
-import viteTsConfigPaths from 'vite-tsconfig-paths'
+import viteTsConfigPaths from 'vite-tsconfig-paths'<% if (tailwind) { %>
+import tailwindcss from "@tailwindcss/vite"
+<% } %>
 
 export default defineConfig({
   tsr: {
@@ -11,6 +13,7 @@ export default defineConfig({
       viteTsConfigPaths({
         projects: ['./tsconfig.json'],
       }),
+      <% if (tailwind) { %>tailwindcss(),<% } %>
     ],
   },
 })

templates/solid/add-ons/tanstack-query/assets/src/routes/demo.tanstack-query.tsx

@@ -9,20 +9,14 @@ function App() {
   const peopleQuery = createQuery(() => ({
     queryKey: ['people'],
     queryFn: () =>
-      fetch('https://swapi.dev/api/people')
-        .then((res) => res.json())
-        .then((data) => data.results as Array<{ name: string }>),
+      Promise.resolve([{ name: 'John Doe' }, { name: 'Jane Doe' }]),
     initialData: [],
   }))
 
   return (
     <div class="p-4">
       <h1 class="text-2xl mb-4">People list from Swapi</h1>
-      <ul>
-        {peopleQuery.data.map((person) => (
-          <li>{person.name}</li>
-        ))}
-      </ul>
+      <ul>{peopleQuery.data?.map((person) => <li>{person.name}</li>)}</ul>
     </div>
   )
 }

tests/integration-tests/snapshots/react-cra/cr-ts-start-tanstack-query-npm.json

@@ -15,7 +15,7 @@
     "/src/routes/api.demo-names.ts": "import { createAPIFileRoute } from '@tanstack/react-start/api'\n\nexport const APIRoute = createAPIFileRoute('/demo/start/api/names')({\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<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/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      fetch('https://swapi.dev/api/people')\n        .then((res) => res.json())\n        .then((d) => d.results as { name: string }[]),\n    initialData: [],\n  })\n\n  return (\n    <div className=\"p-4\">\n      <h1 className=\"text-2xl mb-4\">People list from Swapi</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/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",

tests/integration-tests/snapshots/solid/solid-cr-ts-start-npm.json

@@ -16,7 +16,7 @@
     "/src/ssr.tsx": "import {\n  createStartHandler,\n  defaultStreamHandler,\n} from '@tanstack/solid-start/server'\nimport { getRouterManifest } from '@tanstack/solid-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# 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 file based router. Which means that the routes are managed as fiels in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the `./src/routes` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/solid-router`.\n\n```tsx\nimport { Link } from \"@tanstack/solid-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/solid/api/router/linkComponent).\n\n### Using A Layout\n\nIn the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.\n\nHere is an example layout that includes a header:\n\n```tsx\nimport { Outlet, createRootRoute } from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nimport { Link } from \"@tanstack/solid-router\";\n\nexport const Route = createRootRoute({\n  component: () => (\n    <>\n      <header>\n        <nav>\n          <Link to=\"/\">Home</Link>\n          <Link to=\"/about\">About</Link>\n        </nav>\n      </header>\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n})\n```\n\nThe `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.\n\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).\n\n## Data Fetching\n\nThere are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.\n\nFor example:\n\n```tsx\nconst peopleRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: \"/people\",\n  loader: async () => {\n    const response = await fetch(\"https://swapi.dev/api/people\");\n    return response.json() as Promise<{\n      results: {\n        name: string;\n      }[];\n    }>;\n  },\n  component: () => {\n    const data = peopleRoute.useLoaderData();\n    return (\n      <ul>\n        {data.results.map((person) => (\n          <li key={person.name}>{person.name}</li>\n        ))}\n      </ul>\n    );\n  },\n});\n```\n\nLoaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#loader-parameters).\n\n# Demo files\n\nFiles prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.\n\n\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n",
-    "app.config.ts": "import { defineConfig } from '@tanstack/solid-start/config'\nimport viteTsConfigPaths from 'vite-tsconfig-paths'\n\nexport default defineConfig({\n  tsr: {\n    appDirectory: 'src',\n  },\n  vite: {\n    plugins: [\n      // this is the plugin that enables path aliases\n      viteTsConfigPaths({\n        projects: ['./tsconfig.json'],\n      }),\n    ],\n  },\n})\n",
+    "app.config.ts": "import { defineConfig } from '@tanstack/solid-start/config'\nimport viteTsConfigPaths from 'vite-tsconfig-paths'\nimport tailwindcss from '@tailwindcss/vite'\n\nexport default defineConfig({\n  tsr: {\n    appDirectory: 'src',\n  },\n  vite: {\n    plugins: [\n      // this is the plugin that enables path aliases\n      viteTsConfigPaths({\n        projects: ['./tsconfig.json'],\n      }),\n      tailwindcss(),\n    ],\n  },\n})\n",
     "package.json": "{\n  \"name\": \"TEST\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vinxi dev\",\n    \"start\": \"vinxi start\",\n    \"build\": \"vinxi build\",\n    \"serve\": \"vite preview\",\n    \"test\": \"vitest run\"\n  },\n  \"dependencies\": {\n    \"@tailwindcss/vite\": \"^4.0.6\",\n    \"@tanstack/router-plugin\": \"^1.109.2\",\n    \"@tanstack/solid-router\": \"^1.110.0\",\n    \"@tanstack/solid-router-devtools\": \"^1.109.2\",\n    \"@tanstack/solid-start\": \"^1.114.3\",\n    \"solid-js\": \"^1.9.4\",\n    \"tailwindcss\": \"^4.0.6\",\n    \"vinxi\": \"^0.5.3\",\n    \"vite-tsconfig-paths\": \"^5.1.4\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"^5.7.2\",\n    \"vite\": \"^6.0.11\",\n    \"vite-plugin-solid\": \"^2.11.2\"\n  }\n}",
     "tsconfig.json": "{\n  \"include\": [\"**/*.ts\", \"**/*.tsx\"],\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"jsx\": \"preserve\",\n    \"jsxImportSource\": \"solid-js\",\n    \"module\": \"ESNext\",\n    \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n    \"types\": [\"vite/client\"],\n\n    /* Bundler mode */\n    \"moduleResolution\": \"bundler\",\n    \"allowImportingTsExtensions\": true,\n    \"verbatimModuleSyntax\": true,\n    \"noEmit\": true,\n\n    /* Linting */\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noUncheckedSideEffectImports\": true\n  }\n}\n"
   },