HTML+ERB

Opening Tags

Script Tag (<%)

ERB

<% "String" %>

AST

{
  type: "erb-loud",
  language: "ruby",
  value: {
    // Prism return value
  }
}

Expression Tag (<%=)

ERB

<%= "String" %>

AST

{
  type: "erb-loud",
  language: "ruby",
  value: {
    // Prism return value
  }
}

Raw text output Tag (<%==)

ERB

<%== "String" %>

AST

{
  type: "erb-loud",
  language: "ruby",
  value: {
    // Prism return value
  }
}

Comment Tag (<%#)

Can also be seen as <% #.

ERB

<%# Comment %>

AST

{
  type: "erb-comment",
  language: "ruby",
  value: {
    // Prism return value
  }
}

??? Tag (<%-)

ERB

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

??? Tag (<%%)

ERB

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

Closing tags

??? Tag (%>)

ERB

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

??? Tag (%%>)

ERB

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

??? Tag (-%>)

ERB

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

Attribute Value interpolation

Interpolate attribute value

ERB

<article id="<%= dom_id(article) %>"></article>

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

Interpolate attribute value with static value

ERB

<article class="article <%= classes_for(article) %>"></article>

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

Attributes Interpolation

Output

ERB

<input <%= "type='text' %> />

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

Conditional

ERB

<input <% if true %> type="text" <% end %> />

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

Conditionals

Tag Children

ERB

<% if true %>
  <h1><%= "Hello World" %></h1>
<% end %>

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

Loops

Tag Children

ERB

<% @posts.each do |post| %>
  <h1><%= post.title %></h1>
<% end %>

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

Blocks

TODO

Rails Tag Helpers

content_tag

ERB

<%= content_tag(:p, "Hello world!") %>

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

tag.<tag name>

ERB

<%= tag.div tag.p("Hello world!") %>

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

tag.<tag name> with block

ERB

<%= tag.p do %>
  Hello world!
<% end %>

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

tag.<tag name> with attributes

ERB

<%= tag.section class: ["bg-black text-white"] %>

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

tag.attributes

ERB

<input <%= tag.attributes(type: :text, aria: { label: "Search" }) %>>

AST

{
  type: "erb-???",
  language: "ruby",
  value: {
    // Prism return value
  }
}

Disallowed

We should disallow/discourage the following patterns

Dynamic tag names

ERB

<<%= "input" %> required />

Dynamic Attribute names

ERB

<input <%= "type" %>="text" />