feat(nuxi): support mode flags for add command (#3921)

Co-authored-by: Pooya Parsa <pooya@pi0.io>

docs/content/3.api/5.commands/add.md

@@ -13,18 +13,84 @@ Option        | Default          | Description
 `--cwd` | `.` | The directory of the target application.
 `--force` | `false` | Force override file if it already exists.
 
-**Example:**
+**Modifiers:**
 
-```{bash}
+Some templates support additional modifer flags to add a suffix (like `.client` or `.get`) to their name.
+
+**Example:** `npx nuxi add plugin sockets --client` generates `/plugins/sockets.client.ts`.
+
+## `nuxi add component`
+
+* Modifier flags: `--mode client|server` or `--client` or `--server`
+
+Example:
+
+```bash
+# Generates `components/TheHeader.vue`
 npx nuxi add component TheHeader
 ```
 
-The `add` command generates new elements:
+## `nuxi add composable`
 
-* **component**: `npx nuxi add component TheHeader`
+Example:
-* **composable**: `npx nuxi add composable foo`
+
-* **layout**: `npx nuxi add layout custom`
+```bash
-* **plugin**: `npx nuxi add plugin analytics`
+# Generates `composables/foo.ts`
-* **page**: `npx nuxi add page about` or `npx nuxi add page "category/[id]"`
+npx nuxi add composable foo
-* **middleware**: `npx nuxi add middleware auth`
+```
-* **api**: `npx nuxi add api hello` (CLI will generate file under `/server/api`)
+
+## `nuxi add layout`
+
+Example:
+
+```bash
+# Generates `layouts/custom.ts`
+npx nuxi add layout custom
+```
+
+## `nuxi add plugin`
+
+* Modifier flags: `--mode client|server` or `--client`or `--server`
+
+Example:
+
+```bash
+# Generates `plugins/analytics.ts`
+npx nuxi add plugin analytics
+```
+
+## `nuxi add page`
+
+Example:
+
+```bash
+# Generates `pages/about.vue`
+npx nuxi add page about
+```
+
+```bash
+# Generates `pages/category/[id].vue`
+npx nuxi add page "category/[id]"
+```
+
+## `nuxi add middleware`
+
+* Modifier flags: `--global`
+
+Example:
+
+```bash
+# Generates `middleware/auth.ts`
+npx nuxi add middleware auth
+```
+
+## `nuxi add api`
+
+* Modifier flags: `--method=connect|delete|get|head|options|patch|post|put|trace` or `--get`, `--post`, etc.
+
+Example:
+
+```bash
+# Generates `server/api/hello.ts`
+npx nuxi add api hello
+```

packages/nuxi/src/commands/add.ts

@@ -34,7 +34,7 @@ export default defineNuxtCommand({
     const config = await kit.loadNuxtConfig({ cwd })
 
     // Resolve template
-    const res = templates[template]({ name })
+    const res = templates[template]({ name, args })
 
     // Resolve full path to generated file
     const path = resolve(config.srcDir, res.path)

packages/nuxi/src/utils/templates.ts

@@ -1,11 +1,17 @@
 import { upperFirst } from 'scule'
 
-interface Template {
+interface TemplateOptions {
-  (options: { name: string }): { path: string, contents: string }
+  name: string,
+  args: Record<string, any>
 }
 
-const api: Template = ({ name }) => ({
+interface Template {
-  path: `server/api/${name}.ts`,
+  (options: TemplateOptions): { path: string, contents: string }
+}
+
+const httpMethods = ['connect', 'delete', 'get', 'head', 'options', 'post', 'put', 'trace', 'patch']
+const api: Template = ({ name, args }) => ({
+  path: `server/api/${name}${applySuffix(args, httpMethods, 'method')}.ts`,
   contents: `
 export default defineEventHandler((event) => {
   return 'Hello ${name}'
@@ -13,15 +19,15 @@ export default defineEventHandler((event) => {
 `
 })
 
-const plugin: Template = ({ name }) => ({
+const plugin: Template = ({ name, args }) => ({
-  path: `plugins/${name}.ts`,
+  path: `plugins/${name}${applySuffix(args, ['client', 'server'], 'mode')}.ts`,
   contents: `
 export default defineNuxtPlugin((nuxtApp) => {})
   `
 })
 
-const component: Template = ({ name }) => ({
+const component: Template = ({ name, args }) => ({
-  path: `components/${name}.vue`,
+  path: `components/${name}${applySuffix(args, ['client', 'server'], 'mode')}.vue`,
   contents: `
 <script lang="ts" setup></script>
 
@@ -47,8 +53,8 @@ export const ${nameWithUsePrefix} = () => {
   }
 }
 
-const middleware: Template = ({ name }) => ({
+const middleware: Template = ({ name, args }) => ({
-  path: `middleware/${name}.ts`,
+  path: `middleware/${name}${applySuffix(args, ['global'])}.ts`,
   contents: `
 export default defineNuxtRouteMiddleware((to, from) => {})
 `
@@ -94,3 +100,20 @@ export const templates = {
   layout,
   page
 } as Record<string, Template>
+
+// -- internal utils --
+
+function applySuffix (args: TemplateOptions['args'], suffixes: string[], unwrapFrom?: string): string {
+  let suffix = ''
+  // --client
+  for (const s of suffixes) {
+    if (args[s]) {
+      suffix += '.' + s
+    }
+  }
+  // --mode=server
+  if (unwrapFrom && args[unwrapFrom] && suffixes.includes(args[unwrapFrom])) {
+    suffix += '.' + args[unwrapFrom]
+  }
+  return suffix
+}