Public Access
Running `draft new monorepo` with the Vue client and then `docker compose build client` failed three separate ways, each found by actually doing it: - No Dockerfile: the Vue overlay never shipped one. The template now has an nginx-based image (project-template#4) and the client-vue sync job embeds it plus its nginx.conf.template, with the pnpm pin rewritten to the local version like the Nuxt overlay. - Stale root lockfile: the Vue scaffold wrote a pnpm-workspace.yaml into apps/client (to approve vue-demi's build script), which made it its own workspace, so the installs updated a nested lockfile and the root one kept describing the template's Nuxt client - pnpm install --frozen-lockfile then refused it. The file is only written when the client isn't already inside a workspace (standalone `draft new client`). - Missing component: the client-vue job listed components by name, so the AuthCard.vue that Login/Signup import was never embedded. It now embeds src/components/ as a whole. Co-Authored-By: Claude Fable 5.1 <[email protected]>
360 lines
11 KiB
Go
360 lines
11 KiB
Go
package cmd
|
|
|
|
import (
|
|
"fmt"
|
|
"os"
|
|
"path/filepath"
|
|
"strings"
|
|
|
|
"github.com/spf13/cobra"
|
|
)
|
|
|
|
func init() {
|
|
newCmd.AddCommand(clientCmd)
|
|
}
|
|
|
|
var clientCmd = &cobra.Command{
|
|
Use: "client",
|
|
Short: "Create a new Draft Client project",
|
|
Long: `Create a new Draft Client project with the necessary structure and files.`,
|
|
Run: genClient,
|
|
}
|
|
|
|
func genClient(cmd *cobra.Command, args []string) {
|
|
_, projectDir, serviceName, err := promptProjectName()
|
|
if err != nil {
|
|
fmt.Printf("Prompt failed %v\n", err)
|
|
return
|
|
}
|
|
|
|
isVue, resultLabel, err := promptClientFramework()
|
|
if err != nil {
|
|
fmt.Printf("Prompt failed %v\n", err)
|
|
return
|
|
}
|
|
|
|
if err := requirePnpmAndNpx(); err != nil {
|
|
fmt.Printf("error checking for pnpm and npx: %v", err)
|
|
return
|
|
}
|
|
|
|
fmt.Printf("🚀 Scaffolding %s client '%s'...\n", resultLabel, projectDir)
|
|
|
|
if isVue {
|
|
err = scaffoldClientVue(projectDir, serviceName)
|
|
} else {
|
|
err = scaffoldClientNuxt(projectDir, serviceName)
|
|
}
|
|
if err != nil {
|
|
fmt.Printf("error scaffolding client: %v", err)
|
|
return
|
|
}
|
|
|
|
fmt.Println("✅ Done!")
|
|
}
|
|
|
|
func scaffoldClientNuxt(projectDir, serviceName string) error {
|
|
// "minimal", not "ui" - the Nuxt UI starter is what we'd otherwise get
|
|
// for free, but this project uses vue-ui-kit as its component library
|
|
// instead, wired up by hand below (Tailwind v4 + the overlay's own
|
|
// app/assets/css/main.css already import it).
|
|
if err := runCommand("", "npx", "nuxi@latest", "init", projectDir,
|
|
"--no-install",
|
|
"--packageManager=pnpm",
|
|
"-t", "minimal",
|
|
"--gitInit=false",
|
|
"-M", "@pinia/nuxt",
|
|
); err != nil {
|
|
return fmt.Errorf("error running nuxi init: %w", err)
|
|
}
|
|
|
|
version, err := pnpmVersion()
|
|
if err != nil {
|
|
return fmt.Errorf("error detecting pnpm version: %w", err)
|
|
}
|
|
replacements := map[string]string{
|
|
"App Template": serviceName,
|
|
// The overlay's Dockerfile pins the pnpm that produced the template's
|
|
// lockfile; the generated project's lockfile comes from the local pnpm.
|
|
"[email protected]": "pnpm@" + version,
|
|
}
|
|
if err := copyEmbeddedDir("embedded/client-nuxt", projectDir, replacements); err != nil {
|
|
return fmt.Errorf("error copying client overlay: %w", err)
|
|
}
|
|
|
|
if err := patchNuxtConfig(projectDir, serviceName); err != nil {
|
|
return err
|
|
}
|
|
|
|
fmt.Println("📦 Installing dependencies...")
|
|
if err := runCommand(projectDir, "pnpm", "add", "pinia", "@pinia/nuxt",
|
|
"@fernandojvideira/vue-ui-kit", "lucide-vue-next",
|
|
); err != nil {
|
|
return fmt.Errorf("error installing dependencies: %w", err)
|
|
}
|
|
|
|
// typescript itself: the "minimal" starter (unlike "ui", and unlike
|
|
// create-vue's own output) doesn't include it, but @vue/compiler-sfc
|
|
// needs a real TypeScript install to resolve cross-file type extends -
|
|
// exactly what several vue-ui-kit components' Props interfaces do.
|
|
// Pinned below 7.x (matching create-vue's own "~6.0.0" default) since
|
|
// @vue/compiler-sfc's cross-file resolution isn't compatible with
|
|
// TypeScript 7 yet - it fails with "No fs option provided to
|
|
// compileScript in non-Node environment" on every extended interface.
|
|
return runCommand(projectDir, "pnpm", "add", "-D", "tailwindcss", "@tailwindcss/vite", "typescript@~6.0.0", "vue-tsc")
|
|
}
|
|
|
|
func patchNuxtConfig(projectDir, serviceName string) error {
|
|
configPath := filepath.Join(projectDir, "nuxt.config.ts")
|
|
content, err := os.ReadFile(configPath)
|
|
if err != nil {
|
|
return fmt.Errorf("error reading nuxt.config.ts: %w", err)
|
|
}
|
|
|
|
// The "minimal" starter registers no Tailwind plugin and no CSS entry
|
|
// point on its own (the "ui" starter did both, bundled inside @nuxt/ui) -
|
|
// both are added explicitly here since the overlay's own main.css needs
|
|
// to actually run.
|
|
newContent := strings.Replace(string(content),
|
|
"// https://nuxt.com/docs/api/configuration/nuxt-config\n",
|
|
"// https://nuxt.com/docs/api/configuration/nuxt-config\nimport tailwindcss from '@tailwindcss/vite'\n\n",
|
|
1,
|
|
)
|
|
if newContent == string(content) {
|
|
return fmt.Errorf("could not find the file-header anchor in nuxt.config.ts")
|
|
}
|
|
|
|
insertion := fmt.Sprintf(`
|
|
css: ['~/assets/css/main.css'],
|
|
vite: {
|
|
plugins: [tailwindcss()],
|
|
},
|
|
|
|
app: {
|
|
head: {
|
|
title: %q,
|
|
meta: [{ name: 'description', content: %q }],
|
|
},
|
|
},
|
|
|
|
runtimeConfig: {
|
|
apiInternalUrl: '',
|
|
public: {
|
|
baseUrl: '',
|
|
},
|
|
},
|
|
`, serviceName, serviceName)
|
|
|
|
finalContent := strings.Replace(newContent, "defineNuxtConfig({", "defineNuxtConfig({"+insertion, 1)
|
|
if finalContent == newContent {
|
|
return fmt.Errorf("could not find defineNuxtConfig({ anchor in nuxt.config.ts")
|
|
}
|
|
|
|
return os.WriteFile(configPath, []byte(finalContent), 0644)
|
|
}
|
|
|
|
func insidePnpmWorkspace(dir string) bool {
|
|
for {
|
|
if _, err := os.Stat(filepath.Join(dir, "pnpm-workspace.yaml")); err == nil {
|
|
return true
|
|
}
|
|
parent := filepath.Dir(dir)
|
|
if parent == dir {
|
|
return false
|
|
}
|
|
dir = parent
|
|
}
|
|
}
|
|
|
|
func scaffoldClientVue(projectDir, serviceName string) error {
|
|
parentDir := filepath.Dir(projectDir)
|
|
leafName := filepath.Base(projectDir)
|
|
if err := os.MkdirAll(parentDir, 0755); err != nil {
|
|
return fmt.Errorf("error creating parent directory: %w", err)
|
|
}
|
|
if err := runCommand(parentDir, "pnpm", "create", "vue@latest", leafName,
|
|
"--ts", "--router", "--pinia", "--eslint", "--bare",
|
|
); err != nil {
|
|
return fmt.Errorf("error running create-vue: %w", err)
|
|
}
|
|
|
|
version, err := pnpmVersion()
|
|
if err != nil {
|
|
return err
|
|
}
|
|
if err := patchPackageManagerField(projectDir, version); err != nil {
|
|
return err
|
|
}
|
|
|
|
// A standalone client is its own workspace root and needs vue-demi's build
|
|
// script approved. Inside a monorepo the root pnpm-workspace.yaml already
|
|
// does that - and writing one here would make apps/client a separate
|
|
// workspace, so the installs below would update a nested lockfile and
|
|
// leave the root one describing the template's client instead of this one.
|
|
if !insidePnpmWorkspace(parentDir) {
|
|
if err := os.WriteFile(
|
|
filepath.Join(projectDir, "pnpm-workspace.yaml"),
|
|
[]byte("allowBuilds:\n vue-demi: true\n"),
|
|
0644,
|
|
); err != nil {
|
|
return fmt.Errorf("error writing pnpm-workspace.yaml: %w", err)
|
|
}
|
|
}
|
|
|
|
fmt.Println("📦 Installing base dependencies...")
|
|
if err := runCommand(projectDir, "pnpm", "install"); err != nil {
|
|
return fmt.Errorf("error running pnpm install: %w", err)
|
|
}
|
|
|
|
if err := runCommand(projectDir, "pnpm", "add", "tailwindcss", "@tailwindcss/vite"); err != nil {
|
|
return fmt.Errorf("error adding tailwindcss: %w", err)
|
|
}
|
|
|
|
assetsDir := filepath.Join(projectDir, "src", "assets")
|
|
if err := os.MkdirAll(assetsDir, 0755); err != nil {
|
|
return fmt.Errorf("error creating src/assets: %w", err)
|
|
}
|
|
if err := os.WriteFile(filepath.Join(assetsDir, "main.css"), []byte(vueUiKitMainCSS), 0644); err != nil {
|
|
return fmt.Errorf("error writing main.css: %w", err)
|
|
}
|
|
|
|
if err := patchViteConfigForTailwind(projectDir); err != nil {
|
|
return err
|
|
}
|
|
if err := patchTsconfigAlias(projectDir); err != nil {
|
|
return err
|
|
}
|
|
if err := patchEslintConfig(projectDir); err != nil {
|
|
return err
|
|
}
|
|
|
|
replacements := map[string]string{
|
|
"App Template": serviceName,
|
|
// The overlay's Dockerfile pins the pnpm that produced the template's
|
|
// lockfile; the generated project's lockfile comes from the local pnpm.
|
|
"[email protected]": "pnpm@" + version,
|
|
}
|
|
if err := copyEmbeddedDir("embedded/client-vue", projectDir, replacements); err != nil {
|
|
return fmt.Errorf("error copying client overlay: %w", err)
|
|
}
|
|
|
|
fmt.Println("📦 Installing remaining dependencies...")
|
|
return runCommand(projectDir, "pnpm", "add", "ofetch", "@fernandojvideira/vue-ui-kit", "lucide-vue-next")
|
|
}
|
|
|
|
// The library's theme brings its own tokens; --success/--warning are added on
|
|
// top the same way a consumer would (see vue-ui-kit's THEMING.md) since the
|
|
// base theme deliberately doesn't define them.
|
|
const vueUiKitMainCSS = `@import "tailwindcss";
|
|
@source "../../node_modules/@fernandojvideira/vue-ui-kit/src";
|
|
@import "@fernandojvideira/vue-ui-kit/theme.css";
|
|
|
|
:root {
|
|
--success: 142 71% 35%;
|
|
--success-foreground: 0 0% 98%;
|
|
--warning: 38 92% 40%;
|
|
--warning-foreground: 0 0% 98%;
|
|
}
|
|
.dark {
|
|
--success: 142 71% 45%;
|
|
--success-foreground: 0 0% 9%;
|
|
--warning: 38 92% 55%;
|
|
--warning-foreground: 0 0% 9%;
|
|
}
|
|
@theme inline {
|
|
--color-success: hsl(var(--success));
|
|
--color-success-foreground: hsl(var(--success-foreground));
|
|
--color-warning: hsl(var(--warning));
|
|
--color-warning-foreground: hsl(var(--warning-foreground));
|
|
}
|
|
`
|
|
|
|
func patchPackageManagerField(projectDir, version string) error {
|
|
pkgPath := filepath.Join(projectDir, "package.json")
|
|
content, err := os.ReadFile(pkgPath)
|
|
if err != nil {
|
|
return fmt.Errorf("error reading package.json: %w", err)
|
|
}
|
|
|
|
newContent := strings.Replace(string(content), "{",
|
|
fmt.Sprintf("{\n \"packageManager\": \"pnpm@%s\",", version), 1)
|
|
if newContent == string(content) {
|
|
return fmt.Errorf("could not find opening brace in package.json")
|
|
}
|
|
|
|
return os.WriteFile(pkgPath, []byte(newContent), 0644)
|
|
}
|
|
|
|
func patchViteConfigForTailwind(projectDir string) error {
|
|
configPath := filepath.Join(projectDir, "vite.config.ts")
|
|
content, err := os.ReadFile(configPath)
|
|
if err != nil {
|
|
return fmt.Errorf("error reading vite.config.ts: %w", err)
|
|
}
|
|
|
|
newContent := strings.Replace(string(content),
|
|
"import vueDevTools from 'vite-plugin-vue-devtools'",
|
|
"import vueDevTools from 'vite-plugin-vue-devtools'\nimport tailwindcss from '@tailwindcss/vite'",
|
|
1,
|
|
)
|
|
newContent = strings.Replace(newContent, "vueDevTools(),", "vueDevTools(),\n tailwindcss(),", 1)
|
|
|
|
if newContent == string(content) {
|
|
return fmt.Errorf("could not find expected anchors in vite.config.ts")
|
|
}
|
|
|
|
return os.WriteFile(configPath, []byte(newContent), 0644)
|
|
}
|
|
|
|
func patchTsconfigAlias(projectDir string) error {
|
|
configPath := filepath.Join(projectDir, "tsconfig.json")
|
|
content, err := os.ReadFile(configPath)
|
|
if err != nil {
|
|
return fmt.Errorf("error reading tsconfig.json: %w", err)
|
|
}
|
|
|
|
aliasBlock := ` ],
|
|
"compilerOptions": {
|
|
"baseUrl": ".",
|
|
"paths": {
|
|
"@/*": ["./src/*"]
|
|
}
|
|
}
|
|
}`
|
|
newContent := strings.Replace(string(content), " ]\n}", aliasBlock, 1)
|
|
if newContent == string(content) {
|
|
return fmt.Errorf("could not find expected anchor in tsconfig.json")
|
|
}
|
|
|
|
return os.WriteFile(configPath, []byte(newContent), 0644)
|
|
}
|
|
|
|
func patchEslintConfig(projectDir string) error {
|
|
configPath := filepath.Join(projectDir, "eslint.config.ts")
|
|
content, err := os.ReadFile(configPath)
|
|
if err != nil {
|
|
return fmt.Errorf("error reading eslint.config.ts: %w", err)
|
|
}
|
|
|
|
override := ` {
|
|
name: 'app/rules-overrides',
|
|
rules: {
|
|
'vue/multi-word-component-names': 'off',
|
|
'@typescript-eslint/no-explicit-any': 'off',
|
|
},
|
|
},
|
|
|
|
...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),`
|
|
|
|
newContent := strings.Replace(string(content),
|
|
" ...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),",
|
|
override,
|
|
1,
|
|
)
|
|
if newContent == string(content) {
|
|
return fmt.Errorf("could not find expected anchor in eslint.config.ts")
|
|
}
|
|
|
|
return os.WriteFile(configPath, []byte(newContent), 0644)
|
|
}
|