@tanstack/cta-framework-solid 0.10.0-alpha.20

package/add-ons/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/add-ons/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/add-ons/solid-ui/info.json

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

package/add-ons/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/add-ons/start/assets/app.config.ts.ejs

@@ -0,0 +1,19 @@
+import { defineConfig } from '@tanstack/solid-start/config'
+import viteTsConfigPaths from 'vite-tsconfig-paths'<% if (tailwind) { %>
+import tailwindcss from "@tailwindcss/vite"
+<% } %>
+
+export default defineConfig({
+  tsr: {
+    appDirectory: 'src',
+  },
+  vite: {
+    plugins: [
+      // this is the plugin that enables path aliases
+      viteTsConfigPaths({
+        projects: ['./tsconfig.json'],
+      }),
+      <% if (tailwind) { %>tailwindcss(),<% } %>
+    ],
+  },
+})

package/add-ons/start/assets/src/api.ts

@@ -0,0 +1,6 @@
+import {
+  createStartAPIHandler,
+  defaultAPIFileRouteHandler,
+} from '@tanstack/solid-start/api'
+
+export default createStartAPIHandler(defaultAPIFileRouteHandler)

package/add-ons/start/assets/src/client.tsx

@@ -0,0 +1,7 @@
+import { hydrate } from 'solid-js/web'
+import { StartClient } from '@tanstack/solid-start'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrate(() => <StartClient router={router} />, document.body)

package/add-ons/start/assets/src/router.tsx.ejs

@@ -0,0 +1,24 @@
+import { createRouter as createTanstackRouter } from '@tanstack/solid-router'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+import './styles.css'
+
+// Create a new router instance
+export const createRouter = () => {
+  const router = createTanstackRouter({
+    routeTree,
+    scrollRestoration: true,
+  })
+  return router
+}
+
+const router = createRouter()
+
+// Register the router instance for type safety
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: typeof router
+  }
+}

package/add-ons/start/assets/src/routes/demo.start.server-funcs.tsx

@@ -0,0 +1,49 @@
+import * as fs from 'fs'
+import { createFileRoute, useRouter } from '@tanstack/solid-router'
+import { createServerFn } from '@tanstack/solid-start'
+
+const filePath = 'count.txt'
+
+async function readCount() {
+  return parseInt(
+    await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),
+  )
+}
+
+const getCount = createServerFn({
+  method: 'GET',
+}).handler(() => {
+  return readCount()
+})
+
+const updateCount = createServerFn({ method: 'POST' })
+  .validator((d: number) => d)
+  .handler(async ({ data }) => {
+    const count = await readCount()
+    await fs.promises.writeFile(filePath, `${count + data}`)
+  })
+
+export const Route = createFileRoute('/demo/start/server-funcs')({
+  component: Home,
+  loader: async () => await getCount(),
+})
+
+function Home() {
+  const router = useRouter()
+  const state = Route.useLoaderData()
+
+  return (
+    <div class="p-4">
+      <button
+        onClick={() => {
+          updateCount({ data: 1 }).then(() => {
+            router.invalidate()
+          })
+        }}
+        claclassssName="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      >
+        Add 1 to {state}?
+      </button>
+    </div>
+  )
+}

package/add-ons/start/assets/src/ssr.tsx

@@ -0,0 +1,12 @@
+import {
+  createStartHandler,
+  defaultStreamHandler,
+} from '@tanstack/solid-start/server'
+import { getRouterManifest } from '@tanstack/solid-start/router-manifest'
+
+import { createRouter } from './router'
+
+export default createStartHandler({
+  createRouter,
+  getRouterManifest,
+})(defaultStreamHandler)

package/add-ons/start/info.json

@@ -0,0 +1,17 @@
+{
+  "name": "Start",
+  "phase": "setup",
+  "description": "Add TanStack Start for SSR, API endpoints, and more.",
+  "link": "https://tanstack.com/start/latest",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "warning": "TanStack Start is not yet at 1.0 and may change significantly or not be compatible with other add-ons.",
+  "routes": [
+    {
+      "url": "/demo/start/server-funcs",
+      "name": "Start - Server Functions",
+      "path": "src/routes/demo.start.server-funcs.tsx",
+      "jsName": "StartServerFuncsDemo"
+    }
+  ]
+}

package/add-ons/start/package.json

@@ -0,0 +1,12 @@
+{
+  "scripts": {
+    "dev": "vinxi dev",
+    "build": "vinxi build",
+    "start": "vinxi start"
+  },
+  "dependencies": {
+    "@tanstack/solid-start": "^1.114.3",
+    "vinxi": "^0.5.3",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

package/add-ons/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/add-ons/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/solid-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/add-ons/store/info.json

@@ -0,0 +1,16 @@
+{
+  "name": "Store",
+  "description": "Add TanStack Store to your application.",
+  "phase": "add-on",
+  "modes": ["file-router", "code-router"],
+  "type": "add-on",
+  "link": "https://tanstack.com/store/latest",
+  "routes": [
+    {
+      "url": "/demo/store",
+      "name": "Store",
+      "path": "src/routes/demo.store.tsx",
+      "jsName": "StoreDemo"
+    }
+  ]
+}

package/add-ons/store/package.json

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

package/add-ons/t3env/README.md

@@ -0,0 +1,16 @@
+## T3Env
+
+- You can use T3Env to add type safety to your environment variables.
+- Add Environment variables to the `src/env.mjs` file.
+- Use the environment variables in your code.
+
+### Usage
+
+```ts
+import { env } from "@/env";
+
+console.log(env.VITE_APP_TITLE);
+```
+
+
+

package/add-ons/t3env/assets/src/env.ts

@@ -0,0 +1,39 @@
+import { createEnv } from "@t3-oss/env-core";
+import { z } from "zod";
+ 
+export const env = createEnv({
+  server: {
+    SERVER_URL: z.string().url().optional(),
+  },
+ 
+  /**
+   * The prefix that client-side variables must have. This is enforced both at
+   * a type-level and at runtime.
+   */
+  clientPrefix: "VITE_",
+ 
+  client: {
+    VITE_APP_TITLE: z.string().min(1).optional(),
+  },
+ 
+  /**
+   * What object holds the environment variables at runtime. This is usually
+   * `process.env` or `import.meta.env`.
+   */
+  runtimeEnv: import.meta.env,
+ 
+  /**
+   * By default, this library will feed the environment variables directly to
+   * the Zod validator.
+   *
+   * This means that if you have an empty string for a value that is supposed
+   * to be a number (e.g. `PORT=` in a ".env" file), Zod will incorrectly flag
+   * it as a type mismatch violation. Additionally, if you have an empty string
+   * for a value that is supposed to be a string with a default value (e.g.
+   * `DOMAIN=` in an ".env" file), the default value will never be applied.
+   *
+   * In order to solve these issues, we recommend that all new projects
+   * explicitly specify this option as true.
+   */
+  emptyStringAsUndefined: true,
+});

package/add-ons/t3env/info.json

@@ -0,0 +1,8 @@
+{
+  "name": "T3Env",
+  "description": "Add type safety to your environment variables",
+  "phase": "add-on",
+  "link": "https://github.com/t3-oss/t3-env",
+  "type": "add-on",
+  "modes": ["file-router", "code-router"]
+}

package/add-ons/t3env/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "zod": "^3.24.2",
+    "@t3-oss/env-core": "^0.12.0"
+  }
+}

package/add-ons/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/add-ons/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/add-ons/tanstack-query/assets/src/routes/demo.tanstack-query.tsx

@@ -0,0 +1,24 @@
+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: () =>
+      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>
+    </div>
+  )
+}
+
+export default App

package/add-ons/tanstack-query/info.json

@@ -0,0 +1,28 @@
+{
+  "name": "TanStack Query",
+  "description": "Integrate TanStack Query into your application.",
+  "phase": "add-on",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "link": "https://tanstack.com/query/latest",
+  "routes": [
+    {
+      "url": "/demo/tanstack-query",
+      "name": "TanStack Query",
+      "path": "src/routes/demo.tanstack-query.tsx",
+      "jsName": "TanStackQueryDemo"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "provider",
+      "path": "src/integrations/tanstack-query/provider.tsx",
+      "jsName": "TanStackQueryProvider"
+    },
+    {
+      "type": "header-user",
+      "path": "src/integrations/tanstack-query/header-user.tsx",
+      "jsName": "TanStackQueryHeaderUser"
+    }
+  ]
+}

package/add-ons/tanstack-query/package.json

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

package/dist/index.js

@@ -0,0 +1,18 @@
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { registerFramework } from '@tanstack/cta-engine';
+export function register() {
+    registerFramework({
+        id: 'solid',
+        name: 'solid',
+        description: 'Solid templates for Tanstack Router Applications',
+        version: '0.1.0',
+        baseDirectory: join(dirname(dirname(fileURLToPath(import.meta.url))), 'project'),
+        addOnsDirectories: [
+            join(dirname(dirname(fileURLToPath(import.meta.url))), 'add-ons'),
+            join(dirname(dirname(fileURLToPath(import.meta.url))), 'toolchains'),
+            join(dirname(dirname(fileURLToPath(import.meta.url))), 'examples'),
+        ],
+        examplesDirectory: join(dirname(dirname(fileURLToPath(import.meta.url))), 'examples'),
+    });
+}

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export declare function register(): void;