Added hover support for named arguments for inline snippets

Author: shoplando

.changeset/moody-mice-learn.md

@@ -0,0 +1,6 @@
+---
+'@shopify/theme-language-server-common': minor
+'@shopify/theme-check-common': minor
+---
+
+Added hover support for `render` handle and named arguments for inline snippets

packages/theme-language-server-common/src/hover/providers/RenderSnippetParameterHoverProvider.spec.ts

@@ -46,6 +46,67 @@ describe('Module: RenderSnippetParameterHoverProvider', async () => {
       );
     });
   });
+
+  describe('hover on inline snippet parameters', () => {
+    it('should return parameter info for inline snippet', async () => {
+      provider = createProvider(async () => undefined); // No file-based snippets
+
+      const source = `
+        {% snippet product_card %}
+          {% doc %}
+            @param {string} title - The title of the product
+            @param {number} price - The price of the product
+          {% enddoc %}
+          <div>{{ title }}: {{ price }}</div>
+        {% endsnippet %}
+        
+        {% render product_card, ti█tle: 'My Product', price: 99 %}
+      `;
+
+      await expect(provider).to.hover(source, '### `title`: string\n\nThe title of the product');
+    });
+
+    it('should return null if parameter not found in inline snippet doc', async () => {
+      provider = createProvider(async () => undefined);
+
+      const source = `
+        {% snippet product_card %}
+          {% doc %}
+            @param {string} title - The title of the product
+          {% enddoc %}
+          <div>{{ title }}</div>
+        {% endsnippet %}
+        
+        {% render product_card, unknown_para█m: 'value' %}
+      `;
+
+      await expect(provider).to.hover(source, null);
+    });
+
+    it('should handle multiple inline snippets correctly', async () => {
+      provider = createProvider(async () => undefined);
+
+      const source = `
+        {% snippet first_snippet %}
+          {% doc %}
+            @param {string} first_param - First parameter
+          {% enddoc %}
+          <div>{{ first_param }}</div>
+        {% endsnippet %}
+        
+        {% snippet second_snippet %}
+          {% doc %}
+            @param {number} second_param - Second parameter
+          {% enddoc %}
+          <div>{{ second_param }}</div>
+        {% endsnippet %}
+        
+        {% render second_snippet, second_para█m: 42 %}
+      `;
+
+      await expect(provider).to.hover(source, '### `second_param`: number\n\nSecond parameter');
+    });
+  });
 });
 
 const createProvider = (getSnippetDefinition: GetDocDefinitionForURI) => {

packages/theme-language-server-common/src/hover/providers/RenderSnippetParameterHoverProvider.ts

@@ -1,5 +1,10 @@
 import { NodeTypes } from '@shopify/liquid-html-parser';
-import { LiquidHtmlNode, GetDocDefinitionForURI } from '@shopify/theme-check-common';
+import {
+  LiquidHtmlNode,
+  GetDocDefinitionForURI,
+  findInlineSnippet,
+  extractDocDefinition,
+} from '@shopify/theme-check-common';
 import { Hover, HoverParams } from 'vscode-languageserver';
 import { BaseHoverProvider } from '../BaseHoverProvider';
 import { formatLiquidDocParameter } from '../../utils/liquidDoc';
@@ -13,20 +18,32 @@ export class RenderSnippetParameterHoverProvider implements BaseHoverProvider {
     params: HoverParams,
   ): Promise<Hover | null> {
     const parentNode = ancestors.at(-1);
+
     if (
       currentNode.type !== NodeTypes.NamedArgument ||
       !parentNode ||
-      parentNode.type !== NodeTypes.RenderMarkup ||
-      parentNode.snippet.type !== NodeTypes.String
+      parentNode.type !== NodeTypes.RenderMarkup
     ) {
       return null;
     }
 
-    const docDefinition = await this.getDocDefinitionForURI(
-      params.textDocument.uri,
-      'snippets',
-      parentNode.snippet.value,
-    );
+    let docDefinition;
+
+    if (parentNode.snippet.type === NodeTypes.String) {
+      docDefinition = await this.getDocDefinitionForURI(
+        params.textDocument.uri,
+        'snippets',
+        parentNode.snippet.value,
+      );
+    }
+    else if (parentNode.snippet.type === NodeTypes.VariableLookup) {
+      const snippetName = parentNode.snippet.name || '';
+      const rootNode = ancestors[0];
+      const snippetNode = findInlineSnippet(rootNode, snippetName);
+      if (snippetNode) {
+        docDefinition = extractDocDefinition(params.textDocument.uri, snippetNode);
+      }
+    }
 
     const paramName = currentNode.name;
     const hoveredParameter = docDefinition?.liquidDoc?.parameters?.find(