-
-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
107 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,108 @@ | ||
# Migrating from 0.8 to 0.9 | ||
|
||
TODO: explain it | ||
First off, Temple now requires Elixir 1.13 or higher. This is because of some changes that were brought to the Elixir parser. | ||
|
||
## Whitespace Control | ||
|
||
To control whitespace in an element, Temple will now control this based on whether the `do` was used in the keyword list syntax or the do/end syntax. | ||
|
||
In 0.8, you would do: | ||
|
||
```elixir | ||
span do | ||
"hello!" | ||
end | ||
|
||
# <span> | ||
# hello! | ||
# </span> | ||
|
||
# The ! version of the element would render it as "tight" | ||
span! do | ||
"hello!" | ||
end | ||
|
||
# <span>hello!</span> | ||
``` | ||
|
||
In 0.9, you would do: | ||
|
||
```elixir | ||
span do | ||
"hello!" | ||
end | ||
|
||
# <span> | ||
# hello! | ||
# </span> | ||
|
||
span do: "hello!" | ||
|
||
# <span>hello!</span> | ||
``` | ||
|
||
## Components | ||
|
||
Components are no longer module based. To render a component, you can pass a function reference to the `c` keyword. You also no longer need to define a component in a module, using the `Temple.Component` module and its `render` macro. | ||
|
||
In 0.8, you would define a component like: | ||
|
||
```elixir | ||
defmodule MyAppWeb.Component.Card do | ||
import Temple.Component | ||
|
||
render do | ||
div class: "border p-4 rounded" do | ||
slot :default | ||
end | ||
end | ||
end | ||
``` | ||
|
||
And you would use the component like: | ||
|
||
```elixir | ||
div do | ||
c MyAppWeb.Component.Card do | ||
"Welcome to my app!" | ||
end | ||
end | ||
``` | ||
|
||
In 0.9, you would define a component like: | ||
|
||
```elixir | ||
defmodule MyAppWeb.Components do | ||
import Temple | ||
|
||
def card(assigns) do | ||
temple do | ||
div class: "border p-4 rounded" do | ||
slot :default | ||
end | ||
end | ||
end | ||
end | ||
``` | ||
|
||
And you would use the component like: | ||
|
||
```elixir | ||
div do | ||
c &MyAppWeb.Components.card/1 do | ||
"Welcome to my app!" | ||
end | ||
end | ||
``` | ||
|
||
We can observe here that in 0.9 the component is just any 1-arity function, so you can define them anywhere and you can have more than 1 in a single module. | ||
|
||
### defcomp | ||
|
||
Now that components are just functions, you no longer need this special macro to define a component in the middle of the module. | ||
|
||
This can simply be converted to a function. | ||
|
||
## Phoenix | ||
|
||
All Phoenix related items have moved to the [temple_phoenix](https://github.com/mhanberg/temple_phoenix) package. Please see that library docs for more details. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters