Temple now is written to be fully compatible with Phoenix LiveView! This comes with substantial internal changes as well as a better component API.
### Phoenix LiveView
Temple now outputs LiveView compatible EEx at compile time, which is fed right into the normal LiveView EEx engine (or the traditional HTML Engine if you are not using LiveView).
### Components
Temple now has a more complete component API.
Components work with anywhere, whether you are writing a little plug app, a vanilla Phoenix app, or a Phoenix LiveView app!
Please see the [documenation](https://hexdocs.pm/temple/Temple.html) for more information.
To migrate component from the 0.5.0 syntax to the 0.6.0 syntax, you can use the following as a guide
```elixir
# 0.5.0
# definition
defmodule PageView do
defcomponent :flex do
div id: @id, class: "flex" do
@children
end
end
end
# usage
require PageView
# or
import PageView
temple do
PageView.flex id: "my-flex" do
div "Item 1"
div "Item 2"
div "Item 3"
end
# with import
flex id: "my-flex" do
div "Item 1"
div "Item 2"
div "Item 3"
end
end
```
to
```elixir
# 0.6.0
# definition
defmodule Flex do
import Temple.Component
render do
div id: @id, class: "flex" do
slot :default
end
end
end
# usage
temple do
c Flex id: "my-flex" do
div do: "Item 1"
div do: "Item 2"
div do: "Item 3"
end
end
```
### Other breaking changes
0.6.0 has been a year in the making and a lot has changed in that time (in many cases, several times over), and I honestly can't really remember everything that is different now, but I will list some things here that I think you'll need to change or look out for.
- The `partial` macro is removed.
- You can now just call the `render` function like you normally would to render a phoenix partial.
- The `defcomponent` macro is removed.
- You now define components using the API described above.
- The `text` macro is now removed.
- You can just use a string literal or a variable to emit a text node.
- Elements and components no longer can take "content" as the first argument. A do block is now required, but you can still use the keyword list style for a concise style, e.g., `span do: "foobar"` instead of `span "foobar"`.
- The `:compact` reserved keyword option was removed.
- The macros that wrapped `Phoenix.HTML` are removed as they are no longer needed.
- The `temple.convert` task has been removed, but I am working to bring it back.
There might be some more, so if you run into any problems, please open a [GitHub Discussion](https://github.com/mhanberg/temple/discussions/new).
-`@inner_content` is removed in favor of invoking the default slot.
- The `compact` reserved keyword for elements has been removed. This is not really intentional, just a side effect of getting slots to a usable place. I expect to add it back, or at least similar functionality in the future.
Components are now a thin layer over template partials, compiling to calls to `render/3` and `render_layout/4` under the hood.
To upgrade your components the new syntax, you can copy your component markup and paste it into the `render/1` macro inside the component module and references to `@children` can be updated to `@inner_content`.
Components can are also referenced differently than before when using them. Before, one would simply call `flex` to render a component named `Flex`. Now, one must use the keyword `c` to render a component, passing the keyword the component module along with any assigns.
##### Before
```elixir
# definition
div class: "flex #{@class}" do
@children
end
# usage
flex class: "justify-between" do
for item <-@itemsdo
div do
item.name
end
end
end
```
##### After
```elixir
# definition
defmodule MyAppWeb.Component.Flex do
use Temple.Component
render do
div class: "flex #{@class}" do
@inner_content
end
end
end
# usage
alias MyApp.Component.Flex # probably located in my_app_web.ex
You can now use `mix temple.gen.live Context Schema table_name col:type` in the same way you can with Phoenix.
### Other
- Make a note in the README to set the filetype for Live temple templates to `lexs`. You should be able to set this extension to use Elixir for syntax highlighting in your editor. In vim, you can add the following to your `.vimrc`
```vim
augroup elixir
autocmd!
autocmd BufRead,BufNewFile *.lexs set filetype=elixir
-`Temple.Form.phx_label`, `Temple.Form.submit`, `Temple.Link.phx_button`, `Temple.Link.phx_link` now correctly parse blocks. Before this, they would escape anything passed to the block instead of accepting it as raw HTML.
