fix(add-template): expose template options

Author: danielroe

packages/nuxt-cli/src/commands/add-template.ts

@@ -1,12 +1,12 @@
 importtype{TemplateName}from'../utils/templates/names'
 
-import{existsSync,promisesasfsp}from'node:fs'
+import{promisesasfsp}from'node:fs'
 importprocessfrom'node:process'
-
 import{styleText}from'node:util'
-import{cancel,intro,outro}from'@clack/prompts'
+
+import{intro,outro}from'@clack/prompts'
 import{defineCommand}from'citty'
-import{dirname,extname,resolve}from'pathe'
+import{dirname,resolve}from'pathe'
 
 import{loadKit}from'../utils/kit'
 import{logger}from'../utils/logger'
@@ -25,9 +25,31 @@ export default defineCommand({
  ...logLevelArgs,
 force: {
 type: 'boolean',
-description: 'Force override file if it already exists',
+description: 'Overwrite the file if it already exists',
 default: false,
 },
+mode: {
+type: 'string',
+valueHint: 'client|server',
+description: 'Add a client or server suffix to a component or plugin',
+},
+method: {
+type: 'string',
+valueHint: 'connect|delete|get|head|options|patch|post|put|trace',
+description: 'Add an HTTP method suffix to an API route',
+},
+global: {
+type: 'boolean',
+description: 'Create global route middleware',
+},
+api: {
+type: 'boolean',
+description: 'Create a server route in the API directory',
+},
+pages: {
+type: 'boolean',
+description: 'Include NuxtPage and NuxtLayout in the app template',
+},
 template: {
 type: 'positional',
 required: true,
@@ -47,55 +69,56 @@ export default defineCommand({
 
 consttemplateName=ctx.args.templateasTemplateName
 
-// Validate template name
 if(!templateNames.includes(templateName)){
-consttemplateNames=Object.keys(templates).map(name=>styleText('cyan',name))
-constlastTemplateName=templateNames.pop()
+constsupported=templateNames.map(name=>styleText('cyan',name))
+constlast=supported.pop()
 logger.error(`Template ${styleText('cyan',templateName)} is not supported.`)
-logger.info(`Possible values are ${templateNames.join(', ')} or ${lastTemplateName}.`)
+logger.info(`Possible values are ${supported.join(', ')} or ${last}.`)
 process.exit(1)
 }
 
-// Validate options
-constext=extname(ctx.args.name)
-constname
-=ext==='.vue'||ext==='.ts'
- ? ctx.args.name.replace(ext,'')
- : ctx.args.name
-
-if(!name){
-cancel('name argument is missing!')
+if(ctx.args.mode&&ctx.args.mode!=='client'&&ctx.args.mode!=='server'){
+logger.error(`Mode must be ${styleText('cyan','client')} or ${styleText('cyan','server')}.`)
+process.exit(1)
+}
+if(ctx.args.method&&!['connect','delete','get','head','options','patch','post','put','trace'].includes(ctx.args.method)){
+logger.error(`HTTP method ${styleText('cyan',ctx.args.method)} is not supported.`)
 process.exit(1)
 }
 
-// Load config in order to respect srcDir
-constkit=awaitloadKit(cwd)
-constconfig=awaitkit.loadNuxtConfig({ cwd })
-
-// Resolve template
-consttemplate=templates[templateNameaskeyoftypeoftemplates]
-
-constres=template({ name,args: ctx.args,nuxtOptions: config})
+constext=['.vue','.ts'].find(ext=>ctx.args.name.endsWith(ext))
+constname=ext
+ ? ctx.args.name.slice(0,-ext.length)
+ : ctx.args.name
 
-// Ensure not overriding user code
-if(!ctx.args.force&&existsSync(res.path)){
-logger.error(`File exists at ${styleText('cyan',relativeToProcess(res.path))}.`)
-logger.info(`Use ${styleText('cyan','--force')} to override or use a different name.`)
+if(!name){
+logger.error('Template name must not be empty.')
 process.exit(1)
 }
 
-// Ensure parent directory exists
+constkit=awaitloadKit(cwd)
+constconfig=awaitkit.loadNuxtConfig({ cwd })
+constres=templates[templateName]({ name,args: ctx.args,nuxtOptions: config})
 constparentDir=dirname(res.path)
-if(!existsSync(parentDir)){
-logger.step(`Creating directory ${styleText('cyan',relativeToProcess(parentDir))}.`)
+constcreatedDir=awaitfsp.mkdir(parentDir,{recursive: true})
+if(createdDir){
+logger.step(`Created directory ${styleText('cyan',relativeToProcess(parentDir))}.`)
 if(templateName==='page'){
 logger.info('This enables vue-router functionality!')
 }
-awaitfsp.mkdir(parentDir,{recursive: true})
 }
 
-// Write file
-awaitfsp.writeFile(res.path,`${res.contents.trim()}\n`)
+try{
+awaitfsp.writeFile(res.path,`${res.contents.trim()}\n`,{flag: ctx.args.force ? 'w' : 'wx'})
+}
+catch(error){
+if(!ctx.args.force&&(errorasNodeJS.ErrnoException).code==='EEXIST'){
+logger.error(`File exists at ${styleText('cyan',relativeToProcess(res.path))}.`)
+logger.info(`Use ${styleText('cyan','--force')} to overwrite it or use a different name.`)
+process.exit(1)
+}
+throwerror
+}
 logger.success(`Created ${styleText('cyan',relativeToProcess(res.path))}.`)
 outro(`Generated a new ${styleText('cyan',templateName)}!`)
 },

packages/nuxt-cli/test/unit/commands/add-template.spec.ts

@@ -0,0 +1,71 @@
+import{mkdtemp,readFile,rm,writeFile}from'node:fs/promises'
+import{tmpdir}from'node:os'
+import{join}from'node:path'
+import{afterEach,beforeEach,describe,expect,it,vi}from'vitest'
+
+importcommandfrom'../../../src/commands/add-template'
+import{runCommandDef}from'../../../src/run-command'
+
+letcwd: string
+
+beforeEach(async()=>{
+cwd=awaitmkdtemp(join(tmpdir(),'nuxt-add-template-'))
+vi.spyOn(process,'exit').mockImplementation((code)=>{
+thrownewError(`process exited with code ${code}`)
+})
+})
+
+afterEach(async()=>{
+vi.restoreAllMocks()
+awaitrm(cwd,{recursive: true,force: true})
+})
+
+asyncfunctionrun(...args: string[]){
+returnrunCommandDef(command,[...args,'--cwd',cwd])
+}
+
+describe('add-template command',()=>{
+it('generates nested templates and strips only the final supported extension',async()=>{
+awaitrun('component','admin/user-card.vue')
+
+constpath=join(cwd,'components/admin/user-card.vue')
+expect(awaitreadFile(path,'utf8')).toContain('Component: admin/user-card')
+expect(awaitreadFile(path,'utf8')).toMatch(/\n$/)
+})
+
+it('exposes template-specific options',async()=>{
+awaitrun('api','users','--method','get')
+awaitrun('component','island','--mode','client')
+awaitrun('middleware','auth','--global')
+awaitrun('server-route','health','--api')
+awaitrun('app','ignored','--pages')
+
+awaitexpect(readFile(join(cwd,'server/api/users.get.ts'),'utf8')).resolves.toContain('return \'Hello users\'')
+awaitexpect(readFile(join(cwd,'components/island.client.vue'),'utf8')).resolves.toContain('Component: island')
+awaitexpect(readFile(join(cwd,'middleware/auth.global.ts'),'utf8')).resolves.toContain('defineNuxtRouteMiddleware')
+awaitexpect(readFile(join(cwd,'server/api/health.ts'),'utf8')).resolves.toContain('defineEventHandler')
+awaitexpect(readFile(join(cwd,'app.vue'),'utf8')).resolves.toContain('<NuxtPage/>')
+})
+
+it('rejects unsupported suffix options',async()=>{
+awaitexpect(run('component','island','--mode','worker')).rejects.toThrow('process exited with code 1')
+awaitexpect(run('api','users','--method','fetch')).rejects.toThrow('process exited with code 1')
+})
+
+it('rejects names containing only an extension',async()=>{
+awaitexpect(run('component','.vue')).rejects.toThrow('process exited with code 1')
+awaitexpect(readFile(join(cwd,'components/.vue'),'utf8')).rejects.toMatchObject({code: 'ENOENT'})
+})
+
+it('does not overwrite an existing file without force',async()=>{
+awaitrun('composable','counter')
+constpath=join(cwd,'composables/counter.ts')
+awaitwriteFile(path,'existing\n')
+
+awaitexpect(run('composable','counter')).rejects.toThrow()
+awaitexpect(readFile(path,'utf8')).resolves.toBe('existing\n')
+
+awaitrun('composable','counter','--force')
+awaitexpect(readFile(path,'utf8')).resolves.toContain('export const useCounter')
+})
+})

packages/nuxt-cli/test/unit/help.spec.ts

@@ -93,9 +93,14 @@ describe('help', () => {
 
  OPTIONS
 
- --cwd=<directory> Specify the root directory of your Nuxt project (Default: .)
- --logLevel=<silent|info|verbose> Specify build-time log level 
- --force Force override file if it already exists (Default: false) 
+ --cwd=<directory> Specify the root directory of your Nuxt project (Default: .)
+ --logLevel=<silent|info|verbose> Specify build-time log level 
+ --force Overwrite the file if it already exists (Default: false) 
+ --mode=<client|server> Add a client or server suffix to a component or plugin 
+ --method=<connect|delete|get|head|options|patch|post|put|trace> Add an HTTP method suffix to an API route 
+ --global Create global route middleware 
+ --api Create a server route in the API directory 
+ --pages Include NuxtPage and NuxtLayout in the app template 
  "
  `)
 })