Language Server: Implement Hover Provider for Action View Helpers

javascript/packages/language-server/src/action_view_helpers.ts

@@ -0,0 +1,23 @@
+export interface ActionViewHelperInfo {
+  signature: string
+  documentationURL: string
+}
+
+export const ACTION_VIEW_HELPERS: Record<string, ActionViewHelperInfo> = {
+  "ActionView::Helpers::TagHelper#tag": {
+    signature: "tag.<tag name>(optional content, options)",
+    documentationURL: "https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-tag",
+  },
+  "ActionView::Helpers::TagHelper#content_tag": {
+    signature: "content_tag(name, content_or_options_with_block = nil, options = nil, escape = true, &block)",
+    documentationURL: "https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag",
+  },
+  "ActionView::Helpers::UrlHelper#link_to": {
+    signature: "link_to(name = nil, options = nil, html_options = nil, &block)",
+    documentationURL: "https://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to",
+  },
+  "Turbo::FramesHelper#turbo_frame_tag": {
+    signature: "turbo_frame_tag(*ids, src: nil, target: nil, **attributes, &block)",
+    documentationURL: "https://www.rubydoc.info/github/hotwired/turbo-rails/Turbo/FramesHelper:turbo_frame_tag",
+  },
+}

javascript/packages/language-server/src/document_highlight_service.ts

@@ -5,7 +5,7 @@ import { Visitor } from "@herb-tools/core"
 import { ParserService } from "./parser_service"
 
 import { isERBIfNode, isERBElseNode, isHTMLOpenTagNode } from "@herb-tools/core"
-import { erbTagToRange, tokenToRange, nodeToRange, openTagRanges } from "./range_utils"
+import { erbTagToRange, tokenToRange, nodeToRange, openTagRanges, isPositionInRange, rangeSize } from "./range_utils"
 
 import type {
   Node,
@@ -245,10 +245,10 @@ export class DocumentHighlightService {
     let bestSize = Infinity
 
     for (const group of collector.groups) {
-      const matchingRange = group.find(range => this.isPositionInRange(position, range))
+      const matchingRange = group.find(range => isPositionInRange(position, range))
 
       if (matchingRange) {
-        const size = this.rangeSize(matchingRange)
+        const size = rangeSize(matchingRange)
 
         if (size < bestSize) {
           bestSize = size
@@ -264,27 +264,4 @@ export class DocumentHighlightService {
     return []
   }
 
-  private rangeSize(range: Range): number {
-    if (range.start.line === range.end.line) {
-      return range.end.character - range.start.character
-    }
-
-    return (range.end.line - range.start.line) * 10000 + range.end.character
-  }
-
-  private isPositionInRange(position: Position, range: Range): boolean {
-    if (position.line < range.start.line || position.line > range.end.line) {
-      return false
-    }
-
-    if (position.line === range.start.line && position.character < range.start.character) {
-      return false
-    }
-
-    if (position.line === range.end.line && position.character > range.end.character) {
-      return false
-    }
-
-    return true
-  }
 }

javascript/packages/language-server/src/hover_service.ts

@@ -0,0 +1,90 @@
+import { Hover, MarkupKind, Position } from "vscode-languageserver/node"
+import { TextDocument } from "vscode-languageserver-textdocument"
+
+import { Visitor } from "@herb-tools/node-wasm"
+import { IdentityPrinter } from "@herb-tools/printer"
+import { ActionViewTagHelperToHTMLRewriter } from "@herb-tools/rewriter"
+import { isERBOpenTagNode } from "@herb-tools/core"
+import { ParserService } from "./parser_service"
+import { nodeToRange, isPositionInRange, rangeSize } from "./range_utils"
+import { ACTION_VIEW_HELPERS } from "./action_view_helpers"
+
+import type { Node, HTMLElementNode } from "@herb-tools/core"
+import type { Range } from "vscode-languageserver/node"
+
+class ActionViewElementCollector extends Visitor {
+  public elements: { node: HTMLElementNode; range: Range }[] = []
+
+  visitHTMLElementNode(node: HTMLElementNode): void {
+    if (node.element_source && node.element_source !== "HTML" && isERBOpenTagNode(node.open_tag)) {
+      this.elements.push({
+        node,
+        range: nodeToRange(node),
+      })
+    }
+
+    this.visitChildNodes(node)
+  }
+}
+
+export class HoverService {
+  private parserService: ParserService
+
+  constructor(parserService: ParserService) {
+    this.parserService = parserService
+  }
+
+  getHover(textDocument: TextDocument, position: Position): Hover | null {
+    const parseResult = this.parserService.parseContent(textDocument.getText(), {
+      action_view_helpers: true,
+      track_whitespace: true,
+    })
+
+    const collector = new ActionViewElementCollector()
+    collector.visit(parseResult.value)
+
+    let bestElement: { node: HTMLElementNode; range: Range } | null = null
+    let bestSize = Infinity
+
+    for (const element of collector.elements) {
+      if (isPositionInRange(position, element.range)) {
+        const size = rangeSize(element.range)
+
+        if (size < bestSize) {
+          bestSize = size
+          bestElement = element
+        }
+      }
+    }
+
+    if (!bestElement) {
+      return null
+    }
+
+    const elementSource = bestElement.node.element_source
+    const rewriter = new ActionViewTagHelperToHTMLRewriter()
+    const rewrittenNode = rewriter.rewrite(bestElement.node as Node, { baseDir: process.cwd() })
+    const htmlOutput = IdentityPrinter.print(rewrittenNode)
+    const helper = ACTION_VIEW_HELPERS[elementSource]
+    const parts: string[] = []
+
+    if (helper) {
+      parts.push(`\`\`\`ruby\n${helper.signature}\n\`\`\``)
+    }
+
+    parts.push(`**HTML equivalent**\n\`\`\`erb\n${htmlOutput.trim()}\n\`\`\``)
+
+    if (helper) {
+      parts.push(`[${elementSource}](${helper.documentationURL})`)
+    }
+
+    return {
+      contents: {
+        kind: MarkupKind.Markdown,
+        value: parts.join("\n\n"),
+      },
+      range: bestElement.range,
+    }
+  }
+
+}

javascript/packages/language-server/src/parser_service.ts

@@ -2,7 +2,7 @@ import { Diagnostic, DiagnosticSeverity } from "vscode-languageserver/node"
 import { TextDocument } from "vscode-languageserver-textdocument"
 import { Herb, Visitor } from "@herb-tools/node-wasm"
 
-import type { Node, HerbError, DocumentNode, ParseResult } from "@herb-tools/node-wasm"
+import type { Node, HerbError, DocumentNode, ParseResult, ParseOptions } from "@herb-tools/node-wasm"
 
 import { lspRangeFromLocation } from "./range_utils"
 
@@ -52,7 +52,7 @@ export class ParserService {
     }
   }
 
-  parseContent(content: string, options?: { track_whitespace?: boolean }): ParseResult {
+  parseContent(content: string, options?: ParseOptions): ParseResult {
     return Herb.parse(content, options)
   }
 }

javascript/packages/language-server/src/range_utils.ts

@@ -48,6 +48,30 @@ export function openTagRanges(tag: HTMLOpenTagNode): (Range | null)[] {
   return ranges
 }
 
+export function isPositionInRange(position: Position, range: Range): boolean {
+  if (position.line < range.start.line || position.line > range.end.line) {
+    return false
+  }
+
+  if (position.line === range.start.line && position.character < range.start.character) {
+    return false
+  }
+
+  if (position.line === range.end.line && position.character > range.end.character) {
+    return false
+  }
+
+  return true
+}
+
+export function rangeSize(range: Range): number {
+  if (range.start.line === range.end.line) {
+    return range.end.character - range.start.character
+  }
+
+  return (range.end.line - range.start.line) * 10000 + range.end.character
+}
+
 /**
  * Returns a Range that spans the entire document
  */

javascript/packages/language-server/src/server.ts

@@ -14,6 +14,7 @@ import {
   CodeActionKind,
   FoldingRangeParams,
   DocumentHighlightParams,
+  HoverParams,
   TextDocumentIdentifier,
   Range,
 } from "vscode-languageserver/node"
@@ -59,6 +60,7 @@ export class Server {
           },
           foldingRangeProvider: true,
           documentHighlightProvider: true,
+          hoverProvider: true,
         },
       }
 
@@ -171,6 +173,14 @@ export class Server {
       return this.service.documentHighlightService.getDocumentHighlights(document, params.position)
     })
 
+    this.connection.onHover((params: HoverParams) => {
+      const document = this.service.documentService.get(params.textDocument.uri)
+
+      if (!document) return null
+
+      return this.service.hoverService.getHover(document, params.position)
+    })
+
     this.connection.onCodeAction((params: CodeActionParams) => {
       const document = this.service.documentService.get(params.textDocument.uri)
 

javascript/packages/language-server/src/service.ts

@@ -14,6 +14,7 @@ import { CodeActionService } from "./code_action_service"
 import { DocumentSaveService } from "./document_save_service"
 import { FoldingRangeService } from "./folding_range_service"
 import { DocumentHighlightService } from "./document_highlight_service"
+import { HoverService } from "./hover_service"
 import { CommentService } from "./comment_service"
 
 import { version } from "../package.json"
@@ -35,6 +36,7 @@ export class Service {
   documentSaveService: DocumentSaveService
   foldingRangeService: FoldingRangeService
   documentHighlightService: DocumentHighlightService
+  hoverService: HoverService
   commentService: CommentService
 
   constructor(connection: Connection, params: InitializeParams) {
@@ -52,6 +54,7 @@ export class Service {
     this.documentSaveService = new DocumentSaveService(this.connection, this.settings, this.autofixService, this.formattingService)
     this.foldingRangeService = new FoldingRangeService(this.parserService)
     this.documentHighlightService = new DocumentHighlightService(this.parserService)
+    this.hoverService = new HoverService(this.parserService)
     this.commentService = new CommentService(this.parserService)
 
     if (params.initializationOptions) {