create-start-app 0.3.1 → 0.4.0

package/templates/solid/add-on/solid-ui/assets/src/styles.css

@@ -0,0 +1,138 @@
+@import 'tailwindcss';
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.871 0.006 286.286);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.871 0.006 286.286);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.141 0.005 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.141 0.005 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.274 0.006 286.033);
+  --input: oklch(0.274 0.006 286.033);
+  --ring: oklch(0.442 0.017 285.786);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.274 0.006 286.033);
+  --sidebar-ring: oklch(0.442 0.017 285.786);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/solid/add-on/solid-ui/assets/ui.config.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://solid-ui.com/schema.json",
+  "tsx": true,
+  "tailwind": {
+    "css": "src/styles.css",
+    "config": "tailwind.config.cjs",
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "~/components/ui",
+    "utils": "~/lib/utils"
+  }
+}

package/templates/solid/add-on/solid-ui/info.json

@@ -0,0 +1,11 @@
+{
+  "name": "Solid-UI",
+  "description": "Add Solid-UI to your application.",
+  "phase": "add-on",
+  "link": "https://ui.shadcn.com/",
+  "templates": ["file-router", "code-router"],
+  "command": {
+    "command": "npx",
+    "args": ["solidui-cli@latest", "add", "button", "input"]
+  }
+}

package/templates/solid/add-on/solid-ui/package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "@fontsource/inter": "^5.1.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7"
+  }
+}

package/templates/solid/add-on/store/assets/src/lib/demo-store.ts

@@ -0,0 +1,13 @@
+import { Derived, Store } from '@tanstack/store'
+
+export const store = new Store({
+  firstName: 'Jane',
+  lastName: 'Smith',
+})
+
+export const fullName = new Derived({
+  fn: () => `${store.state.firstName} ${store.state.lastName}`,
+  deps: [store],
+})
+
+fullName.mount()

package/templates/solid/add-on/store/assets/src/routes/demo.store.tsx.ejs

@@ -0,0 +1,77 @@
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/solid-router'
+import { useStore } from '@tanstack/solid-store'
+
+import { fullName, store } from '../lib/demo-store'
+
+<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
+export const Route = createFileRoute('/demo/store')({
+  component: DemoStore,
+})
+<% } %>
+
+function FirstName() {
+  const firstName = useStore(store, (state) => state.firstName)
+  return (
+    <input
+      type="text"
+      value={firstName()}
+      onInput={(e) =>
+        store.setState((state) => ({ ...state, firstName: e.target.value }))
+      }
+      class="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+    />
+  )
+}
+
+function LastName() {
+  const lastName = useStore(store, (state) => state.lastName)
+  return (
+    <input
+      type="text"
+      value={lastName()}
+      onInput={(e) =>
+        store.setState((state) => ({ ...state, lastName: e.target.value }))
+      }
+      class="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+    />
+  )
+}
+
+function FullName() {
+  const fName = useStore(fullName)
+  return (
+    <div class="bg-white/10 rounded-lg px-4 py-2 outline-none ">
+      {fName}
+    </div>
+  )
+}
+
+function DemoStore() {
+  return (
+    <div
+      class="min-h-[calc(100vh-32px)] text-white p-8 flex items-center justify-center w-full h-full"
+      style={{
+        'background-image':
+          'radial-gradient(50% 50% at 80% 80%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
+      }}
+    >
+      <div class="bg-white/10 backdrop-blur-lg rounded-xl p-8 shadow-lg flex flex-col gap-4 text-3xl min-w-1/2">
+        <h1 class="text-4xl font-bold mb-5">Store Example</h1>
+        <FirstName />
+        <LastName />
+        <FullName />
+      </div>
+    </div>
+  )
+}
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/store',
+  component: DemoStore,
+  getParentRoute: () => parentRoute,
+})
+<% } %>
+    

package/templates/solid/add-on/store/info.json

@@ -0,0 +1,13 @@
+{
+  "name": "Store",
+  "description": "Add TanStack Store to your application.",
+  "phase": "add-on",
+  "templates": ["file-router", "code-router"],
+  "link": "https://tanstack.com/store/latest",
+  "routes": [
+    {
+      "url": "/demo/store",
+      "name": "Store"
+    }
+  ]
+}

package/templates/solid/add-on/store/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@tanstack/store": "^0.7.0",
+    "@tanstack/solid-store": "^0.7.0"
+  }
+}

package/templates/solid/add-on/tanstack-query/assets/src/integrations/tanstack-query/header-user.tsx

@@ -0,0 +1,5 @@
+import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
+
+export default function AppTanstackQueryHeaderUser() {
+  return <SolidQueryDevtools buttonPosition="bottom-right" />
+}

package/templates/solid/add-on/tanstack-query/assets/src/integrations/tanstack-query/provider.tsx

@@ -0,0 +1,15 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
+
+import type { JSX } from 'solid-js'
+
+const queryClient = new QueryClient()
+
+export default function AppTanstackQueryProvider(props: {
+  children: JSX.Element
+}) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {props.children}
+    </QueryClientProvider>
+  )
+}

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

@@ -0,0 +1,30 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { createQuery } from '@tanstack/solid-query'
+
+export const Route = createFileRoute('/demo/tanstack-query')({
+  component: App,
+})
+
+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 }>),
+    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>
+    </div>
+  )
+}
+
+export default App

package/templates/solid/add-on/tanstack-query/info.json

@@ -0,0 +1,13 @@
+{
+  "name": "TanStack Query",
+  "description": "Integrate TanStack Query into your application.",
+  "phase": "add-on",
+  "templates": ["file-router"],
+  "link": "https://tanstack.com/query/latest",
+  "routes": [
+    {
+      "url": "/demo/tanstack-query",
+      "name": "TanStack Query"
+    }
+  ]
+}

package/templates/solid/add-on/tanstack-query/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@tanstack/solid-query": "^5.66.0",
+    "@tanstack/solid-query-devtools": "^5.66.0"
+  }
+}

package/templates/solid/base/README.md.ejs

@@ -0,0 +1,200 @@
+Welcome to your new TanStack app! 
+
+# Getting Started
+
+To run this application:
+
+```bash
+<%= packageManager %> install
+<%= packageManager %> start
+```
+
+# Building For Production
+
+To build this application for production:
+
+```bash
+<%= packageManager %> run build
+```
+
+## Styling
+
+This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
+
+<% for(const addon of addOns.filter(addon => addon.readme)) { %>
+<%- addon.readme %>
+<% } %>
+
+## Routing
+<% if (fileRouter) { %>This 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`.<% } else { %>This 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.<% } %>
+
+### Adding A Route
+<% if (fileRouter) { %>
+To add a new route to your application just add another a new file in the `./src/routes` directory.
+
+TanStack will automatically generate the content of the route file for you.
+<% } else { %>
+To 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.
+
+```tsx
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/about",
+  component: () => <h1>About</h1>,
+});
+```
+
+You will also need to add the route to the `routeTree` in the `./src/main.<%= jsx %>` file.
+
+```tsx
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);
+```
+
+With this set up you should be able to navigate to `/about` and see the about page.
+
+Of course you don't need to implement the About page in the `main.<%= jsx %>` file. You can create that component in another file and import it into the `main.<%= jsx %>` file, then use it in the `component` property of the `createRoute` call, like so:
+
+```tsx
+import About from "./components/About.<%= jsx %>";
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/about",
+  component: About,
+});
+```
+
+That is how we have the `App` component set up with the home page.
+
+For more information on the options you have when you are creating code based routes check out the [Code Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/code-based-routing) documentation.
+<% } %>
+Now that you have two routes you can use a `Link` component to navigate between them.
+
+### Adding Links
+
+To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/solid-router`.
+
+```tsx
+import { Link } from "@tanstack/solid-router";
+```
+
+Then anywhere in your JSX you can use it like so:
+
+```tsx
+<Link to="/about">About</Link>
+```
+
+This will create a link that will navigate to the `/about` route.
+
+More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/solid/api/router/linkComponent).
+
+### Using A Layout
+
+<% if (codeRouter) { %>
+Layouts can be used to wrap the contents of the routes in menus, headers, footers, etc.
+
+There is already a layout in the `src/main.<%= jsx %>` file:
+
+```tsx
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+});
+```
+
+You can use the Soliid component specified in the `component` property of the `rootRoute` to wrap the contents of the routes. The `<Outlet />` component is used to render the current route within the body of the layout. For example you could add a header to the layout like so:
+
+```tsx
+import { Link } from "@tanstack/solid-router";
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <header>
+        <nav>
+          <Link to="/">Home</Link>
+          <Link to="/about">About</Link>
+        </nav>
+      </header>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+});
+```
+<% } else { %>In 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.
+
+Here is an example layout that includes a header:
+
+```tsx
+import { createRootRoute, Outlet } from '@tanstack/solid-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+
+import { Link } from "@tanstack/solid-router";
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <header>
+        <nav>
+          <Link to="/">Home</Link>
+          <Link to="/about">About</Link>
+        </nav>
+      </header>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+```
+<% } %>
+The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
+
+More information on layouts can be found in the [Layouts documentation](hthttps://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).
+
+## Data Fetching
+
+There 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.
+
+For example:
+
+```tsx
+const peopleRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/people",
+  loader: async () => {
+    const response = await fetch("https://swapi.dev/api/people");<% if (typescript) { %>
+    return response.json() as Promise<{
+      results: {
+        name: string;
+      }[];
+    }>;
+<% } else { %>
+    return response.json();
+<% } %>  },
+  component: () => {
+    const data = peopleRoute.useLoaderData();
+    return (
+      <ul>
+        {data.results.map((person) => (
+          <li key={person.name}>{person.name}</li>
+        ))}
+      </ul>
+    );
+  },
+});
+```
+
+Loaders 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).
+
+# Demo files
+
+Files 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.
+
+# Learn More
+
+You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).

package/templates/solid/base/_dot_cursorrules.append

@@ -0,0 +1,35 @@
+// Solid.js with Tailwind CSS .cursorrules
+
+// Prefer functional components
+
+const preferFunctionalComponents = true;
+
+// Solid.js and Tailwind CSS best practices
+
+const solidjsTailwindBestPractices = [
+"Use createSignal() for reactive state",
+"Implement Tailwind CSS classes for styling",
+"Utilize TypeScript's strict mode",
+"Utilize @apply directive in CSS files for reusable styles",
+"Implement responsive design using Tailwind's responsive classes",
+"Use Tailwind's CSS in /src/styles.css for global styles",
+"Implement dark mode using Tailwind's dark variant",
+];
+
+// Additional instructions
+
+const additionalInstructions = `
+
+1. Use .tsx extension for files with JSX
+2. Implement strict TypeScript checks
+3. Implement proper Tailwind CSS purging for production builds
+4. Utilize TanStack Router for routing when applicable
+5. Use type-safe context with createContext
+6. Implement proper typing for event handlers
+7. Follow TypeScript best practices and naming conventions
+8. Use type assertions sparingly and only when necessary
+9. Use Tailwind's @layer directive for custom styles
+10. Implement utility-first CSS approach
+11. Follow both Solid.js and Tailwind naming conventions
+12. Use JIT (Just-In-Time) mode for faster development
+    `;

package/templates/solid/base/_dot_gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

package/templates/solid/base/_dot_vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}

package/templates/solid/base/index.html.ejs

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-tsrouter-app"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Create TanStack App - app-ts</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/solid/base/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "app-ts",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "vite --port 3000",
+    "build": "vite build && tsc",
+    "serve": "vite preview",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@tanstack/solid-router": "^1.110.0",
+    "@tanstack/router-devtools": "^1.109.2",
+    "@tanstack/router-plugin": "^1.109.2",
+    "solid-js": "^1.9.4"
+  },
+  "devDependencies": {
+    "vite-plugin-solid": "^2.11.2",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.11"
+  }
+}

package/templates/solid/base/package.ts.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "typescript": "^5.7.2"
+  }
+}

package/templates/solid/base/package.tw.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@tailwindcss/vite": "^4.0.6",
+    "tailwindcss": "^4.0.6"
+  }
+}