Merge pull request #6234 from Shopify/update-ai-instructions

Fetch and copy AI instructions from theme-liquid-docs

Author: aswamy

.changeset/clever-kiwis-shout.md

@@ -0,0 +1,7 @@
+---
+'@shopify/cli': minor
+'@shopify/cli-kit': minor
+'@shopify/theme': minor
+---
+
+Update fetched AI instructions

docs-shopify.dev/commands/theme-init.doc.ts

@@ -5,7 +5,7 @@ const data: ReferenceEntityTemplateSchema = {
   name: 'theme init',
   description: `Clones a Git repository to your local machine to use as the starting point for building a theme.
 
-  If no Git repository is specified, then this command creates a copy of Shopify's [Skeleton theme](https://github.com/Shopify/skeleton-theme), with the specified name in the current folder. If no name is provided, then you're prompted to enter one.
+  If no Git repository is specified, then this command creates a copy of Shopify's [Skeleton theme](https://github.com/Shopify/skeleton-theme.git), with the specified name in the current folder. If no name is provided, then you're prompted to enter one.
 
   > Caution: If you're building a theme for the Shopify Theme Store, then you can use our example theme as a starting point. However, the theme that you submit needs to be [substantively different from existing themes](/docs/themes/store/requirements#uniqueness) so that it provides added value for users.
   `,

docs-shopify.dev/generated/generated_docs_data.json

@@ -5490,7 +5490,7 @@
   },
   {
     "name": "theme init",
-    "description": "Clones a Git repository to your local machine to use as the starting point for building a theme.\n\n  If no Git repository is specified, then this command creates a copy of Shopify's [Skeleton theme](https://github.com/Shopify/skeleton-theme), with the specified name in the current folder. If no name is provided, then you're prompted to enter one.\n\n  > Caution: If you're building a theme for the Shopify Theme Store, then you can use our example theme as a starting point. However, the theme that you submit needs to be [substantively different from existing themes](/docs/themes/store/requirements#uniqueness) so that it provides added value for users.\n  ",
+    "description": "Clones a Git repository to your local machine to use as the starting point for building a theme.\n\n  If no Git repository is specified, then this command creates a copy of Shopify's [Skeleton theme](https://github.com/Shopify/skeleton-theme.git), with the specified name in the current folder. If no name is provided, then you're prompted to enter one.\n\n  > Caution: If you're building a theme for the Shopify Theme Store, then you can use our example theme as a starting point. However, the theme that you submit needs to be [substantively different from existing themes](/docs/themes/store/requirements#uniqueness) so that it provides added value for users.\n  ",
     "overviewPreviewDescription": "Clones a Git repository to use as a starting point for building a new theme.",
     "type": "command",
     "isVisualComponent": false,

packages/cli-kit/src/public/node/fs.test.ts

@@ -17,10 +17,11 @@ import {
   readFileSync,
   glob,
   detectEOL,
+  copyDirectoryContents,
 } from './fs.js'
 import {joinPath} from './path.js'
 import {takeRandomFromArray} from '../common/array.js'
-import {describe, expect, test, vi} from 'vitest'
+import {beforeEach, describe, expect, test, vi} from 'vitest'
 import FastGlob from 'fast-glob'
 import * as os from 'os'
 
@@ -322,3 +323,68 @@ describe('detectEOL', () => {
     expect(eol).toEqual('\n')
   })
 })
+
+describe('copyDirectoryContents', () => {
+  beforeEach(() => {
+    // restore fast-glob to its original implementation for the tests
+    vi.doMock('fast-glob', async () => {
+      return vi.importActual('fast-glob')
+    })
+  })
+
+  test('copies the contents of source directory to destination directory', async () => {
+    // Given
+    await inTemporaryDirectory(async (tmpDir) => {
+      const srcDir = joinPath(tmpDir, 'src')
+      const destDir = joinPath(tmpDir, 'dest')
+      await mkdir(srcDir)
+      await mkdir(destDir)
+      await writeFile(joinPath(srcDir, 'file'), 'test')
+      await copyDirectoryContents(srcDir, destDir)
+
+      // Then
+      await expect(readFile(joinPath(destDir, 'file'))).resolves.toEqual('test')
+    })
+  })
+
+  test('copies the contents of source directory to another directory when destination directory does not exist', async () => {
+    // Given
+    await inTemporaryDirectory(async (tmpDir) => {
+      const srcDir = joinPath(tmpDir, 'src')
+      const destDir = joinPath(tmpDir, 'dest')
+      await mkdir(srcDir)
+      await writeFile(joinPath(srcDir, 'file'), 'test')
+      await copyDirectoryContents(srcDir, destDir)
+
+      // Then
+      await expect(readFile(joinPath(destDir, 'file'))).resolves.toEqual('test')
+    })
+  })
+
+  test('copies the nested contents of source directory to destination directory', async () => {
+    // Given
+    await inTemporaryDirectory(async (tmpDir) => {
+      const srcDir = joinPath(tmpDir, 'src')
+      const destDir = joinPath(tmpDir, 'dest')
+      await mkdir(srcDir)
+      await mkdir(destDir)
+      await mkdir(joinPath(srcDir, 'nested'))
+      await writeFile(joinPath(srcDir, 'nested', 'file'), 'test')
+      await copyDirectoryContents(srcDir, destDir)
+
+      // Then
+      await expect(readFile(joinPath(destDir, 'nested', 'file'))).resolves.toEqual('test')
+    })
+  })
+
+  test('throws an error when the source directory does not exist', async () => {
+    // Given
+    await inTemporaryDirectory(async (tmpDir) => {
+      const srcDir = joinPath(tmpDir, 'src')
+      const destDir = joinPath(tmpDir, 'dest')
+
+      // When
+      await expect(copyDirectoryContents(srcDir, destDir)).rejects.toThrow(`Source directory ${srcDir} does not exist`)
+    })
+  })
+})

packages/cli-kit/src/public/node/fs.ts

@@ -593,3 +593,33 @@ export function matchGlob(key: string, pattern: string, options?: MatchGlobOptio
 export function readdir(path: string): Promise<string[]> {
   return fsReaddir(path)
 }
+
+/**
+ * Copies the contents of a directory to another directory.
+ *
+ * @param srcDir - Source directory path.
+ * @param destDir - Destination directory path.
+ */
+export async function copyDirectoryContents(srcDir: string, destDir: string): Promise<void> {
+  if (!(await fileExists(srcDir))) {
+    throw new Error(`Source directory ${srcDir} does not exist`)
+  }
+
+  if (!(await fileExists(destDir))) {
+    await mkdir(destDir)
+  }
+
+  // Get all files and directories in the source directory
+  const items = await glob(joinPath(srcDir, '**/*'))
+
+  const filesToCopy = []
+
+  for (const item of items) {
+    const relativePath = item.replace(srcDir, '').replace(/^[/\\]/, '')
+    const destPath = joinPath(destDir, relativePath)
+
+    filesToCopy.push(copyFile(item, destPath))
+  }
+
+  await Promise.all(filesToCopy)
+}

packages/cli/README.md

@@ -2027,8 +2027,8 @@ ARGUMENTS
 
 FLAGS
   -l, --latest             Downloads the latest release of the `clone-url`
-  -u, --clone-url=<value>  [default: https://github.com/Shopify/skeleton-theme] The Git URL to clone from. Defaults to
-                           Shopify's Skeleton theme.
+  -u, --clone-url=<value>  [default: https://github.com/Shopify/skeleton-theme.git] The Git URL to clone from. Defaults
+                           to Shopify's Skeleton theme.
       --no-color           Disable color output.
       --path=<value>       The path where you want to run the command. Defaults to the current working directory.
       --verbose            Increase the verbosity of the output.
@@ -2039,8 +2039,8 @@ DESCRIPTION
   Clones a Git repository to your local machine to use as the starting point for building a theme.
 
   If no Git repository is specified, then this command creates a copy of Shopify's "Skeleton theme"
-  (https://github.com/Shopify/skeleton-theme), with the specified name in the current folder. If no name is provided,
-  then you're prompted to enter one.
+  (https://github.com/Shopify/skeleton-theme.git), with the specified name in the current folder. If no name is
+  provided, then you're prompted to enter one.
 
   > Caution: If you're building a theme for the Shopify Theme Store, then you can use our example theme as a starting
   point. However, the theme that you submit needs to be "substantively different from existing themes"

packages/cli/oclif.manifest.json

@@ -5704,12 +5704,12 @@
         }
       },
       "customPluginName": "@shopify/theme",
-      "description": "Clones a Git repository to your local machine to use as the starting point for building a theme.\n\n  If no Git repository is specified, then this command creates a copy of Shopify's \"Skeleton theme\" (https://github.com/Shopify/skeleton-theme), with the specified name in the current folder. If no name is provided, then you're prompted to enter one.\n\n  > Caution: If you're building a theme for the Shopify Theme Store, then you can use our example theme as a starting point. However, the theme that you submit needs to be \"substantively different from existing themes\" (https://shopify.dev/docs/themes/store/requirements#uniqueness) so that it provides added value for users.\n  ",
-      "descriptionWithMarkdown": "Clones a Git repository to your local machine to use as the starting point for building a theme.\n\n  If no Git repository is specified, then this command creates a copy of Shopify's [Skeleton theme](https://github.com/Shopify/skeleton-theme), with the specified name in the current folder. If no name is provided, then you're prompted to enter one.\n\n  > Caution: If you're building a theme for the Shopify Theme Store, then you can use our example theme as a starting point. However, the theme that you submit needs to be [substantively different from existing themes](https://shopify.dev/docs/themes/store/requirements#uniqueness) so that it provides added value for users.\n  ",
+      "description": "Clones a Git repository to your local machine to use as the starting point for building a theme.\n\n  If no Git repository is specified, then this command creates a copy of Shopify's \"Skeleton theme\" (https://github.com/Shopify/skeleton-theme.git), with the specified name in the current folder. If no name is provided, then you're prompted to enter one.\n\n  > Caution: If you're building a theme for the Shopify Theme Store, then you can use our example theme as a starting point. However, the theme that you submit needs to be \"substantively different from existing themes\" (https://shopify.dev/docs/themes/store/requirements#uniqueness) so that it provides added value for users.\n  ",
+      "descriptionWithMarkdown": "Clones a Git repository to your local machine to use as the starting point for building a theme.\n\n  If no Git repository is specified, then this command creates a copy of Shopify's [Skeleton theme](https://github.com/Shopify/skeleton-theme.git), with the specified name in the current folder. If no name is provided, then you're prompted to enter one.\n\n  > Caution: If you're building a theme for the Shopify Theme Store, then you can use our example theme as a starting point. However, the theme that you submit needs to be [substantively different from existing themes](https://shopify.dev/docs/themes/store/requirements#uniqueness) so that it provides added value for users.\n  ",
       "flags": {
         "clone-url": {
           "char": "u",
-          "default": "https://github.com/Shopify/skeleton-theme",
+          "default": "https://github.com/Shopify/skeleton-theme.git",
           "description": "The Git URL to clone from. Defaults to Shopify's Skeleton theme.",
           "env": "SHOPIFY_FLAG_CLONE_URL",
           "hasDynamicHelp": false,

packages/theme/src/cli/commands/theme/init.ts

@@ -1,15 +1,19 @@
 import {themeFlags} from '../../flags.js'
 import ThemeCommand from '../../utilities/theme-command.js'
-import {cloneRepoAndCheckoutLatestTag, cloneRepo, promptAndCreateAIFile} from '../../services/init.js'
+import {
+  cloneRepoAndCheckoutLatestTag,
+  cloneRepo,
+  createAIInstructions,
+  SKELETON_THEME_URL,
+  promptAIInstruction,
+} from '../../services/init.js'
 import {Args, Flags} from '@oclif/core'
 import {globalFlags} from '@shopify/cli-kit/node/cli'
 import {generateRandomNameForSubdirectory} from '@shopify/cli-kit/node/fs'
 import {renderTextPrompt} from '@shopify/cli-kit/node/ui'
 import {joinPath} from '@shopify/cli-kit/node/path'
 import {terminalSupportsPrompting} from '@shopify/cli-kit/node/system'
 
-const SKELETON_THEME_URL = 'https://github.com/Shopify/skeleton-theme'
-
 export default class Init extends ThemeCommand {
   static summary = 'Clones a Git repository to use as a starting point for building a new theme.'
 
@@ -62,7 +66,13 @@ export default class Init extends ThemeCommand {
 
     if (!terminalSupportsPrompting()) return
 
-    await promptAndCreateAIFile(destination)
+    const aiInstruction = await promptAIInstruction()
+
+    if (!aiInstruction) {
+      return
+    }
+
+    await createAIInstructions(destination, aiInstruction)
   }
 
   async promptName(directory: string) {

packages/theme/src/cli/services/init.test.ts

@@ -1,13 +1,23 @@
-import {cloneRepoAndCheckoutLatestTag, cloneRepo, promptAndCreateAIFile} from './init.js'
+import {cloneRepoAndCheckoutLatestTag, cloneRepo, createAIInstructions} from './init.js'
 import {describe, expect, vi, test, beforeEach} from 'vitest'
 import {downloadGitRepository, removeGitRemote} from '@shopify/cli-kit/node/git'
-import {renderSelectPrompt} from '@shopify/cli-kit/node/ui'
-import {writeFile, rmdir, fileExists} from '@shopify/cli-kit/node/fs'
-import {fetch} from '@shopify/cli-kit/node/http'
+import {rmdir, fileExists, copyDirectoryContents} from '@shopify/cli-kit/node/fs'
 import {joinPath} from '@shopify/cli-kit/node/path'
 
 vi.mock('@shopify/cli-kit/node/git')
-vi.mock('@shopify/cli-kit/node/fs')
+vi.mock('@shopify/cli-kit/node/fs', async () => {
+  const actual = await vi.importActual('@shopify/cli-kit/node/fs')
+  return {
+    ...actual,
+    fileExists: vi.fn(),
+    rmdir: vi.fn(),
+    copyDirectoryContents: vi.fn(),
+    inTemporaryDirectory: vi.fn(async (callback) => {
+      // eslint-disable-next-line node/no-callback-literal
+      return callback('/tmp')
+    }),
+  }
+})
 vi.mock('@shopify/cli-kit/node/http')
 vi.mock('@shopify/cli-kit/node/path')
 vi.mock('@shopify/cli-kit/node/ui', async () => {
@@ -63,6 +73,19 @@ describe('cloneRepoAndCheckoutLatestTag()', async () => {
     expect(fileExists).toHaveBeenCalledWith('destination/.github')
     expect(rmdir).toHaveBeenCalledWith('destination/.github')
   })
+
+  test('doesnt remove .github directory from non-skeleton theme after cloning when it exists', async () => {
+    // Given
+    const repoUrl = 'https://github.com/Shopify/dawn.git'
+    const destination = 'destination'
+    vi.mocked(fileExists).mockResolvedValue(true)
+
+    // When
+    await cloneRepoAndCheckoutLatestTag(repoUrl, destination)
+
+    // Then
+    expect(rmdir).not.toHaveBeenCalledWith('destination/.github')
+  })
 })
 
 describe('cloneRepo()', async () => {
@@ -95,7 +118,7 @@ describe('cloneRepo()', async () => {
     expect(removeGitRemote).toHaveBeenCalledWith(destination)
   })
 
-  test('removes .github & .git directories from skeleton theme after cloning when it exists', async () => {
+  test('removes .github directory from skeleton theme after cloning when it exists', async () => {
     // Given
     const repoUrl = 'https://github.com/Shopify/skeleton-theme.git'
     const destination = 'destination'
@@ -107,88 +130,47 @@ describe('cloneRepo()', async () => {
     // Then
     expect(fileExists).toHaveBeenCalledWith('destination/.github')
     expect(rmdir).toHaveBeenCalledWith('destination/.github')
-    expect(fileExists).toHaveBeenCalledWith('destination/.git')
-    expect(rmdir).toHaveBeenCalledWith('destination/.git')
-  })
-})
-
-describe('promptAndCreateAIFile()', () => {
-  const destination = '/path/to/theme'
-  const aiFileUrl = 'https://raw.githubusercontent.com/Shopify/theme-liquid-docs/main/ai/liquid.mdc'
-  const mockFileContent = 'AI file content 🤖✨'
-
-  beforeEach(() => {
-    vi.mocked(fetch).mockResolvedValue({
-      text: vi.fn().mockResolvedValue(mockFileContent),
-    } as any)
   })
 
-  test('creates VSCode AI file when vscode option is selected', async () => {
+  test('doesnt remove .github directory from non-skeleton theme after cloning when it exists', async () => {
     // Given
-    vi.mocked(renderSelectPrompt).mockResolvedValue('vscode')
-    vi.mocked(joinPath)
-      .mockReturnValueOnce('/path/to/theme/.github')
-      .mockReturnValueOnce('/path/to/theme/.github/copilot-instructions.md')
+    const repoUrl = 'https://github.com/Shopify/dawn.git'
+    const destination = 'destination'
+    vi.mocked(fileExists).mockResolvedValue(true)
 
     // When
-    await promptAndCreateAIFile(destination)
+    await cloneRepo(repoUrl, destination)
 
     // Then
-    expect(renderSelectPrompt).toHaveBeenCalledWith({
-      message: 'Set up AI dev support?',
-      choices: [
-        {label: 'VSCode (GitHub Copilot)', value: 'vscode'},
-        {label: 'Cursor', value: 'cursor'},
-        {label: 'Skip', value: 'none'},
-      ],
-    })
-
-    expect(fetch).toHaveBeenCalledWith(aiFileUrl)
-    expect(writeFile).toHaveBeenCalledWith('/path/to/theme/.github/copilot-instructions.md', mockFileContent)
+    expect(rmdir).not.toHaveBeenCalledWith('destination/.github')
+  })
+})
+
+describe('createAIInstructions()', () => {
+  const destination = '/path/to/theme'
+
+  beforeEach(() => {
+    vi.mocked(joinPath).mockImplementation((...paths) => paths.join('/'))
   })
 
-  test('creates Cursor AI file when cursor option is selected', async () => {
+  test('creates AI instructions if it exists', async () => {
     // Given
-    vi.mocked(renderSelectPrompt).mockResolvedValue('cursor')
-    vi.mocked(joinPath)
-      .mockReturnValueOnce('/path/to/theme/.cursor/rules')
-      .mockReturnValueOnce('/path/to/theme/.cursor/rules/liquid.mdc')
+    vi.mocked(downloadGitRepository).mockResolvedValue()
+    vi.mocked(copyDirectoryContents).mockResolvedValue()
 
     // When
-    await promptAndCreateAIFile(destination)
+    await createAIInstructions(destination, 'cursor')
 
     // Then
-    expect(renderSelectPrompt).toHaveBeenCalledWith({
-      message: 'Set up AI dev support?',
-      choices: [
-        {label: 'VSCode (GitHub Copilot)', value: 'vscode'},
-        {label: 'Cursor', value: 'cursor'},
-        {label: 'Skip', value: 'none'},
-      ],
-    })
-
-    expect(fetch).toHaveBeenCalledWith(aiFileUrl)
-    expect(writeFile).toHaveBeenCalledWith('/path/to/theme/.cursor/rules/liquid.mdc', mockFileContent)
+    expect(downloadGitRepository).toHaveBeenCalled()
+    expect(copyDirectoryContents).toHaveBeenCalledWith('/tmp/ai/cursor', '/path/to/theme/.cursor')
   })
 
-  test('does not create any AI file when none option is selected', async () => {
+  test('throws an error when the AI instructions directory does not exist', async () => {
     // Given
-    vi.mocked(renderSelectPrompt).mockResolvedValue('none')
-
-    // When
-    await promptAndCreateAIFile(destination)
+    vi.mocked(downloadGitRepository).mockResolvedValue()
+    vi.mocked(copyDirectoryContents).mockRejectedValue(new Error('Directory does not exist'))
 
-    // Then
-    expect(renderSelectPrompt).toHaveBeenCalledWith({
-      message: 'Set up AI dev support?',
-      choices: [
-        {label: 'VSCode (GitHub Copilot)', value: 'vscode'},
-        {label: 'Cursor', value: 'cursor'},
-        {label: 'Skip', value: 'none'},
-      ],
-    })
-
-    expect(fetch).not.toHaveBeenCalled()
-    expect(writeFile).not.toHaveBeenCalled()
+    await expect(createAIInstructions(destination, 'cursor')).rejects.toThrow('Failed to create AI instructions')
   })
 })