Renaming liquid doc params refactors render tag params (#843)

aswamy · web-flow · commit 22dd956af5d8 · 2025-03-06T16:03:21.000-05:00
diff --git a/.changeset/witty-lizards-collect.md b/.changeset/witty-lizards-collect.md
@@ -0,0 +1,5 @@
+---
+'@shopify/theme-language-server-common': minor
+---
+
+Renaming liquid doc params refactors render tag params
diff --git a/packages/theme-language-server-common/src/rename/RenameProvider.ts b/packages/theme-language-server-common/src/rename/RenameProvider.ts
@@ -12,6 +12,8 @@ import { findCurrentNode } from '@shopify/theme-check-common';
 import { BaseRenameProvider } from './BaseRenameProvider';
 import { HtmlTagNameRenameProvider } from './providers/HtmlTagNameRenameProvider';
 import { LiquidVariableRenameProvider } from './providers/LiquidVariableRenameProvider';
+import { Connection } from 'vscode-languageserver';
+import { ClientCapabilities } from '../ClientCapabilities';
 
 /**
  * RenameProvider is responsible for providing rename support for the theme language server.
@@ -21,10 +23,20 @@ import { LiquidVariableRenameProvider } from './providers/LiquidVariableRenamePr
 export class RenameProvider {
   private providers: BaseRenameProvider[];
 
-  constructor(private documentManager: DocumentManager) {
+  constructor(
+    connection: Connection,
+    clientCapabilities: ClientCapabilities,
+    private documentManager: DocumentManager,
+    findThemeRootURI: (uri: string) => Promise<string>,
+  ) {
     this.providers = [
       new HtmlTagNameRenameProvider(documentManager),
-      new LiquidVariableRenameProvider(documentManager),
+      new LiquidVariableRenameProvider(
+        connection,
+        clientCapabilities,
+        documentManager,
+        findThemeRootURI,
+      ),
     ];
   }
 
diff --git a/packages/theme-language-server-common/src/rename/providers/HtmlTagNameRenameProvider.spec.ts b/packages/theme-language-server-common/src/rename/providers/HtmlTagNameRenameProvider.spec.ts
@@ -2,14 +2,23 @@ import { assert, beforeEach, describe, expect, it } from 'vitest';
 import { Position, TextDocumentEdit } from 'vscode-languageserver-protocol';
 import { DocumentManager } from '../../documents';
 import { RenameProvider } from '../RenameProvider';
+import { ClientCapabilities } from '../../ClientCapabilities';
+import { mockConnection } from '../../test/MockConnection';
+
+const mockRoot = 'file:';
 
 describe('HtmlTagNameRenameProvider', () => {
   let documentManager: DocumentManager;
   let provider: RenameProvider;
 
   beforeEach(() => {
     documentManager = new DocumentManager();
-    provider = new RenameProvider(documentManager);
+    provider = new RenameProvider(
+      mockConnection(mockRoot),
+      new ClientCapabilities(),
+      documentManager,
+      async () => mockRoot,
+    );
   });
 
   it('returns null when the cursor is not over an HTML tag name', async () => {
diff --git a/packages/theme-language-server-common/src/rename/providers/LiquidVariableRenameProvider.spec.ts b/packages/theme-language-server-common/src/rename/providers/LiquidVariableRenameProvider.spec.ts
@@ -3,9 +3,23 @@ import { Position, TextDocumentEdit } from 'vscode-languageserver-protocol';
 import { TextDocument } from 'vscode-languageserver-textdocument';
 import { DocumentManager } from '../../documents';
 import { RenameProvider } from '../RenameProvider';
+import { mockConnection, MockConnection } from '../../test/MockConnection';
+import { ClientCapabilities } from '../../ClientCapabilities';
+
+const mockRoot = 'file:';
 
 describe('LiquidVariableRenameProvider', () => {
-  const textDocumentUri = 'file:///path/to/document.liquid';
+  const textDocumentUri = `${mockRoot}///snippets/example-snippet.liquid`;
+  const findThemeRootURI = async () => mockRoot;
+
+  let capabilities: ClientCapabilities;
+  let connection: MockConnection;
+
+  beforeEach(() => {
+    capabilities = new ClientCapabilities();
+    connection = mockConnection(mockRoot);
+    connection.spies.sendRequest.mockReturnValue(Promise.resolve(true));
+  });
 
   describe('unscoped variable', async () => {
     let documentManager: DocumentManager;
@@ -25,7 +39,7 @@ describe('LiquidVariableRenameProvider', () => {
 
     beforeEach(() => {
       documentManager = new DocumentManager();
-      provider = new RenameProvider(documentManager);
+      provider = new RenameProvider(connection, capabilities, documentManager, findThemeRootURI);
 
       textDocument = TextDocument.create(textDocumentUri, 'liquid', 1, documentSource);
       documentManager.open(textDocument.uri, documentSource, 1);
@@ -184,7 +198,7 @@ describe('LiquidVariableRenameProvider', () => {
 
     beforeEach(() => {
       documentManager = new DocumentManager();
-      provider = new RenameProvider(documentManager);
+      provider = new RenameProvider(connection, capabilities, documentManager, findThemeRootURI);
     });
 
     ['for', 'tablerow'].forEach((tag) => {
@@ -334,4 +348,105 @@ describe('LiquidVariableRenameProvider', () => {
       });
     });
   });
+
+  describe('updates across files', async () => {
+    let documentManager: DocumentManager;
+    let provider: RenameProvider;
+    let textDocument: TextDocument;
+
+    beforeEach(() => {
+      capabilities.setup({
+        workspace: {
+          applyEdit: true,
+        },
+      });
+      textDocument = TextDocument.create(
+        textDocumentUri,
+        'liquid',
+        1,
+        `{% doc %}
+  @param [name] - the name
+  @param [age] - the age
+{% enddoc %}`,
+      );
+
+      documentManager = new DocumentManager();
+      provider = new RenameProvider(connection, capabilities, documentManager, findThemeRootURI);
+
+      documentManager.open(textDocumentUri, textDocument.getText(), 1);
+    });
+
+    it("updates render tag's named parameter when exists", async () => {
+      createSectionWithSource(
+        documentManager,
+        'section1',
+        `<div>{% render 'example-snippet', name: 'Bob' %}</div>`,
+      );
+      createSectionWithSource(
+        documentManager,
+        'section2',
+        `<div>{% render 'example-snippet', age: 60 %}</div>`,
+      );
+
+      const params = {
+        textDocument,
+        position: Position.create(1, 11),
+        newName: 'first_name',
+      };
+      const result = await provider.rename(params);
+      assert(result);
+      assert(result.documentChanges);
+
+      expect(connection.spies.sendRequest).toHaveBeenCalledOnce();
+      expect(connection.spies.sendRequest).toHaveBeenCalledWith('workspace/applyEdit', {
+        label: `Rename snippet parameter 'name' to 'first_name'`,
+        edit: {
+          changeAnnotations: {
+            renameSnippetParameter: {
+              label: `Rename snippet parameter 'name' to 'first_name'`,
+              needsConfirmation: false,
+            },
+          },
+          documentChanges: [
+            {
+              textDocument: {
+                uri: getSectionUri('section1'),
+                version: 1,
+              },
+              edits: [
+                {
+                  newText: 'first_name: ',
+                  range: {
+                    end: {
+                      character: 40,
+                      line: 0,
+                    },
+                    start: {
+                      character: 34,
+                      line: 0,
+                    },
+                  },
+                },
+              ],
+              annotationId: 'renameSnippetParameter',
+            },
+          ],
+        },
+      });
+    });
+  });
 });
+
+function createSectionWithSource(
+  documentManager: DocumentManager,
+  sectionName: string,
+  source: string,
+) {
+  const sectionUri = getSectionUri(sectionName);
+  const sectionTextDocument = TextDocument.create(sectionUri, 'liquid', 1, source);
+  documentManager.open(sectionUri, sectionTextDocument.getText(), 1);
+}
+
+function getSectionUri(sectionName: string) {
+  return `${mockRoot}///sections/${sectionName}.liquid`;
+}
diff --git a/packages/theme-language-server-common/src/rename/providers/LiquidVariableRenameProvider.ts b/packages/theme-language-server-common/src/rename/providers/LiquidVariableRenameProvider.ts
@@ -1,32 +1,40 @@
 import { BaseRenameProvider } from '../BaseRenameProvider';
-import { DocumentManager } from '../../documents';
+import { AugmentedLiquidSourceCode, DocumentManager, isLiquidSourceCode } from '../../documents';
 import {
   LiquidHtmlNode,
   LiquidTagFor,
   LiquidTagTablerow,
   NamedTags,
   NodeTypes,
   Position,
+  RenderMarkup,
   AssignMarkup,
   TextNode,
   LiquidVariableLookup,
   ForMarkup,
 } from '@shopify/liquid-html-parser';
-import { Range } from 'vscode-languageserver';
+import { Connection, Range } from 'vscode-languageserver';
 import {
+  ApplyWorkspaceEditRequest,
   PrepareRenameParams,
   PrepareRenameResult,
   RenameParams,
   TextDocumentEdit,
   TextEdit,
   WorkspaceEdit,
 } from 'vscode-languageserver-protocol';
-import { visit } from '@shopify/theme-check-common';
 import { TextDocument } from 'vscode-languageserver-textdocument';
-import { JSONNode } from '@shopify/theme-check-common';
+import { JSONNode, SourceCodeType, visit } from '@shopify/theme-check-common';
+import { snippetName } from '../../utils/uri';
+import { ClientCapabilities } from '../../ClientCapabilities';
 
 export class LiquidVariableRenameProvider implements BaseRenameProvider {
-  constructor(private documentManager: DocumentManager) {}
+  constructor(
+    private connection: Connection,
+    private clientCapabilities: ClientCapabilities,
+    private documentManager: DocumentManager,
+    private findThemeRootURI: (uri: string) => Promise<string>,
+  ) {}
 
   async prepare(
     node: LiquidHtmlNode,
@@ -60,6 +68,7 @@ export class LiquidVariableRenameProvider implements BaseRenameProvider {
     params: RenameParams,
   ): Promise<null | WorkspaceEdit> {
     const document = this.documentManager.get(params.textDocument.uri);
+    const rootUri = await this.findThemeRootURI(params.textDocument.uri);
     const textDocument = document?.textDocument;
 
     if (!textDocument || !node || !ancestors) return null;
@@ -70,17 +79,29 @@ export class LiquidVariableRenameProvider implements BaseRenameProvider {
     const scope = variableNameBlockScope(oldName, ancestors);
     const replaceRange = textReplaceRange(oldName, textDocument, scope);
 
+    let liquidDocParamUpdated = false;
+
     const ranges: Range[] = visit(document.ast, {
       VariableLookup: replaceRange,
       AssignMarkup: replaceRange,
       ForMarkup: replaceRange,
       TextNode: (node: LiquidHtmlNode, ancestors: (LiquidHtmlNode | JSONNode)[]) => {
         if (ancestors.at(-1)?.type !== NodeTypes.LiquidDocParamNode) return;
 
+        liquidDocParamUpdated = true;
+
         return replaceRange(node, ancestors);
       },
     });
 
+    if (this.clientCapabilities.hasApplyEditSupport && liquidDocParamUpdated) {
+      const themeFiles = this.documentManager.theme(rootUri, true);
+      const liquidSourceCodes = themeFiles.filter(isLiquidSourceCode);
+      const name = snippetName(params.textDocument.uri);
+
+      updateRenderTags(this.connection, liquidSourceCodes, name, oldName, params.newName);
+    }
+
     const textDocumentEdit = TextDocumentEdit.create(
       { uri: textDocument.uri, version: textDocument.version },
       ranges.map((range) => TextEdit.replace(range, params.newName)),
@@ -184,3 +205,67 @@ function textReplaceRange(
     );
   };
 }
+
+async function updateRenderTags(
+  connection: Connection,
+  liquidSourceCodes: AugmentedLiquidSourceCode[],
+  snippetName: string,
+  oldParamName: string,
+  newParamName: string,
+) {
+  const editLabel = `Rename snippet parameter '${oldParamName}' to '${newParamName}'`;
+  const annotationId = 'renameSnippetParameter';
+  const workspaceEdit: WorkspaceEdit = {
+    documentChanges: [],
+    changeAnnotations: {
+      [annotationId]: {
+        label: editLabel,
+        needsConfirmation: false,
+      },
+    },
+  };
+
+  for (const sourceCode of liquidSourceCodes) {
+    if (sourceCode.ast instanceof Error) continue;
+    const textDocument = sourceCode.textDocument;
+    const edits: TextEdit[] = visit<SourceCodeType.LiquidHtml, TextEdit>(sourceCode.ast, {
+      RenderMarkup(node: RenderMarkup) {
+        if (node.snippet.type !== NodeTypes.String || node.snippet.value !== snippetName) {
+          return;
+        }
+
+        const renamedNameParamNode = node.args.find((arg) => arg.name === oldParamName);
+
+        if (renamedNameParamNode) {
+          return {
+            newText: `${newParamName}: `,
+            range: Range.create(
+              textDocument.positionAt(renamedNameParamNode.position.start),
+              textDocument.positionAt(renamedNameParamNode.value.position.start),
+            ),
+          };
+        }
+      },
+    });
+
+    if (edits.length === 0) continue;
+    workspaceEdit.documentChanges!.push({
+      textDocument: {
+        uri: textDocument.uri,
+        version: sourceCode.version ?? null /* null means file from disk in this API */,
+      },
+      annotationId,
+      edits,
+    });
+  }
+
+  if (workspaceEdit.documentChanges!.length === 0) {
+    console.error('Nothing to do!');
+    return;
+  }
+
+  await connection.sendRequest(ApplyWorkspaceEditRequest.type, {
+    label: editLabel,
+    edit: workspaceEdit,
+  });
+}
diff --git a/packages/theme-language-server-common/src/server/startServer.ts b/packages/theme-language-server-common/src/server/startServer.ts
@@ -117,7 +117,12 @@ export function startServer(
   );
   const linkedEditingRangesProvider = new LinkedEditingRangesProvider(documentManager);
   const documentHighlightProvider = new DocumentHighlightsProvider(documentManager);
-  const renameProvider = new RenameProvider(documentManager);
+  const renameProvider = new RenameProvider(
+    connection,
+    clientCapabilities,
+    documentManager,
+    findThemeRootURI,
+  );
   const renameHandler = new RenameHandler(
     connection,
     clientCapabilities,
