Update LiveView to 1.1 (#145)

* Update LiveView to 1.1

* Allow string type

Author: andreasknoepfle

.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 %>