[Themes] Add template generation with liquid and json support

packages/cli/README.md

@@ -1962,27 +1962,32 @@ Creates and adds a new template file to your local theme directory
 
 ```
 USAGE
-  $ shopify theme generate template [-n <value>] [--no-color] [--path <value>] [-t
-    product|collection|page|blog|article|custom] [--verbose]
+  $ shopify theme generate template [-x liquid|json] [-n <value>] [--no-color] [--path <value>] [-r
+    404|article|blog|cart|collection|customers|gift_card|list-collections|page|password|product|robots|search] [-t
+    basic] [--verbose]
 
 FLAGS
-  -n, --name=<value>   Name of the template
-  -t, --type=<option>  Type of template to generate
-                       <options: product|collection|page|blog|article|custom>
-      --no-color       Disable color output.
-      --path=<value>   The path to your theme directory.
-      --verbose        Increase the verbosity of the output.
+  -n, --name=<value>        Name of the template
+  -r, --resource=<option>   Resource type for the template
+                            <options: 404|article|blog|cart|collection|customers|gift_card|list-collections|page|passwor
+                            d|product|robots|search>
+  -t, --type=<option>       Type of template to generate
+                            <options: basic>
+  -x, --extension=<option>  File extension (liquid or json)
+                            <options: liquid|json>
+      --no-color            Disable color output.
+      --path=<value>        The path to your theme directory.
+      --verbose             Increase the verbosity of the output.
 
 DESCRIPTION
   Creates and adds a new template file to your local theme directory
 
   Creates a new "theme template" (https://shopify.dev/docs/themes/architecture/templates) in your local theme directory.
 
-  The template is created in the `templates` directory with the basic structure needed, including layout and content
-  sections.
+  The template is created in the `templates` directory with the basic structure needed, including schema and settings.
 
   You can specify the type of template to generate using the `--type` flag. The template will be created with
-  appropriate default sections based on the type.
+  appropriate default settings based on the type.
 ```
 
 ## `shopify theme info`

packages/cli/oclif.manifest.json

@@ -5486,9 +5486,22 @@
       "args": {
       },
       "customPluginName": "@shopify/theme",
-      "description": "Creates a new \"theme template\" (https://shopify.dev/docs/themes/architecture/templates) in your local theme directory.\n\n  The template is created in the `templates` directory with the basic structure needed, including layout and content sections.\n\n  You can specify the type of template to generate using the `--type` flag. The template will be created with appropriate default sections based on the type.",
-      "descriptionWithMarkdown": "Creates a new [theme template](https://shopify.dev/docs/themes/architecture/templates) in your local theme directory.\n\n  The template is created in the `templates` directory with the basic structure needed, including layout and content sections.\n\n  You can specify the type of template to generate using the `--type` flag. The template will be created with appropriate default sections based on the type.",
+      "description": "Creates a new \"theme template\" (https://shopify.dev/docs/themes/architecture/templates) in your local theme directory.\n\n  The template is created in the `templates` directory with the basic structure needed, including schema and settings.\n\n  You can specify the type of template to generate using the `--type` flag. The template will be created with appropriate default settings based on the type.",
+      "descriptionWithMarkdown": "Creates a new [theme template](https://shopify.dev/docs/themes/architecture/templates) in your local theme directory.\n\n  The template is created in the `templates` directory with the basic structure needed, including schema and settings.\n\n  You can specify the type of template to generate using the `--type` flag. The template will be created with appropriate default settings based on the type.",
       "flags": {
+        "extension": {
+          "char": "x",
+          "description": "File extension (liquid or json)",
+          "env": "SHOPIFY_FLAG_TEMPLATE_FILE_TYPE",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "name": "extension",
+          "options": [
+            "liquid",
+            "json"
+          ],
+          "type": "option"
+        },
         "force": {
           "allowNo": false,
           "char": "f",
@@ -5524,6 +5537,30 @@
           "noCacheDefault": true,
           "type": "option"
         },
+        "resource": {
+          "char": "r",
+          "description": "Resource type for the template",
+          "env": "SHOPIFY_FLAG_TEMPLATE_RESOURCE",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "name": "resource",
+          "options": [
+            "404",
+            "article",
+            "blog",
+            "cart",
+            "collection",
+            "customers",
+            "gift_card",
+            "list-collections",
+            "page",
+            "password",
+            "product",
+            "robots",
+            "search"
+          ],
+          "type": "option"
+        },
         "type": {
           "char": "t",
           "description": "Type of template to generate",
@@ -5532,12 +5569,7 @@
           "multiple": false,
           "name": "type",
           "options": [
-            "product",
-            "collection",
-            "page",
-            "blog",
-            "article",
-            "custom"
+            "basic"
           ],
           "type": "option"
         },

packages/theme/src/cli/commands/theme/generate/template.test.ts

@@ -1,39 +1,180 @@
 import GenerateTemplate from './template.js'
+import {generateTemplate} from '../../../services/generate/templates.js'
 import {hasRequiredThemeDirectories} from '../../../utilities/theme-fs.js'
-import {describe, expect, test, vi} from 'vitest'
-import {renderWarning} from '@shopify/cli-kit/node/ui'
+import {renderSelectPrompt, renderTextPrompt, renderWarning} from '@shopify/cli-kit/node/ui'
+import {beforeEach, describe, expect, test, vi} from 'vitest'
 import {cwd} from '@shopify/cli-kit/node/path'
+import {fileExists} from '@shopify/cli-kit/node/fs'
 
-vi.mock('../../../utilities/theme-fs.js')
 vi.mock('@shopify/cli-kit/node/ui')
+vi.mock('../../../utilities/theme-fs.js')
+vi.mock('../../../services/generate/templates.js')
+vi.mock('@shopify/cli-kit/node/fs')
+
+const path = cwd()
+const defaultOptions = {
+  path,
+  name: 'test',
+  type: 'basic',
+  extension: 'liquid',
+  resource: 'product',
+}
 
 describe('GenerateTemplate', () => {
-  const path = cwd()
-  test('validates theme directory structure by default', async () => {
+  beforeEach(() => {
+    vi.mocked(hasRequiredThemeDirectories).mockResolvedValue(true)
+    vi.mocked(fileExists).mockResolvedValue(true)
+    vi.mocked(renderSelectPrompt).mockReset()
+    vi.mocked(renderTextPrompt).mockReset()
+  })
+
+  describe('template name resolution', () => {
+    test('sets name to undefined when base template does not exist', async () => {
+      // Given
+      vi.mocked(fileExists).mockResolvedValue(false)
+      const options = toFlags(defaultOptions)
+
+      // When
+      await GenerateTemplate.run(options)
+
+      // Then
+      expect(renderTextPrompt).not.toHaveBeenCalled()
+      expect(generateTemplate).toHaveBeenCalledWith({
+        name: undefined,
+        type: 'basic',
+        path,
+        fileType: 'liquid',
+        resource: 'product',
+      })
+    })
+
+    test('uses provided name when base template exists', async () => {
+      // Given
+      const options = toFlags({...defaultOptions, name: 'custom'})
+
+      // When
+      await GenerateTemplate.run(options)
+
+      // Then
+      expect(renderTextPrompt).not.toHaveBeenCalled()
+      expect(generateTemplate).toHaveBeenCalledWith({
+        name: 'custom',
+        type: 'basic',
+        path,
+        fileType: 'liquid',
+        resource: 'product',
+      })
+    })
+  })
+
+  describe('prompting for missing values', () => {
+    test('prompts for all values when none provided', async () => {
+      // Given
+      vi.mocked(renderSelectPrompt)
+        .mockResolvedValueOnce('product')
+        .mockResolvedValueOnce('liquid')
+        .mockResolvedValueOnce('basic')
+      const options = toFlags({path})
+
+      // When
+      await GenerateTemplate.run(options)
+
+      // Then
+      expect(renderSelectPrompt).toHaveBeenCalledWith({
+        message: 'Resource type for the template',
+        choices: expect.any(Array),
+      })
+      expect(renderSelectPrompt).toHaveBeenCalledWith({
+        message: 'File extension',
+        choices: expect.any(Array),
+      })
+      expect(renderSelectPrompt).toHaveBeenCalledWith({
+        message: 'Type of template',
+        choices: expect.any(Array),
+      })
+      expect(generateTemplate).toHaveBeenCalledWith({
+        name: undefined,
+        type: 'basic',
+        path,
+        fileType: 'liquid',
+        resource: 'product',
+      })
+    })
+
+    test('only prompts for missing values', async () => {
+      // Given
+      vi.mocked(renderSelectPrompt).mockResolvedValueOnce('basic')
+      const options = toFlags({
+        path,
+        resource: 'product',
+        extension: 'liquid',
+      })
+
+      // When
+      await GenerateTemplate.run(options)
+
+      // Then
+      expect(renderSelectPrompt).toHaveBeenCalledTimes(1)
+      expect(renderSelectPrompt).toHaveBeenCalledWith({
+        message: 'Type of template',
+        choices: expect.any(Array),
+      })
+      expect(generateTemplate).toHaveBeenCalledWith({
+        name: undefined,
+        type: 'basic',
+        path,
+        fileType: 'liquid',
+        resource: 'product',
+      })
+    })
+  })
+
+  test('warns and exits if not in theme directory', async () => {
     // Given
     vi.mocked(hasRequiredThemeDirectories).mockResolvedValue(false)
+    const options = toFlags(defaultOptions)
 
     // When
-    await GenerateTemplate.run(['--path', path])
+    await GenerateTemplate.run(options)
 
     // Then
-    expect(hasRequiredThemeDirectories).toHaveBeenCalledWith(path)
     expect(renderWarning).toHaveBeenCalledWith({
       body: [
         'The current directory does not contain the required theme directories (config, layout, sections, templates).',
       ],
     })
+    expect(generateTemplate).not.toHaveBeenCalled()
   })
 
-  test('skips directory validation when force flag is used', async () => {
+  test('proceeds without validation if force flag is used', async () => {
     // Given
-    vi.mocked(hasRequiredThemeDirectories).mockResolvedValue(false)
+    const options = toFlags({
+      ...defaultOptions,
+      force: true,
+    })
 
     // When
-    await GenerateTemplate.run(['--path', path, '--force'])
+    await GenerateTemplate.run(options)
 
     // Then
     expect(hasRequiredThemeDirectories).not.toHaveBeenCalled()
-    expect(renderWarning).not.toHaveBeenCalled()
+    expect(generateTemplate).toHaveBeenCalledWith({
+      name: defaultOptions.name,
+      type: defaultOptions.type,
+      path,
+      fileType: defaultOptions.extension,
+      resource: defaultOptions.resource,
+    })
   })
 })
+
+function toFlags(options: any) {
+  const flags = []
+  if (options.path) flags.push('--path', options.path)
+  if (options.name) flags.push('--name', options.name)
+  if (options.type) flags.push('--type', options.type)
+  if (options.extension) flags.push('--extension', options.extension)
+  if (options.resource) flags.push('--resource', options.resource)
+  if (options.force) flags.push('--force')
+  return flags
+}