Update LiveView to 1.1

.tool-versions

@@ -1,3 +1,3 @@
-elixir 1.14.5
+elixir 1.16.3
 erlang 25.1.2
 nodejs 16.13.0

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## Unreleased
+
+### Breaking 
+- Update for liveview > 1.0
+- Stop generating phx-feedback-for in favour of `Phoenix.Component.used_input?`
+- Require Elixir 1.15
+- Require Phoenix HTML 4.0
+https://github.com/phoenixframework/phoenix_live_view/blob/v1.0/CHANGELOG.md#core-components
+
 ## v2.5.2 - 2025-08-11
 - Brought back `unchecked_value` & `checked_value` for checkboxes in `ui_input` and `ui_raw_input`.
 

demo/config/config.exs

@@ -24,7 +24,7 @@ config :bitstyles_phoenix_demo, BitstylesPhoenixDemoWeb.Endpoint,
 
 # Configure esbuild (the version is required)
 config :esbuild,
-  version: "0.12.18",
+  version: "0.25.0",
   default: [
     args:
       ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
@@ -33,7 +33,7 @@ config :esbuild,
   ]
 
 config :dart_sass,
-  version: "1.43.4",
+  version: "1.61.0",
   default: [
     args: ~w(css/app.scss ../priv/static/assets/app.css),
     cd: Path.expand("../assets", __DIR__)

demo/config/test.exs

@@ -11,7 +11,7 @@ config :bitstyles_phoenix,
   trim_e2e_classes: [enabled: false]
 
 # Print only warnings and errors during test
-config :logger, level: :warn
+config :logger, level: :warning
 
 # Initialize plugs at runtime for faster test compilation
 config :phoenix, :plug_init_mode, :runtime

demo/lib/bitstyles_phoenix_demo/thing.ex

@@ -7,8 +7,8 @@ defmodule BitstylesPhoenixDemo.Thing do
     field(:name, :string)
   end
 
-  def changeset(schema \\ %__MODULE__{}, params \\ %{}) do
-    schema
+  def changeset(params) do
+    %__MODULE__{}
     |> cast(params, [:name])
     |> validate_required([:name])
   end

demo/lib/bitstyles_phoenix_demo_web.ex

@@ -3,10 +3,10 @@ defmodule BitstylesPhoenixDemoWeb do
 
   def controller do
     quote do
-      use Phoenix.Controller, namespace: BitstylesPhoenixDemoWeb
+      use Phoenix.Controller, formats: [:html]
 
       import Plug.Conn
-      import BitstylesPhoenixDemoWeb.Gettext
+      use Gettext, backend: BitstylesPhoenixDemoWeb.Gettext
       alias BitstylesPhoenixDemoWeb.Router.Helpers, as: Routes
     end
   end
@@ -15,11 +15,12 @@ defmodule BitstylesPhoenixDemoWeb do
     quote do
       use Phoenix.View,
         root: "lib/bitstyles_phoenix_demo_web/templates",
-        namespace: BitstylesPhoenixDemoWeb
+        namespace: BitstylesPhoenixDemoWeb,
+        pattern: "**/*"
 
       # Import convenience functions from controllers
       import Phoenix.Controller,
-        only: [get_flash: 1, get_flash: 2, view_module: 1, view_template: 1]
+        only: [get_csrf_token: 0, get_flash: 1, get_flash: 2, view_module: 1, view_template: 1]
 
       use BitstylesPhoenix.Alpine3
 
@@ -62,24 +63,24 @@ defmodule BitstylesPhoenixDemoWeb do
   def channel do
     quote do
       use Phoenix.Channel
-      import BitstylesPhoenixDemoWeb.Gettext
+      use Gettext, backend: BitstylesPhoenixDemoWeb.Gettext
     end
   end
 
   defp view_helpers do
     quote do
+      # Import basic rendering functionality (render, render_layout, etc)
+      import Phoenix.View
+      import Phoenix.Component
       # Use all HTML functionality (forms, tags, etc)
-      use Phoenix.HTML
+      import Phoenix.HTML
+      import Phoenix.HTML.Form
 
       use BitstylesPhoenix
       # Import LiveView and .heex helpers (live_render, live_patch, <.form>, etc)
-      import Phoenix.Component
-
-      # Import basic rendering functionality (render, render_layout, etc)
-      import Phoenix.View
 
       import BitstylesPhoenixDemoWeb.ErrorHelpers
-      import BitstylesPhoenixDemoWeb.Gettext
+      use Gettext, backend: BitstylesPhoenixDemoWeb.Gettext
       alias BitstylesPhoenixDemoWeb.Router.Helpers, as: Routes
     end
   end

demo/lib/bitstyles_phoenix_demo_web/controllers/page_controller.ex

@@ -2,15 +2,18 @@ defmodule BitstylesPhoenixDemoWeb.PageController do
   alias BitstylesPhoenixDemo.Thing
   use BitstylesPhoenixDemoWeb, :controller
 
+  plug :put_layout, {BitstylesPhoenixDemoWeb.LayoutView, :app}
+
   def index(conn, _params) do
     changeset =
-      Thing.changeset()
+      Thing.changeset(%{name: ""})
       |> Map.put(:action, "update")
 
     conn
     |> put_flash(:info, "Welcome to the Demo !!!")
     |> put_flash(:warning, "Let's pretend we have a warning.")
     |> put_flash(:error, "Let's pretend we have an error.")
+    |> put_view(BitstylesPhoenixDemoWeb.PageView)
     |> render("index.html", changeset: changeset)
   end
 end

demo/lib/bitstyles_phoenix_demo_web/gettext.ex

@@ -1,3 +1,3 @@
 defmodule BitstylesPhoenixDemoWeb.Gettext do
-  use Gettext, otp_app: :bitstyles_phoenix_demo
+  use Gettext.Backend, otp_app: :bitstyles_phoenix_demo
 end

demo/lib/bitstyles_phoenix_demo_web/live/demo_live.ex

@@ -8,6 +8,6 @@ defmodule BitstylesPhoenixDemoWeb.DemoLive do
       |> put_flash(:warning, "Let's pretend we have a warning.")
       |> put_flash(:error, "Let's pretend we have an error.")
 
-    {:noreply, push_redirect(socket, to: "/live")}
+    {:noreply, push_navigate(socket, to: "/live")}
   end
 end

demo/lib/bitstyles_phoenix_demo_web/templates/layout/app.html.heex

@@ -18,24 +18,24 @@
   </:small_sidebar>
   <:sidebar_content>
     <.ui_sidebar_nav>
-      <.ui_sidebar_nav_item><.ui_button href={Routes.page_path(@conn, :index)} class="u-flex-grow-1 e2e-sidebar-alpine" variant="nav">Alpine 3</.ui_button></.ui_sidebar_nav_item>
-      <.ui_sidebar_nav_item><.ui_button href={Routes.live_path(@conn, BitstylesPhoenixDemoWeb.DemoLive)} class="u-flex-grow-1 e2e-sidebar-live" variant="nav">Live</.ui_button></.ui_sidebar_nav_item>
+      <.ui_sidebar_nav_item><.ui_button href={Routes.page_path(@conn, :index)} class="u-flex-grow-1 e2e-sidebar-alpine" shape="nav">Alpine 3</.ui_button></.ui_sidebar_nav_item>
+      <.ui_sidebar_nav_item><.ui_button href={Routes.live_path(@conn, BitstylesPhoenixDemoWeb.DemoLive)} class="u-flex-grow-1 e2e-sidebar-live" shape="nav">Live</.ui_button></.ui_sidebar_nav_item>
     </.ui_sidebar_nav>
   </:sidebar_content>
   <:main :let={s}>
     <.ui_js_sidebar_open sidebar={s} class="u-margin-s e2e-sidebar-open"/>
-    <%= if content = get_flash(@conn, :info) do %>
+    <%= if content = Phoenix.Flash.get(@flash, :info) do %>
       <.ui_flash variant={[:positive, :full]}>
         <%= content %>
       </.ui_flash>
     <% end %>
-    <%= if content = get_flash(@conn, :warning) do %>
+    <%= if content = Phoenix.Flash.get(@flash, :warning) do %>
       <.ui_flash variant={[:warning, :full]}>
         <.ui_icon name="exclamation" class="u-flex-shrink-0 u-margin-m-right" />
         <%= content %>
       </.ui_flash>
     <% end %>
-    <%= if content = get_flash(@conn, :error) do %>
+    <%= if content = Phoenix.Flash.get(@flash, :error) do %>
       <.ui_flash variant={[:danger, :full]}>
         <.ui_icon name="exclamation" class="u-flex-shrink-0 u-margin-m-right" />
         <%= content %>

demo/lib/bitstyles_phoenix_demo_web/templates/layout/live.html.heex

@@ -18,23 +18,23 @@
   </:small_sidebar>
   <:sidebar_content>
     <.ui_sidebar_nav>
-      <.ui_sidebar_nav_item><.ui_button href={Routes.page_path(@socket, :index)} class="u-flex-grow-1 e2e-sidebar-alpine" variant="nav">Alpine 3</.ui_button></.ui_sidebar_nav_item>
-      <.ui_sidebar_nav_item><.ui_button href={Routes.live_path(@socket, BitstylesPhoenixDemoWeb.DemoLive)} class="u-flex-grow-1 e2e-sidebar-live" variant="nav">Live</.ui_button></.ui_sidebar_nav_item>
+      <.ui_sidebar_nav_item><.ui_button href={Routes.page_path(@socket, :index)} class="u-flex-grow-1 e2e-sidebar-alpine" shape="nav">Alpine 3</.ui_button></.ui_sidebar_nav_item>
+      <.ui_sidebar_nav_item><.ui_button href={Routes.live_path(@socket, BitstylesPhoenixDemoWeb.DemoLive)} class="u-flex-grow-1 e2e-sidebar-live" shape="nav">Live</.ui_button></.ui_sidebar_nav_item>
     </.ui_sidebar_nav>
   </:sidebar_content>
   <:main :let={s}>
-    <%= if content = live_flash(@flash, :info) do %>
+    <%= if content = Phoenix.Flash.get(@flash, :info) do %>
       <.ui_flash variant="positive" phx-click="lv:clear-flash" phx-value-key="info">
         <%= content %>
       </.ui_flash>
     <% end %>
-    <%= if content = live_flash(@flash, :warning) do %>
+    <%= if content = Phoenix.Flash.get(@flash, :warning) do %>
       <.ui_flash variant="warning" phx-click="lv:clear-flash" phx-value-key="warning">
         <.ui_icon name="exclamation" class= "u-flex-shrink-0 u-margin-m-right" />
         <%= content %>
       </.ui_flash>
     <% end %>
-    <%= if content = live_flash(@flash, :error) do %>
+    <%= if content = Phoenix.Flash.get(@flash, :error) do %>
       <.ui_flash variant="danger" phx-click="lv:clear-flash" phx-value-key="error">
         <.ui_icon name="exclamation" class= "u-flex-shrink-0 u-margin-m-right" />
         <%= content %>

demo/lib/bitstyles_phoenix_demo_web/templates/layout/root.html.heex

@@ -4,7 +4,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <%= csrf_meta_tag() %>
+    <meta name="csrf-token" content={get_csrf_token()}>
     <.live_title suffix="- Bitstyles Phoenix Demo"><%= assigns[:page_title] || "Main" %></.live_title>
     <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
     <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>

demo/lib/bitstyles_phoenix_demo_web/views/error_helpers.ex

@@ -3,8 +3,6 @@ defmodule BitstylesPhoenixDemoWeb.ErrorHelpers do
   Conveniences for translating and building error messages.
   """
 
-  use Phoenix.HTML
-
   @doc """
   Translates an error message using gettext.
   """

demo/mix.exs

@@ -7,7 +7,7 @@ defmodule BitstylesPhoenixDemo.MixProject do
       version: "0.1.0",
       elixir: "~> 1.12",
       elixirc_paths: elixirc_paths(Mix.env()),
-      compilers: [:gettext] ++ Mix.compilers(),
+      compilers: Mix.compilers(),
       start_permanent: Mix.env() == :prod,
       aliases: aliases(),
       deps: deps()
@@ -33,23 +33,24 @@ defmodule BitstylesPhoenixDemo.MixProject do
   # Type `mix help deps` for examples and options.
   defp deps do
     [
-      {:bitstyles_phoenix, path: '..'},
+      {:bitstyles_phoenix, path: ~c".."},
       {:faker, "~> 0.17"},
-      {:ecto, "~> 3.7.1"},
+      {:ecto, "~> 3.7"},
       {:dart_sass, "~> 0.3", runtime: Mix.env() == :dev},
-      {:phoenix, "~> 1.6.2"},
+      {:phoenix, "~> 1.8"},
       {:phoenix_ecto, "~> 4.0"},
-      {:phoenix_html, "~> 3.0"},
+      {:phoenix_html, "~> 4.0"},
+      {:phoenix_view, "~> 2.0"},
       {:phoenix_live_reload, "~> 1.2", only: :dev},
-      {:phoenix_live_view, "~> 0.18.0"},
+      {:phoenix_live_view, "~> 1.1"},
       {:floki, ">= 0.30.0", only: :test},
       {:esbuild, "~> 0.2", runtime: Mix.env() == :dev},
-      {:telemetry_metrics, "~> 0.6"},
+      {:telemetry_metrics, "~> 1.0"},
       {:telemetry_poller, "~> 1.0"},
-      {:gettext, "~> 0.18"},
+      {:gettext, "~> 1.0"},
       {:jason, "~> 1.2"},
       {:plug_cowboy, "~> 2.5"},
-      {:wallaby, "~> 0.29.0", runtime: false, only: :test}
+      {:wallaby, "~> 0.30", runtime: false, only: :test}
     ]
   end