refactor internall logic of scripts to allow adding more options

package.json

@@ -4,7 +4,7 @@
   "version": "0.5.0",
   "description": "The productive way to build fullstack Nuxt 3 applications, like create-t3-app but for Nuxt.",
   "scripts": {
-    "dev": "vite-node src/",
+    "dev": "vite-node src/ -- --nocounting",
     "dev:ci": "vite-node src/ -- --ci",
     "lint": "eslint \"./src/**/*.{ts,tsx}\" --max-warnings=0",
     "typecheck": "tsc --noEmit",
@@ -51,6 +51,7 @@
     "@nuxt/schema": "^3.0.0",
     "chalk": "^5.2.0",
     "commander": "^9.4.1",
+    "consola": "^3.2.3",
     "defu": "^6.1.1",
     "execa": "^6.1.0",
     "giget": "^1.0.0",

src/configs/lint/index.ts → src/configs/eslint.ts

@@ -1,4 +1,4 @@
-import type { PackageConfig } from '../index'
+import type { Config } from '../types'
 
 const eslintConfig = `import antfu from '@antfu/eslint-config'
 
@@ -43,10 +43,7 @@ export default antfu({
 })
 `
 
-const lint: PackageConfig = {
-  type: 'template',
-  humanReadableName: 'ESLint',
-  description: 'Lint your code.',
+const eslint: Config = {
   scripts: [{
     name: 'lint',
     command: 'eslint .'
@@ -68,7 +65,6 @@ const lint: PackageConfig = {
     path: 'eslint.config.js',
     content: eslintConfig
   }],
-  tasksPostInstall: [],
 }
 
-export default lint
+export default eslint

src/steps/4.addCi.ts → src/configs/github-actions.ts

@@ -1,6 +1,4 @@
-import { mkdir, writeFile } from 'node:fs/promises'
-import { getResolver } from '../utils/getResolver'
-import type { Preferences } from '../prompts'
+import type { Config } from '../types'
 
 const GITHUB_ACTIONS_TEMPLATE = `
 name: CI
@@ -57,14 +55,14 @@ jobs:
   # TODO: Add more steps here, like "nr test" as you add the tooling for it
 `
 
-export default async (preferences: Preferences, templateDir: string) => {
-  // Cheviot already has github actions by default
-  if (preferences.setStack === 'cheviot') {
-    return
-  }
-
-  const resolver = getResolver(templateDir)
-
-  await mkdir(resolver('.github/workflows'), { recursive: true })
-  await writeFile(resolver('.github/workflows/ci.yaml'), GITHUB_ACTIONS_TEMPLATE)
+const githubActions: Config = {
+  scripts: [],
+  dependencies: [],
+  nuxtConfig: {},
+  files: [{
+    path: '.github/workflows/ci.yaml',
+    content: GITHUB_ACTIONS_TEMPLATE
+  }],
 }
+
+export default githubActions

src/configs/index.ts

@@ -1,40 +1,23 @@
-import type { NuxtConfig } from '@nuxt/schema'
-import type { Dependency, Script } from '../utils/addPackageDependency'
-import prisma from './prisma'
-import auth from './auth'
-import trpc from './trpc'
+import type { Config, ModuleConfig } from '../types'
 import tailwind from './tailwind'
 import naiveui from './naiveui'
-import lint from './lint'
-
-export declare interface File {
-  path: string
-  content: string
-}
+import prisma from './prisma'
+import trpc from './trpc'
+import sidebaseAuth from './sidebase-auth'
+import eslint from './eslint'
+import githubActions from './github-actions'
 
-export declare interface PackageConfig {
-  type: 'module' | 'template'
-  humanReadableName: string
-  description: string
-  dependencies: Dependency[]
-  scripts: Script[]
-  nuxtConfig: NuxtConfig
-  files: File[]
-  tasksPostInstall: string[]
-  indexVue?: {
-    html: string
-    css?: string
-    js?: string
-  }
+export type Modules = 'prisma' | 'sidebase-auth' | 'trpc' | 'tailwind' | 'naiveui'
+export const modules: Record<Modules, ModuleConfig> = {
+  'tailwind': tailwind,
+  'naiveui': naiveui,
+  'prisma': prisma,
+  'trpc': trpc,
+  'sidebase-auth': sidebaseAuth
 }
 
-// Package options
-export type Packages = 'prisma' | 'auth' | 'trpc' | 'tailwind' | 'naiveui' | 'lint'
-export const packageConfigs: Record<Packages, PackageConfig> = {
-  prisma,
-  auth,
-  trpc,
-  tailwind,
-  naiveui,
-  lint
+export type Configs = 'eslint' | 'github-actions'
+export const configs: Record<Configs, Config> = {
+  'eslint': eslint,
+  'github-actions': githubActions
 }

src/configs/naiveui/index.ts → src/configs/naiveui.ts

@@ -1,5 +1,5 @@
-import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from '../../generators/generateModuleComponents'
-import type { PackageConfig } from '../index'
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from '../generators/generateModuleComponents'
+import type { ModuleConfig } from '../types'
 
 const naiveDemoComponent = `<script setup lang="ts">
 const showModal = ref(false)
@@ -27,8 +27,7 @@ const showModal = ref(false)
 </template>
 `
 
-const naiveui: PackageConfig = {
-  type: 'module',
+const naiveui: ModuleConfig = {
   humanReadableName: 'Naive UI',
   description: 'A Vue 3 Component Library. Complete, Customizable, Uses TypeScript, Fast. See more: https://www.naiveui.com/',
   scripts: [],

src/configs/prisma/index.ts → src/configs/prisma.ts

@@ -1,5 +1,5 @@
-import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from '../../generators/generateModuleComponents'
-import type { PackageConfig } from '../index'
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from '../generators/generateModuleComponents'
+import type { ModuleConfig } from '../types'
 
 const prismaFile = `// This is your Prisma schema file,
 // learn more about it in the docs: https://pris.ly/d/prisma-schema
@@ -101,8 +101,7 @@ const { data: examples } = useFetch('/api/examples')
 </template>
 `
 
-const prisma: PackageConfig = {
-  type: 'module',
+const prisma: ModuleConfig = {
   humanReadableName: 'Prisma ORM',
   description: 'Next-generation Node.js and TypeScript ORM. See more: https://www.prisma.io/',
   scripts: [],

src/configs/auth/index.ts → src/configs/sidebase-auth.ts

@@ -1,5 +1,5 @@
-import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from '../../generators/generateModuleComponents'
-import type { PackageConfig } from '../index'
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from '../generators/generateModuleComponents'
+import type { ModuleConfig } from '../types'
 
 const nuxtAuthServerFile = `import CredentialsProvider from 'next-auth/providers/credentials'
 import GithubProvider from 'next-auth/providers/github'
@@ -79,8 +79,7 @@ const { status, data, signIn, signOut } = useAuth()
 </template>
 `
 
-const auth: PackageConfig = {
-  type: 'module',
+const sidebaseAuth: ModuleConfig = {
   humanReadableName: 'nuxt-auth',
   description: 'Authentication via OAuth, Credentials and magic email flows. Wraps the popular NextAuth.js with 12k stars. See more: https://sidebase.io/nuxt-auth',
   scripts: [],
@@ -114,4 +113,4 @@ const auth: PackageConfig = {
   indexVue: generateModuleHTMLSnippet('WelcomeAuthDemo'),
 }
 
-export default auth
+export default sidebaseAuth

src/configs/tailwind/index.ts → src/configs/tailwind.ts

@@ -1,5 +1,5 @@
-import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from '../../generators/generateModuleComponents'
-import type { PackageConfig } from '../index'
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from '../generators/generateModuleComponents'
+import type { ModuleConfig } from '../types'
 
 const tailwindDemoComponent = `<template>
   ${generateModuleHTMLComponent(
@@ -14,8 +14,7 @@ const tailwindDemoComponent = `<template>
 </template>
 `
 
-const tailwind: PackageConfig = {
-  type: 'module',
+const tailwind: ModuleConfig = {
   humanReadableName: 'Tailwind CSS',
   description: 'A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup. See more: https://tailwindcss.com/',
   scripts: [],

src/configs/trpc/index.ts → src/configs/trpc.ts

@@ -1,5 +1,5 @@
-import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from '../../generators/generateModuleComponents'
-import type { PackageConfig } from '../index'
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from '../generators/generateModuleComponents'
+import type { ModuleConfig } from '../types'
 
 const nuxtTrpcRootConfig = `/**
  * This is your entry point to setup the root configuration for tRPC on the server.
@@ -125,8 +125,7 @@ const hello = await $client.hello.useQuery({ text: 'client' })
 </template>
 `
 
-const trpc: PackageConfig = {
-  type: 'module',
+const trpc: ModuleConfig = {
   humanReadableName: 'tRPC 10',
   description: 'Build end-to-end typesafe APIs in Nuxt applications. See more: https://trpc.io/',
   scripts: [],

src/index.ts

@@ -1,35 +1,35 @@
 #!/usr/bin/env node
-import { addCi, addModules, addReadme, downloadTemplate, initGit, npmInstall } from './steps'
-import { sayGoodbye, sayQuickWelcome, saySetupIsRunning, sayWelcome } from './messages'
+import { errorMessage, sayGoodbye, sayQuickWelcome, saySetupIsRunning, sayWelcome, wrapInSpinner } from './messages'
+import type { Preferences } from './types'
 import { getUserPreferences } from './prompts'
-import { wrapInSpinner } from './utils/spinner'
-import { getUserPkgManager } from './utils/getUserPkgManager'
+import { logTelemetry } from './utils/logTelemetry'
 import { cliOptions } from './utils/parseCliOptions'
-import { count } from './utils/count'
+import { addReadMe, buildNuxtConfig, buildPackage, downloadTemplate, getConfigs, initGit, install, writeFiles } from './steps'
+import { getUserPkgManager } from './utils/getUserPkgManager'
 
 async function main() {
   const { quick, ci } = cliOptions
+
+  // Welcome the User
   if (!quick) {
     await sayWelcome()
   }
   else {
-    sayQuickWelcome()
+    await sayQuickWelcome()
   }
 
-  let preferences
+  // Collect User preferences
+  let preferences: Preferences = {
+    setProjectName: 'my-sidebase-app',
+    setStack: 'merino',
+    addModules: ['prisma', 'sidebase-auth', 'trpc', 'tailwind', 'naiveui'],
+    runGitInit: true,
+    addCi: 'github',
+    runInstall: true
+  }
   if (!ci) {
     preferences = await getUserPreferences()
-    count(preferences)
-  }
-  else {
-    preferences = {
-      setProjectName: 'my-sidebase-app',
-      setStack: 'merino',
-      addModules: ['prisma', 'auth', 'trpc', 'tailwind', 'naiveui'],
-      runGitInit: true,
-      addCi: 'github',
-      runInstall: true
-    }
+    logTelemetry(preferences)
   }
 
   if (!quick) {
@@ -39,42 +39,35 @@ async function main() {
   // 1. Download the Nuxt 3 template
   const template = await wrapInSpinner(`Adding Nuxt 3 ${preferences.setStack}-template`, downloadTemplate, preferences)
 
-  // 2. Add modules
-  if (preferences.setStack === 'merino') {
-    await wrapInSpinner('Adding Nuxt modules', addModules, preferences, template.dir)
-  }
+  // 2. Get Configs and modules
+  const { configs, modules } = getConfigs(preferences)
+
+  // 3. Build `package.json`
+  await wrapInSpinner('Building `package.json`', buildPackage, template.dir, configs, modules)
 
-  // 4. Initialize git
+  // 4. Build `nuxt.config.ts`
+  await wrapInSpinner('Building `nuxt.config.ts`', buildNuxtConfig, template.dir, configs, modules)
+
+  // 5. Write files
+  await wrapInSpinner('Writing files', writeFiles, template.dir, configs, modules)
+
+  // 6. Initialize git
   if (preferences.runGitInit) {
     await wrapInSpinner('Running `git init`', initGit, template.dir)
   }
 
-  // 5. Add CI
-  if (preferences.addCi === 'github') {
-    await wrapInSpinner('Adding CI template', addCi, preferences, template.dir)
-  }
-
-  // 6. Run install
+  // 7. Run install
   if (preferences.runInstall) {
-    await wrapInSpinner(`Running \`${getUserPkgManager()} install\``, npmInstall, template.dir)
+    await wrapInSpinner(`Running \`${getUserPkgManager()} install\``, install, template.dir)
   }
 
-  // 7. Write readme
-  await wrapInSpinner('Adding README', addReadme, preferences, template.dir)
+  // 8. Write readme
+  await wrapInSpinner('Adding README', addReadMe, preferences, template.dir)
 
   sayGoodbye(preferences)
 }
 
 main().catch((err) => {
-  console.error('Aborting installation...')
-  if (err instanceof Error) {
-    console.error(err)
-  }
-  else {
-    console.error(
-      'An unknown error has occurred. Please open an issue on github with the below:',
-    )
-    console.log(err)
-  }
+  errorMessage(err)
   process.exit(1)
 })