diff --git a/guides/components.md b/guides/components.md
index f78aa38a3d..962c51b528 100644
--- a/guides/components.md
+++ b/guides/components.md
@@ -16,7 +16,7 @@ At the end of the Request life-cycle chapter, we created a template at `lib/hell
```heex
- Hello World, from <%= @messenger %>!
+ Hello World, from {@messenger}!
```
@@ -34,7 +34,7 @@ That's simple enough. There's only two lines, `use HelloWeb, :html`. This line c
All of the imports and aliases we make in our module will also be available in our templates. That's because templates are effectively compiled into functions inside their respective module. For example, if you define a function in your module, you will be able to invoke it directly from the template. Let's see this in practice.
-Imagine we want to refactor our `show.html.heex` to move the rendering of `Hello World, from <%= @messenger %>!
` to its own function. We can move it to a function component inside `HelloHTML`, let's do so:
+Imagine we want to refactor our `show.html.heex` to move the rendering of `Hello World, from {@messenger}!
` to its own function. We can move it to a function component inside `HelloHTML`, let's do so:
```elixir
defmodule HelloWeb.HelloHTML do
@@ -46,7 +46,7 @@ defmodule HelloWeb.HelloHTML do
def greet(assigns) do
~H"""
- Hello World, from <%= @messenger %>!
+ Hello World, from {@messenger}!
"""
end
end
@@ -89,19 +89,21 @@ Next, let's fully understand the expressive power behind the HEEx template langu
## HEEx
-Function components and templates files are powered by [the HEEx template language](https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#sigil_H/2), which stands for "HTML+EEx". EEx is an Elixir library that uses `<%= expression %>` to execute Elixir expressions and interpolate their results into the template. This is frequently used to display assigns we have set by way of the `@` shortcut. In your controller, if you invoke:
+Function components and templates files are powered by [the HEEx template language](https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#sigil_H/2), which stands for "HTML+EEx". EEx is an Elixir library that uses `<%= expression %>` to execute Elixir expressions and interpolate their results into arbitrary text templates. HEEx extends EEx for writing HTML templates mixed with Elixir interpolation. We can write Elixir code inside `{...}` for HTML-aware interpolation inside tag attributes and the body. We can also interpolate arbitrary HEEx blocks using EEx interpolation (`<%= ... %>`). We use `@name` to access the key `name` defined inside `assigns`.
+
+This is frequently used to display assigns we have set by way of the `@` shortcut. In your controller, if you invoke:
```elixir
render(conn, :show, username: "joe")
```
-Then you can access said username in the templates as `<%= @username %>`. In addition to displaying assigns and functions, we can use pretty much any Elixir expression. For example, in order to have conditionals:
+Then you can access said username in the templates as `{@username}`. In addition to displaying assigns and functions, we can use pretty much any Elixir expression. For example, in order to have conditionals:
```heex
<%= if some_condition? do %>
- Some condition is true for user: <%= @username %>
+ Some condition is true for user: {@username}
<% else %>
- Some condition is false for user: <%= @username %>
+ Some condition is false for user: {@username}
<% end %>
```
@@ -115,8 +117,8 @@ or even loops:
<%= for number <- 1..10 do %>
- | <%= number %> |
- <%= number * number %> |
+ {number} |
+ {number * number} |
<% end %>
@@ -131,20 +133,20 @@ HEEx also comes with handy HTML extensions we will learn next.
Besides allowing interpolation of Elixir expressions via `<%= %>`, `.heex` templates come with HTML-aware extensions. For example, let's see what happens if you try to interpolate a value with "<" or ">" in it, which would lead to HTML injection:
```heex
-<%= "Bold?" %>
+{"Bold?"}
```
Once you render the template, you will see the literal `` on the page. This means users cannot inject HTML content on the page. If you want to allow them to do so, you can call `raw`, but do so with extreme care:
```heex
-<%= raw "Bold?" %>
+{raw("Bold?")}
```
-Another super power of HEEx templates is validation of HTML and lean interpolation syntax of attributes. You can write:
+Another super power of HEEx templates is validation of HTML and interpolation syntax of attributes. You can write:
```heex
-
Hello <%= @username %>
+
Hello {@username}
-
Hello <%= @username %>
+
Hello {@username}
- - <%= item.name %>
+ - {item.name}
```
@@ -189,7 +191,7 @@ Layouts are just function components. They are defined in a module, just like al
You may be wondering how the string resulting from a rendered view ends up inside a layout. That's a great question! If we look at `lib/hello_web/components/layouts/root.html.heex`, just about at the end of the ``, we will see this.
```heex
-<%= @inner_content %>
+{@inner_content}
```
In other words, after rendering your page, the result is placed in the `@inner_content` assign.
diff --git a/guides/contexts.md b/guides/contexts.md
index 333eaa209f..186afd6437 100644
--- a/guides/contexts.md
+++ b/guides/contexts.md
@@ -525,10 +525,9 @@ We added a `category_select` above our save button. Now let's try it out. Next,
<.list>
...
+ <:item title="Categories">
-+ <%= for cat <- @product.categories do %>
-+ <%= cat.title %>
-+
-+ <% end %>
++
+
```
@@ -938,29 +937,23 @@ We created a view to render our `show.html` template and aliased our `ShoppingCa
Next we can create the template at `lib/hello_web/controllers/cart_html/show.html.heex`:
```heex
-<%= if @cart.items == [] do %>
- <.header>
- My Cart
- <:subtitle>Your cart is empty
-
-<% else %>
- <.header>
- My Cart
-
+<.header>
+ My Cart
+ <:subtitle :if={@cart.items == []}>Your cart is empty
+
+
<.simple_form :let={f} for={@changeset} action={~p"/cart"}>
- <.inputs_for :let={item_form} field={f[:items]}>
- <% item = item_form.data %>
+ <.inputs_for :let={%{data: item} = item_form} field={f[:items]}>
<.input field={item_form[:quantity]} type="number" label={item.product.title} />
- <%= currency_to_str(ShoppingCart.total_item_price(item)) %>
+ {currency_to_str(ShoppingCart.total_item_price(item))}
<:actions>
<.button>Update cart
-
- Total: <%= currency_to_str(ShoppingCart.total_cart_price(@cart)) %>
-<% end %>
+ Total: {currency_to_str(ShoppingCart.total_cart_price(@cart))}
+
<.back navigate={~p"/products"}>Back to products
```
@@ -1300,20 +1293,20 @@ Next we can create the template at `lib/hello_web/controllers/order_html/show.ht
<.header>
Thank you for your order!
<:subtitle>
- User uuid: <%= @order.user_uuid %>
+ User uuid: {@order.user_uuid}
<.table id="items" rows={@order.line_items}>
- <:col :let={item} label="Title"><%= item.product.title %>
- <:col :let={item} label="Quantity"><%= item.quantity %>
+ <:col :let={item} label="Title">{item.product.title}
+ <:col :let={item} label="Quantity">{item.quantity}
<:col :let={item} label="Price">
- <%= HelloWeb.CartHTML.currency_to_str(item.price) %>
+ {HelloWeb.CartHTML.currency_to_str(item.price)}
Total price:
-<%= HelloWeb.CartHTML.currency_to_str(@order.total_price) %>
+{HelloWeb.CartHTML.currency_to_str(@order.total_price)}
<.back navigate={~p"/products"}>Back to products
```
@@ -1325,11 +1318,11 @@ Our last addition will be to add the "complete order" button to our cart page to
```diff
<.header>
My Cart
-+ <:actions>
-+ <.link href={~p"/orders"} method="post">
-+ <.button>Complete order
-+
-+
++ <:actions>
++ <.link href={~p"/orders"} method="post">
++ <.button>Complete order
++
++
```
diff --git a/guides/plug.md b/guides/plug.md
index 0c1d6a5175..04e502a48d 100644
--- a/guides/plug.md
+++ b/guides/plug.md
@@ -120,7 +120,7 @@ In the [`init/1`] callback, we pass a default locale to use if none is present i
To see the assign in action, go to the template in `lib/hello_web/controllers/page_html/home.html.heex` and add the following code after the closing of the `` tag:
```heex
-Locale: <%= @locale %>
+Locale: {@locale}
```
Go to [http://localhost:4000/](http://localhost:4000/) and you should see the locale exhibited. Visit [http://localhost:4000/?locale=fr](http://localhost:4000/?locale=fr) and you should see the assign changed to `"fr"`. Someone can use this information alongside [Gettext](https://hexdocs.pm/gettext/Gettext.html) to provide a fully internationalized web application.
diff --git a/guides/real_time/presence.md b/guides/real_time/presence.md
index 106ea41775..32271b855a 100644
--- a/guides/real_time/presence.md
+++ b/guides/real_time/presence.md
@@ -217,7 +217,7 @@ defmodule HelloWeb.OnlineLive do
def render(assigns) do
~H"""
- - <%= id %> (<%= length(metas) %>)
+ - {id} ({length(metas)})
"""
end
diff --git a/guides/request_lifecycle.md b/guides/request_lifecycle.md
index 177b9376ab..79ac1e9649 100644
--- a/guides/request_lifecycle.md
+++ b/guides/request_lifecycle.md
@@ -181,7 +181,7 @@ Now that we've got the route, controller, view, and template, we should be able
There are a couple of interesting things to notice about what we just did. We didn't need to stop and restart the server while we made these changes. Yes, Phoenix has hot code reloading! Also, even though our `index.html.heex` file consists of only a single `section` tag, the page we get is a full HTML document. Our index template is actually rendered into layouts: first it renders `lib/hello_web/components/layouts/root.html.heex` which renders `lib/hello_web/components/layouts/app.html.heex` which finally includes our content. If you open those files, you'll see a line that looks like this at the bottom:
```heex
-<%= @inner_content %>
+{@inner_content}
```
This line injects our template into the layout before the HTML is sent off to the browser. We will talk more about layouts in the Controllers guide.
@@ -273,15 +273,17 @@ It's good to remember that the keys of the `params` map will always be strings,
For the last piece of this puzzle, we'll need a new template. Since it is for the `show` action of `HelloController`, it will go into the `lib/hello_web/controllers/hello_html` directory and be called `show.html.heex`. It will look surprisingly like our `index.html.heex` template, except that we will need to display the name of our messenger.
-To do that, we'll use the special HEEx tags for executing Elixir expressions: `<%= %>`. Notice that the initial tag has an equals sign like this: `<%=` . That means that any Elixir code that goes between those tags will be executed, and the resulting value will replace the tag in the HTML output. If the equals sign were missing, the code would still be executed, but the value would not appear on the page.
+To do that, we'll use the special HEEx tags for executing Elixir expressions: `{...}` and `<%= %>`. Notice that EEx tag has an equals sign like this: `<%=` . That means that any Elixir code that goes between those tags will be executed, and the resulting value will replace the tag in the HTML output. If the equals sign were missing, the code would still be executed, but the value would not appear on the page.
-Remember our templates are written in HEEx (HTML+EEx). HEEx is a superset of EEx which is why it shares the `<%= %>` syntax.
+Remember our templates are written in HEEx (HTML+EEx). HEEx is a superset of EEx, and thereby supports the EEx `<%= %>` interpolation syntax for interpolating arbitrary blocks of code. In general, the HEEx `{...}` interpolation syntax is preferred anytime there is HTML-aware intepolation to be done – such as within attributes or inline values with a body.
-And this is what the template should look like:
+The only times `EEx` `<%= %>` interpolation is necessary is for interpolationg arbitrary blocks of markup, such as branching logic that inects separate markup trees, or for interpolating values within `
- <%%= @inner_content %>
+ {@inner_content}