Switch to src/versions.json over versions.ts

Author: onlywei

packages/create-vite-app/.gitignore

@@ -0,0 +1,3 @@
+# Generated at build time
+src/versions.json
+templates/

packages/create-vite-app/PLAN.md

@@ -4,46 +4,35 @@
 Build a CLI scaffolding tool that copies the `examples/react-vanilla-spa/` template and resolves pnpm catalog versions at build time.
 
 ## Requirements Summary
-- **Template source**: `examples/react-vanilla-spa/` (no dedicated templates folder)
+- **Template source**: `examples/react-vanilla-spa/` (bundled at build time)
 - **Prompts**: Project name only (using @clack/prompts)
 - **Versions**: Baked in at build time from `pnpm-workspace.yaml`
 - **Post-scaffold**: Auto-detect package manager and install dependencies
 - **Skip**: test files, node_modules, dist folders
 
 ---
 
-## Implementation Steps
+## Implementation (Completed)
 
 ### Step 1: Add dependencies
 **File**: `packages/create-vite-app/package.json`
 
-Add:
-- `@clack/prompts` - interactive CLI prompts
-- `yaml` (devDependency) - parse pnpm-workspace.yaml at build time
-
-### Step 2: Create build script to generate versions
-**New file**: `packages/create-vite-app/scripts/generate-versions.ts`
-
-This script will:
-1. Read `../../pnpm-workspace.yaml` for catalog versions
-2. Read `../fastify-vite/package.json` for @fastify/vite version (workspace:^ reference)
-3. Parse catalog and catalogs sections
-4. Write `src/versions.ts` with resolved versions:
-```ts
-export const versions = {
-  '@fastify/vite': '^8.2.3',
-  'fastify': '^5.6.2',
-  'vite': '^7.3.0',
-  'react': '^19.2.3',
-  'react-dom': '^19.2.3',
-  '@vitejs/plugin-react': '^5.1.2',
-}
-```
+Added:
+- `@clack/prompts` ^0.11.0 - interactive CLI prompts
+- `yaml` ^2.8.2 (devDependency) - parse pnpm-workspace.yaml at build time
+
+### Step 2: Create build script
+**File**: `packages/create-vite-app/scripts/generate-versions.ts`
+
+This script:
+1. Reads `pnpm-workspace.yaml` for catalog versions
+2. Reads `packages/fastify-vite/package.json` for @fastify/vite version
+3. Writes `src/versions.json` with resolved versions
+4. Copies template files from `examples/react-vanilla-spa` to `templates/react-spa`
 
 ### Step 3: Update build script in package.json
 **File**: `packages/create-vite-app/package.json`
 
-Change build to:
 ```json
 "build": "node scripts/generate-versions.ts && tsc"
 ```
@@ -53,54 +42,36 @@ Change build to:
 ### Step 4: Rewrite src/index.ts
 **File**: `packages/create-vite-app/src/index.ts`
 
-Structure:
-```ts
-#!/usr/bin/env node
-import * as p from '@clack/prompts'
-import { versions } from './versions.js'
-// ... fs utilities
-
-async function main() {
-  p.intro('Create Fastify + Vite App')
-
-  // 1. Get project name (with CLI arg fallback)
-  const projectName = await p.text({...})
+Features:
+- Interactive project name prompt using @clack/prompts
+- Copies template files from bundled `templates/react-spa`
+- Transforms package.json (resolves versions, updates name)
+- Auto-detects package manager and installs dependencies
+- Shows spinner during operations
 
-  // 2. Copy template files from examples/react-vanilla-spa
-  //    - Skip: node_modules, dist, *.test.js
-  //    - Transform package.json with resolved versions
-
-  // 3. Detect package manager (npm/pnpm/yarn/bun)
-  // 4. Run install with spinner
-
-  p.outro('Done! Run: cd <project> && npm run dev')
-}
-```
-
-### Step 5: Add template copying logic
-**File**: `packages/create-vite-app/src/index.ts`
+### Step 5: Create .gitignore
+**File**: `packages/create-vite-app/.gitignore`
 
-Key functions:
-- `copyTemplate(source, dest)` - recursively copy, skip ignored files
-- `transformPackageJson(content, projectName, versions)` - replace workspace:/catalog: refs
-- `detectPackageManager()` - check lockfiles or npm_config_user_agent
-- `installDependencies(pm, cwd)` - spawn install process
+Ignores build-time generated files:
+- `src/versions.json`
+- `templates/`
 
 ---
 
-## Files to Modify/Create
+## Files Modified/Created
 
 | File | Action |
 |------|--------|
-| `packages/create-vite-app/package.json` | Modify - add deps, update build script |
-| `packages/create-vite-app/scripts/generate-versions.ts` | Create |
-| `packages/create-vite-app/src/versions.ts` | Generated (gitignored) |
-| `packages/create-vite-app/src/index.ts` | Rewrite |
-| `packages/create-vite-app/.gitignore` | Create - ignore src/versions.ts |
+| `packages/create-vite-app/package.json` | Modified - added deps, updated build script |
+| `packages/create-vite-app/scripts/generate-versions.ts` | Created |
+| `packages/create-vite-app/src/versions.json` | Generated (gitignored) |
+| `packages/create-vite-app/src/index.ts` | Rewritten |
+| `packages/create-vite-app/.gitignore` | Created |
+| `packages/create-vite-app/templates/` | Generated (gitignored) |
 
 ---
 
-## Template Files Copied (from examples/react-vanilla-spa/)
+## Generated Project Structure
 
 ```
 project-name/
@@ -109,7 +80,7 @@ project-name/
 │   ├── base.jsx
 │   ├── index.html
 │   └── mount.js
-├── package.json      (transformed)
+├── package.json      (transformed with resolved versions)
 ├── server.js
 └── vite.config.js
 ```

packages/create-vite-app/package.json

@@ -13,7 +13,7 @@
   ],
   "scripts": {
     "dev": "node src/index.ts",
-    "build": "tsc",
+    "build": "node scripts/generate-versions.ts && tsc",
     "prepublishOnly": "pnpm build",
     "test": "node --test"
   },
@@ -37,8 +37,12 @@
   "engines": {
     "node": ">=22.18.0"
   },
+  "dependencies": {
+    "@clack/prompts": "^0.11.0"
+  },
   "devDependencies": {
     "typescript": "catalog:",
-    "@types/node": "catalog:"
+    "@types/node": "catalog:",
+    "yaml": "^2.8.2"
   }
 }

packages/create-vite-app/scripts/generate-versions.ts

@@ -0,0 +1,70 @@
+import { cpSync, existsSync, mkdirSync, readFileSync, readdirSync, rmSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { parse } from 'yaml'
+
+const rootDir = join(import.meta.dirname, '..', '..', '..')
+const pkgDir = join(import.meta.dirname, '..')
+
+// Read pnpm-workspace.yaml
+const workspaceYaml = readFileSync(join(rootDir, 'pnpm-workspace.yaml'), 'utf-8')
+const workspace = parse(workspaceYaml) as {
+  catalog: Record<string, string>
+  catalogs: Record<string, Record<string, string>>
+}
+
+// Read @fastify/vite version from its package.json
+const fastifyVitePkg = JSON.parse(
+  readFileSync(join(rootDir, 'packages', 'fastify-vite', 'package.json'), 'utf-8')
+)
+
+// Build the versions object
+const versions: Record<string, string> = {
+  '@fastify/vite': `^${fastifyVitePkg.version}`,
+  fastify: workspace.catalog.fastify,
+  vite: workspace.catalog.vite,
+  react: workspace.catalogs.react.react,
+  'react-dom': workspace.catalogs.react['react-dom'],
+  '@vitejs/plugin-react': workspace.catalogs.react['@vitejs/plugin-react'],
+}
+
+// Generate the versions.json file
+const versionsPath = join(pkgDir, 'src', 'versions.json')
+writeFileSync(versionsPath, JSON.stringify(versions, null, 2) + '\n')
+console.log('Generated src/versions.json with versions:', versions)
+
+// Copy template files from examples/react-vanilla-spa to templates/react-spa
+const SKIP_PATTERNS = ['node_modules', 'dist', '.test.js', '.test.ts']
+
+function shouldSkip(name: string): boolean {
+  return SKIP_PATTERNS.some((pattern) => name.includes(pattern))
+}
+
+function copyTemplate(src: string, dest: string): void {
+  const entries = readdirSync(src, { withFileTypes: true })
+
+  for (const entry of entries) {
+    if (shouldSkip(entry.name)) continue
+
+    const srcPath = join(src, entry.name)
+    const destPath = join(dest, entry.name)
+
+    if (entry.isDirectory()) {
+      mkdirSync(destPath, { recursive: true })
+      copyTemplate(srcPath, destPath)
+    } else {
+      cpSync(srcPath, destPath)
+    }
+  }
+}
+
+const templateSrc = join(rootDir, 'examples', 'react-vanilla-spa')
+const templateDest = join(pkgDir, 'templates', 'react-spa')
+
+// Clean and recreate templates directory
+if (existsSync(join(pkgDir, 'templates'))) {
+  rmSync(join(pkgDir, 'templates'), { recursive: true })
+}
+mkdirSync(templateDest, { recursive: true })
+
+copyTemplate(templateSrc, templateDest)
+console.log('Copied template files to templates/react-spa')