Parser: Detect image_tag Action View helper

Author: marcoroth

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

@@ -28,4 +28,8 @@ export const ACTION_VIEW_HELPERS: Record<string, ActionViewHelperInfo> = {
     signature: "javascript_include_tag(*sources)",
     documentationURL: "https://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-javascript_include_tag",
   },
+  "ActionView::Helpers::AssetTagHelper#image_tag": {
+    signature: "image_tag(source, options = {})",
+    documentationURL: "https://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-image_tag",
+  },
 }

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

@@ -137,14 +137,17 @@ export class RewriteCodeActionService {
     const tagName = element.node.tag_name?.value
     const isAnchor = tagName === "a"
     const isTurboFrame = tagName === "turbo-frame"
+    const isImg = tagName === "img"
     const methodName = tagName?.replace(/-/g, "_")
     const title = isAnchor
       ? "Herb: Convert to `link_to`"
       : isTurboFrame
         ? "Herb: Convert to `turbo_frame_tag`"
-        : methodName
-          ? `Herb: Convert to \`tag.${methodName}\``
-          : "Herb: Convert to tag helper"
+        : isImg
+          ? "Herb: Convert to `image_tag`"
+          : methodName
+            ? `Herb: Convert to \`tag.${methodName}\``
+            : "Herb: Convert to tag helper"
 
     return {
       title,

javascript/packages/node/binding.gyp

@@ -26,6 +26,7 @@
         "./extension/libherb/analyze/transform.c",
         "./extension/libherb/analyze/action_view/attribute_extraction_helpers.c",
         "./extension/libherb/analyze/action_view/content_tag.c",
+        "./extension/libherb/analyze/action_view/image_tag.c",
         "./extension/libherb/analyze/action_view/javascript_include_tag.c",
         "./extension/libherb/analyze/action_view/javascript_tag.c",
         "./extension/libherb/analyze/action_view/link_to.c",

javascript/packages/rewriter/src/built-ins/html-to-action-view-tag-helper.ts

@@ -124,9 +124,10 @@ class HTMLToActionViewTagHelperVisitor extends Visitor {
     const isAnchor = tagName.value === "a"
     const isTurboFrame = tagName.value === "turbo-frame"
     const isScript = tagName.value === "script"
+    const isImg = tagName.value === "img"
     const attributes = openTag.children.filter(child => !isWhitespaceNode(child))
-    const hasSrcAttribute = isScript && attributes.some(child => isHTMLAttributeNode(child) && getStaticAttributeName(child.name!) === "src")
-    const { attributes: attributesString, href, id, src } = serializeAttributes(attributes, { extractHref: isAnchor, extractId: isTurboFrame, extractSrc: isScript })
+    const hasSrcAttribute = (isScript || isImg) && attributes.some(child => isHTMLAttributeNode(child) && getStaticAttributeName(child.name!) === "src")
+    const { attributes: attributesString, href, id, src } = serializeAttributes(attributes, { extractHref: isAnchor, extractId: isTurboFrame, extractSrc: isScript || isImg })
     const hasBody = node.body && node.body.length > 0 && !node.is_void
     const isInlineContent = hasBody && isTextOnlyBody(node.body)
 
@@ -145,6 +146,9 @@ class HTMLToActionViewTagHelperVisitor extends Visitor {
     } else if (isScript) {
       content = this.buildJavascriptTagContent(node, attributesString, isInlineContent)
       elementSource = "ActionView::Helpers::JavaScriptHelper#javascript_tag"
+    } else if (isImg) {
+      content = this.buildImageTagContent(attributesString, src)
+      elementSource = "ActionView::Helpers::AssetTagHelper#image_tag"
     } else {
       content = this.buildTagContent(tagName.value, node, attributesString, isInlineContent)
       elementSource = "ActionView::Helpers::TagHelper#tag"
@@ -165,7 +169,7 @@ class HTMLToActionViewTagHelperVisitor extends Visitor {
     asMutable(node).element_source = elementSource
 
     const isInlineLiteralContent = isScript && hasBody && node.body.length === 1 && isLiteralNode(node.body[0]) && !node.body[0].content.includes("\n")
-    const isInlineForm = isInlineContent || isInlineLiteralContent || (isTurboFrame && !hasBody) || (isScript && hasSrcAttribute)
+    const isInlineForm = isInlineContent || isInlineLiteralContent || (isTurboFrame && !hasBody) || (isScript && hasSrcAttribute) || isImg
 
     if (node.is_void) {
       asMutable(node).close_tag = null
@@ -270,6 +274,17 @@ class HTMLToActionViewTagHelperVisitor extends Visitor {
     return argString ? ` javascript_include_tag ${argString} ` : ` javascript_include_tag `
   }
 
+  private buildImageTagContent(attributes: string, source: string | null): string {
+    const args: string[] = []
+
+    if (source) args.push(source)
+    if (attributes) args.push(attributes)
+
+    const argString = args.join(", ")
+
+    return argString ? ` image_tag ${argString} ` : ` image_tag `
+  }
+
   private buildLinkToContent(node: HTMLElementNode, attribute: string, href: string | null, isInlineContent: boolean): string {
     const args: string[] = []
 
@@ -301,7 +316,7 @@ export class HTMLToActionViewTagHelperRewriter extends ASTRewriter {
   }
 
   get description(): string {
-    return "Converts raw HTML elements to ActionView tag helpers (tag.*, turbo_frame_tag, javascript_tag, javascript_include_tag)"
+    return "Converts raw HTML elements to ActionView tag helpers (tag.*, turbo_frame_tag, javascript_tag, javascript_include_tag, image_tag)"
   }
 
   rewrite<T extends Node>(node: T, _context: RewriteContext): T {

javascript/packages/rewriter/test/action-view-tag-helper-to-html.test.ts

@@ -554,6 +554,80 @@ describe("ActionViewTagHelperToHTMLRewriter", () => {
     })
   })
 
+  describe("image_tag helpers", () => {
+    test("image_tag with string source", () => {
+      expect(transform('<%= image_tag "icon.png" %>')).toBe(
+        '<img src="<%= image_path("icon.png") %>" />'
+      )
+    })
+
+    test("image_tag with alt attribute", () => {
+      expect(transform('<%= image_tag "icon.png", alt: "Icon" %>')).toBe(
+        '<img src="<%= image_path("icon.png") %>" alt="Icon" />'
+      )
+    })
+
+    test("image_tag with multiple attributes", () => {
+      expect(transform('<%= image_tag "photo.jpg", alt: "Photo", class: "avatar" %>')).toBe(
+        '<img src="<%= image_path("photo.jpg") %>" alt="Photo" class="avatar" />'
+      )
+    })
+
+    test("image_tag with URL source", () => {
+      expect(transform('<%= image_tag "http://example.com/icon.png" %>')).toBe(
+        '<img src="http://example.com/icon.png" />'
+      )
+    })
+
+    test("image_tag with protocol-relative URL", () => {
+      expect(transform('<%= image_tag "//cdn.example.com/icon.png" %>')).toBe(
+        '<img src="//cdn.example.com/icon.png" />'
+      )
+    })
+
+    test("image_tag with ruby expression source wraps in image_path", () => {
+      expect(transform('<%= image_tag user.avatar %>')).toBe(
+        '<img src="<%= image_path(user.avatar) %>" />'
+      )
+    })
+
+    test("image_tag with image_path source passes through", () => {
+      expect(transform('<%= image_tag image_path("icon.png") %>')).toBe(
+        '<img src="<%= image_path("icon.png") %>" />'
+      )
+    })
+
+    test("image_tag with asset_path source passes through", () => {
+      expect(transform('<%= image_tag asset_path("icon.png") %>')).toBe(
+        '<img src="<%= asset_path("icon.png") %>" />'
+      )
+    })
+
+    test("image_tag with image_url source passes through", () => {
+      expect(transform('<%= image_tag image_url("icon.png") %>')).toBe(
+        '<img src="<%= image_url("icon.png") %>" />'
+      )
+    })
+
+    test("image_tag with asset_url source passes through", () => {
+      expect(transform('<%= image_tag asset_url("icon.png") %>')).toBe(
+        '<img src="<%= asset_url("icon.png") %>" />'
+      )
+    })
+
+    test("image_tag with instance variable method wraps in image_path", () => {
+      expect(transform('<%= image_tag @post.cover_image %>')).toBe(
+        '<img src="<%= image_path(@post.cover_image) %>" />'
+      )
+    })
+
+    test("image_tag with data attributes", () => {
+      expect(transform('<%= image_tag "icon.png", data: { controller: "image" } %>')).toBe(
+        '<img src="<%= image_path("icon.png") %>" data-controller="image" />'
+      )
+    })
+  })
+
   describe("non-ActionView elements", () => {
     test("regular HTML elements are not modified", () => {
       expect(transform('<div class="content">Hello</div>')).toBe(

javascript/packages/rewriter/test/html-to-action-view-tag-helper.test.ts

@@ -184,7 +184,7 @@ describe("HTMLToActionViewTagHelperRewriter", () => {
 
     test("img with attributes", () => {
       expect(transform('<img src="image.png" alt="Photo">')).toBe(
-        '<%= tag.img src: "image.png", alt: "Photo" %>'
+        '<%= image_tag "image.png", alt: "Photo" %>'
       )
     })
   })
@@ -425,6 +425,44 @@ describe("HTMLToActionViewTagHelperRewriter", () => {
     })
   })
 
+  describe("image_tag for img elements", () => {
+    test("img with src attribute", () => {
+      expect(transform('<img src="icon.png">')).toBe(
+        '<%= image_tag "icon.png" %>'
+      )
+    })
+
+    test("img with src and alt", () => {
+      expect(transform('<img src="icon.png" alt="Icon">')).toBe(
+        '<%= image_tag "icon.png", alt: "Icon" %>'
+      )
+    })
+
+    test("img with src, alt and class", () => {
+      expect(transform('<img src="photo.jpg" alt="Photo" class="avatar">')).toBe(
+        '<%= image_tag "photo.jpg", alt: "Photo", class: "avatar" %>'
+      )
+    })
+
+    test("img with src and data attributes", () => {
+      expect(transform('<img src="icon.png" data-controller="image">')).toBe(
+        '<%= image_tag "icon.png", data: { controller: "image" } %>'
+      )
+    })
+
+    test("img self-closing", () => {
+      expect(transform('<img src="icon.png" />')).toBe(
+        '<%= image_tag "icon.png" %>'
+      )
+    })
+
+    test("img without src", () => {
+      expect(transform('<img alt="Photo">')).toBe(
+        '<%= image_tag alt: "Photo" %>'
+      )
+    })
+  })
+
   describe("ERB in attribute values", () => {
     test("single ERB expression becomes Ruby variable", () => {
       expect(transform('<div class="<%= class_name %>">Content</div>')).toBe(

src/analyze/action_view/image_tag.c

@@ -0,0 +1,79 @@
+#include <prism.h>
+#include <stdbool.h>
+#include <stdlib.h>
+#include <string.h>
+
+#include "../../include/analyze/action_view/tag_helper_handler.h"
+
+bool detect_image_tag(pm_call_node_t* call_node, pm_parser_t* parser) {
+  if (!call_node || !call_node->name) { return false; }
+
+  pm_constant_t* constant = pm_constant_pool_id_to_constant(&parser->constant_pool, call_node->name);
+  return constant && constant->length == 9 && strncmp((const char*) constant->start, "image_tag", 9) == 0;
+}
+
+char* extract_image_tag_name(pm_call_node_t* _call_node, pm_parser_t* _parser, hb_allocator_T* allocator) {
+  return hb_allocator_strdup(allocator, "img");
+}
+
+char* extract_image_tag_content(pm_call_node_t* _call_node, pm_parser_t* _parser, hb_allocator_T* _allocator) {
+  return NULL;
+}
+
+char* extract_image_tag_src(pm_call_node_t* call_node, pm_parser_t* _parser, hb_allocator_T* allocator) {
+  if (!call_node || !call_node->arguments) { return NULL; }
+
+  pm_arguments_node_t* arguments = call_node->arguments;
+  if (!arguments->arguments.size) { return NULL; }
+
+  pm_node_t* first_argument = arguments->arguments.nodes[0];
+
+  if (first_argument->type == PM_STRING_NODE) {
+    pm_string_node_t* string_node = (pm_string_node_t*) first_argument;
+    size_t length = pm_string_length(&string_node->unescaped);
+
+    return hb_allocator_strndup(allocator, (const char*) pm_string_source(&string_node->unescaped), length);
+  }
+
+  size_t source_length = first_argument->location.end - first_argument->location.start;
+  return hb_allocator_strndup(allocator, (const char*) first_argument->location.start, source_length);
+}
+
+bool image_tag_source_is_url(const char* source, size_t length) {
+  if (!source || length == 0) { return false; }
+
+  if (length >= 2 && source[0] == '/' && source[1] == '/') { return true; }
+  if (strstr(source, "://") != NULL) { return true; }
+
+  return false;
+}
+
+char* wrap_in_image_path(const char* source, size_t source_length, hb_allocator_T* allocator) {
+  const char* prefix = "image_path(";
+  const char* suffix = ")";
+
+  size_t prefix_length = strlen(prefix);
+  size_t suffix_length = strlen(suffix);
+  size_t total_length = prefix_length + source_length + suffix_length;
+  char* result = hb_allocator_alloc(allocator, total_length + 1);
+
+  memcpy(result, prefix, prefix_length);
+  memcpy(result + prefix_length, source, source_length);
+  memcpy(result + prefix_length + source_length, suffix, suffix_length);
+
+  result[total_length] = '\0';
+
+  return result;
+}
+
+bool image_tag_supports_block(void) {
+  return false;
+}
+
+const tag_helper_handler_T image_tag_handler = { .name = "image_tag",
+                                                 .source =
+                                                   HB_STRING_LITERAL("ActionView::Helpers::AssetTagHelper#image_tag"),
+                                                 .detect = detect_image_tag,
+                                                 .extract_tag_name = extract_image_tag_name,
+                                                 .extract_content = extract_image_tag_content,
+                                                 .supports_block = image_tag_supports_block };

src/analyze/action_view/registry.c

@@ -10,8 +10,9 @@ extern const tag_helper_handler_T link_to_handler;
 extern const tag_helper_handler_T turbo_frame_tag_handler;
 extern const tag_helper_handler_T javascript_tag_handler;
 extern const tag_helper_handler_T javascript_include_tag_handler;
+extern const tag_helper_handler_T image_tag_handler;
 
-static size_t handlers_count = 6;
+static size_t handlers_count = 7;
 
 tag_helper_info_T* tag_helper_info_init(hb_allocator_T* allocator) {
   tag_helper_info_T* info = hb_allocator_alloc(allocator, sizeof(tag_helper_info_T));
@@ -43,7 +44,7 @@ void tag_helper_info_free(tag_helper_info_T** info) {
 }
 
 tag_helper_handler_T* get_tag_helper_handlers(void) {
-  static tag_helper_handler_T static_handlers[6];
+  static tag_helper_handler_T static_handlers[7];
   static bool initialized = false;
 
   if (!initialized) {
@@ -53,6 +54,8 @@ tag_helper_handler_T* get_tag_helper_handlers(void) {
     static_handlers[3] = turbo_frame_tag_handler;
     static_handlers[4] = javascript_tag_handler;
     static_handlers[5] = javascript_include_tag_handler;
+    static_handlers[6] = image_tag_handler;
+
     initialized = true;
   }