Add LLM instructions file suggestion

.changeset/mean-rocks-switch.md

@@ -0,0 +1,5 @@
+---
+'theme-check-vscode': minor
+---
+
+Introduce support to Shopify Magic in the VS Code extension

packages/vscode-extension/package.json

@@ -48,9 +48,9 @@
     "postinstall": "yarn --cwd ./syntaxes install",
     "prebuild": "rimraf dist language-configuration.json",
     "preinstall": "sh scripts/fetch-syntaxes.sh",
-    "pretest": "yarn run test:build && yarn run dev:build && yarn run lint",
+    "pretest": "yarn run test:build && yarn run dev:build",
     "publish:vsce": "vsce publish --no-dependencies $npm_package_version",
-    "test": "vitest",
+    "test": "vitest -c \"./vitest.config.mjs\"",
     "test:build": "tsc -p . --outDir out",
     "test:watch": "tsc -p . -w --outDir out",
     "type-check": "tsc --noEmit"
@@ -61,15 +61,15 @@
   "dependencies": {
     "@shopify/liquid-html-parser": "^2.4.0",
     "@shopify/prettier-plugin-liquid": "^1.8.0",
+    "@shopify/theme-check-common": "^3.7.2",
+    "@shopify/theme-check-docs-updater": "^3.7.2",
     "@shopify/theme-language-server-browser": "^2.7.0",
     "@shopify/theme-language-server-node": "^2.7.0",
-    "@shopify/theme-check-common": "^3.7.2",
     "prettier": "^2.6.2",
     "vscode-languageclient": "^8.1.0",
     "vscode-uri": "^3.0.8"
   },
   "devDependencies": {
-    "@shopify/theme-check-docs-updater": "^3.7.2",
     "@types/glob": "^8.0.0",
     "@types/node": "16.x",
     "@types/prettier": "^2.4.2",
@@ -99,8 +99,36 @@
       {
         "command": "shopifyLiquid.runChecks",
         "title": "Liquid Theme Check: Run Checks"
+      },
+      {
+        "command": "shopifyLiquid.magicFix",
+        "title": "Apply Shopify Magic suggestion"
+      },
+      {
+        "command": "shopifyLiquid.shopifyMagic",
+        "title": "✨ Shopify Magic",
+        "enablement": "!shopifyLiquid.shopifyMagic.isLoading"
+      },
+      {
+        "command": "shopifyLiquid.shopifyMagicLoading",
+        "title": "✨ Analyzing",
+        "enablement": "false"
       }
     ],
+    "menus": {
+      "editor/title": [
+        {
+          "command": "shopifyLiquid.shopifyMagic",
+          "group": "navigation",
+          "when": "shopifyLiquid.shopifyMagic.visible"
+        },
+        {
+          "command": "shopifyLiquid.shopifyMagicLoading",
+          "group": "navigation",
+          "when": "shopifyLiquid.shopifyMagicLoading.visible"
+        }
+      ]
+    },
     "configuration": {
       "title": "Shopify Liquid | Syntax Highlighting & Linter by Shopify",
       "properties": {

packages/vscode-extension/src/node/ShopifyMagicCodeActionProvider.ts

@@ -0,0 +1,17 @@
+import { CodeAction, CodeActionKind, CodeActionProvider, Range, TextDocument } from 'vscode';
+
+export class ShopifyMagicCodeActionProvider implements CodeActionProvider {
+  public provideCodeActions(document: TextDocument, range: Range) {
+    const title = 'Refactor using Shopify Magic';
+    const kind = CodeActionKind.RefactorRewrite;
+    const refactorAction = new CodeAction(title, kind);
+
+    refactorAction.command = {
+      command: 'shopifyLiquid.shopifyMagic',
+      title,
+      arguments: [document, range],
+    };
+
+    return [refactorAction];
+  }
+}

packages/vscode-extension/src/node/extension.ts

@@ -1,6 +1,14 @@
 import { FileStat, FileTuple, path as pathUtils } from '@shopify/theme-check-common';
 import * as path from 'node:path';
-import { commands, ExtensionContext, languages, Uri, workspace } from 'vscode';
+import {
+  commands,
+  ExtensionContext,
+  languages,
+  TextEditor,
+  TextEditorDecorationType,
+  Uri,
+  workspace,
+} from 'vscode';
 import {
   DocumentSelector,
   LanguageClient,
@@ -11,20 +19,32 @@ import {
 import { documentSelectors } from '../common/constants';
 import LiquidFormatter from '../common/formatter';
 import { vscodePrettierFormat } from './formatter';
+import { getShopifyMagicAnalysis, ShopifyMagicDecoration } from './shopify-magic';
+import { showShopifyMagicButton, showShopifyMagicLoadingButton } from './ui';
+import { createInstructionsFiles } from './llm-instructions';
+import { ShopifyMagicCodeActionProvider } from './ShopifyMagicCodeActionProvider';
+import { applySuggestion, conflictMarkerStart } from './shopify-magic-suggestions';
+
+let $client: LanguageClient | undefined;
+let $editor: TextEditor | undefined;
+let $decorations: TextEditorDecorationType[] = [];
+let $isApplyingSuggestion = false;
+let $previousShownConflicts = new Map<string, number>();
 
 const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms));
 
-let client: LanguageClient | undefined;
-
 export async function activate(context: ExtensionContext) {
   const runChecksCommand = 'themeCheck/runChecks';
 
+  await showShopifyMagicButton();
+  await createInstructionsFiles(context);
+
   context.subscriptions.push(
     commands.registerCommand('shopifyLiquid.restart', () => restartServer(context)),
   );
   context.subscriptions.push(
     commands.registerCommand('shopifyLiquid.runChecks', () => {
-      client!.sendRequest('workspace/executeCommand', { command: runChecksCommand });
+      $client!.sendRequest('workspace/executeCommand', { command: runChecksCommand });
     }),
   );
   context.subscriptions.push(
@@ -33,6 +53,65 @@ export async function activate(context: ExtensionContext) {
       new LiquidFormatter(vscodePrettierFormat),
     ),
   );
+  context.subscriptions.push(
+    languages.registerCodeActionsProvider(
+      [{ language: 'liquid' }],
+      new ShopifyMagicCodeActionProvider(),
+    ),
+  );
+  context.subscriptions.push(
+    commands.registerTextEditorCommand(
+      'shopifyLiquid.shopifyMagic',
+      async (textEditor: TextEditor) => {
+        $editor = textEditor;
+        await analyse(textEditor);
+      },
+    ),
+  );
+  context.subscriptions.push(
+    commands.registerCommand('shopifyLiquid.magicFix', async (suggestion: any) => {
+      $isApplyingSuggestion = true;
+      applySuggestion($editor, suggestion);
+
+      // Only dispose the decoration associated with this suggestion
+      const decorationIndex = $decorations.findIndex((d) => d.key === suggestion.key);
+      if (decorationIndex !== -1) {
+        $decorations[decorationIndex].dispose();
+        $decorations.splice(decorationIndex, 1);
+      }
+
+      $isApplyingSuggestion = false;
+    }),
+  );
+  context.subscriptions.push(
+    workspace.onDidChangeTextDocument(({ contentChanges, reason, document }) => {
+      // Each shown suggestion fix is displayed as a conflict in the editor. We want to
+      // hide all suggestion hints when the user starts typing, as they are no longer
+      // relevant, but we don't want to remove them on conflict resolution since that
+      // only means the user has accepted/rejected a suggestion and might continue with
+      // the other suggestions.
+      const currentShownConflicts = document.getText().split(conflictMarkerStart).length - 1;
+
+      if (
+        // Ignore when there are no content changes
+        contentChanges.length > 0 &&
+        // Ignore when initiating the diff view (it triggers a change event)
+        !$isApplyingSuggestion &&
+        // Ignore undo/redos
+        reason === undefined &&
+        // Only dispose decorations when there are no conflicts currently shown (no diff views)
+        // and when there were no conflicts shown previously. This means that the current
+        // change is not related to a conflict resolution but a manual user input.
+        currentShownConflicts === 0 &&
+        !$previousShownConflicts.get(document.fileName)
+      ) {
+        disposeDecorations();
+      }
+
+      // Store the previous number of conflicts shown for this document.
+      $previousShownConflicts.set(document.fileName, currentShownConflicts);
+    }),
+  );
 
   await startServer(context);
 }
@@ -55,44 +134,44 @@ async function startServer(context: ExtensionContext) {
     documentSelector: documentSelectors as DocumentSelector,
   };
 
-  client = new LanguageClient(
+  $client = new LanguageClient(
     'shopifyLiquid',
     'Theme Check Language Server',
     serverOptions,
     clientOptions,
   );
 
-  client.onRequest('fs/readDirectory', async (uriString: string): Promise<FileTuple[]> => {
+  $client.onRequest('fs/readDirectory', async (uriString: string): Promise<FileTuple[]> => {
     const results = await workspace.fs.readDirectory(Uri.parse(uriString));
     return results.map(([name, type]) => [pathUtils.join(uriString, name), type]);
   });
 
-  client.onRequest('fs/readFile', async (uriString: string): Promise<string> => {
+  $client.onRequest('fs/readFile', async (uriString: string): Promise<string> => {
     const bytes = await workspace.fs.readFile(Uri.parse(uriString));
     return Buffer.from(bytes).toString('utf8');
   });
 
-  client.onRequest('fs/stat', async (uriString: string): Promise<FileStat> => {
+  $client.onRequest('fs/stat', async (uriString: string): Promise<FileStat> => {
     return workspace.fs.stat(Uri.parse(uriString));
   });
 
-  client.start();
+  $client.start();
 }
 
 async function stopServer() {
   try {
-    if (client) {
-      await Promise.race([client.stop(), sleep(1000)]);
+    if ($client) {
+      await Promise.race([$client.stop(), sleep(1000)]);
     }
   } catch (e) {
     console.error(e);
   } finally {
-    client = undefined;
+    $client = undefined;
   }
 }
 
 async function restartServer(context: ExtensionContext) {
-  if (client) {
+  if ($client) {
     await stopServer();
   }
   await startServer(context);
@@ -115,3 +194,27 @@ async function getServerOptions(context: ExtensionContext): Promise<ServerOption
     },
   };
 }
+
+async function analyse(textEditor: TextEditor) {
+  try {
+    await showShopifyMagicLoadingButton();
+    const decorations = await getShopifyMagicAnalysis(textEditor);
+    applyDecorations(decorations);
+  } finally {
+    await showShopifyMagicButton();
+  }
+}
+
+function disposeDecorations() {
+  $decorations.forEach((decoration) => decoration.dispose());
+  $decorations = [];
+}
+
+function applyDecorations(decorations: ShopifyMagicDecoration[]) {
+  disposeDecorations();
+
+  decorations.forEach((decoration) => {
+    $decorations.push(decoration.type);
+    $editor?.setDecorations(decoration.type, [decoration.options]);
+  });
+}

packages/vscode-extension/src/node/fs.ts

@@ -0,0 +1,10 @@
+import { Uri, workspace } from 'vscode';
+
+export async function fileExists(path: string): Promise<boolean> {
+  try {
+    await workspace.fs.stat(Uri.file(path));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}