feat: add generate component command

Author: chrisberthe

src/commands/theme/generate/component.ts

@@ -0,0 +1,351 @@
+/**
+ * This command scaffolds a new component folder (and optional supporting files) into a theme.
+ * The structure supports blocks, elements, sections, etc., and follows a consistent naming and folder convention.
+ */
+
+import { Args as OclifArgs } from '@oclif/core'
+import { renderSelectPrompt, renderTextPrompt } from '@shopify/cli-kit/node/ui'
+import fs from 'node:fs'
+import path from 'node:path'
+
+import BaseCommand from '../../../utilities/base-command.js'
+import {
+  generateCSSContent,
+  generateJSContent,
+  generateLiquidContent,
+  generateSetupSectionContent,
+  generateSetupTemplateContent,
+  generateSnippetContent,
+  generateSnippetJSContent,
+} from '../../../utilities/content-generation.js'
+import { writeFileIfChanged } from '../../../utilities/files.js'
+import Flags from '../../../utilities/flags.js'
+import { ComponentParts, DirectoryPaths, FileToCreate, GenerationContext } from '../../../utilities/types.js'
+
+export default class GenerateComponent extends BaseCommand {
+  static override args = {
+    name: OclifArgs.string({
+      description: 'component name (e.g., element.button)',
+      required: false,
+    }),
+  }
+
+  static override description = 'Generate a new component with optional supporting files'
+
+  static override examples = [
+    '<%= config.bin %> <%= command.id %> element.button --css --js',
+    '<%= config.bin %> <%= command.id %> element.button --snippets=gift-form,upsell --snippet-css',
+    '<%= config.bin %> <%= command.id %> --dry-run',
+  ]
+
+  static override flags = Flags.getDefinitions([
+    Flags.CSS,
+    Flags.DRY_RUN,
+    Flags.FORCE,
+    Flags.JS,
+    Flags.ONLY,
+    Flags.QUIET,
+    Flags.SETUP,
+    Flags.SNIPPET_CSS,
+    Flags.SNIPPET_JS,
+    Flags.SNIPPETS,
+    Flags.TYPE,
+  ])
+
+  protected override async init(): Promise<void> {
+    await super.init(GenerateComponent)
+  }
+
+  public async run(): Promise<void> {
+    const context = await this.buildGenerationContext()
+    const directories = this.setupDirectoryPaths(context.component)
+    const filesToCreate = this.buildFileList(context, directories)
+
+    if (this.flags[Flags.DRY_RUN]) {
+      this.showDryRunResults(context.component, filesToCreate)
+      return
+    }
+
+    this.createFiles(context.component, filesToCreate)
+  }
+
+  private addAssetFiles(context: GenerationContext, directories: DirectoryPaths, files: FileToCreate[]): void {
+    if (this.flags[Flags.CSS] && this.shouldGenerate('css', context.onlyList)) {
+      files.push({
+        content: generateCSSContent(context.component.fullName),
+        description: `assets/${context.component.fullName}.css`,
+        path: path.join(directories.assetsDir, `${context.component.fullName}.css`),
+      })
+    }
+
+    if (this.flags[Flags.JS] && this.shouldGenerate('js', context.onlyList)) {
+      files.push({
+        content: generateJSContent(context.component.fullName),
+        description: `assets/${context.component.fullName}.js`,
+        path: path.join(directories.assetsDir, `${context.component.fullName}.js`),
+      })
+    }
+  }
+
+  private addLiquidFile(context: GenerationContext, directories: DirectoryPaths, files: FileToCreate[]): void {
+    if (!this.shouldGenerate('liquid', context.onlyList)) return
+
+    files.push({
+      content: generateLiquidContent(context.component.fullName, this.flags[Flags.JS]),
+      description: `${context.component.fullName}.liquid`,
+      path: path.join(directories.componentDir, `${context.component.fullName}.liquid`),
+    })
+  }
+
+  private addSetupFiles(context: GenerationContext, directories: DirectoryPaths, files: FileToCreate[]): void {
+    if (!this.flags[Flags.SETUP] || !this.shouldGenerate('setup', context.onlyList)) return
+
+    files.push(
+      {
+        content: generateSetupSectionContent(context.component.fullName),
+        description: `setup/sections/${context.component.fullName.replace('.', '-')}.liquid`,
+        path: path.join(directories.setupSectionsDir, `${context.component.fullName.replace('.', '-')}.liquid`),
+      },
+      {
+        content: generateSetupTemplateContent(context.component.fullName),
+        description: `setup/templates/index.${context.component.fullName.replace('.', '-')}.json`,
+        path: path.join(directories.setupTemplatesDir, `index.${context.component.fullName.replace('.', '-')}.json`),
+      }
+    )
+  }
+
+  private addSnippetFiles(context: GenerationContext, directories: DirectoryPaths, files: FileToCreate[]): void {
+    if (context.snippets.length === 0 || !this.shouldGenerate('snippets', context.onlyList)) return
+
+    for (const snippetName of context.snippets) {
+      // Main snippet file
+      files.push({
+        content: generateSnippetContent(context.component.fullName, snippetName),
+        description: `snippets/${context.component.fullName}.${snippetName}.liquid`,
+        path: path.join(directories.snippetsDir, `${context.component.fullName}.${snippetName}.liquid`),
+      })
+
+      // Snippet CSS
+      if (this.flags[Flags.SNIPPET_CSS]) {
+        files.push({
+          content: generateCSSContent(`${context.component.fullName.replace('.', '-')}__${snippetName}`),
+          description: `assets/${context.component.fullName}.${snippetName}.css`,
+          path: path.join(directories.assetsDir, `${context.component.fullName}.${snippetName}.css`),
+        })
+      }
+
+      // Snippet JavaScript
+      if (this.flags[Flags.SNIPPET_JS]) {
+        files.push({
+          content: generateSnippetJSContent(context.component.fullName, snippetName),
+          description: `assets/${context.component.fullName}.${snippetName}.js`,
+          path: path.join(directories.assetsDir, `${context.component.fullName}.${snippetName}.js`),
+        })
+      }
+    }
+  }
+
+  private buildFileList(context: GenerationContext, directories: DirectoryPaths): FileToCreate[] {
+    const files: FileToCreate[] = []
+
+    // Core component files
+    this.addLiquidFile(context, directories, files)
+    this.addAssetFiles(context, directories, files)
+
+    // Optional files
+    this.addSnippetFiles(context, directories, files)
+    this.addSetupFiles(context, directories, files)
+
+    return files
+  }
+
+  private async buildGenerationContext(): Promise<GenerationContext> {
+    const component = await this.parseComponentName()
+    const snippets = this.parseSnippetList()
+    const onlyList = this.parseOnlyList()
+
+    return { component, onlyList, snippets }
+  }
+
+  private capitalizeFirst(str: string): string {
+    return str.charAt(0).toUpperCase() + str.slice(1)
+  }
+
+  private createFiles(component: ComponentParts, filesToCreate: FileToCreate[]): void {
+    const created: string[] = []
+    const skipped: string[] = []
+
+    for (const file of filesToCreate) {
+      try {
+        const wasCreated = this.writeFileIfNotExists(file.path, file.content, this.flags[Flags.FORCE])
+        if (wasCreated) {
+          created.push(file.description)
+        } else {
+          skipped.push(file.description)
+        }
+      } catch (error) {
+        this.error(`Failed to create file ${file.description}: ${error instanceof Error ? error.message : 'Unknown error'}`)
+      }
+    }
+
+    this.reportResults(component, created, skipped)
+  }
+
+  private ensureDirectoryExists(dirPath: string): void {
+    if (!fs.existsSync(dirPath)) {
+      fs.mkdirSync(dirPath, { recursive: true })
+    }
+  }
+
+  private extractTypeFromName(rawName: string): { name: string; type?: string } {
+    const hasDot = rawName.includes('.')
+
+    if (!hasDot) {
+      return { name: rawName }
+    }
+
+    const parts = rawName.split('.')
+    const type = parts[0]
+    const name = parts.slice(1).join('.')
+
+    // Check for type conflicts
+    if (type && this.flags[Flags.TYPE] && type !== this.flags[Flags.TYPE]) {
+      this.warn(`Name suggests type "${type}" but --type=${this.flags[Flags.TYPE]} was passed. Using "${type}".`)
+    }
+
+    return { name, type }
+  }
+
+  private async parseComponentName(): Promise<ComponentParts> {
+    const nameArg = this.args.name
+    const rawName = nameArg || await this.promptForComponentName()
+
+    const { name, type } = this.extractTypeFromName(rawName)
+    const finalType = type || this.flags[Flags.TYPE] || await this.promptForComponentType()
+
+    return {
+      fullName: `${finalType}.${name}`,
+      name,
+      type: finalType,
+    }
+  }
+
+  private parseOnlyList(): string[] {
+    const onlyFlag = this.flags[Flags.ONLY]
+    if (!onlyFlag || onlyFlag.length === 0) return []
+
+    return onlyFlag.flatMap((item: string | string[]) =>
+      typeof item === 'string' ? item.split(',').map(s => s.trim()) : item
+    ).filter(Boolean)
+  }
+
+  private parseSnippetList(): string[] {
+    const snippetsFlag = this.flags[Flags.SNIPPETS]
+    if (!snippetsFlag || snippetsFlag.length === 0) return []
+
+    return snippetsFlag.flatMap((snippet: string | string[]) =>
+      typeof snippet === 'string' ? snippet.split(',').map(s => s.trim()) : snippet
+    ).filter(Boolean)
+  }
+
+  private async promptForComponentName(): Promise<string> {
+    return renderTextPrompt({
+      message: 'What should the component be called?',
+      validate(input) {
+        if (!input.trim()) return 'Component name is required'
+        if (!/^[\w.-]+$/.test(input)) {
+          return 'Component name can only contain letters, numbers, dots, hyphens, and underscores'
+        }
+      },
+    })
+  }
+
+  private async promptForComponentType(): Promise<string> {
+    const componentTypes = ['block', 'element', 'form', 'layout', 'section', 'utility'] as const
+    const type = await renderSelectPrompt({
+      choices: [
+        ...componentTypes.map(t => ({ label: this.capitalizeFirst(t), value: t })),
+        { label: 'Other (specify custom type)', value: 'other' },
+      ],
+      message: 'What type of component?',
+    })
+
+    if (type === 'other') {
+      return renderTextPrompt({
+        message: 'Enter custom component type:',
+        validate(input) {
+          if (!input.trim()) return 'Component type is required'
+          if (!/^[A-Za-z][\dA-Za-z-]*$/.test(input)) {
+            return 'Component type must start with a letter and contain only letters, numbers, and hyphens'
+          }
+        },
+      })
+    }
+
+    return type
+  }
+
+  private reportResults(component: ComponentParts, created: string[], skipped: string[]): void {
+    if (this.flags[Flags.QUIET]) return
+
+    if (created.length > 0) {
+      this.log(`\n✓ Created ${created.length} file(s):`)
+      for (const file of created) {
+        this.log(`  components/${component.fullName}/${file}`)
+      }
+    }
+
+    if (skipped.length > 0) {
+      this.log(`\n⚠ Skipped ${skipped.length} existing file(s):`)
+      for (const file of skipped) {
+        this.log(`  components/${component.fullName}/${file}`)
+      }
+
+      this.log('Use --force to overwrite existing files')
+    }
+
+    if (created.length === 0 && skipped.length === 0) {
+      this.log('No files were created')
+    }
+  }
+
+  private setupDirectoryPaths(component: ComponentParts): DirectoryPaths {
+    const currentDir = process.cwd()
+    const componentDir = path.join(currentDir, 'components', component.fullName)
+
+    return {
+      assetsDir: path.join(componentDir, 'assets'),
+      componentDir,
+      setupSectionsDir: path.join(componentDir, 'setup', 'sections'),
+      setupTemplatesDir: path.join(componentDir, 'setup', 'templates'),
+      snippetsDir: path.join(componentDir, 'snippets'),
+    }
+  }
+
+  private shouldGenerate(part: string, onlyList: string[]): boolean {
+    return onlyList.length === 0 || onlyList.includes(part)
+  }
+
+  private showDryRunResults(component: ComponentParts, filesToCreate: FileToCreate[]): void {
+    this.log('[Dry run]')
+    for (const file of filesToCreate) {
+      this.log(`✓ Would create components/${component.fullName}/${file.description}`)
+    }
+  }
+
+  private writeFileIfNotExists(filePath: string, content: string, force: boolean = false): boolean {
+    if (fs.existsSync(filePath) && !force) {
+      return false
+    }
+
+    this.ensureDirectoryExists(path.dirname(filePath))
+
+    if (force) {
+      fs.writeFileSync(filePath, content, 'utf8')
+    } else {
+      writeFileIfChanged(content, filePath)
+    }
+
+    return true
+  }
+}