Compare ERB vs JavaScript Template Output

Compare ERB vs JavaScript Template Output

Use scripts/​render_erb_and_js.rb to verify that ERB templates and their JavaScript-converted equivalents produce matching output. This is essential for the offline scoring SPA which uses auto-converted ERB templates.

Basic Usage

# Compare heat list
bundle exec ruby scripts/​render_erb_and_js.rb db/​2025-barcelona-november.sqlite3 83

# Compare individual heat
bundle exec ruby scripts/​render_erb_and_js.rb db/​2025-barcelona-november.sqlite3 83 1

# With style parameter
bundle exec ruby scripts/​render_erb_and_js.rb db/​2025-barcelona-november.sqlite3 83 1 radio

Or using environment variable:

RAILS_APP_DB=2025-barcelona-november bundle exec ruby scripts/​render_erb_and_js.rb 83 1

What It Does

1. Renders the ERB template via Rails routing (extracts <main> content)
2. Fetches converted JavaScript templates from /​templates/​scoring.js
3. Fetches normalized data from /​scores/:judge/​heats/​data
4. Hydrates the data using heat_hydrator.js (for individual heats)
5. Renders using the JavaScript template
6. Compares row counts and saves both outputs for diff analysis

Output Files

All files are saved to /​tmp/ for analysis:

• /​tmp/​erb_rendered.html - ERB template output (main content only)
• /​tmp/​js_rendered.html - JavaScript template output
• /​tmp/​scoring_templates.js - Converted templates from /​templates/​scoring.js
• /​tmp/​heats_data.json - Raw normalized data from server
• /​tmp/​js_template_data.json - Hydrated data passed to JS template

Analyzing Differences

# Quick diff
diff /​tmp/​erb_rendered.html /​tmp/​js_rendered.html

# Side-by-side comparison
diff -y /​tmp/​erb_rendered.html /​tmp/​js_rendered.html | less

# Compare specific attributes
diff <(grep -o 'href="[^"]*"' /​tmp/​erb_rendered.html | sort) \
     <(grep -o 'href="[^"]*"' /​tmp/​js_rendered.html | sort)

Common Differences

Some differences are expected due to ERB-to-JS conversion limitations:

• HTML entity encoding: ERB uses " while JS uses "
• link_to blocks: Block form of link_to may render differently
• Whitespace: Minor whitespace differences are normal

Architecture

This tool supports the "Server computes, hydration joins, templates filter" principle:

• Server: Computes derived values and paths (respects RAILS_APP_SCOPE)
• Hydration: heat_hydrator.js joins normalized data by resolving IDs
• Templates: ERB and JS templates filter/​format data identically

Key Source Files

Server-side (Rails)

• app/​controllers/​scores_controller.rb

  • heats_data action: Returns normalized JSON data for SPA
  • heat action: Sets instance variables for ERB templates
  • Computes paths: hash with server-computed URLs

• app/​controllers/​templates_controller.rb

  • scoring action: Converts ERB templates to JavaScript on-the-fly
  • Defines path helper stubs for JS templates
  • Uses ErbPrismConverter for conversion

• lib/​erb_prism_converter.rb

  • Converts ERB templates to JavaScript functions using Ruby's Prism parser
  • Handles Ruby-to-JS translation (loops, conditionals, method calls)

Client-side (JavaScript)

• app/​javascript/​lib/​heat_hydrator.js

  • buildLookupTables(): Creates Maps for O(1) entity lookup
  • hydrateHeat(): Resolves IDs to full objects
  • buildHeatTemplateData(): Prepares complete data for templates

• app/​javascript/​controllers/​heat_app_controller.js

  • Main Stimulus controller for the offline scoring SPA
  • Loads templates and data, handles navigation
  • Manages offline/​online state transitions

ERB Templates (source of truth)

• app/​views/​scores/​heat.html.erb - Main heat view
• app/​views/​scores/​heatlist.html.erb - Heat list view
• app/​views/​scores/​_heat_header.html.erb - Heat header partial
• app/​views/​scores/​_info_box.html.erb - Info box with feedback errors
• app/​views/​scores/​_navigation_footer.html.erb - Prev/​next navigation
• app/​views/​scores/​_table_heat.html.erb - Standard heat table
• app/​views/​scores/​_rank_heat.html.erb - Finals ranking view
• app/​views/​scores/​_solo_heat.html.erb - Solo heat view
• app/​views/​scores/​_cards_heat.html.erb - Card-based scoring view

Scripts

• scripts/​render_erb_and_js.rb - This comparison tool
• scripts/​hydrate_heats.mjs - Node.js script for hydrating data (used by comparison tool)