chore: stablizing fixes

Author: jherr

packages/cta-engine/src/integrations/shadcn.ts

@@ -36,13 +36,7 @@ export async function installShadcnComponents(
         resolve(targetDir),
         options.packageManager,
         'shadcn@latest',
-        [
-          'add',
-          '--force',
-          '--silent',
-          '--yes',
-          ...Array.from(shadcnComponents),
-        ],
+        ['add', '--silent', '--yes', ...Array.from(shadcnComponents)],
       )
       s?.stop(`Installed additional shadcn components`)
     }

templates/react-cra/add-ons/tRPC/assets/src/integrations/trpc/router.ts

@@ -1,15 +1,18 @@
-import { TRPCError } from '@trpc/server'
+// import { TRPCError } from '@trpc/server'
 import type { TRPCRouterRecord } from '@trpc/server'
 // import { z } from 'zod'
 
 import { createTRPCRouter, publicProcedure } from './init'
 
 const peopleRouter = {
-  list: publicProcedure.query(async () =>
-    fetch('https://swapi.dev/api/people')
-      .then((res) => res.json())
-      .then((d) => d.results as { name: string }[]),
-  ),
+  list: publicProcedure.query(async () => [
+    {
+      name: 'John Doe',
+    },
+    {
+      name: 'Jane Doe',
+    },
+  ]),
 } satisfies TRPCRouterRecord
 
 export const trpcRouter = createTRPCRouter({

templates/react-cra/add-ons/tanstack-query/assets/src/routes/demo.tanstack-query.tsx.ejs

@@ -24,17 +24,17 @@ function TanStackQueryDemo() {
 <% } else { %>
   const { data } = useQuery({
     queryKey: ['people'],
-    queryFn: () =>
-      fetch('https://swapi.dev/api/people')
-        .then((res) => res.json())
-        .then((d) => d.results as { name: string }[]),
+    queryFn: () => Promise.resolve([
+      { name: 'John Doe' },
+      { name: 'Jane Doe' },
+    ]),
     initialData: [],
   })
 <% } %>
 
   return (
     <div className="p-4">
-      <h1 className="text-2xl mb-4">People list from Swapi</h1>
+      <h1 className="text-2xl mb-4">People list</h1>
       <ul>
         {data.map((person) => (
           <li key={person.name}>{person.name}</li>

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

@@ -12,7 +12,7 @@
     "/src/router.tsx": "import { createRouter as createTanstackRouter } from '@tanstack/solid-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  })\n  return router\n}\n\nconst router = createRouter()\n\n// Register the router instance for type safety\ndeclare module '@tanstack/solid-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n",
     "/src/routes/__root.tsx": "import { Outlet, createRootRouteWithContext } from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nimport Header from '../components/Header'\n\nexport const Route = createRootRouteWithContext()({\n  component: RootComponent,\n})\n\nfunction RootComponent() {\n  return (\n    <>\n      <Header />\n\n      <Outlet />\n      {/* <TanStackRouterDevtools /> */}\n    </>\n  )\n}\n",
     "/src/routes/demo.start.server-funcs.tsx": "import * as fs from 'fs'\nimport { createFileRoute, useRouter } from '@tanstack/solid-router'\nimport { createServerFn } from '@tanstack/solid-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 class=\"p-4\">\n      <button\n        onClick={() => {\n          updateCount({ data: 1 }).then(() => {\n            router.invalidate()\n          })\n        }}\n        claclassssName=\"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 * as Solid from 'solid-js'\nimport { createFileRoute } from '@tanstack/solid-router'\n\nimport Header from '../components/Header'\nimport logo from '../logo.svg'\n\nexport const Route = createFileRoute('/')({\n  component: IndexComponent,\n})\n\nfunction IndexComponent() {\n  return (\n    <div class=\"text-center\">\n      <Header />\n      <header class=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]\">\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/routes/index.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      </header>\n    </div>\n  )\n}\n",
+    "/src/routes/index.tsx": "import * as Solid from 'solid-js'\nimport { createFileRoute } from '@tanstack/solid-router'\n\nimport logo from '../logo.svg'\n\nexport const Route = createFileRoute('/')({\n  component: IndexComponent,\n})\n\nfunction IndexComponent() {\n  return (\n    <div class=\"text-center\">\n      <header class=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]\">\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/routes/index.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      </header>\n    </div>\n  )\n}\n",
     "/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",