+ 
+
diff --git a/guides/howto/using_ssl.md b/guides/howto/using_ssl.md
index 8af2f74563..6677f95b79 100644
--- a/guides/howto/using_ssl.md
+++ b/guides/howto/using_ssl.md
@@ -31,7 +31,7 @@ Without the `otp_app:` key, we need to provide absolute paths to the files where
Path.expand("../../../some/path/to/ssl/key.pem", __DIR__)
```
-The options under the `https:` key are passed to the Plug adapter, typically `Plug.Cowboy`, which in turn uses `Plug.SSL` to select the TLS socket options. Please refer to the documentation for [Plug.SSL.configure/1](https://hexdocs.pm/plug/Plug.SSL.html#configure/1) for more information on the available options and their defaults. The [Plug HTTPS Guide](https://hexdocs.pm/plug/https.html) and the [Erlang/OTP ssl](https://www.erlang.org/doc/man/ssl.html) documentation also provide valuable information.
+The options under the `https:` key are passed to the Plug adapter, typically `Bandit`, which in turn uses `Plug.SSL` to select the TLS socket options. Please refer to the documentation for [Plug.SSL.configure/1](https://hexdocs.pm/plug/Plug.SSL.html#configure/1) for more information on the available options and their defaults. The [Plug HTTPS Guide](https://hexdocs.pm/plug/https.html) and the [Erlang/OTP ssl](https://www.erlang.org/doc/man/ssl.html) documentation also provide valuable information.
## SSL in Development
@@ -74,10 +74,26 @@ It is important to note that `force_ssl:` is a *compile* time config, so it norm
## HSTS
-HSTS or "strict-transport-security" is a mechanism that allows a website to declare itself as only accessible via a secure connection (HTTPS). It was introduced to prevent man-in-the-middle attacks that strip SSL/TLS. It causes web browsers to redirect from HTTP to HTTPS and refuse to connect unless the connection uses SSL/TLS.
+HSTS, short for 'HTTP Strict-Transport-Security', is a mechanism that allows websites to declare themselves as accessible exclusively through a secure connection (HTTPS). It was introduced to prevent man-in-the-middle attacks that strip SSL/TLS encryption. HSTS causes web browsers to redirect from HTTP to HTTPS and to refuse to connect unless the connection uses SSL/TLS.
-With `force_ssl: [hsts: true]` set, the `Strict-Transport-Security` header is set with a max age that defines the length of time the policy is valid for. Modern web browsers will respond to this by redirecting from HTTP to HTTPS for the standard case but it does have other consequences. [RFC6797](https://tools.ietf.org/html/rfc6797) which defines HSTS also specifies **that the browser should keep track of the policy of a host and apply it until it expires.** It also specifies that **traffic on any port other than 80 is assumed to be encrypted** as per the policy.
+With `force_ssl: [hsts: true]` set, the `Strict-Transport-Security` header is added with a max-age that defines the duration for which the policy is valid. Modern web browsers will respond to this by redirecting from HTTP to HTTPS, among other consequences. [RFC6797](https://tools.ietf.org/html/rfc6797), which defines HSTS, also specifies that **the browser should keep track of a host's policy and apply it until it expires.** It further specifies that **traffic on any port other than 80 is assumed to be encrypted** as per the policy.
-This can result in unexpected behaviour if you access your application on localhost, for example `https://localhost:4000`, as from that point forward any traffic coming from localhost will be expected to be encrypted, except port 80 which will be redirected to port 443. This has the potential to disrupt traffic to any other local servers or proxies that you may be running on your computer. Other applications or proxies on localhost will refuse to work unless the traffic is encrypted.
+While HSTS is recommended in production, it can lead to unexpected behavior when accessing applications on localhost. For instance, accessing an application with HSTS enabled at `https://localhost:4000` leads to a situation where all subsequent traffic from localhost, except for port 80, is expected to be encrypted. This can disrupt traffic to other local servers or proxies running on your computer that are unrelated to your Phoenix application and may not support encrypted traffic.
-If you do inadvertently turn on HSTS for localhost, you may need to reset the cache on your browser before it will accept any HTTP traffic from localhost. For Chrome, you need to `Empty Cache and Hard Reload` which is available from the reload menu that appears when you click and hold the reload icon from the Developer Tools Panel. For Safari, you will need to clear your cache, remove the entry from `~/Library/Cookies/HSTS.plist` (or delete that file entirely) and restart Safari. Alternately, you can set the `:expires` option on `force_ssl` to `0` which should expired the entry to turn off HSTS. More information on the options for HSTS are available at [Plug.SSL](https://hexdocs.pm/plug/Plug.SSL.html).
+If you inadvertently enable HSTS for localhost, you may need to reset your browser's cache before it will accept HTTP traffic from localhost again.
+
+For Chrome:
+1. Open the Developer Tools Panel.
+2. Click and hold the reload icon next to the address bar to reveal a dropdown menu.
+3. Select "Empty Cache and Hard Reload".
+
+For Safari:
+1. Clear your browser cache.
+2. Remove the entry from `~/Library/Cookies/HSTS.plist` or delete the file entirely.
+3. Restart Safari.
+
+For other browsers, please consult the documentation for HSTS.
+
+Alternatively, setting the `:expires` option on `force_ssl` to `0` should expire the entry and disable HSTS.
+
+For more information on HSTS options, see [Plug.SSL](https://hexdocs.pm/plug/Plug.SSL.html).
diff --git a/guides/howto/writing_a_channels_client.md b/guides/howto/writing_a_channels_client.md
index 32a1f53480..629e4f471a 100644
--- a/guides/howto/writing_a_channels_client.md
+++ b/guides/howto/writing_a_channels_client.md
@@ -34,8 +34,8 @@ The general format for messages a client sends to a Phoenix Channel is as follow
[join_reference, message_reference, topic_name, event_name, payload]
```
-- The `message_reference` is chosen by the client and should be a unique value. The server includes it in its reply so that the client knows which message the reply is for.
- The `join_reference` is also chosen by the client and should also be a unique value. It only needs to be sent for a `"phx_join"` event; for other messages it can be `null`. It is used as a message reference for `push` messages from the server, meaning those that are not replies to a specific client message. For example, imagine something like "a new user just joined the chat room".
+- The `message_reference` is chosen by the client and should be a unique value. The server includes it in its reply so that the client knows which message the reply is for.
- The `topic_name` must be a known topic for the socket endpoint, and a client must join that topic before sending any messages on it.
- The `event_name` must match the first argument of a `handle_in` function on the server channel module.
- The `payload` should be a map and is passed as the second argument to that `handle_in` function.
diff --git a/guides/introduction/community.md b/guides/introduction/community.md
index 086edecb02..84fe538133 100644
--- a/guides/introduction/community.md
+++ b/guides/introduction/community.md
@@ -6,8 +6,6 @@ There are a number of places to connect with community members at all experience
* We're on Libera IRC in the [\#elixir](https://web.libera.chat/?channels=#elixir) channel.
- * Join the #phoenix channel on [Slack](https://elixir-lang.slack.com).
-
* Feel free to join and check out the #phoenix channel on [Discord](https://discord.gg/elixir).
* Read about [bug reports](https://github.com/phoenixframework/phoenix/blob/main/CONTRIBUTING.md#bug-reports) or open an issue in the Phoenix [issue tracker](https://github.com/phoenixframework/phoenix/issues).
@@ -16,15 +14,17 @@ There are a number of places to connect with community members at all experience
* Follow the Phoenix Framework on [Twitter](https://twitter.com/elixirphoenix).
- * The source for these guides is [on GitHub](https://github.com/phoenixframework/phoenix/tree/main/guides). To help improve the guides, please report an [issue](https://github.com/phoenixframework/phoenix/issues) or open a [pull request](https://github.com/phoenixframework/phoenix/pulls).
+The Security Working Group of the Erlang Ecosystem Foundation also publishes in-depth documents about [security best practices for Erlang, Elixir, and Phoenix](https://erlef.github.io/security-wg/web_app_security_best_practices_beam/).
## Books
- * [Programming Phoenix LiveView - Interactive Elixir Web Programming Without Writing Any JavaScript - 2021 (by Bruce Tate and Sophie DeBenedetto)](https://pragprog.com/titles/liveview/programming-phoenix-liveview/)
+ * [Programming Phoenix LiveView - Interactive Elixir Web Programming Without Writing Any JavaScript - 2023 (by Bruce Tate and Sophie DeBenedetto)](https://pragprog.com/titles/liveview/programming-phoenix-liveview/)
+
+ * [Phoenix Tutorial (Phoenix 1.6)](https://thephoenixtutorial.org/) - [Free to read online](https://thephoenixtutorial.org/book)
* [Real-Time Phoenix - Build Highly Scalable Systems with Channels (by Stephen Bussey - 2020)](https://pragprog.com/titles/sbsockets/real-time-phoenix/)
- * [Programming Phoenix 1.4 (by Bruce Tate and Phoenix core team members Chris McCord and José Valim - 2019)](https://pragprog.com/titles/phoenix14/programming-phoenix-1-4/)
+ * [Programming Phoenix 1.4 (by Bruce Tate, Chris McCord, and José Valim - 2019)](https://pragprog.com/titles/phoenix14/programming-phoenix-1-4/)
* [Phoenix in Action (by Geoffrey Lessel - 2019)](https://manning.com/books/phoenix-in-action)
@@ -35,9 +35,13 @@ There are a number of places to connect with community members at all experience
## Screencasts/Courses
* [Phoenix LiveView Free Course (by The Pragmatic Studio - 2023)](https://pragmaticstudio.com/courses/phoenix-liveview)
-
+
+ * [Build It With Phoenix video course (by Geoffrey Lessel - 2023)](https://builditwithphoenix.com)
+
* [Free Crash Course: Phoenix LiveView (by Productive Programmer - 2023)](https://www.productiveprogrammer.com/learn-phoenix-liveview-free)
+ * [Phoenix on Rails: Elixir and Phoenix for Ruby on Rails developers (by George Arrowsmith - 2023)](https://phoenixonrails.com)
+
* [Groxio LiveView: Self Study Program (by Bruce Tate - 2020)](https://grox.io/language/liveview/course)
* [Alchemist Camp: Learn Elixir and Phoenix by building (2018-2022)](https://alchemist.camp/episodes)
@@ -53,5 +57,3 @@ There are a number of places to connect with community members at all experience
* [LearnPhoenix.tv: Learn how to Build Fast, Dependable Web Apps with Phoenix (2017)](https://www.learnphoenix.tv/)
* [LearnPhoenix.io: Build Scalable, Real-Time Apps with Phoenix, React, and React Native (2016)](https://www.learnphoenix.io/)
-
- * [Phoenix on Rails: Elixir and Phoenix for Ruby on Rails developers (by George Arrowsmith - 2023)](https://phoenixonrails.com)
diff --git a/guides/introduction/installation.md b/guides/introduction/installation.md
index e7e96a9f91..11b2c3969e 100644
--- a/guides/introduction/installation.md
+++ b/guides/introduction/installation.md
@@ -8,7 +8,7 @@ In order to build a Phoenix application, we will need a few dependencies install
Please take a look at this list and make sure to install anything necessary for your system. Having dependencies installed in advance can prevent frustrating problems later on.
-## Elixir 1.14 or later
+## Elixir 1.15 or later
Phoenix is written in Elixir, and our application code will also be written in Elixir. We won't get far in a Phoenix app without it! The Elixir site maintains a great [Installation Page](https://elixir-lang.org/install.html) to help.
@@ -28,13 +28,13 @@ When we install Elixir using instructions from the Elixir [Installation Page](ht
## Phoenix
-To check that we are on Elixir 1.14 and Erlang 24 or later, run:
+To check that we are on Elixir 1.15 and Erlang 24 or later, run:
```console
elixir -v
Erlang/OTP 24 [erts-12.0] [source] [64-bit] [smp:8:8] [async-threads:10] [hipe] [kernel-poll:false] [dtrace]
-Elixir 1.14.0
+Elixir 1.15.0
```
Once we have Elixir and Erlang, we are ready to install the Phoenix application generator:
diff --git a/guides/introduction/overview.md b/guides/introduction/overview.md
index a63754e554..35ef681b40 100644
--- a/guides/introduction/overview.md
+++ b/guides/introduction/overview.md
@@ -4,7 +4,7 @@ Phoenix is a web development framework written in Elixir which implements the se
Phoenix provides the best of both worlds - high developer productivity _and_ high application performance. It also has some interesting new twists like channels for implementing realtime features and pre-compiled templates for blazing speed.
-If you are already familiar with Elixir, great! If not, there are a number of places to learn. The [Elixir guides](https://elixir-lang.org/getting-started/introduction.html) and the [Elixir learning resources page](https://elixir-lang.org/learning.html) are two great places to start.
+If you are already familiar with Elixir, great! If not, there are a number of places to learn. The [Elixir guides](https://hexdocs.pm/elixir/introduction.html) and the [Elixir learning resources page](https://elixir-lang.org/learning.html) are two great places to start.
The guides that you are currently looking at provide an overview of all parts that make Phoenix. Here is a rundown of what they provide:
diff --git a/guides/introduction/packages_glossary.md b/guides/introduction/packages_glossary.md
index e1f32b7dc2..f066943fe4 100644
--- a/guides/introduction/packages_glossary.md
+++ b/guides/introduction/packages_glossary.md
@@ -33,12 +33,12 @@ You will also work with the following:
* [Swoosh](https://hexdocs.pm/swoosh) - a library for composing,
delivering and testing emails, also used by `mix phx.gen.auth`
-When peeking under the covers, you will find those libraries play
+When peeking under the covers, you will find these libraries play
an important role in Phoenix applications:
* [Phoenix HTML](https://hexdocs.pm/phoenix_html) - building blocks
for working with HTML and forms safely
-
+
* [Phoenix Ecto](https://hex.pm/packages/phoenix_ecto) - plugs and
protocol implementations for using phoenix with ecto
diff --git a/guides/introduction/up_and_running.md b/guides/introduction/up_and_running.md
index 50cdbbede8..df1871d49a 100644
--- a/guides/introduction/up_and_running.md
+++ b/guides/introduction/up_and_running.md
@@ -10,9 +10,15 @@ We can run `mix phx.new` from any directory in order to bootstrap our Phoenix ap
$ mix phx.new hello
```
-> A note about [Ecto](ecto.html): Ecto allows our Phoenix application to communicate with a data store, such as PostgreSQL, MySQL, and others. If our application will not require this component we can skip this dependency by passing the `--no-ecto` flag to `mix phx.new`.
-
-> To learn more about `mix phx.new` you can read the [Mix Tasks Guide](mix_tasks.html#phoenix-specific-mix-tasks).
+> By default, `mix phx.new` includes a number of optional dependencies, for example:
+>
+> - [Ecto](ecto.html) for communicating with a data store, such as PostgreSQL, MySQL, and others. You can skip this with `--no-ecto`.
+>
+> - [Phoenix.HTML](https://hexdocs.pm/phoenix_html/Phoenix.HTML.html), [TailwindCSS](https://tailwindcss.com), and [Esbuild](https://esbuild.github.io) for HTML applications. You can skip them with the `--no-html` and `--no-assets` flags.
+>
+> - [Phoenix.LiveView](https://hexdocs.pm/phoenix_live_view/) for building realtime and interactive web applications. You can skip this with `--no-live`.
+>
+> Read the [Mix Tasks Guide](mix_tasks.html#phoenix-specific-mix-tasks) for the full list of things that can be excluded, among other options.
```console
mix phx.new hello
@@ -80,7 +86,7 @@ And finally, we'll start the Phoenix server:
```console
$ mix phx.server
-[info] Running HelloWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
+[info] Running HelloWeb.Endpoint with Bandit 1.5.7 at 127.0.0.1:4000 (http)
[info] Access HelloWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...
...
diff --git a/guides/json_and_apis.md b/guides/json_and_apis.md
index 9255c27a51..5994229dc5 100644
--- a/guides/json_and_apis.md
+++ b/guides/json_and_apis.md
@@ -141,7 +141,7 @@ To understand how to render JSON, let's start with the `index` action from `UrlC
As we can see, this is not any different from how Phoenix renders HTML templates. We call `render/3`, passing the connection, the template we want our views to render (`:index`), and the data we want to make available to our views.
-Phoenix typically uses one view per rendering format. When rendering HTML, we would use `HelloHTML`. Now that we are rendering JSON, we will find a `UrlJSON` view collocated with the template at `lib/hello_web/controllers/url_json.ex`. Let's open it up:
+Phoenix typically uses one view per rendering format. When rendering HTML, we would use `UrlHTML`. Now that we are rendering JSON, we will find a `UrlJSON` view collocated with the template at `lib/hello_web/controllers/url_json.ex`. Let's open it up:
```elixir
defmodule HelloWeb.UrlJSON do
@@ -173,7 +173,7 @@ end
This view is very simple. The `index` function receives all URLs, and converts them into a list of maps. Those maps are placed inside the data key at the root, exactly as we saw when interfacing with our application from `cURL`. In other words, our JSON view converts our complex data into simple Elixir data-structures. Once our view layer returns, Phoenix uses the `Jason` library to encode JSON and send the response to the client.
-If you explore the remaining the controller, you will learn the `show` action is similar to the `index` one. For `create`, `update`, and `delete` actions, Phoenix uses one other important feature, called "Action fallback".
+If you explore the remaining controller, you will learn the `show` action is similar to the `index` one. For `create`, `update`, and `delete` actions, Phoenix uses one other important feature, called "Action fallback".
## Action fallback
@@ -325,8 +325,8 @@ The output should contain the following:
track JavaScript dependencies
• --no-gettext - do not generate gettext files
• --no-html - do not generate HTML views
- • --no-live - comment out LiveView socket setup in
- assets/js/app.js. Automatically disabled if --no-html is given
+ • --no-live - comment out LiveView socket setup in your Endpoint
+ and assets/js/app.js. Automatically disabled if --no-html is given
• --no-mailer - do not generate Swoosh mailer files
• --no-tailwind - do not include tailwind dependencies and
assets. The generated markup will still include Tailwind CSS
diff --git a/guides/mix_tasks.md b/guides/mix_tasks.md
index 16035a6733..565a001472 100644
--- a/guides/mix_tasks.md
+++ b/guides/mix_tasks.md
@@ -2,7 +2,7 @@
There are currently a number of built-in Phoenix-specific and Ecto-specific [Mix tasks](`Mix.Task`) available to us within a newly-generated application. We can also create our own application specific tasks.
-> Note to learn more about `mix`, you can read Elixir's official [Introduction to Mix](https://elixir-lang.org/getting-started/mix-otp/introduction-to-mix.html).
+> Note to learn more about `mix`, you can read Elixir's official [Introduction to Mix](https://hexdocs.pm/elixir/introduction-to-mix.html).
## Phoenix tasks
@@ -154,7 +154,7 @@ $ mix phx.gen.json Blog Post posts title:string content:string
When `mix phx.gen.json` is done creating files, it helpfully tells us that we need to add a line to our router file as well as run our Ecto migrations.
```console
-Add the resource to your :api scope in lib/hello_web/router.ex:
+Add the resource to the "/api" scope in lib/hello_web/router.ex:
resources "/posts", PostController, except: [:new, :edit]
@@ -309,7 +309,7 @@ in its default location.
Do you want to create it? [Y/n]
```
-By pressing confirming, a channel will be created, then you need to connect the socket in your endpoint:
+By confirming, a channel will be created, then you need to connect the socket in your endpoint:
```console
Add the socket handler to your `lib/hello_web/endpoint.ex`, for example:
@@ -599,7 +599,6 @@ We certainly should follow the instructions and add our new repo to our supervis
```elixir
. . .
children = [
- # Start the Ecto repository
Hello.Repo,
# Our custom repo
OurCustom.Repo,
@@ -805,7 +804,7 @@ Indeed it does.
If you want to make your new Mix task to use your application's infrastructure, you need to make sure the application is started and configure when Mix task is being executed. This is particularly useful if you need to access your database from within the Mix task. Thankfully, Mix makes it really easy for us via the `@requirements` module attribute:
```elixir
- @requirements ["app.config"]
+ @requirements ["app.start"]
@impl Mix.Task
def run(_args) do
diff --git a/guides/plug.md b/guides/plug.md
index 97d525a9e7..0c1d6a5175 100644
--- a/guides/plug.md
+++ b/guides/plug.md
@@ -106,7 +106,8 @@ defmodule HelloWeb.Router do
pipeline :browser do
plug :accepts, ["html"]
plug :fetch_session
- plug :fetch_flash
+ plug :fetch_live_flash
+ plug :put_root_layout, html: {HelloWeb.LayoutView, :root}
plug :protect_from_forgery
plug :put_secure_browser_headers
plug HelloWeb.Plugs.Locale, "en"
@@ -156,7 +157,7 @@ The default endpoint plugs do quite a lot of work. Here they are in order:
- `Plug.MethodOverride` - converts the request method to PUT, PATCH or DELETE for POST requests with a valid `_method` parameter.
-- `Plug.Head` - converts HEAD requests to GET requests and strips the response body.
+- `Plug.Head` - converts HEAD requests to GET requests.
- `Plug.Session` - a plug that sets up session management. Note that `fetch_session/2` must still be explicitly called before using the session, as this plug just sets up how the session is fetched.
diff --git a/guides/real_time/channels.md b/guides/real_time/channels.md
index bce3d8d607..f2b12fb236 100644
--- a/guides/real_time/channels.md
+++ b/guides/real_time/channels.md
@@ -165,7 +165,7 @@ If your deployment environment does not support distributed Elixir or direct com
### Client Libraries
Any networked device can connect to Phoenix Channels as long as it has a client library.
-The following libraries exist today, and new ones are always welcome; to write your own, see our how-to guide "Writing a Channels Client".
+The following libraries exist today, and new ones are always welcome; to write your own, see our how-to guide [Writing a Channels Client](writing_a_channels_client.md).
#### Official
@@ -410,7 +410,7 @@ Now our `conn.assigns` contains the `current_user` and `user_token`.
### Step 2 - Pass the Token to the JavaScript
-Next, we need to pass this token to JavaScript. We can do so inside a script tag in `lib/hello_web/components/layouts/app.html.heex` right above the app.js script, as follows:
+Next, we need to pass this token to JavaScript. We can do so inside a script tag in `lib/hello_web/components/layouts/root.html.heex` right above the app.js script, as follows:
```heex
diff --git a/guides/real_time/presence.md b/guides/real_time/presence.md
index 77310f50ca..106ea41775 100644
--- a/guides/real_time/presence.md
+++ b/guides/real_time/presence.md
@@ -56,6 +56,8 @@ children = [
]
```
+## Usage With Channels and JavaScript
+
Next, we will create the channel that we'll communicate presence over. After a user joins, we can push the list of presences down the channel and then track the connection. We can also provide a map of additional information to track.
```elixir
@@ -122,8 +124,122 @@ Bob (count: 1)
If we close one of the Alice tabs, then the count should decrease to 1. If we close another tab, the user should disappear from the list entirely.
-## Making it safe
+### Making it safe
In our initial implementation, we are passing the name of the user as part of the URL. However, in many systems, you want to allow only logged in users to access the presence functionality. To do so, you should set up token authentication, [as detailed in the token authentication section of the channels guide](channels.html#using-token-authentication).
With token authentication, you should access `socket.assigns.user_id`, set in `UserSocket`, instead of `socket.assigns.name` set from parameters.
+
+## Usage With LiveView
+
+Whilst Phoenix does ship with a JavaScript API for dealing with presence, it is also possible to extend the `HelloWeb.Presence` module to support [LiveView](https://hexdocs.pm/phoenix_live_view).
+
+One thing to keep in mind when dealing with LiveView, is that each LiveView is a stateful process, so if we keep the presence state in the LiveView, each LiveView process will contain the full list of online users in memory. Instead, we can keep track of the online users within the `Presence` process, and pass separate events to the LiveView, which can use a stream to update the online list.
+
+To start with, we need to update the `lib/hello_web/channels/presence.ex` file to add some optional callbacks to the `HelloWeb.Presence` module.
+
+Firstly, we add the `init/1` callback. This allows us to keep track of the presence state within the process.
+
+```elixir
+ def init(_opts) do
+ {:ok, %{}}
+ end
+```
+
+The presence module also allows a `fetch/2` callback, this allows the data fetched from the presence to be modified, allowing us to define the shape of the response. In this case we are adding an `id` and a `user` map.
+
+```elixir
+ def fetch(_topic, presences) do
+ for {key, %{metas: [meta | metas]}} <- presences, into: %{} do
+ # user can be populated here from the database here we populate
+ # the name for demonstration purposes
+ {key, %{metas: [meta | metas], id: meta.id, user: %{name: meta.id}}}
+ end
+ end
+```
+
+The final thing to add is the `handle_metas/4` callback. This callback updates the state that we keep track of in `HelloWeb.Presence` based on the user leaves and joins.
+
+```elixir
+ def handle_metas(topic, %{joins: joins, leaves: leaves}, presences, state) do
+ for {user_id, presence} <- joins do
+ user_data = %{id: user_id, user: presence.user, metas: Map.fetch!(presences, user_id)}
+ msg = {__MODULE__, {:join, user_data}}
+ Phoenix.PubSub.local_broadcast(Hello.PubSub, "proxy:#{topic}", msg)
+ end
+
+ for {user_id, presence} <- leaves do
+ metas =
+ case Map.fetch(presences, user_id) do
+ {:ok, presence_metas} -> presence_metas
+ :error -> []
+ end
+
+ user_data = %{id: user_id, user: presence.user, metas: metas}
+ msg = {__MODULE__, {:leave, user_data}}
+ Phoenix.PubSub.local_broadcast(Hello.PubSub, "proxy:#{topic}", msg)
+ end
+
+ {:ok, state}
+ end
+```
+
+You can see that we are broadcasting events for the joins and leaves. These will be listened to by the LiveView process. You'll also see that we use "proxy" channel when broadcasting the joins and leaves. This is because we don't want our LiveView process to receive the presence events directly. We can add a few helper functions so that this particular implementation detail is abstracted from the LiveView module.
+
+```elixir
+ def list_online_users(), do: list("online_users") |> Enum.map(fn {_id, presence} -> presence end)
+
+ def track_user(name, params), do: track(self(), "online_users", name, params)
+
+ def subscribe(), do: Phoenix.PubSub.subscribe(Hello.PubSub, "proxy:online_users")
+```
+
+Now that we have our presence module set up and broadcasting events, we can create a LiveView. Create a new file `lib/hello_web/live/online/index.ex` with the following contents:
+
+```elixir
+defmodule HelloWeb.OnlineLive do
+ use HelloWeb, :live_view
+
+ def mount(params, _session, socket) do
+ socket = stream(socket, :presences, [])
+ socket =
+ if connected?(socket) do
+ HelloWeb.Presence.track_user(params["name"], %{id: params["name"]})
+ HelloWeb.Presence.subscribe()
+ stream(socket, :presences, HelloWeb.Presence.list_online_users())
+ else
+ socket
+ end
+
+ {:ok, socket}
+ end
+
+ def render(assigns) do
+ ~H"""
+ #{maybe_eex_gettext("Hello", true)} |
+ # ~S|<%= gettext("Hello") %> |
+ #
+ # iex> ~s|#{maybe_eex_gettext("Hello", false)} |
+ # ~S|Hello |
+ def maybe_eex_gettext(message, gettext?) do
+ if gettext? do
+ ~s|<%= gettext(#{inspect(message)}) %>|
+ else
+ message
+ end
+ end
end
diff --git a/installer/lib/phx_new/project.ex b/installer/lib/phx_new/project.ex
index c8a20df766..da093e465a 100644
--- a/installer/lib/phx_new/project.ex
+++ b/installer/lib/phx_new/project.ex
@@ -16,7 +16,7 @@ defmodule Phx.New.Project do
opts: :unset,
in_umbrella?: false,
binding: [],
- generators: []
+ generators: [timestamp_type: :utc_datetime]
def new(project_path, opts) do
project_path = Path.expand(project_path)
diff --git a/installer/lib/phx_new/single.ex b/installer/lib/phx_new/single.ex
index cc97514a19..989c4d7255 100644
--- a/installer/lib/phx_new/single.ex
+++ b/installer/lib/phx_new/single.ex
@@ -4,12 +4,13 @@ defmodule Phx.New.Single do
alias Phx.New.{Project}
template(:new, [
- {:eex, :project,
+ {:config, :project,
"phx_single/config/config.exs": "config/config.exs",
"phx_single/config/dev.exs": "config/dev.exs",
"phx_single/config/prod.exs": "config/prod.exs",
"phx_single/config/runtime.exs": "config/runtime.exs",
- "phx_single/config/test.exs": "config/test.exs",
+ "phx_single/config/test.exs": "config/test.exs"},
+ {:eex, :web,
"phx_single/lib/app_name/application.ex": "lib/:app/application.ex",
"phx_single/lib/app_name.ex": "lib/:app.ex",
"phx_web/controllers/error_json.ex": "lib/:lib_web_name/controllers/error_json.ex",
@@ -25,20 +26,20 @@ defmodule Phx.New.Single do
"phx_single/test/test_helper.exs": "test/test_helper.exs",
"phx_test/controllers/error_json_test.exs":
"test/:lib_web_name/controllers/error_json_test.exs"},
- {:keep, :project,
+ {:keep, :web,
"phx_web/controllers": "lib/:lib_web_name/controllers",
"phx_test/controllers": "test/:lib_web_name/controllers"}
])
template(:gettext, [
- {:eex, :project,
+ {:eex, :web,
"phx_gettext/gettext.ex": "lib/:lib_web_name/gettext.ex",
"phx_gettext/en/LC_MESSAGES/errors.po": "priv/gettext/en/LC_MESSAGES/errors.po",
"phx_gettext/errors.pot": "priv/gettext/errors.pot"}
])
template(:html, [
- {:eex, :project,
+ {:eex, :web,
"phx_web/controllers/error_html.ex": "lib/:lib_web_name/controllers/error_html.ex",
"phx_test/controllers/error_html_test.exs":
"test/:lib_web_name/controllers/error_html_test.exs",
@@ -69,11 +70,7 @@ defmodule Phx.New.Single do
template(:css, [
{:eex, :web,
"phx_assets/app.css": "assets/css/app.css",
- "phx_assets/tailwind.config.js": "assets/tailwind.config.js"},
- {:eex, :web,
- "phx_assets/heroicons/LICENSE.md": "assets/vendor/heroicons/LICENSE.md",
- "phx_assets/heroicons/UPGRADE.md": "assets/vendor/heroicons/UPGRADE.md"},
- {:zip, :web, "phx_assets/heroicons/optimized.zip": "assets/vendor/heroicons/optimized"}
+ "phx_assets/tailwind.config.js": "assets/tailwind.config.js"}
])
template(:js, [
@@ -101,15 +98,19 @@ defmodule Phx.New.Single do
{:eex, :app, "phx_mailer/lib/app_name/mailer.ex": "lib/:app/mailer.ex"}
])
- def prepare_project(%Project{app: app} = project) when not is_nil(app) do
- %Project{project | project_path: project.base_path}
+ def prepare_project(%Project{app: app, base_path: base_path} = project) when not is_nil(app) do
+ if in_umbrella?(base_path) do
+ %Project{project | in_umbrella?: true, project_path: Path.dirname(Path.dirname(base_path))}
+ else
+ %Project{project | in_umbrella?: false, project_path: base_path}
+ end
|> put_app()
|> put_root_app()
|> put_web_app()
end
defp put_app(%Project{base_path: base_path} = project) do
- %Project{project | in_umbrella?: in_umbrella?(base_path), app_path: base_path}
+ %Project{project | app_path: base_path}
end
defp put_root_app(%Project{app: app, opts: opts} = project) do
@@ -126,7 +127,7 @@ defmodule Phx.New.Single do
| web_app: app,
lib_web_name: "#{app}_web",
web_namespace: Module.concat(["#{project.root_mod}Web"]),
- web_path: project.project_path
+ web_path: project.base_path
}
end
diff --git a/installer/lib/phx_new/web.ex b/installer/lib/phx_new/web.ex
index e991afc97f..6f68baf7ac 100644
--- a/installer/lib/phx_new/web.ex
+++ b/installer/lib/phx_new/web.ex
@@ -53,7 +53,8 @@ defmodule Phx.New.Web do
"phx_test/controllers/error_html_test.exs": "test/:web_app/controllers/error_html_test.exs",
"phx_assets/topbar.js": "assets/vendor/topbar.js",
"phx_web/components/layouts/root.html.heex": "lib/:web_app/components/layouts/root.html.heex",
- "phx_web/components/layouts/app.html.heex": "lib/:web_app/components/layouts/app.html.heex"}
+ "phx_web/components/layouts/app.html.heex": "lib/:web_app/components/layouts/app.html.heex"},
+ {:eex, :web, "phx_assets/logo.svg": "priv/static/images/logo.svg"}
])
def prepare_project(%Project{app: app} = project) when not is_nil(app) do
diff --git a/installer/mix.exs b/installer/mix.exs
index 985ab70b2a..518f3a2432 100644
--- a/installer/mix.exs
+++ b/installer/mix.exs
@@ -6,7 +6,7 @@ end
defmodule Phx.New.MixProject do
use Mix.Project
- @version "1.7.7"
+ @version "1.7.14"
@scm_url "https://github.com/phoenixframework/phoenix"
# If the elixir requirement is updated, we need to update:
@@ -17,7 +17,7 @@ defmodule Phx.New.MixProject do
# 4. test/test_helper.exs at the root
# 5. installer/lib/mix/tasks/phx.new.ex
#
- @elixir_requirement "~> 1.14"
+ @elixir_requirement "~> 1.15"
def project do
[
diff --git a/installer/mix.lock b/installer/mix.lock
index 38a789cbcd..394ffc7366 100644
--- a/installer/mix.lock
+++ b/installer/mix.lock
@@ -1,9 +1,9 @@
%{
"earmark": {:hex, :earmark, "1.4.10", "bddce5e8ea37712a5bfb01541be8ba57d3b171d3fa4f80a0be9bcf1db417bcaf", [:mix], [{:earmark_parser, ">= 1.4.10", [hex: :earmark_parser, repo: "hexpm", optional: false]}], "hexpm", "12dbfa80810478e521d3ffb941ad9fbfcbbd7debe94e1341b4c4a1b2411c1c27"},
- "earmark_parser": {:hex, :earmark_parser, "1.4.32", "fa739a0ecfa34493de19426681b23f6814573faee95dfd4b4aafe15a7b5b32c6", [:mix], [], "hexpm", "b8b0dd77d60373e77a3d7e8afa598f325e49e8663a51bcc2b88ef41838cca755"},
- "ex_doc": {:hex, :ex_doc, "0.29.4", "6257ecbb20c7396b1fe5accd55b7b0d23f44b6aa18017b415cb4c2b91d997729", [:mix], [{:earmark_parser, "~> 1.4.31", [hex: :earmark_parser, repo: "hexpm", optional: false]}, {:makeup_elixir, "~> 0.14", [hex: :makeup_elixir, repo: "hexpm", optional: false]}, {:makeup_erlang, "~> 0.1", [hex: :makeup_erlang, repo: "hexpm", optional: false]}], "hexpm", "2c6699a737ae46cb61e4ed012af931b57b699643b24dabe2400a8168414bc4f5"},
- "makeup": {:hex, :makeup, "1.1.0", "6b67c8bc2882a6b6a445859952a602afc1a41c2e08379ca057c0f525366fc3ca", [:mix], [{:nimble_parsec, "~> 1.2.2 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "0a45ed501f4a8897f580eabf99a2e5234ea3e75a4373c8a52824f6e873be57a6"},
- "makeup_elixir": {:hex, :makeup_elixir, "0.16.1", "cc9e3ca312f1cfeccc572b37a09980287e243648108384b97ff2b76e505c3555", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.2.3 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "e127a341ad1b209bd80f7bd1620a15693a9908ed780c3b763bccf7d200c767c6"},
- "makeup_erlang": {:hex, :makeup_erlang, "0.1.1", "3fcb7f09eb9d98dc4d208f49cc955a34218fc41ff6b84df7c75b3e6e533cc65f", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "174d0809e98a4ef0b3309256cbf97101c6ec01c4ab0b23e926a9e17df2077cbb"},
- "nimble_parsec": {:hex, :nimble_parsec, "1.3.1", "2c54013ecf170e249e9291ed0a62e5832f70a476c61da16f6aac6dca0189f2af", [:mix], [], "hexpm", "2682e3c0b2eb58d90c6375fc0cc30bc7be06f365bf72608804fb9cffa5e1b167"},
+ "earmark_parser": {:hex, :earmark_parser, "1.4.39", "424642f8335b05bb9eb611aa1564c148a8ee35c9c8a8bba6e129d51a3e3c6769", [:mix], [], "hexpm", "06553a88d1f1846da9ef066b87b57c6f605552cfbe40d20bd8d59cc6bde41944"},
+ "ex_doc": {:hex, :ex_doc, "0.34.0", "ab95e0775db3df71d30cf8d78728dd9261c355c81382bcd4cefdc74610bef13e", [:mix], [{:earmark_parser, "~> 1.4.39", [hex: :earmark_parser, repo: "hexpm", optional: false]}, {:makeup_c, ">= 0.1.0", [hex: :makeup_c, repo: "hexpm", optional: true]}, {:makeup_elixir, "~> 0.14 or ~> 1.0", [hex: :makeup_elixir, repo: "hexpm", optional: false]}, {:makeup_erlang, "~> 0.1 or ~> 1.0", [hex: :makeup_erlang, repo: "hexpm", optional: false]}, {:makeup_html, ">= 0.1.0", [hex: :makeup_html, repo: "hexpm", optional: true]}], "hexpm", "60734fb4c1353f270c3286df4a0d51e65a2c1d9fba66af3940847cc65a8066d7"},
+ "makeup": {:hex, :makeup, "1.1.2", "9ba8837913bdf757787e71c1581c21f9d2455f4dd04cfca785c70bbfff1a76a3", [:mix], [{:nimble_parsec, "~> 1.2.2 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "cce1566b81fbcbd21eca8ffe808f33b221f9eee2cbc7a1706fc3da9ff18e6cac"},
+ "makeup_elixir": {:hex, :makeup_elixir, "0.16.2", "627e84b8e8bf22e60a2579dad15067c755531fea049ae26ef1020cad58fe9578", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.2.3 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "41193978704763f6bbe6cc2758b84909e62984c7752b3784bd3c218bb341706b"},
+ "makeup_erlang": {:hex, :makeup_erlang, "1.0.0", "6f0eff9c9c489f26b69b61440bf1b238d95badae49adac77973cbacae87e3c2e", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "ea7a9307de9d1548d2a72d299058d1fd2339e3d398560a0e46c27dab4891e4d2"},
+ "nimble_parsec": {:hex, :nimble_parsec, "1.4.0", "51f9b613ea62cfa97b25ccc2c1b4216e81df970acd8e16e8d1bdc58fef21370d", [:mix], [], "hexpm", "9c565862810fb383e9838c1dd2d7d2c437b3d13b267414ba6af33e50d2d1cf28"},
}
diff --git a/installer/templates/phx_assets/app.js b/installer/templates/phx_assets/app.js
index 4c1063740b..a5848b2cb5 100644
--- a/installer/templates/phx_assets/app.js
+++ b/installer/templates/phx_assets/app.js
@@ -22,8 +22,11 @@ import "phoenix_html"
<%= @live_comment %>import {LiveSocket} from "phoenix_live_view"
<%= @live_comment %>import topbar from "../vendor/topbar"
-<%= @live_comment %>let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-<%= @live_comment %>let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+<%= @live_comment %>const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+<%= @live_comment %>const liveSocket = new LiveSocket("/live", Socket, {
+<%= @live_comment %> longPollFallbackMs: 2500,
+<%= @live_comment %> params: {_csrf_token: csrfToken}
+<%= @live_comment %>})
// Show progress bar on live navigation and form submits
<%= @live_comment %>topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
@@ -38,4 +41,39 @@ import "phoenix_html"
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
// >> liveSocket.disableLatencySim()
<%= @live_comment %>window.liveSocket = liveSocket
+
+// Uncomment the lines below to enable quality of life phoenix_live_reload
+// development features:
+//
+// 1. stream server logs to the browser console
+// 2. click on elements to jump to their definitions in your code editor
+//
+// if (process.env.NODE_ENV === "development") {
+// window.addEventListener("phx:live_reload:attached", ({detail: reloader}) => {
+// // Enable server log streaming to client.
+// // Disable with reloader.disableServerLogs()
+// reloader.enableServerLogs()
+//
+// // Open configured PLUG_EDITOR at file:line of the clicked element's HEEx component
+// //
+// // * click with "c" key pressed to open at caller location
+// // * click with "d" key pressed to open at function component definition location
+// let keyDown
+// window.addEventListener("keydown", e => keyDown = e.key)
+// window.addEventListener("keyup", e => keyDown = null)
+// window.addEventListener("click", e => {
+// if(keyDown === "c"){
+// e.preventDefault()
+// e.stopImmediatePropagation()
+// reloader.openEditorAtCaller(e.target)
+// } else if(keyDown === "d"){
+// e.preventDefault()
+// e.stopImmediatePropagation()
+// reloader.openEditorAtDef(e.target)
+// }
+// }, true)
+//
+// window.liveReloader = reloader
+// })
+// }
<% end %>
diff --git a/installer/templates/phx_assets/heroicons/LICENSE.md b/installer/templates/phx_assets/heroicons/LICENSE.md
deleted file mode 100644
index 1ac3e409b7..0000000000
--- a/installer/templates/phx_assets/heroicons/LICENSE.md
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020 Refactoring UI Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
diff --git a/installer/templates/phx_assets/heroicons/UPGRADE.md b/installer/templates/phx_assets/heroicons/UPGRADE.md
deleted file mode 100644
index 5a140b9822..0000000000
--- a/installer/templates/phx_assets/heroicons/UPGRADE.md
+++ /dev/null
@@ -1,6 +0,0 @@
-You are running heroicons v2.0.16. To upgrade in place, you can run the following command,
-where your `HERO_VSN` export is your desired version:
-
- export HERO_VSN="2.0.16" ; \
- curl -L "https://github.com/tailwindlabs/heroicons/archive/refs/tags/v${HERO_VSN}.tar.gz" | \
- tar -xvz --strip-components=1 heroicons-${HERO_VSN}/optimized
diff --git a/installer/templates/phx_assets/heroicons/optimized.zip b/installer/templates/phx_assets/heroicons/optimized.zip
deleted file mode 100644
index db4154c6cb..0000000000
Binary files a/installer/templates/phx_assets/heroicons/optimized.zip and /dev/null differ
diff --git a/installer/templates/phx_assets/tailwind.config.js b/installer/templates/phx_assets/tailwind.config.js
index 856af57c62..8675d6cf1b 100644
--- a/installer/templates/phx_assets/tailwind.config.js
+++ b/installer/templates/phx_assets/tailwind.config.js
@@ -8,8 +8,8 @@ const path = require("path")
module.exports = {
content: [
"./js/**/*.js",
- "../lib/*_web.ex",
- "../lib/*_web/**/*.*ex"
+ "../lib/<%= @lib_web_name || @app_name %>.ex",
+ "../lib/<%= @lib_web_name || @app_name %>/**/*.*ex"
],
theme: {
extend: {
@@ -25,7 +25,6 @@ module.exports = {
//
//
-
+
- <%= id %> (<%= length(metas) %>) +
//
- plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
@@ -34,15 +33,16 @@ module.exports = {
// See your `CoreComponents.icon/1` for more information.
//
plugin(function({matchComponents, theme}) {
- let iconsDir = path.join(__dirname, "./vendor/heroicons/optimized")
+ let iconsDir = path.join(__dirname, "..<%= if @in_umbrella, do: "/../.." %>/deps/heroicons/optimized")
let values = {}
let icons = [
["", "/24/outline"],
["-solid", "/24/solid"],
- ["-mini", "/20/solid"]
+ ["-mini", "/20/solid"],
+ ["-micro", "/16/solid"]
]
icons.forEach(([suffix, dir]) => {
- fs.readdirSync(path.join(iconsDir, dir)).map(file => {
+ fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
let name = path.basename(file, ".svg") + suffix
values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
})
@@ -50,6 +50,12 @@ module.exports = {
matchComponents({
"hero": ({name, fullPath}) => {
let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+ let size = theme("spacing.6")
+ if (name.endsWith("-mini")) {
+ size = theme("spacing.5")
+ } else if (name.endsWith("-micro")) {
+ size = theme("spacing.4")
+ }
return {
[`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
"-webkit-mask": `var(--hero-${name})`,
@@ -58,8 +64,8 @@ module.exports = {
"background-color": "currentColor",
"vertical-align": "middle",
"display": "inline-block",
- "width": theme("spacing.5"),
- "height": theme("spacing.5")
+ "width": size,
+ "height": size
}
}
}, {values})
diff --git a/installer/templates/phx_gettext/errors.pot b/installer/templates/phx_gettext/errors.pot
index 4774673451..577244ef36 100644
--- a/installer/templates/phx_gettext/errors.pot
+++ b/installer/templates/phx_gettext/errors.pot
@@ -7,8 +7,7 @@
## Run `mix gettext.extract` to bring this file up to
## date. Leave `msgstr`s empty as changing them here has no
## effect: edit them in PO (`.po`) files instead.
-<%= if @ecto do %>
-## From Ecto.Changeset.cast/4
+<%= if @ecto do %>## From Ecto.Changeset.cast/4
msgid "can't be blank"
msgstr ""
diff --git a/installer/templates/phx_gettext/gettext.ex b/installer/templates/phx_gettext/gettext.ex
index 78d902515c..edc195b275 100644
--- a/installer/templates/phx_gettext/gettext.ex
+++ b/installer/templates/phx_gettext/gettext.ex
@@ -2,10 +2,11 @@ defmodule <%= @web_namespace %>.Gettext do
@moduledoc """
A module providing Internationalization with a gettext-based API.
- By using [Gettext](https://hexdocs.pm/gettext),
- your module gains a set of macros for translations, for example:
+ By using [Gettext](https://hexdocs.pm/gettext), your module compiles translations
+ that you can use in your application. To use this Gettext backend module,
+ call `use Gettext` and pass it as an option:
- import <%= @web_namespace %>.Gettext
+ use Gettext, backend: <%= @web_namespace %>.Gettext
# Simple translation
gettext("Here is the string to translate")
@@ -20,5 +21,5 @@ defmodule <%= @web_namespace %>.Gettext do
See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage.
"""
- use Gettext, otp_app: :<%= @web_app_name %>
+ use Gettext.Backend, otp_app: :<%= @web_app_name %>
end
diff --git a/installer/templates/phx_single/README.md b/installer/templates/phx_single/README.md
index 5c96eb63ab..304d844241 100644
--- a/installer/templates/phx_single/README.md
+++ b/installer/templates/phx_single/README.md
@@ -2,8 +2,8 @@
To start your Phoenix server:
- * Run `mix setup` to install and setup dependencies
- * Start Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server`
+* Run `mix setup` to install and setup dependencies
+* Start Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server`
Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
@@ -11,8 +11,8 @@ Ready to run in production? Please [check our deployment guides](https://hexdocs
## Learn more
- * Official website: https://www.phoenixframework.org/
- * Guides: https://hexdocs.pm/phoenix/overview.html
- * Docs: https://hexdocs.pm/phoenix
- * Forum: https://elixirforum.com/c/phoenix-forum
- * Source: https://github.com/phoenixframework/phoenix
+* Official website: https://www.phoenixframework.org/
+* Guides: https://hexdocs.pm/phoenix/overview.html
+* Docs: https://hexdocs.pm/phoenix
+* Forum: https://elixirforum.com/c/phoenix-forum
+* Source: https://github.com/phoenixframework/phoenix
diff --git a/installer/templates/phx_single/config/config.exs b/installer/templates/phx_single/config/config.exs
index 990ec27a44..97c1bbf53b 100644
--- a/installer/templates/phx_single/config/config.exs
+++ b/installer/templates/phx_single/config/config.exs
@@ -5,8 +5,9 @@
# is restricted to this project.
# General application configuration
-import Config<%= if @namespaced? || @ecto || @generators do %>
+import Config
+<%= if @namespaced? || @ecto || @generators do %>
config :<%= @app_name %><%= if @namespaced? do %>,
namespace: <%= @app_module %><% end %><%= if @ecto do %>,
ecto_repos: [<%= @app_module %>.Repo]<% end %><%= if @generators do %>,
@@ -35,27 +36,27 @@ config :<%= @app_name %>, <%= @app_module %>.Mailer, adapter: Swoosh.Adapters.Lo
# Configure esbuild (the version is required)
config :esbuild,
version: "0.17.11",
- default: [
+ <%= @app_name %>: [
args:
~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
- cd: Path.expand("../assets", __DIR__),
+ cd: Path.expand("..<%= if @in_umbrella, do: "/apps/#{@app_name}" %>/assets", __DIR__),
env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
]<% end %><%= if @css do %>
# Configure tailwind (the version is required)
config :tailwind,
- version: "3.3.2",
- default: [
+ version: "3.4.3",
+ <%= @app_name %>: [
args: ~w(
--config=tailwind.config.js
--input=css/app.css
--output=../priv/static/assets/app.css
),
- cd: Path.expand("../assets", __DIR__)
+ cd: Path.expand("..<%= if @in_umbrella, do: "/apps/#{@app_name}" %>/assets", __DIR__),
]<% end %>
# Configures Elixir's Logger
-config :logger, :console,
+config :logger, :default_formatter,
format: "$time $metadata[$level] $message\n",
metadata: [:request_id]
diff --git a/installer/templates/phx_single/config/dev.exs b/installer/templates/phx_single/config/dev.exs
index 94b6e65730..3df396383e 100644
--- a/installer/templates/phx_single/config/dev.exs
+++ b/installer/templates/phx_single/config/dev.exs
@@ -15,8 +15,8 @@ config :<%= @app_name %>, <%= @endpoint_module %>,
debug_errors: true,
secret_key_base: "<%= @secret_key_base_dev %>",
watchers: <%= if @javascript or @css do %>[<%= if @javascript do %>
- esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}<%= if @css, do: "," %><% end %><%= if @css do %>
- tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}<% end %>
+ esbuild: {Esbuild, :install_and_run, [:<%= @app_name %>, ~w(--sourcemap=inline --watch)]}<%= if @css, do: "," %><% end %><%= if @css do %>
+ tailwind: {Tailwind, :install_and_run, [:<%= @app_name %>, ~w(--watch)]}<% end %>
]<% else %>[]<% end %>
# ## SSL Support
@@ -45,8 +45,9 @@ config :<%= @app_name %>, <%= @endpoint_module %>,
# Watch static and templates for browser reloading.
config :<%= @app_name %>, <%= @endpoint_module %>,
live_reload: [
+ web_console_logger: true,
patterns: [
- ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",<%= if @gettext do %>
+ ~r"priv/static/(?!uploads/).*(js|css|png|jpeg|jpg|gif|svg)$",<%= if @gettext do %>
~r"priv/gettext/.*(po)$",<% end %>
~r"lib/<%= @lib_web_name %>/(controllers|live|components)/.*(ex|heex)$"
]
@@ -56,14 +57,20 @@ config :<%= @app_name %>, <%= @endpoint_module %>,
config :<%= @app_name %>, dev_routes: true
# Do not include metadata nor timestamps in development logs
-config :logger, :console, format: "[$level] $message\n"
+config :logger, :default_formatter, format: "[$level] $message\n"
# Set a higher stacktrace during development. Avoid configuring such
# in production as building large stacktraces may be expensive.
config :phoenix, :stacktrace_depth, 20
# Initialize plugs at runtime for faster development compilation
-config :phoenix, :plug_init_mode, :runtime<%= if @mailer do %>
+config :phoenix, :plug_init_mode, :runtime<%= if @html do %>
+
+config :phoenix_live_view,
+ # Include HEEx debug annotations as HTML comments in rendered markup
+ debug_heex_annotations: true,
+ # Enable helpful, but potentially expensive runtime checks
+ enable_expensive_runtime_checks: true<% end %><%= if @mailer do %>
# Disable swoosh api client as it is only required for production adapters.
config :swoosh, :api_client, false<% end %>
diff --git a/installer/templates/phx_single/config/prod.exs b/installer/templates/phx_single/config/prod.exs
index d0a599fc8a..5a6d5e0425 100644
--- a/installer/templates/phx_single/config/prod.exs
+++ b/installer/templates/phx_single/config/prod.exs
@@ -1,5 +1,6 @@
-import Config<%= if @javascript or @css do %>
+import Config
+<%= if @javascript or @css do %>
# Note we also include the path to a cache manifest
# containing the digested version of static files. This
# manifest is generated by the `mix assets.deploy` task,
@@ -8,7 +9,7 @@ import Config<%= if @javascript or @css do %>
config :<%= @web_app_name %>, <%= @endpoint_module %>, cache_static_manifest: "priv/static/cache_manifest.json"<% end %><%= if @mailer do %>
# Configures Swoosh API Client
-config :swoosh, api_client: Swoosh.ApiClient.Finch, finch_name: <%= @app_module %>.Finch
+config :swoosh, api_client: Swoosh.ApiClient.Req
# Disable Swoosh Local Memory Storage
config :swoosh, local: false<% end %>
diff --git a/installer/templates/phx_single/config/runtime.exs b/installer/templates/phx_single/config/runtime.exs
index 06f6804995..c76573a9c6 100644
--- a/installer/templates/phx_single/config/runtime.exs
+++ b/installer/templates/phx_single/config/runtime.exs
@@ -36,12 +36,14 @@ if config_env() == :prod do
host = System.get_env("PHX_HOST") || "example.com"
port = String.to_integer(System.get_env("PORT") || "4000")
+ config :<%= @app_name %>, :dns_cluster_query, System.get_env("DNS_CLUSTER_QUERY")
+
config :<%= @app_name %>, <%= @endpoint_module %>,
url: [host: host, port: 443, scheme: "https"],
http: [
# Enable IPv6 and bind on all interfaces.
# Set it to {0, 0, 0, 0, 0, 0, 0, 1} for local network only access.
- # See the documentation on https://hexdocs.pm/plug_cowboy/Plug.Cowboy.html
+ # See the documentation on <%= @web_adapter_docs %>
# for details about using IPv6 vs IPv4 and loopback vs public addresses.
ip: {0, 0, 0, 0, 0, 0, 0, 0},
port: port
@@ -72,8 +74,8 @@ if config_env() == :prod do
# "priv/ssl/server.key". For all supported SSL configuration
# options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1
#
- # We also recommend setting `force_ssl` in your endpoint, ensuring
- # no data is ever sent via http, always redirecting to https:
+ # We also recommend setting `force_ssl` in your config/prod.exs,
+ # ensuring no data is ever sent via http, always redirecting to https:
#
# config :<%= @web_app_name %>, <%= @endpoint_module %>,
# force_ssl: [hsts: true]
@@ -92,7 +94,7 @@ if config_env() == :prod do
# domain: System.get_env("MAILGUN_DOMAIN")
#
# For this example you need include a HTTP client required by Swoosh API client.
- # Swoosh supports Hackney and Finch out of the box:
+ # Swoosh supports Hackney, Req and Finch out of the box:
#
# config :swoosh, :api_client, Swoosh.ApiClient.Hackney
#
diff --git a/installer/templates/phx_single/config/test.exs b/installer/templates/phx_single/config/test.exs
index e8871ed19a..c880db8b9e 100644
--- a/installer/templates/phx_single/config/test.exs
+++ b/installer/templates/phx_single/config/test.exs
@@ -7,15 +7,19 @@ config :<%= @app_name %>, <%= @endpoint_module %>,
secret_key_base: "<%= @secret_key_base_test %>",
server: false<%= if @mailer do %>
-# In test we don't send emails.
+# In test we don't send emails
config :<%= @app_name %>, <%= @app_module %>.Mailer,
adapter: Swoosh.Adapters.Test
-# Disable swoosh api client as it is only required for production adapters.
+# Disable swoosh api client as it is only required for production adapters
config :swoosh, :api_client, false<% end %>
# Print only warnings and errors during test
config :logger, level: :warning
# Initialize plugs at runtime for faster test compilation
-config :phoenix, :plug_init_mode, :runtime
+config :phoenix, :plug_init_mode, :runtime<%= if @html do %>
+
+# Enable helpful, but potentially expensive runtime checks
+config :phoenix_live_view,
+ enable_expensive_runtime_checks: true<% end %>
diff --git a/installer/templates/phx_single/lib/app_name/application.ex b/installer/templates/phx_single/lib/app_name/application.ex
index 79c18688c9..65aad283e9 100644
--- a/installer/templates/phx_single/lib/app_name/application.ex
+++ b/installer/templates/phx_single/lib/app_name/application.ex
@@ -8,18 +8,17 @@ defmodule <%= @app_module %>.Application do
@impl true
def start(_type, _args) do
children = [
- # Start the Telemetry supervisor
<%= @web_namespace %>.Telemetry,<%= if @ecto do %>
- # Start the Ecto repository
- <%= @app_module %>.Repo,<% end %>
- # Start the PubSub system
- {Phoenix.PubSub, name: <%= @app_module %>.PubSub},<%= if @mailer do %>
- # Start Finch
- {Finch, name: <%= @app_module %>.Finch},<% end %>
- # Start the Endpoint (http/https)
- <%= @endpoint_module %>
+ <%= @app_module %>.Repo,<% end %><%= if @adapter_app == :ecto_sqlite3 do %>
+ {Ecto.Migrator,
+ repos: Application.fetch_env!(<%= inspect(String.to_atom(@app_name)) %>, :ecto_repos),
+ skip: skip_migrations?()},<% end %>
+ {DNSCluster, query: Application.get_env(<%= inspect(String.to_atom(@app_name)) %>, :dns_cluster_query) || :ignore},
+ {Phoenix.PubSub, name: <%= @app_module %>.PubSub},
# Start a worker by calling: <%= @app_module %>.Worker.start_link(arg)
- # {<%= @app_module %>.Worker, arg}
+ # {<%= @app_module %>.Worker, arg},
+ # Start to serve requests, typically the last entry
+ <%= @endpoint_module %>
]
# See https://hexdocs.pm/elixir/Supervisor.html
@@ -34,5 +33,10 @@ defmodule <%= @app_module %>.Application do
def config_change(changed, _new, removed) do
<%= @endpoint_module %>.config_change(changed, removed)
:ok
- end
+ end<%= if @adapter_app == :ecto_sqlite3 do %>
+
+ defp skip_migrations?() do
+ # By default, sqlite migrations are run when using a release
+ System.get_env("RELEASE_NAME") != nil
+ end<% end %>
end
diff --git a/installer/templates/phx_single/lib/app_name_web.ex b/installer/templates/phx_single/lib/app_name_web.ex
index a2d52e1d3d..b64696d3fa 100644
--- a/installer/templates/phx_single/lib/app_name_web.ex
+++ b/installer/templates/phx_single/lib/app_name_web.ex
@@ -40,10 +40,11 @@ defmodule <%= @web_namespace %> do
quote do
use Phoenix.Controller,
formats: [:html, :json],
- layouts: [html: <%= @web_namespace %>.Layouts]
+ layouts: [html: <%= @web_namespace %>.Layouts]<%= if @gettext do %>
- import Plug.Conn<%= if @gettext do %>
- import <%= @web_namespace %>.Gettext<% end %>
+ use Gettext, backend: <%= @web_namespace %>.Gettext<% end %>
+
+ import Plug.Conn
unquote(verified_routes())
end
@@ -80,12 +81,14 @@ defmodule <%= @web_namespace %> do
end
defp html_helpers do
- quote do
+ quote do<%= if @gettext do %>
+ # Translation
+ use Gettext, backend: <%= @web_namespace %>.Gettext
+<% end %>
# HTML escaping functionality
import Phoenix.HTML
- # Core UI components and translation
- import <%= @web_namespace %>.CoreComponents<%= if @gettext do %>
- import <%= @web_namespace %>.Gettext<% end %>
+ # Core UI components
+ import <%= @web_namespace %>.CoreComponents
# Shortcut for generating JS commands
alias Phoenix.LiveView.JS
@@ -105,7 +108,7 @@ defmodule <%= @web_namespace %> do
end
@doc """
- When used, dispatch to the appropriate controller/view/etc.
+ When used, dispatch to the appropriate controller/live_view/etc.
"""
defmacro __using__(which) when is_atom(which) do
apply(__MODULE__, which, [])
diff --git a/installer/templates/phx_single/mix.exs b/installer/templates/phx_single/mix.exs
index b271512303..ed631a2521 100644
--- a/installer/templates/phx_single/mix.exs
+++ b/installer/templates/phx_single/mix.exs
@@ -9,11 +9,12 @@ defmodule <%= @app_module %>.MixProject do
config_path: "../../config/config.exs",
deps_path: "../../deps",
lockfile: "../../mix.lock",<% end %>
- elixir: "~> 1.14",
+ elixir: "~> 1.15",
elixirc_paths: elixirc_paths(Mix.env()),
start_permanent: Mix.env() == :prod,
aliases: aliases(),
- deps: deps()
+ deps: deps(),
+ listeners: [Phoenix.CodeReloader]
]
end
@@ -37,22 +38,31 @@ defmodule <%= @app_module %>.MixProject do
defp deps do
[
<%= @phoenix_dep %>,<%= if @ecto do %>
- {:phoenix_ecto, "~> 4.4"},
+ {:phoenix_ecto, "~> 4.5"},
{:ecto_sql, "~> 3.10"},
{<%= inspect @adapter_app %>, ">= 0.0.0"},<% end %><%= if @html do %>
- {:phoenix_html, "~> 3.3"},
+ {:phoenix_html, "~> 4.1"},
{:phoenix_live_reload, "~> 1.2", only: :dev},
- {:phoenix_live_view, "~> 0.19.0"},
+ # TODO bump on release to {:phoenix_live_view, "~> 1.0.0"},
+ {:phoenix_live_view, "~> 1.0.0-rc.1", override: true},
{:floki, ">= 0.30.0", only: :test},<% end %><%= if @dashboard do %>
- {:phoenix_live_dashboard, "~> 0.8.0"},<% end %><%= if @javascript do %>
- {:esbuild, "~> 0.7", runtime: Mix.env() == :dev},<% end %><%= if @css do %>
- {:tailwind, "~> 0.2.0", runtime: Mix.env() == :dev},<% end %><%= if @mailer do %>
- {:swoosh, "~> 1.3"},
- {:finch, "~> 0.13"},<% end %>
- {:telemetry_metrics, "~> 0.6"},
+ {:phoenix_live_dashboard, "~> 0.8.3"},<% end %><%= if @javascript do %>
+ {:esbuild, "~> 0.8", runtime: Mix.env() == :dev},<% end %><%= if @css do %>
+ {:tailwind, "~> 0.2", runtime: Mix.env() == :dev},
+ {:heroicons,
+ github: "tailwindlabs/heroicons",
+ tag: "v2.1.1",
+ sparse: "optimized",
+ app: false,
+ compile: false,
+ depth: 1},<% end %><%= if @mailer do %>
+ {:swoosh, "~> 1.16"},
+ {:req, "~> 0.5.4"},<% end %>
+ {:telemetry_metrics, "~> 1.0"},
{:telemetry_poller, "~> 1.0"},<%= if @gettext do %>
- {:gettext, "~> 0.20"},<% end %>
+ {:gettext, "~> 0.26"},<% end %>
{:jason, "~> 1.2"},
+ {:dns_cluster, "~> 0.1.1"},
{<%= inspect @web_adapter_app %>, "<%= @web_adapter_vsn %>"}
]
end
@@ -70,8 +80,10 @@ defmodule <%= @app_module %>.MixProject do
"ecto.reset": ["ecto.drop", "ecto.setup"],
test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"]<% end %><%= if @asset_builders != [] do %>,
"assets.setup": <%= inspect Enum.map(@asset_builders, &"#{&1}.install --if-missing") %>,
- "assets.build": <%= inspect Enum.map(@asset_builders, &"#{&1} default") %>,
- "assets.deploy": <%= inspect Enum.map(@asset_builders, &"#{&1} default --minify") ++ ["phx.digest"] %><% end %>
+ "assets.build": <%= inspect Enum.map(@asset_builders, &"#{&1} #{@app_name}") %>,
+ "assets.deploy": [
+<%= Enum.map(@asset_builders, &" \"#{&1} #{@app_name} --minify\",\n") ++ [" \"phx.digest\""] %>
+ ]<% end %>
]
end
end
diff --git a/installer/templates/phx_static/favicon.ico b/installer/templates/phx_static/favicon.ico
index 73de524aaa..7f372bfc21 100644
Binary files a/installer/templates/phx_static/favicon.ico and b/installer/templates/phx_static/favicon.ico differ
diff --git a/installer/templates/phx_static/home.css b/installer/templates/phx_static/home.css
index 4746663b60..7109c210d3 100644
--- a/installer/templates/phx_static/home.css
+++ b/installer/templates/phx_static/home.css
@@ -597,16 +597,7 @@ select {
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
- --tw-pan-x: ;
- --tw-pan-y: ;
- --tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
- --tw-ordinal: ;
- --tw-slashed-zero: ;
- --tw-numeric-figure: ;
- --tw-numeric-spacing: ;
- --tw-numeric-fraction: ;
- --tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
@@ -614,24 +605,6 @@ select {
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
- --tw-blur: ;
- --tw-brightness: ;
- --tw-contrast: ;
- --tw-grayscale: ;
- --tw-hue-rotate: ;
- --tw-invert: ;
- --tw-saturate: ;
- --tw-sepia: ;
- --tw-drop-shadow: ;
- --tw-backdrop-blur: ;
- --tw-backdrop-brightness: ;
- --tw-backdrop-contrast: ;
- --tw-backdrop-grayscale: ;
- --tw-backdrop-hue-rotate: ;
- --tw-backdrop-invert: ;
- --tw-backdrop-opacity: ;
- --tw-backdrop-saturate: ;
- --tw-backdrop-sepia: ;
}
::backdrop {
@@ -644,16 +617,7 @@ select {
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
- --tw-pan-x: ;
- --tw-pan-y: ;
- --tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
- --tw-ordinal: ;
- --tw-slashed-zero: ;
- --tw-numeric-figure: ;
- --tw-numeric-spacing: ;
- --tw-numeric-fraction: ;
- --tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
@@ -661,24 +625,6 @@ select {
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
- --tw-blur: ;
- --tw-brightness: ;
- --tw-contrast: ;
- --tw-grayscale: ;
- --tw-hue-rotate: ;
- --tw-invert: ;
- --tw-saturate: ;
- --tw-sepia: ;
- --tw-drop-shadow: ;
- --tw-backdrop-blur: ;
- --tw-backdrop-brightness: ;
- --tw-backdrop-contrast: ;
- --tw-backdrop-grayscale: ;
- --tw-backdrop-hue-rotate: ;
- --tw-backdrop-invert: ;
- --tw-backdrop-opacity: ;
- --tw-backdrop-saturate: ;
- --tw-backdrop-sepia: ;
}
.static {
@@ -994,11 +940,6 @@ select {
color: rgb(63 63 70 / var(--tw-text-opacity));
}
-.antialiased {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
diff --git a/installer/templates/phx_test/controllers/error_html_test.exs b/installer/templates/phx_test/controllers/error_html_test.exs
index 6d33964708..74098fc308 100644
--- a/installer/templates/phx_test/controllers/error_html_test.exs
+++ b/installer/templates/phx_test/controllers/error_html_test.exs
@@ -2,7 +2,7 @@ defmodule <%= @web_namespace %>.ErrorHTMLTest do
use <%= @web_namespace %>.ConnCase, async: true
# Bring render_to_string/4 for testing custom views
- import Phoenix.Template
+ import Phoenix.Template, only: [render_to_string: 4]
test "renders 404.html" do
assert render_to_string(<%= @web_namespace %>.ErrorHTML, "404", "html", []) == "Not Found"
diff --git a/installer/templates/phx_test/live/page_live_test.exs b/installer/templates/phx_test/live/page_live_test.exs
deleted file mode 100644
index 98693942f7..0000000000
--- a/installer/templates/phx_test/live/page_live_test.exs
+++ /dev/null
@@ -1,14 +0,0 @@
-defmodule <%= @web_namespace %>.PageLiveTest do
- use <%= @web_namespace %>.ConnCase
-
- import Phoenix.LiveViewTest
-
- test "disconnected and connected render", %{conn: conn} do
- conn = get(conn, ~p"/")
- disconnected_html = html_response(conn, 200)
- {:ok, _live, connected_html} = live(conn)
-
- assert disconnected_html =~ "Welcome to Phoenix!"
- assert connected_html =~ "Welcome to Phoenix!"
- end
-end
diff --git a/installer/templates/phx_umbrella/apps/app_name/config/config.exs b/installer/templates/phx_umbrella/apps/app_name/config/config.exs
index 95535f41cb..973789cd66 100644
--- a/installer/templates/phx_umbrella/apps/app_name/config/config.exs
+++ b/installer/templates/phx_umbrella/apps/app_name/config/config.exs
@@ -1,4 +1,7 @@
-<%= if @namespaced? || @ecto do %># Configure Mix tasks and generators
+import Config
+
+<%= if @namespaced? || @ecto do %>
+# Configure Mix tasks and generators
config :<%= @app_name %><%= if @namespaced? do %>,
namespace: <%= @app_module %><% end %><%= if @ecto do %>,
ecto_repos: [<%= @app_module %>.Repo]<% end %><% end %><%= if @mailer do %>
diff --git a/installer/templates/phx_umbrella/apps/app_name/lib/app_name/application.ex b/installer/templates/phx_umbrella/apps/app_name/lib/app_name/application.ex
index 97fe8172c3..9043d6b742 100644
--- a/installer/templates/phx_umbrella/apps/app_name/lib/app_name/application.ex
+++ b/installer/templates/phx_umbrella/apps/app_name/lib/app_name/application.ex
@@ -8,16 +8,21 @@ defmodule <%= @app_module %>.Application do
@impl true
def start(_type, _args) do
children = [<%= if @ecto do %>
- # Start the Ecto repository
- <%= @app_module %>.Repo,<% end %>
- # Start the PubSub system
- {Phoenix.PubSub, name: <%= @app_module %>.PubSub}<%= if @mailer do %>,
- # Start Finch
- {Finch, name: <%= @app_module %>.Finch}<% end %>
+ <%= @app_module %>.Repo,<% end %><%= if @adapter_app == :ecto_sqlite3 do %>
+ {Ecto.Migrator,
+ repos: Application.fetch_env!(<%= inspect(String.to_atom(@app_name)) %>, :ecto_repos),
+ skip: skip_migrations?()},<% end %>
+ {DNSCluster, query: Application.get_env(<%= inspect(String.to_atom(@app_name)) %>, :dns_cluster_query) || :ignore},
+ {Phoenix.PubSub, name: <%= @app_module %>.PubSub}
# Start a worker by calling: <%= @app_module %>.Worker.start_link(arg)
# {<%= @app_module %>.Worker, arg}
]
Supervisor.start_link(children, strategy: :one_for_one, name: <%= @app_module %>.Supervisor)
- end
+ end<%= if @adapter_app == :ecto_sqlite3 do %>
+
+ defp skip_migrations?() do
+ # By default, sqlite migrations are run when using a release
+ System.get_env("RELEASE_NAME") != nil
+ end<% end %>
end
diff --git a/installer/templates/phx_umbrella/apps/app_name/mix.exs b/installer/templates/phx_umbrella/apps/app_name/mix.exs
index 0e6d4434d2..5ba7b9323e 100644
--- a/installer/templates/phx_umbrella/apps/app_name/mix.exs
+++ b/installer/templates/phx_umbrella/apps/app_name/mix.exs
@@ -9,7 +9,7 @@ defmodule <%= @app_module %>.MixProject do
config_path: "../../config/config.exs",
deps_path: "../../deps",
lockfile: "../../mix.lock",
- elixir: "~> 1.14",
+ elixir: "~> 1.15",
elixirc_paths: elixirc_paths(Mix.env()),
start_permanent: Mix.env() == :prod,
aliases: aliases(),
@@ -36,12 +36,13 @@ defmodule <%= @app_module %>.MixProject do
# Type `mix help deps` for examples and options.
defp deps do
[
+ {:dns_cluster, "~> 0.1.1"},
{:phoenix_pubsub, "~> 2.1"}<%= if @ecto do %>,
{:ecto_sql, "~> 3.10"},
{:<%= @adapter_app %>, ">= 0.0.0"},
{:jason, "~> 1.2"}<% end %><%= if @mailer do %>,
- {:swoosh, "~> 1.3"},
- {:finch, "~> 0.13"}<% end %>
+ {:swoosh, "~> 1.16"},
+ {:req, "~> 0.5.4"}<% end %>
]
end
@@ -51,7 +52,7 @@ defmodule <%= @app_module %>.MixProject do
defp aliases do
[
setup: ["deps.get"<%= if @ecto do %>, "ecto.setup"<% end %>]<%= if @ecto do %>,
- "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
+ "ecto.setup": ["ecto.create", "ecto.migrate", "run #{__DIR__}/priv/repo/seeds.exs"],
"ecto.reset": ["ecto.drop", "ecto.setup"],
test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"]<% end %>
]
diff --git a/installer/templates/phx_umbrella/apps/app_name_web/README.md b/installer/templates/phx_umbrella/apps/app_name_web/README.md
index fdb87dfcf0..3d9845a58b 100644
--- a/installer/templates/phx_umbrella/apps/app_name_web/README.md
+++ b/installer/templates/phx_umbrella/apps/app_name_web/README.md
@@ -2,8 +2,8 @@
To start your Phoenix server:
- * Run `mix setup` to install and setup dependencies
- * Start Phoenix endpoint with `mix phx.server`
+* Run `mix setup` to install and setup dependencies
+* Start Phoenix endpoint with `mix phx.server`
Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
@@ -11,8 +11,8 @@ Ready to run in production? Please [check our deployment guides](https://hexdocs
## Learn more
- * Official website: https://www.phoenixframework.org/
- * Guides: https://hexdocs.pm/phoenix/overview.html
- * Docs: https://hexdocs.pm/phoenix
- * Forum: https://elixirforum.com/c/phoenix-forum
- * Source: https://github.com/phoenixframework/phoenix
+* Official website: https://www.phoenixframework.org/
+* Guides: https://hexdocs.pm/phoenix/overview.html
+* Docs: https://hexdocs.pm/phoenix
+* Forum: https://elixirforum.com/c/phoenix-forum
+* Source: https://github.com/phoenixframework/phoenix
diff --git a/installer/templates/phx_umbrella/apps/app_name_web/config/config.exs b/installer/templates/phx_umbrella/apps/app_name_web/config/config.exs
index fd46d36416..2b2f6300d0 100644
--- a/installer/templates/phx_umbrella/apps/app_name_web/config/config.exs
+++ b/installer/templates/phx_umbrella/apps/app_name_web/config/config.exs
@@ -1,3 +1,5 @@
+import Config
+
<%= if @namespaced? || @ecto || @generators do %>
config :<%= @web_app_name %><%= if @namespaced? do %>,
namespace: <%= @web_namespace %><% end %><%= if @ecto do %>,
@@ -18,7 +20,7 @@ config :<%= @web_app_name %>, <%= @endpoint_module %>,
# Configure esbuild (the version is required)
config :esbuild,
version: "0.17.11",
- default: [
+ <%= @web_app_name %>: [
args:
~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
cd: Path.expand("../apps/<%= @web_app_name %>/assets", __DIR__),
@@ -27,8 +29,8 @@ config :esbuild,
# Configure tailwind (the version is required)
config :tailwind,
- version: "3.3.2",
- default: [
+ version: "3.4.3",
+ <%= @web_app_name %>: [
args: ~w(
--config=tailwind.config.js
--input=css/app.css
diff --git a/installer/templates/phx_umbrella/apps/app_name_web/config/dev.exs b/installer/templates/phx_umbrella/apps/app_name_web/config/dev.exs
index 64a5e97239..d73204be7e 100644
--- a/installer/templates/phx_umbrella/apps/app_name_web/config/dev.exs
+++ b/installer/templates/phx_umbrella/apps/app_name_web/config/dev.exs
@@ -1,3 +1,5 @@
+import Config
+
# For development, we disable any cache and enable
# debugging and code reloading.
#
@@ -13,8 +15,8 @@ config :<%= @web_app_name %>, <%= @endpoint_module %>,
debug_errors: true,
secret_key_base: "<%= @secret_key_base_dev %>",
watchers: <%= if @javascript or @css do %>[<%= if @javascript do %>
- esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}<%= if @css, do: "," %><% end %><%= if @css do %>
- tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}<% end %>
+ esbuild: {Esbuild, :install_and_run, [:<%= @web_app_name %>, ~w(--sourcemap=inline --watch)]}<%= if @css, do: "," %><% end %><%= if @css do %>
+ tailwind: {Tailwind, :install_and_run, [:<%= @web_app_name %>, ~w(--watch)]}<% end %>
]<% else %>[]<% end %>
# ## SSL Support
@@ -43,8 +45,9 @@ config :<%= @web_app_name %>, <%= @endpoint_module %>,
# Watch static and templates for browser reloading.
config :<%= @web_app_name %>, <%= @endpoint_module %>,
live_reload: [
+ web_console_logger: true,
patterns: [
- ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",<%= if @gettext do %>
+ ~r"priv/static/(?!uploads/).*(js|css|png|jpeg|jpg|gif|svg)$",<%= if @gettext do %>
~r"priv/gettext/.*(po)$",<% end %>
~r"lib/<%= @web_app_name %>/(controllers|live|components)/.*(ex|heex)$"
]
diff --git a/installer/templates/phx_umbrella/apps/app_name_web/config/prod.exs b/installer/templates/phx_umbrella/apps/app_name_web/config/prod.exs
index 4acae11474..315068e974 100644
--- a/installer/templates/phx_umbrella/apps/app_name_web/config/prod.exs
+++ b/installer/templates/phx_umbrella/apps/app_name_web/config/prod.exs
@@ -1,3 +1,5 @@
+import Config
+
# Note we also include the path to a cache manifest
# containing the digested version of static files. This
# manifest is generated by the `mix phx.digest` task,
diff --git a/installer/templates/phx_umbrella/apps/app_name_web/config/runtime.exs b/installer/templates/phx_umbrella/apps/app_name_web/config/runtime.exs
index c57731ee7d..a8cad99c9e 100644
--- a/installer/templates/phx_umbrella/apps/app_name_web/config/runtime.exs
+++ b/installer/templates/phx_umbrella/apps/app_name_web/config/runtime.exs
@@ -1,3 +1,5 @@
+import Config
+
# The secret key base is used to sign/encrypt cookies and other secrets.
# A default value is used in config/dev.exs and config/test.exs but you
# want to use a different value for prod and you most likely don't want
@@ -53,8 +55,8 @@ config :<%= @web_app_name %>, <%= @endpoint_module %>,
# "priv/ssl/server.key". For all supported SSL configuration
# options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1
#
-# We also recommend setting `force_ssl` in your endpoint, ensuring
-# no data is ever sent via http, always redirecting to https:
+# We also recommend setting `force_ssl` in your config/prod.exs,
+# ensuring no data is ever sent via http, always redirecting to https:
#
# config :<%= @web_app_name %>, <%= @endpoint_module %>,
# force_ssl: [hsts: true]
@@ -73,7 +75,7 @@ config :<%= @web_app_name %>, <%= @endpoint_module %>,
# domain: System.get_env("MAILGUN_DOMAIN")
#
# For this example you need include a HTTP client required by Swoosh API client.
-# Swoosh supports Hackney and Finch out of the box:
+# Swoosh supports Hackney, Req and Finch out of the box:
#
# config :swoosh, :api_client, Swoosh.ApiClient.Hackney
#
diff --git a/installer/templates/phx_umbrella/apps/app_name_web/config/test.exs b/installer/templates/phx_umbrella/apps/app_name_web/config/test.exs
index d549f43433..d31c0a6294 100644
--- a/installer/templates/phx_umbrella/apps/app_name_web/config/test.exs
+++ b/installer/templates/phx_umbrella/apps/app_name_web/config/test.exs
@@ -1,3 +1,5 @@
+import Config
+
# We don't run a server during test. If one is required,
# you can enable the server option below.
config :<%= @web_app_name %>, <%= @endpoint_module %>,
diff --git a/installer/templates/phx_umbrella/apps/app_name_web/lib/app_name.ex b/installer/templates/phx_umbrella/apps/app_name_web/lib/app_name.ex
index a2d52e1d3d..985dee1c05 100644
--- a/installer/templates/phx_umbrella/apps/app_name_web/lib/app_name.ex
+++ b/installer/templates/phx_umbrella/apps/app_name_web/lib/app_name.ex
@@ -40,10 +40,11 @@ defmodule <%= @web_namespace %> do
quote do
use Phoenix.Controller,
formats: [:html, :json],
- layouts: [html: <%= @web_namespace %>.Layouts]
+ layouts: [html: <%= @web_namespace %>.Layouts]<%= if @gettext do %>
- import Plug.Conn<%= if @gettext do %>
- import <%= @web_namespace %>.Gettext<% end %>
+ use Gettext, backend: <%= @web_namespace %>.Gettext<% end %>
+
+ import Plug.Conn
unquote(verified_routes())
end
@@ -80,12 +81,14 @@ defmodule <%= @web_namespace %> do
end
defp html_helpers do
- quote do
+ quote do<%= if @gettext do %>
+ # Translation
+ use Gettext, backend: <%= @web_namespace %>.Gettext
+<% end %>
# HTML escaping functionality
import Phoenix.HTML
- # Core UI components and translation
- import <%= @web_namespace %>.CoreComponents<%= if @gettext do %>
- import <%= @web_namespace %>.Gettext<% end %>
+ # Core UI components
+ import <%= @web_namespace %>.CoreComponents
# Shortcut for generating JS commands
alias Phoenix.LiveView.JS
diff --git a/installer/templates/phx_umbrella/apps/app_name_web/lib/app_name/application.ex b/installer/templates/phx_umbrella/apps/app_name_web/lib/app_name/application.ex
index 98a1d6d1c7..2a4d0a08a3 100644
--- a/installer/templates/phx_umbrella/apps/app_name_web/lib/app_name/application.ex
+++ b/installer/templates/phx_umbrella/apps/app_name_web/lib/app_name/application.ex
@@ -8,12 +8,11 @@ defmodule <%= @web_namespace %>.Application do
@impl true
def start(_type, _args) do
children = [
- # Start the Telemetry supervisor
<%= @web_namespace %>.Telemetry,
- # Start the Endpoint (http/https)
- <%= @endpoint_module %>
# Start a worker by calling: <%= @web_namespace %>.Worker.start_link(arg)
- # {<%= @web_namespace %>.Worker, arg}
+ # {<%= @web_namespace %>.Worker, arg},
+ # Start to serve requests, typically the last entry
+ <%= @endpoint_module %>
]
# See https://hexdocs.pm/elixir/Supervisor.html
diff --git a/installer/templates/phx_umbrella/apps/app_name_web/mix.exs b/installer/templates/phx_umbrella/apps/app_name_web/mix.exs
index c0031f0884..f0bd3d0cd2 100644
--- a/installer/templates/phx_umbrella/apps/app_name_web/mix.exs
+++ b/installer/templates/phx_umbrella/apps/app_name_web/mix.exs
@@ -9,11 +9,12 @@ defmodule <%= @web_namespace %>.MixProject do
config_path: "../../config/config.exs",
deps_path: "../../deps",
lockfile: "../../mix.lock",
- elixir: "~> 1.14",
+ elixir: "~> 1.15",
elixirc_paths: elixirc_paths(Mix.env()),
start_permanent: Mix.env() == :prod,
aliases: aliases(),
- deps: deps()
+ deps: deps(),
+ listeners: [Phoenix.CodeReloader]
]
end
@@ -37,17 +38,25 @@ defmodule <%= @web_namespace %>.MixProject do
defp deps do
[
<%= @phoenix_dep %>,<%= if @ecto do %>
- {:phoenix_ecto, "~> 4.4"},<% end %><%= if @html do %>
- {:phoenix_html, "~> 3.3"},
+ {:phoenix_ecto, "~> 4.5"},<% end %><%= if @html do %>
+ {:phoenix_html, "~> 4.1"},
{:phoenix_live_reload, "~> 1.2", only: :dev},
- {:phoenix_live_view, "~> 0.19.0"},
+ # TODO bump on release to {:phoenix_live_view, "~> 1.0.0"},
+ {:phoenix_live_view, "~> 1.0.0-rc.1", override: true},
{:floki, ">= 0.30.0", only: :test},<% end %><%= if @dashboard do %>
- {:phoenix_live_dashboard, "~> 0.8.0"},<% end %><%= if @javascript do %>
- {:esbuild, "~> 0.7", runtime: Mix.env() == :dev},<% end %><%= if @css do %>
- {:tailwind, "~> 0.2.0", runtime: Mix.env() == :dev},<% end %>
- {:telemetry_metrics, "~> 0.6"},
+ {:phoenix_live_dashboard, "~> 0.8.3"},<% end %><%= if @javascript do %>
+ {:esbuild, "~> 0.8", runtime: Mix.env() == :dev},<% end %><%= if @css do %>
+ {:tailwind, "~> 0.2", runtime: Mix.env() == :dev},
+ {:heroicons,
+ github: "tailwindlabs/heroicons",
+ tag: "v2.1.1",
+ sparse: "optimized",
+ app: false,
+ compile: false,
+ depth: 1},<% end %>
+ {:telemetry_metrics, "~> 1.0"},
{:telemetry_poller, "~> 1.0"},<%= if @gettext do %>
- {:gettext, "~> 0.20"},<% end %><%= if @app_name != @web_app_name do %>
+ {:gettext, "~> 0.26"},<% end %><%= if @app_name != @web_app_name do %>
{:<%= @app_name %>, in_umbrella: true},<% end %>
{:jason, "~> 1.2"},
{<%= inspect @web_adapter_app %>, "<%= @web_adapter_vsn %>"}
@@ -62,8 +71,10 @@ defmodule <%= @web_namespace %>.MixProject do
setup: ["deps.get"<%= if @asset_builders != [] do %>, "assets.setup", "assets.build"<% end %>]<%= if @ecto do %>,
test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"]<% end %><%= if @asset_builders != [] do %>,
"assets.setup": <%= inspect Enum.map(@asset_builders, &"#{&1}.install --if-missing") %>,
- "assets.build": <%= inspect Enum.map(@asset_builders, &"#{&1} default") %>,
- "assets.deploy": <%= inspect Enum.map(@asset_builders, &"#{&1} default --minify") ++ ["phx.digest"] %><% end %>
+ "assets.build": <%= inspect Enum.map(@asset_builders, &"#{&1} #{@web_app_name}") %>,
+ "assets.deploy": [
+<%= Enum.map(@asset_builders, &" \"#{&1} #{@web_app_name} --minify\",\n") ++ [" \"phx.digest\""] %>
+ ]<% end %>
]
end
end
diff --git a/installer/templates/phx_umbrella/config/dev.exs b/installer/templates/phx_umbrella/config/dev.exs
index 853d247d7b..a049be27d4 100644
--- a/installer/templates/phx_umbrella/config/dev.exs
+++ b/installer/templates/phx_umbrella/config/dev.exs
@@ -1,10 +1,16 @@
import Config
# Do not include metadata nor timestamps in development logs
-config :logger, :console, format: "[$level] $message\n"
+config :logger, :default_formatter, format: "[$level] $message\n"
# Initialize plugs at runtime for faster development compilation
-config :phoenix, :plug_init_mode, :runtime<%= if @mailer do %>
+config :phoenix, :plug_init_mode, :runtime<%= if @html do %>
+
+config :phoenix_live_view,
+ # Include HEEx debug annotations as HTML comments in rendered markup
+ debug_heex_annotations: true,
+ # Enable helpful, but potentially expensive runtime checks
+ enable_expensive_runtime_checks: true<% end %><%= if @mailer do %>
# Disable swoosh api client as it is only required for production adapters.
config :swoosh, :api_client, false<% end %>
diff --git a/installer/templates/phx_umbrella/config/extra_config.exs b/installer/templates/phx_umbrella/config/extra_config.exs
index 07cba2b0aa..a34ed28f28 100644
--- a/installer/templates/phx_umbrella/config/extra_config.exs
+++ b/installer/templates/phx_umbrella/config/extra_config.exs
@@ -1,5 +1,7 @@
+import Config
+
# Configures Elixir's Logger
-config :logger, :console,
+config :logger, :default_formatter,
format: "$time $metadata[$level] $message\n",
metadata: [:request_id]
diff --git a/installer/templates/phx_umbrella/config/prod.exs b/installer/templates/phx_umbrella/config/prod.exs
index 95b0b8036b..bd5cb7cb77 100644
--- a/installer/templates/phx_umbrella/config/prod.exs
+++ b/installer/templates/phx_umbrella/config/prod.exs
@@ -2,7 +2,7 @@ import Config
<%= if @mailer do %>
# Configures Swoosh API Client
-config :swoosh, :api_client, <%= @app_module %>.Finch
+config :swoosh, :api_client, Swoosh.ApiClient.Req
# Disable Swoosh Local Memory Storage
config :swoosh, local: false<% end %>
diff --git a/installer/templates/phx_umbrella/config/runtime.exs b/installer/templates/phx_umbrella/config/runtime.exs
index 7b0d53ec9e..587a07f8a7 100644
--- a/installer/templates/phx_umbrella/config/runtime.exs
+++ b/installer/templates/phx_umbrella/config/runtime.exs
@@ -7,4 +7,5 @@ import Config
# any compile-time configuration in here, as it won't be applied.
# The block below contains prod specific runtime configuration.
if config_env() == :prod do
+ config :<%= @app_name %>, :dns_cluster_query, System.get_env("DNS_CLUSTER_QUERY")
end
diff --git a/installer/templates/phx_umbrella/config/test.exs b/installer/templates/phx_umbrella/config/test.exs
index 667ebeab4a..f71ba570e8 100644
--- a/installer/templates/phx_umbrella/config/test.exs
+++ b/installer/templates/phx_umbrella/config/test.exs
@@ -3,12 +3,16 @@ import Config
# Print only warnings and errors during test
config :logger, level: :warning<%= if @mailer do %>
-# In test we don't send emails.
+# In test we don't send emails
config :<%= @app_name %>, <%= @app_module %>.Mailer,
adapter: Swoosh.Adapters.Test
-# Disable swoosh api client as it is only required for production adapters.
+# Disable swoosh api client as it is only required for production adapters
config :swoosh, :api_client, false<% end %>
# Initialize plugs at runtime for faster test compilation
-config :phoenix, :plug_init_mode, :runtime
+config :phoenix, :plug_init_mode, :runtime<%= if @html do %>
+
+# Enable helpful, but potentially expensive runtime checks
+config :phoenix_live_view,
+ enable_expensive_runtime_checks: true<% end %>
diff --git a/installer/templates/phx_umbrella/mix.exs b/installer/templates/phx_umbrella/mix.exs
index e02ac62624..7d48e0836f 100644
--- a/installer/templates/phx_umbrella/mix.exs
+++ b/installer/templates/phx_umbrella/mix.exs
@@ -27,7 +27,8 @@ defmodule <%= @root_app_module %>.MixProject do
[
<%= if @dev or @phoenix_version.pre != [] do %><%= @phoenix_dep_umbrella_root %>,
<% end %># Required to run "mix format" on ~H/.heex files from the umbrella root
- {:phoenix_live_view, ">= 0.0.0"}
+ # TODO bump on release to {:phoenix_live_view, ">= 0.0.0"},
+ {:phoenix_live_view, "~> 1.0.0-rc.1", override: true}
]<% else %>
[]<% end %>
end
diff --git a/installer/templates/phx_web/components/core_components.ex b/installer/templates/phx_web/components/core_components.ex
index 2fe64b24b3..c604ef5533 100644
--- a/installer/templates/phx_web/components/core_components.ex
+++ b/installer/templates/phx_web/components/core_components.ex
@@ -3,8 +3,8 @@ defmodule <%= @web_namespace %>.CoreComponents do
Provides core UI components.
At first glance, this module may seem daunting, but its goal is to provide
- core building blocks for your application, such as modals, tables, and
- forms. The components consist mostly of markup and are well-documented
+ core building blocks for your application, such as tables, forms, and
+ inputs. The components consist mostly of markup and are well-documented
with doc strings and declarative assigns. You may customize and style
them in any way you want, based on your application growth and needs.
@@ -14,80 +14,10 @@ defmodule <%= @web_namespace %>.CoreComponents do
Icons are provided by [heroicons](https://heroicons.com). See `icon/1` for usage.
"""
- use Phoenix.Component
+ use Phoenix.Component<%= if @gettext do %>
+ use Gettext, backend: <%= @web_namespace %>.Gettext<% end %>
- alias Phoenix.LiveView.JS<%= if @gettext do %>
- import <%= @web_namespace %>.Gettext<% end %>
-
- @doc """
- Renders a modal.
-
- ## Examples
-
- <.modal id="confirm-modal">
- This is a modal.
-
-
- JS commands may be passed to the `:on_cancel` to configure
- the closing/cancel event, for example:
-
- <.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
- This is another modal.
-
-
- """
- attr :id, :string, required: true
- attr :show, :boolean, default: false
- attr :on_cancel, JS, default: %JS{}
- slot :inner_block, required: true
-
- def modal(assigns) do
- ~H"""
-
- """
- end
+ alias Phoenix.LiveView.JS
@doc """
Renders flash notices.
@@ -97,7 +27,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
<.flash kind={:info} flash={@flash} />
<.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!
"""
- attr :id, :string, default: nil, doc: "the optional id of flash container"
+ attr :id, :string, doc: "the optional id of flash container"
attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
attr :title, :string, default: nil
attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
@@ -106,14 +36,16 @@ defmodule <%= @web_namespace %>.CoreComponents do
slot :inner_block, doc: "the optional inner block that renders the flash message"
def flash(assigns) do
+ assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)
+
~H"""
hide("##{@id}")}
role="alert"
class={[
- "fixed top-2 right-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",
+ "fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",
@kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
@kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
]}
@@ -125,7 +57,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
<%%= @title %>
@@ -144,30 +76,31 @@ defmodule <%= @web_namespace %>.CoreComponents do
def flash_group(assigns) do
~H"""
- <%%= msg %>
-
- <.flash kind={:info} title="Success!" flash={@flash} />
- <.flash kind={:error} title="Error!" flash={@flash} />
+
+ <.flash kind={:info} title=<%= maybe_heex_attr_gettext.("Success!", @gettext) %> flash={@flash} />
+ <.flash kind={:error} title=<%= maybe_heex_attr_gettext.("Error!", @gettext) %> flash={@flash} />
<.flash
id="client-error"
kind={:error}
- title="We can't find the internet"
+ title=<%= maybe_heex_attr_gettext.("We can't find the internet", @gettext) %>
phx-disconnected={show(".phx-client-error #client-error")}
phx-connected={hide("#client-error")}
hidden
>
- Attempting to reconnect <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
+ <%= maybe_eex_gettext.("Attempting to reconnect", @gettext) %>
+ <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
<.flash
id="server-error"
kind={:error}
- title="Something went wrong!"
+ title=<%= maybe_heex_attr_gettext.("Something went wrong!", @gettext) %>
phx-disconnected={show(".phx-server-error #server-error")}
phx-connected={hide("#server-error")}
hidden
>
- Hang in there while we get back on track
- <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
+ <%= maybe_eex_gettext.("Hang in there while we get back on track", @gettext) %>
+ <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
"""
@@ -186,8 +119,8 @@ defmodule <%= @web_namespace %>.CoreComponents do
"""
- attr :for, :any, required: true, doc: "the datastructure for the form"
- attr :as, :any, default: nil, doc: "the server side parameter to collect all input under"
+ attr :for, :any, required: true, doc: "the data structure for the form"
+ attr :as, :any, doc: "the server side parameter to collect all input under"
attr :rest, :global,
include: ~w(autocomplete name rel action enctype method novalidate target multipart),
@@ -197,8 +130,10 @@ defmodule <%= @web_namespace %>.CoreComponents do
slot :actions, doc: "the slot for form actions, such as a submit button"
def simple_form(assigns) do
+ assigns = assign(assigns, :as, if(assigns[:as], do: %{as: assigns[:as]}, else: %{}))
+
~H"""
- <.form :let={f} for={@for} as={@as} {@rest}>
+ <.form :let={f} for={@for} {@as} {@rest}>
<%%= render_slot(@inner_block, f) %>
@@ -257,7 +192,8 @@ defmodule <%= @web_namespace %>.CoreComponents do
* For live file uploads, see `Phoenix.Component.live_file_input/1`
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
- for more information.
+ for more information. Unsupported types, such as hidden and radio,
+ are best written directly in your templates.
## Examples
@@ -271,8 +207,8 @@ defmodule <%= @web_namespace %>.CoreComponents do
attr :type, :string,
default: "text",
- values: ~w(checkbox color date datetime-local email file hidden month number password
- range radio search select tel text textarea time url week)
+ values: ~w(checkbox color date datetime-local email file month number password
+ range search select tel text textarea time url week)
attr :field, Phoenix.HTML.FormField,
doc: "a form field struct retrieved from the form, for example: @form[:email]"
@@ -287,25 +223,27 @@ defmodule <%= @web_namespace %>.CoreComponents do
include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
multiple pattern placeholder readonly required rows size step)
- slot :inner_block
-
def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
+ errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []
+
assigns
|> assign(field: nil, id: assigns.id || field.id)
- |> assign(:errors, Enum.map(field.errors, &translate_error(&1)))
+ |> assign(:errors, Enum.map(errors, &translate_error(&1)))
|> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
|> assign_new(:value, fn -> field.value end)
|> input()
end
- def input(%{type: "checkbox", value: value} = assigns) do
+ def input(%{type: "checkbox"} = assigns) do
assigns =
- assign_new(assigns, :checked, fn -> Phoenix.HTML.Form.normalize_value("checkbox", value) end)
+ assign_new(assigns, :checked, fn ->
+ Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
+ end)
~H"""
-
+