create-tsrouter-app 0.2.0 → 0.3.0-alpha.2

package/src/options.ts

@@ -0,0 +1,264 @@
+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, FILE_ROUTER } from './constants.js'
+import { finalizeAddOns, getAllAddOns } from './add-ons.js'
+import type { Variable } from './add-ons.js'
+
+import type { CliOptions, Options } from './types.js'
+
+// If all CLI options are provided, use them directly
+export function normalizeOptions(
+  cliOptions: CliOptions,
+): Required<Options> | undefined {
+  if (cliOptions.projectName) {
+    const typescript =
+      cliOptions.template === 'typescript' ||
+      cliOptions.template === 'file-router'
+
+    return {
+      projectName: cliOptions.projectName,
+      typescript,
+      tailwind: !!cliOptions.tailwind,
+      packageManager: cliOptions.packageManager || DEFAULT_PACKAGE_MANAGER,
+      mode: cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
+      git: !!cliOptions.git,
+      addOns: !!cliOptions.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>
+
+  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) {
+    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 = 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
+  }
+
+  // Select any add-ons
+  if (options.mode === FILE_ROUTER && cliOptions.addOns) {
+    const addOns = await getAllAddOns()
+
+    const selectedAddOns = await multiselect({
+      message: 'What add-ons would you like for your project:',
+      options: addOns
+        .filter((addOn) => addOn.type === 'add-on')
+        .map((addOn) => ({
+          value: addOn.id,
+          label: addOn.name,
+          hint: addOn.description,
+        })),
+      required: false,
+    })
+
+    if (isCancel(selectedAddOns)) {
+      cancel('Operation cancelled.')
+      process.exit(0)
+    }
+
+    const selectedExamples = await multiselect({
+      message: 'Would you like any examples?',
+      options: addOns
+        .filter((addOn) => addOn.type === 'example')
+        .map((addOn) => ({
+          value: addOn.id,
+          label: addOn.name,
+          hint: addOn.description,
+        })),
+      required: false,
+    })
+
+    if (isCancel(selectedExamples)) {
+      cancel('Operation cancelled.')
+      process.exit(0)
+    }
+
+    options.chosenAddOns = await finalizeAddOns([
+      ...selectedAddOns,
+      ...selectedExamples,
+    ])
+    options.tailwind = true
+  } else {
+    options.chosenAddOns = []
+  }
+
+  // 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/types.ts

@@ -0,0 +1,24 @@
+import type { AddOn } from './add-ons.js'
+import type { CODE_ROUTER, FILE_ROUTER } from './constants.js'
+import type { PackageManager } from './package-manager.js'
+
+export interface Options {
+  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'
+  tailwind?: boolean
+  packageManager?: PackageManager
+  projectName?: string
+  git?: boolean
+  addOns?: boolean
+}

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

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

package/templates/add-on/clerk/assets/.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/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/add-on/clerk/info.json

@@ -0,0 +1,28 @@
+{
+  "name": "Clerk",
+  "description": "Add Clerk authentication to your application.",
+  "phase": "add-on",
+  "link": "https://clerk.com",
+  "main": {
+    "imports": ["import { ClerkProvider } from '@clerk/clerk-react'"],
+    "initialize": [
+      "const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY\nif (!PUBLISHABLE_KEY) {\n  throw new Error('Add your Clerk Publishable Key to the .env.local file');\n}"
+    ],
+    "providers": [
+      {
+        "open": "<ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl=\"/\">",
+        "close": "</ClerkProvider>"
+      }
+    ]
+  },
+  "userUi": {
+    "import": "import { SignedIn, SignInButton, SignedOut, UserButton } from '@clerk/clerk-react'",
+    "jsx": "<SignedIn><UserButton /></SignedIn><SignedOut><SignInButton /></SignedOut>"
+  },
+  "routes": [
+    {
+      "url": "/demo/clerk",
+      "name": "Clerk"
+    }
+  ]
+}

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

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

package/templates/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/add-on/convex/assets/.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/add-on/convex/assets/.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/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/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/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/add-on/convex/info.json

@@ -0,0 +1,27 @@
+{
+  "name": "Convex",
+  "description": "Add the Convex database to your application.",
+  "link": "https://convex.dev",
+  "phase": "add-on",
+  "main": {
+    "imports": [
+      "import { ConvexProvider } from 'convex/react'",
+      "import { ConvexQueryClient } from '@convex-dev/react-query'"
+    ],
+    "initialize": [
+      "const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL!\nif (!CONVEX_URL) {\n  console.error(\"missing envar CONVEX_URL\");\n}\nconst convexQueryClient = new ConvexQueryClient(CONVEX_URL);"
+    ],
+    "providers": [
+      {
+        "open": "<ConvexProvider client={convexQueryClient.convexClient}>",
+        "close": "</ConvexProvider>"
+      }
+    ]
+  },
+  "routes": [
+    {
+      "url": "/demo/convex",
+      "name": "Convex"
+    }
+  ]
+}

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

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

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

@@ -0,0 +1,50 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useForm } from '@tanstack/react-form'
+
+export const Route = createFileRoute('/demo/form')({
+  component: App,
+})
+
+export default function App() {
+  const form = useForm({
+    defaultValues: {
+      fullName: '',
+    },
+    onSubmit: async ({ value }) => {
+      console.log(value)
+    },
+  })
+
+  return (
+    <div className="p-4">
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+      >
+        <div>
+          <form.Field
+            name="fullName"
+            children={(field) => (
+              <input
+                name={field.name}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                className="block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500"
+              />
+            )}
+          />
+        </div>
+        <button
+          type="submit"
+          className="mt-4 inline-flex items-center px-6 py-3 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        >
+          Submit
+        </button>
+      </form>
+    </div>
+  )
+}

package/templates/add-on/form/info.json

@@ -0,0 +1,12 @@
+{
+  "name": "Form",
+  "description": "TansStack Form",
+  "phase": "add-on",
+  "link": "https://tanstack.com/form/latest",
+  "routes": [
+    {
+      "url": "/demo/form",
+      "name": "Form"
+    }
+  ]
+}

package/templates/add-on/form/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@tanstack/react-form": "^0.42.0"
+  }
+}

package/templates/add-on/netlify/README.md

@@ -0,0 +1,11 @@
+## Setting up Netlify
+
+First install the Netlify CLI with:
+
+```bash
+npm install -g netlify-cli`
+```
+
+```bash
+netlify init
+```

package/templates/add-on/netlify/info.json

@@ -0,0 +1,6 @@
+{
+  "name": "Netlify",
+  "description": "Netlify deployment setup",
+  "link": "https://docs.netlify.com",
+  "phase": "add-on"
+}

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

@@ -0,0 +1,30 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+
+export const Route = createFileRoute('/demo/react-query')({
+  component: App,
+})
+
+function App() {
+  const { data } = useQuery({
+    queryKey: ['people'],
+    queryFn: () =>
+      fetch('https://swapi.dev/api/people')
+        .then((res) => res.json())
+        .then((data) => data.results as { name: string }[]),
+    initialData: [],
+  })
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl mb-4">People list from Swapi</h1>
+      <ul>
+        {data.map((person) => (
+          <li key={person.name}>{person.name}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default App