Playground: Add ActionView → HTML rewriter tab (#1457)

This pull request adds a "Rewrite" that uses the
`ActionViewTagHelperToHTMLRewriter` rewriter to transform the ActionView
Tag helpers to pure HTML+ERB:

<img width="4008" height="1334" alt="CleanShot 2026-03-22 at 15 35
23@2x"
src="https://github.com/user-attachments/assets/1df738ca-0879-48f1-acff-e8e855902d34"
/>

Author: marcoroth

playground/index.html

@@ -373,6 +373,16 @@
                   <span class="ml-1">Diagnostics</span>
                 </button>
 
+                <button
+                  data-playground-target="viewerButton"
+                  data-viewer="rewrite"
+                  data-action="click->playground#selectViewer"
+                  class="text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md px-3 py-1.5 text-sm font-medium data-[active=true]:!bg-green-600 data-[active=true]:hover:!bg-green-700 data-[active=true]:!text-white"
+                >
+                  <i class="fas fa-wand-magic-sparkles"></i>
+                  <span class="ml-1">Rewrite</span>
+                </button>
+
                 <button
                   disabled
                   data-playground-target="viewerButton"
@@ -550,6 +560,35 @@
                 class="hidden w-full p-3 mb-3 rounded overflow-auto font-mono bg-[#282c34] text-[#dcdfe4] highlight h-[50vh] md:h-[calc(100vh-110px)] overflow-scroll"
               ></pre>
 
+              <div
+                data-viewer-target="rewrite"
+                data-playground-target="rewriteViewer"
+                data-action="click->playground#shrinkViewer"
+                class="hidden w-full mb-3 rounded overflow-auto bg-[#282c34] h-[50vh] md:h-[calc(100vh-110px)] overflow-scroll"
+              >
+                <div class="p-3 border-b border-gray-600 flex gap-4 items-center justify-between">
+                  <div class="flex gap-2 items-center">
+                    <span class="text-sm text-gray-300 mr-2">Rewriter:</span>
+                    <span data-playground-target="rewriteStatus" class="px-2 py-1 text-xs rounded font-medium"></span>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <label class="flex items-center gap-2 text-gray-300 text-sm">
+                      <input
+                        type="checkbox"
+                        data-playground-target="rewriteActionViewHelpers"
+                        data-action="change->playground#onRewriteActionViewHelpersChange"
+                        class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
+                      />
+                      <span class="select-none">Action View helpers</span>
+                    </label>
+                  </div>
+                </div>
+
+                <div class="w-full h-full overflow-auto">
+                  <pre data-playground-target="rewriteOutput" class="w-full p-3 m-0 font-mono bg-[#282c34] text-[#dcdfe4] language-html highlight" style="white-space: pre; line-height: 1.3"></pre>
+                </div>
+              </div>
+
               <div
                 data-viewer-target="format"
                 data-playground-target="formatViewer"

playground/package.json

@@ -22,6 +22,7 @@
     "@herb-tools/browser": "0.9.2",
     "@herb-tools/formatter": "0.9.2",
     "@herb-tools/linter": "0.9.2",
+    "@herb-tools/rewriter": "0.9.2",
     "@hotwired/stimulus": "^3.2.2",
     "dedent": "^1.7.0",
     "express": "^5.2.1",

playground/src/analyze.ts

@@ -3,6 +3,7 @@ import type { HerbBackend, ParseResult, LexResult, ParserOptions } from "@herb-t
 import { Formatter } from "@herb-tools/formatter"
 import { Linter } from "@herb-tools/linter"
 import { IdentityPrinter, DEFAULT_PRINT_OPTIONS } from "@herb-tools/printer"
+import { rewrite, ActionViewTagHelperToHTMLRewriter } from "@herb-tools/rewriter"
 
 import type { LintResult } from "@herb-tools/linter"
 import type { FormatOptions } from "@herb-tools/formatter"
@@ -62,6 +63,19 @@ export async function analyze(herb: HerbBackend, source: string, options: Parser
     new Promise((resolve) => resolve((new IdentityPrinter()).print(parseResult.value, printerOptions))),
   )
 
+  let rewritten: string | null = null
+
+  if (parseResult && parseResult.value) {
+    rewritten = await safeExecute<string>(
+      new Promise((resolve) => {
+        const rewriteParseResult = herb.parse(source, { ...options, track_whitespace: true })
+        const rewriter = new ActionViewTagHelperToHTMLRewriter()
+        const { output } = rewrite(rewriteParseResult.value, [rewriter], { baseDir: "/" })
+        resolve(output)
+      }),
+    )
+  }
+
   let lintResult: LintResult | null = null
 
   if (parseResult && parseResult.value) {
@@ -84,6 +98,7 @@ export async function analyze(herb: HerbBackend, source: string, options: Parser
     html,
     formatted,
     printed,
+    rewritten,
     version,
     lintResult,
     duration: endTime - startTime,

playground/src/controllers/playground_controller.js

@@ -77,6 +77,10 @@ export default class extends Controller {
     "parserOptions",
     "rubyViewer",
     "htmlViewer",
+    "rewriteViewer",
+    "rewriteOutput",
+    "rewriteStatus",
+    "rewriteActionViewHelpers",
     "lexViewer",
     "formatViewer",
     "formatSuccess",
@@ -373,6 +377,9 @@ export default class extends Controller {
       case 'html':
         content = this.htmlViewerTarget.textContent
         break
+      case 'rewrite':
+        content = this.rewriteOutputTarget.textContent
+        break
       case 'format':
         if (!this.formatSuccessTarget.classList.contains('hidden')) {
           content = this.formatSuccessTarget.textContent
@@ -522,7 +529,7 @@ export default class extends Controller {
   }
 
   isValidTab(tab) {
-    const validTabs = ['parse', 'lex', 'ruby', 'html', 'format', 'printer', 'diagnostics', 'full']
+    const validTabs = ['parse', 'lex', 'ruby', 'html', 'format', 'printer', 'diagnostics', 'rewrite', 'full']
     return validTabs.includes(tab)
   }
 
@@ -934,6 +941,28 @@ export default class extends Controller {
       Prism.highlightElement(this.htmlViewerTarget)
     }
 
+    if (this.hasRewriteViewerTarget) {
+      const options = this.getParserOptions()
+
+      if (this.hasRewriteActionViewHelpersTarget) {
+        this.rewriteActionViewHelpersTarget.checked = !!options.action_view_helpers
+      }
+
+      if (!options.action_view_helpers) {
+        this.rewriteStatusTarget.textContent = '⚠ Enable "Action View helpers" option'
+        this.rewriteStatusTarget.className = 'px-2 py-1 text-xs rounded font-medium bg-yellow-600 text-yellow-100'
+        this.rewriteOutputTarget.classList.remove("language-html")
+        this.rewriteOutputTarget.textContent = ''
+      } else {
+        this.rewriteStatusTarget.textContent = 'ActionView Tag Helper → HTML'
+        this.rewriteStatusTarget.className = 'px-2 py-1 text-xs rounded font-medium bg-green-600 text-green-100'
+        this.rewriteOutputTarget.classList.add("language-html")
+        this.rewriteOutputTarget.textContent = result.rewritten || 'No rewritten output available'
+
+        Prism.highlightElement(this.rewriteOutputTarget)
+      }
+    }
+
     const hasParserErrors = result.parseResult ? result.parseResult.recursiveErrors().length > 0 : false
     const currentSource = this.editor ? this.editor.getValue() : this.inputTarget.value
     const isWellFormatted = currentSource === result.formatted
@@ -1232,6 +1261,18 @@ export default class extends Controller {
     this.analyze()
   }
 
+  onRewriteActionViewHelpersChange(event) {
+    const checked = event.target.checked
+    const parserCheckbox = this.parserOptionsTarget.querySelector('input[data-option="action_view_helpers"]')
+
+    if (parserCheckbox) {
+      parserCheckbox.checked = checked
+    }
+
+    this.updateURL()
+    this.analyze()
+  }
+
   onFormatterOptionChange(_event) {
     this.updateURL()
     this.analyze()