create-tsrouter-app 0.3.0 → 0.4.0

package/src/options.ts

@@ -0,0 +1,308 @@
+import {
+  cancel,
+  confirm,
+  isCancel,
+  multiselect,
+  select,
+  text,
+} from '@clack/prompts'
+
+import {
+  DEFAULT_PACKAGE_MANAGER,
+  SUPPORTED_PACKAGE_MANAGERS,
+  getPackageManager,
+} from './package-manager.js'
+import { CODE_ROUTER, DEFAULT_FRAMEWORK, FILE_ROUTER } from './constants.js'
+import { finalizeAddOns, getAllAddOns } from './add-ons.js'
+import type { AddOn, Variable } from './add-ons.js'
+
+import type { CliOptions, Options } from './types.js'
+
+// If all CLI options are provided, use them directly
+export async function normalizeOptions(
+  cliOptions: CliOptions,
+): Promise<Required<Options> | undefined> {
+  if (cliOptions.projectName) {
+    const typescript =
+      cliOptions.template === 'typescript' ||
+      cliOptions.template === 'file-router' ||
+      cliOptions.framework === 'solid'
+
+    let tailwind = !!cliOptions.tailwind
+    if (cliOptions.framework === 'solid') {
+      tailwind = true
+    }
+
+    let addOns = false
+    let chosenAddOns: Array<AddOn> = []
+    if (Array.isArray(cliOptions.addOns)) {
+      addOns = true
+      chosenAddOns = await finalizeAddOns(
+        cliOptions.framework || DEFAULT_FRAMEWORK,
+        cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
+        cliOptions.addOns,
+      )
+      tailwind = true
+    }
+
+    return {
+      framework: cliOptions.framework || 'react',
+      projectName: cliOptions.projectName,
+      typescript,
+      tailwind,
+      packageManager: cliOptions.packageManager || DEFAULT_PACKAGE_MANAGER,
+      mode: cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
+      git: !!cliOptions.git,
+      addOns,
+      chosenAddOns,
+      variableValues: {},
+    }
+  }
+}
+
+async function collectVariables(
+  variables: Array<Variable>,
+): Promise<Record<string, string | number | boolean>> {
+  const responses: Record<string, string | number | boolean> = {}
+  for (const variable of variables) {
+    if (variable.type === 'string') {
+      const response = await text({
+        message: variable.description,
+        initialValue: variable.default,
+      })
+      if (isCancel(response)) {
+        cancel('Operation cancelled.')
+        process.exit(0)
+      }
+      responses[variable.name] = response
+    } else if (variable.type === 'number') {
+      const response = await text({
+        message: variable.description,
+        initialValue: variable.default.toString(),
+      })
+      if (isCancel(response)) {
+        cancel('Operation cancelled.')
+        process.exit(0)
+      }
+      responses[variable.name] = Number(response)
+    } else {
+      const response = await confirm({
+        message: variable.description,
+        initialValue: variable.default === true,
+      })
+      if (isCancel(response)) {
+        cancel('Operation cancelled.')
+        process.exit(0)
+      }
+      responses[variable.name] = response
+    }
+  }
+  return responses
+}
+
+export async function promptForOptions(
+  cliOptions: CliOptions,
+): Promise<Required<Options>> {
+  const options = {} as Required<Options>
+
+  options.framework = cliOptions.framework || DEFAULT_FRAMEWORK
+  if (options.framework === 'solid') {
+    options.typescript = true
+    options.tailwind = true
+  }
+
+  if (cliOptions.addOns) {
+    options.typescript = true
+  }
+
+  if (!cliOptions.projectName) {
+    const value = await text({
+      message: 'What would you like to name your project?',
+      defaultValue: 'my-app',
+      validate(value) {
+        if (!value) {
+          return 'Please enter a name'
+        }
+      },
+    })
+    if (isCancel(value)) {
+      cancel('Operation cancelled.')
+      process.exit(0)
+    }
+    options.projectName = value
+  }
+
+  // Router type selection
+  if (!cliOptions.template) {
+    const routerType = await select({
+      message: 'Select the router type:',
+      options: [
+        {
+          value: FILE_ROUTER,
+          label: 'File Router - File-based routing structure',
+        },
+        {
+          value: CODE_ROUTER,
+          label: 'Code Router - Traditional code-based routing',
+        },
+      ],
+      initialValue: FILE_ROUTER,
+    })
+    if (isCancel(routerType)) {
+      cancel('Operation cancelled.')
+      process.exit(0)
+    }
+    options.mode = routerType as typeof CODE_ROUTER | typeof FILE_ROUTER
+  } else {
+    options.mode = cliOptions.template as
+      | typeof CODE_ROUTER
+      | typeof FILE_ROUTER
+    if (options.mode === FILE_ROUTER) {
+      options.typescript = true
+    }
+  }
+
+  // TypeScript selection (if using Code Router)
+  if (!options.typescript) {
+    if (options.mode === CODE_ROUTER) {
+      const typescriptEnable = await confirm({
+        message: 'Would you like to use TypeScript?',
+        initialValue: true,
+      })
+      if (isCancel(typescriptEnable)) {
+        cancel('Operation cancelled.')
+        process.exit(0)
+      }
+      options.typescript = typescriptEnable
+    } else {
+      options.typescript = true
+    }
+  }
+
+  // Tailwind selection
+  if (cliOptions.tailwind === undefined && options.framework === 'react') {
+    const tailwind = await confirm({
+      message: 'Would you like to use Tailwind CSS?',
+      initialValue: true,
+    })
+    if (isCancel(tailwind)) {
+      cancel('Operation cancelled.')
+      process.exit(0)
+    }
+    options.tailwind = tailwind
+  } else {
+    options.tailwind = options.framework === 'solid' || !!cliOptions.tailwind
+  }
+
+  // Package manager selection
+  if (cliOptions.packageManager === undefined) {
+    const detectedPackageManager = getPackageManager()
+    if (!detectedPackageManager) {
+      const pm = await select({
+        message: 'Select package manager:',
+        options: SUPPORTED_PACKAGE_MANAGERS.map((pm) => ({
+          value: pm,
+          label: pm,
+        })),
+        initialValue: DEFAULT_PACKAGE_MANAGER,
+      })
+      if (isCancel(pm)) {
+        cancel('Operation cancelled.')
+        process.exit(0)
+      }
+      options.packageManager = pm
+    } else {
+      options.packageManager = detectedPackageManager
+    }
+  } else {
+    options.packageManager = cliOptions.packageManager
+  }
+
+  options.chosenAddOns = []
+  if (Array.isArray(cliOptions.addOns)) {
+    options.chosenAddOns = await finalizeAddOns(
+      options.framework,
+      options.mode,
+      cliOptions.addOns,
+    )
+    options.tailwind = true
+  } else if (cliOptions.addOns) {
+    // Select any add-ons
+    const allAddOns = await getAllAddOns(options.framework, options.mode)
+    const addOns = allAddOns.filter((addOn) => addOn.type === 'add-on')
+    let selectedAddOns: Array<string> = []
+    if (options.typescript && addOns.length > 0) {
+      const value = await multiselect({
+        message: 'What add-ons would you like for your project:',
+        options: addOns.map((addOn) => ({
+          value: addOn.id,
+          label: addOn.name,
+          hint: addOn.description,
+        })),
+        required: false,
+      })
+
+      if (isCancel(value)) {
+        cancel('Operation cancelled.')
+        process.exit(0)
+      }
+      selectedAddOns = value
+    }
+
+    // Select any examples
+    const selectedExamples: Array<string> = []
+    // const examples = allAddOns.filter((addOn) => addOn.type === 'example')
+    // if (options.typescript && examples.length > 0) {
+    //   const value = await multiselect({
+    //     message: 'Would you like any examples?',
+    //     options: examples.map((addOn) => ({
+    //       value: addOn.id,
+    //       label: addOn.name,
+    //       hint: addOn.description,
+    //     })),
+    //     required: false,
+    //   })
+
+    //   if (isCancel(value)) {
+    //     cancel('Operation cancelled.')
+    //     process.exit(0)
+    //   }
+    //   selectedExamples = value
+    // }
+
+    if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
+      options.chosenAddOns = await finalizeAddOns(
+        options.framework,
+        options.mode,
+        [...selectedAddOns, ...selectedExamples],
+      )
+      options.tailwind = true
+    }
+  }
+
+  // Collect variables
+  const variables: Array<Variable> = []
+  for (const addOn of options.chosenAddOns) {
+    for (const variable of addOn.variables ?? []) {
+      variables.push(variable)
+    }
+  }
+  options.variableValues = await collectVariables(variables)
+
+  // Git selection
+  if (cliOptions.git === undefined) {
+    const git = await confirm({
+      message: 'Would you like to initialize a new git repository?',
+      initialValue: true,
+    })
+    if (isCancel(git)) {
+      cancel('Operation cancelled.')
+      process.exit(0)
+    }
+    options.git = git
+  } else {
+    options.git = !!cliOptions.git
+  }
+
+  return options
+}

package/src/{utils/getPackageManager.ts → package-manager.ts}

@@ -3,6 +3,7 @@ export const SUPPORTED_PACKAGE_MANAGERS = [
   'yarn',
   'pnpm',
   'bun',
+  'deno',
 ] as const
 export type PackageManager = (typeof SUPPORTED_PACKAGE_MANAGERS)[number]
 export const DEFAULT_PACKAGE_MANAGER: PackageManager = 'npm'

package/src/types.ts

@@ -0,0 +1,30 @@
+import type { AddOn } from './add-ons.js'
+import type { CODE_ROUTER, FILE_ROUTER } from './constants.js'
+import type { PackageManager } from './package-manager.js'
+
+export type Framework = 'solid' | 'react'
+
+export interface Options {
+  framework: Framework
+  projectName: string
+  typescript: boolean
+  tailwind: boolean
+  packageManager: PackageManager
+  mode: typeof CODE_ROUTER | typeof FILE_ROUTER
+  addOns: boolean
+  chosenAddOns: Array<AddOn>
+  git: boolean
+  variableValues: Record<string, string | number | boolean>
+}
+
+export interface CliOptions {
+  template?: 'typescript' | 'javascript' | 'file-router'
+  framework?: Framework
+  tailwind?: boolean
+  packageManager?: PackageManager
+  projectName?: string
+  git?: boolean
+  addOns?: Array<string> | boolean
+  listAddOns?: boolean
+  mcp?: boolean
+}

package/templates/react/add-on/clerk/README.md

@@ -0,0 +1,3 @@
+## Setting up Clerk
+
+- Set the `VITE_CLERK_PUBLISHABLE_KEY` in your `.env.local`.

package/templates/react/add-on/clerk/assets/_dot_env.local.append

@@ -0,0 +1,2 @@
+# Clerk configuration, get this key from your [Dashboard](https://clerk.com/dashboard).
+VITE_CLERK_PUBLISHABLE_KEY=

package/templates/react/add-on/clerk/assets/src/integrations/clerk/header-user.tsx

@@ -0,0 +1,19 @@
+import {
+  SignedIn,
+  SignInButton,
+  SignedOut,
+  UserButton,
+} from '@clerk/clerk-react'
+
+export default function HeaderUser() {
+  return (
+    <>
+      <SignedIn>
+        <UserButton />
+      </SignedIn>
+      <SignedOut>
+        <SignInButton />
+      </SignedOut>
+    </>
+  )
+}

package/templates/react/add-on/clerk/assets/src/integrations/clerk/provider.tsx

@@ -0,0 +1,18 @@
+import { ClerkProvider } from '@clerk/clerk-react'
+
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+if (!PUBLISHABLE_KEY) {
+  throw new Error('Add your Clerk Publishable Key to the .env.local file')
+}
+
+export default function AppClerkProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
+      {children}
+    </ClerkProvider>
+  )
+}

package/templates/react/add-on/clerk/assets/src/routes/demo.clerk.tsx

@@ -0,0 +1,20 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useUser } from '@clerk/clerk-react'
+
+export const Route = createFileRoute('/demo/clerk')({
+  component: App,
+})
+
+function App() {
+  const { isSignedIn, user, isLoaded } = useUser()
+
+  if (!isLoaded) {
+    return <div className="p-4">Loading...</div>
+  }
+
+  if (!isSignedIn) {
+    return <div className="p-4">Sign in to view this page</div>
+  }
+
+  return <div className="p-4">Hello {user.firstName}!</div>
+}

package/templates/react/add-on/clerk/info.json

@@ -0,0 +1,13 @@
+{
+  "name": "Clerk",
+  "description": "Add Clerk authentication to your application.",
+  "phase": "add-on",
+  "templates": ["file-router"],
+  "link": "https://clerk.com",
+  "routes": [
+    {
+      "url": "/demo/clerk",
+      "name": "Clerk"
+    }
+  ]
+}

package/templates/react/add-on/clerk/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@clerk/clerk-react": "^5.22.13"
+  }
+}

package/templates/react/add-on/convex/README.md

@@ -0,0 +1,4 @@
+## Setting up Convex
+
+- Set the `VITE_CONVEX_URL` and `CONVEX_DEPLOYMENT` environment variables in your `.env.local`. (Or run `npx convex init` to set them automatically.)
+- Run `npx convex dev` to start the Convex server.

package/templates/react/add-on/convex/assets/_dot_cursorrules.append

@@ -0,0 +1,93 @@
+This document serves as some special instructions when working with Convex.
+
+# Schemas
+
+When designing the schema please see this page on built in System fields and data types available: https://docs.convex.dev/database/types
+
+Here are some specifics that are often mishandled:
+
+## v (https://docs.convex.dev/api/modules/values#v)
+
+The validator builder.
+
+This builder allows you to build validators for Convex values.
+
+Validators can be used in schema definitions and as input validators for Convex functions.
+
+Type declaration
+Name	Type
+id	<TableName>(tableName: TableName) => VId<GenericId<TableName>, "required">
+null	() => VNull<null, "required">
+number	() => VFloat64<number, "required">
+float64	() => VFloat64<number, "required">
+bigint	() => VInt64<bigint, "required">
+int64	() => VInt64<bigint, "required">
+boolean	() => VBoolean<boolean, "required">
+string	() => VString<string, "required">
+bytes	() => VBytes<ArrayBuffer, "required">
+literal	<T>(literal: T) => VLiteral<T, "required">
+array	<T>(element: T) => VArray<T["type"][], T, "required">
+object	<T>(fields: T) => VObject<Expand<{ [Property in string | number | symbol]?: Exclude<Infer<T[Property]>, undefined> } & { [Property in string | number | symbol]: Infer<T[Property]> }>, T, "required", { [Property in string | number | symbol]: Property | `${Property & string}.${T[Property]["fieldPaths"]}` }[keyof T] & string>
+record	<Key, Value>(keys: Key, values: Value) => VRecord<Record<Infer<Key>, Value["type"]>, Key, Value, "required", string>
+union	<T>(...members: T) => VUnion<T[number]["type"], T, "required", T[number]["fieldPaths"]>
+any	() => VAny<any, "required", string>
+optional	<T>(value: T) => VOptional<T>
+
+## System fields (https://docs.convex.dev/database/types#system-fields)
+
+Every document in Convex has two automatically-generated system fields:
+
+_id: The document ID of the document.
+_creationTime: The time this document was created, in milliseconds since the Unix epoch.
+
+You do not need to add indices as these are added automatically.
+
+## Example Schema
+
+This is an example of a well crafted schema.
+
+```ts
+import { defineSchema, defineTable } from "convex/server";
+import { v } from "convex/values";
+
+export default defineSchema(
+  {
+    users: defineTable({
+      name: v.string(),
+    }),
+    
+    sessions: defineTable({
+      userId: v.id("users"),
+      sessionId: v.string(),
+    }).index("sessionId", ["sessionId"]),
+    
+    threads: defineTable({
+      uuid: v.string(),
+      summary: v.optional(v.string()),
+      summarizer: v.optional(v.id("_scheduled_functions")),
+    }).index("uuid", ["uuid"]),
+
+    messages: defineTable({
+      message: v.string(),
+      threadId: v.id("threads"),
+      author: v.union(
+        v.object({
+          role: v.literal("system"),
+        }),
+        v.object({
+          role: v.literal("assistant"),
+          context: v.array(v.id("messages")),
+          model: v.optional(v.string()),
+        }),
+        v.object({
+          role: v.literal("user"),
+          userId: v.id("users"),
+        }),
+      ),
+    })
+      .index("threadId", ["threadId"]),
+  },
+);
+```
+
+Sourced from: https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/convex-cursorrules-prompt-file/.cursorrules

package/templates/react/add-on/convex/assets/_dot_env.local.append

@@ -0,0 +1,3 @@
+# Convex configuration, get this URL from your [Dashboard](https://convex.dev/dashboard).
+CONVEX_DEPLOYMENT=
+VITE_CONVEX_URL=

package/templates/react/add-on/convex/assets/convex/products.ts

@@ -0,0 +1,8 @@
+import { query } from "./_generated/server";
+
+export const get = query({
+  args: {},
+  handler: async (ctx) => {
+    return await ctx.db.query("products").collect();
+  },
+});

package/templates/react/add-on/convex/assets/convex/schema.ts

@@ -0,0 +1,10 @@
+import { defineSchema, defineTable } from "convex/server";
+import { v } from "convex/values";
+
+export default defineSchema({
+  products: defineTable({
+    title: v.string(),
+    imageId: v.string(),
+    price: v.number(),
+  }),
+});

package/templates/react/add-on/convex/assets/src/integrations/convex/provider.tsx

@@ -0,0 +1,20 @@
+import { ConvexProvider } from 'convex/react'
+import { ConvexQueryClient } from '@convex-dev/react-query'
+
+const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL
+if (!CONVEX_URL) {
+  console.error('missing envar CONVEX_URL')
+}
+const convexQueryClient = new ConvexQueryClient(CONVEX_URL)
+
+export default function AppConvexProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <ConvexProvider client={convexQueryClient.convexClient}>
+      {children}
+    </ConvexProvider>
+  )
+}

package/templates/react/add-on/convex/assets/src/routes/demo.convex.tsx

@@ -0,0 +1,33 @@
+import { Suspense } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useQuery } from 'convex/react'
+
+import { api } from '../../convex/_generated/api'
+
+export const Route = createFileRoute('/demo/convex')({
+  component: App,
+})
+
+function Products() {
+  const products = useQuery(api.products.get)
+
+  return (
+    <ul>
+      {(products || []).map((p) => (
+        <li key={p._id}>
+          {p.title} - {p.price}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function App() {
+  return (
+    <div className="p-4">
+      <Suspense fallback={<div>Loading...</div>}>
+        <Products />
+      </Suspense>
+    </div>
+  )
+}

package/templates/react/add-on/convex/info.json

@@ -0,0 +1,13 @@
+{
+  "name": "Convex",
+  "description": "Add the Convex database to your application.",
+  "link": "https://convex.dev",
+  "phase": "add-on",
+  "templates": ["file-router"],
+  "routes": [
+    {
+      "url": "/demo/convex",
+      "name": "Convex"
+    }
+  ]
+}

package/templates/react/add-on/convex/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@convex-dev/react-query": "0.0.0-alpha.8",
+    "convex": "^1.19.2"
+  }
+}