Merge pull request #94 from pepsico-ecommerce/update-phoenix-live-view

Update Phoenix LiveView

lib/components/confirm_modal.ex

@@ -21,9 +21,12 @@ defmodule CrunchBerry.Components.ConfirmModal do
   ```
   ...
     <%= if @reupload do %>
-    <%= live_component CrunchBerry.Components.ConfirmModal,
-      title: "Re-upload CSV",
-      message: "This will clear the current session, and replace it with a new csv file." %>
+    <.live_component
+      id="my-confirm-modal"
+      module={CrunchBerry.Components.ConfirmModal}
+      title="Re-upload CSV"
+      message="This will clear the current session, and replace it with a new csv file."
+    />
     <% end %>
   ...
   ```

lib/components/flash_message.ex

@@ -27,7 +27,7 @@ defmodule CrunchBerry.Components.FlashMessage do
   If StateslessComponentFixture is using the `render_flash/1` then you need to pass in flash to the
   component for change tracking to work
   ```
-  <%= live_component StatelessComponentFixture, flash: @flash %>`
+  <.live_component id="my-component" module={StatelessComponentFixture} flash={@flash}/>`
   ```
 
   """

lib/components/live_helpers.ex

@@ -2,7 +2,7 @@ defmodule CrunchBerry.Components.LiveHelpers do
   @moduledoc """
   Helpers for LiveViews.
   """
-  import Phoenix.LiveView.Helpers
+  import Phoenix.Component
 
   alias CrunchBerry.Components.FlashMessage
   alias CrunchBerry.Components.LocalDateTime
@@ -43,34 +43,28 @@ defmodule CrunchBerry.Components.LiveHelpers do
 
   ## Examples
 
-      <%= live_modal MyProjectWeb.WidgetLive.FormComponent,
-        id: :new,
-        return_to: Routes.widget_index_path(@socket, :index),
-        classes: %{ container: "relative mx-auto my-10 opacity-100 rounded overflow-x-auto" }
-        phx_target: @myself
-        # Any option besides id/return_to is passed through to the child component,
+      <.live_modal
+        component={MyProjectWeb.WidgetLive.FormComponent}
+        id={:new}
+        return_to={Routes.widget_index_path(@socket, :index)}
+        classes={%{container: "relative mx-auto my-10 opacity-100 rounded overflow-x-auto"}}
+        phx_target={@myself}
+        # Any option besides id/return_to is passed through to the child component
         # this is where you can pass in any assigns the child component is going to need.
-        action: @live_action
-         %>
+        action={@live_action}
+      />
   """
-  @spec live_modal(any(), keyword) ::
-          Phoenix.LiveView.Component.t()
-  def live_modal(component, opts) do
-    path = Keyword.get(opts, :return_to)
-    classes = Keyword.get(opts, :classes, nil)
-    phx_target = Keyword.get(opts, :phx_target)
-
-    modal_opts = [
-      id: :modal,
-      return_to: path,
-      phx_target: phx_target,
-      component: component,
-      opts: opts
-    ]
-
-    modal_opts = if classes, do: Keyword.merge(modal_opts, classes: classes), else: modal_opts
-
-    live_component(Modal, modal_opts)
+  @spec live_modal(map) :: Phoenix.LiveView.Component.t()
+  def live_modal(assigns) do
+    assigns
+    |> Map.merge(%{id: "modal-#{unique_id()}", module: Modal, opts: assigns})
+    |> live_component()
+  end
+
+  defp unique_id do
+    make_ref()
+    |> inspect()
+    |> String.replace(~r"#Reference\<(\d+)\.(\d+)\.(\d+)\.(\d+)\>", "\\1_\\2_\\3_\\4")
   end
 
   @doc """
@@ -113,17 +107,20 @@ defmodule CrunchBerry.Components.LiveHelpers do
 
     ## Examples
 
-      <%= live_pagination name: "My Cool Pagination",
-      page: @page,
-      classes: %{
-        active: "bg-blue hover:bg-blue-900 text-white",
-        text: "bg-white text-blue hover:bg-gray-100"
-      }
-       %>
+      <.live_pagination
+        name="My Cool Pagination",
+        page={@page}
+        classes={%{
+          active: "bg-blue hover:bg-blue-900 text-white",
+          text: "bg-white text-blue hover:bg-gray-100"
+        }}
+      />
   """
-  @spec live_pagination(keyword()) :: Phoenix.LiveView.Component.t()
-  def live_pagination(opts) do
-    live_component(Pagination, opts)
+  @spec live_pagination(map) :: Phoenix.LiveView.Component.t()
+  def live_pagination(assigns) do
+    assigns
+    |> Map.merge(%{id: "pagination-#{unique_id()}", module: Pagination})
+    |> live_component()
   end
 
   @doc """
@@ -140,8 +137,8 @@ defmodule CrunchBerry.Components.LiveHelpers do
 
   ## Examples
 
-    <%= live_type_ahead(form: f, label: "User Search", search_text: @search_text, search_results: @search_results,
-                        current_focus: @current_focus, placeholder: "name or e-mail address...")  %>
+    <.live_type_ahead form={f} label="User Search" search_text={@search_text} search_results={@search_results}
+                        current_focus={@current_focus} placeholder="name or e-mail address...")  />
 
   ## Internal Events
   - `type-ahead-click-away` - optional - This `phx-click-away` event can be used to clear te drop-down by setting `search_results` to `[]`
@@ -252,9 +249,11 @@ defmodule CrunchBerry.Components.LiveHelpers do
   - `results_list_item` - styles applied to the `li`'s inside of the results list
   - `results_focus` - style applied to the currently active focus item
   """
-  @spec live_type_ahead(keyword()) :: Phoenix.LiveView.Component.t()
-  def live_type_ahead(opts) do
-    live_component(TypeAhead, opts)
+  @spec live_type_ahead(map) :: Phoenix.LiveView.Component.t()
+  def live_type_ahead(assigns) do
+    assigns
+    |> Map.merge(%{id: "type-ahead-#{unique_id()}", module: TypeAhead})
+    |> live_component()
   end
 
   @doc """
@@ -274,7 +273,7 @@ defmodule CrunchBerry.Components.LiveHelpers do
   If StateslessComponentFixture is using the `render_flash/1` then you need to pass in flash to the
   component for change tracking to work
   ```
-  <%= live_component StatelessComponentFixture, flash: @flash %>`
+  <.live_component id="my-component" module={StatelessComponentFixture} flash={@flash} />
   ```
 
   """

lib/components/type_ahead.ex

@@ -113,7 +113,7 @@ defmodule CrunchBerry.Components.TypeAhead do
     end)
   end
 
-  defp phx_target(%{target: target}), do: [phx_target: target]
+  defp phx_target(%{target: target}), do: ["phx-target": target]
   defp phx_target(_), do: []
 
   defp class_or_default(%{classes: classes}, key) do

mix.exs

@@ -4,7 +4,7 @@ defmodule CrunchBerry.MixProject do
   def project do
     [
       app: :crunch_berry,
-      version: "0.4.5",
+      version: "0.5.0",
       elixir: "~> 1.10",
       elixirc_paths: elixirc_paths(Mix.env()),
       config_path: "./config/config.exs",
@@ -42,7 +42,7 @@ defmodule CrunchBerry.MixProject do
   defp deps do
     [
       # Phoenix
-      {:phoenix_live_view, ">= 0.18.2"},
+      {:phoenix_live_view, "~> 0.19.0"},
       {:phoenix_html, ">= 3.0.0"},
 
       # Utils

mix.lock

@@ -19,7 +19,7 @@
   "gettext": {:hex, :gettext, "0.22.2", "6bfca374de34ecc913a28ba391ca184d88d77810a3e427afa8454a71a51341ac", [:mix], [{:expo, "~> 0.4.0", [hex: :expo, repo: "hexpm", optional: false]}], "hexpm", "8a2d389673aea82d7eae387e6a2ccc12660610080ae7beb19452cfdc1ec30f60"},
   "hackney": {:hex, :hackney, "1.18.1", "f48bf88f521f2a229fc7bae88cf4f85adc9cd9bcf23b5dc8eb6a1788c662c4f6", [:rebar3], [{:certifi, "~> 2.9.0", [hex: :certifi, repo: "hexpm", optional: false]}, {:idna, "~> 6.1.0", [hex: :idna, repo: "hexpm", optional: false]}, {:metrics, "~> 1.0.0", [hex: :metrics, repo: "hexpm", optional: false]}, {:mimerl, "~> 1.1", [hex: :mimerl, repo: "hexpm", optional: false]}, {:parse_trans, "3.3.1", [hex: :parse_trans, repo: "hexpm", optional: false]}, {:ssl_verify_fun, "~> 1.1.0", [hex: :ssl_verify_fun, repo: "hexpm", optional: false]}, {:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "a4ecdaff44297e9b5894ae499e9a070ea1888c84afdd1fd9b7b2bc384950128e"},
   "idna": {:hex, :idna, "6.1.1", "8a63070e9f7d0c62eb9d9fcb360a7de382448200fbbd1b106cc96d3d8099df8d", [:rebar3], [{:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "92376eb7894412ed19ac475e4a86f7b413c1b9fbb5bd16dccd57934157944cea"},
-  "jason": {:hex, :jason, "1.4.0", "e855647bc964a44e2f67df589ccf49105ae039d4179db7f6271dfd3843dc27e6", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "79a3791085b2a0f743ca04cec0f7be26443738779d09302e01318f97bdb82121"},
+  "jason": {:hex, :jason, "1.4.1", "af1504e35f629ddcdd6addb3513c3853991f694921b1b9368b0bd32beb9f1b63", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "fbb01ecdfd565b56261302f7e1fcc27c4fb8f32d56eab74db621fc154604a7a1"},
   "junit_formatter": {:hex, :junit_formatter, "3.3.1", "c729befb848f1b9571f317d2fefa648e9d4869befc4b2980daca7c1edc468e40", [:mix], [], "hexpm", "761fc5be4b4c15d8ba91a6dafde0b2c2ae6db9da7b8832a55b5a1deb524da72b"},
   "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"},
@@ -30,20 +30,20 @@
   "mix_audit": {:hex, :mix_audit, "2.1.1", "653aa6d8f291fc4b017aa82bdb79a4017903902ebba57960ef199cbbc8c008a1", [:make, :mix], [{:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}, {:yaml_elixir, "~> 2.9", [hex: :yaml_elixir, repo: "hexpm", optional: false]}], "hexpm", "541990c3ab3a7bb8c4aaa2ce2732a4ae160ad6237e5dcd5ad1564f4f85354db1"},
   "nimble_parsec": {:hex, :nimble_parsec, "1.3.1", "2c54013ecf170e249e9291ed0a62e5832f70a476c61da16f6aac6dca0189f2af", [:mix], [], "hexpm", "2682e3c0b2eb58d90c6375fc0cc30bc7be06f365bf72608804fb9cffa5e1b167"},
   "parse_trans": {:hex, :parse_trans, "3.3.1", "16328ab840cc09919bd10dab29e431da3af9e9e7e7e6f0089dd5a2d2820011d8", [:rebar3], [], "hexpm", "07cd9577885f56362d414e8c4c4e6bdf10d43a8767abb92d24cbe8b24c54888b"},
-  "phoenix": {:hex, :phoenix, "1.7.6", "61f0625af7c1d1923d582470446de29b008c0e07ae33d7a3859ede247ddaf59a", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5.3", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "f6b4be7780402bb060cbc6e83f1b6d3f5673b674ba73cc4a7dd47db0322dfb88"},
-  "phoenix_html": {:hex, :phoenix_html, "3.3.1", "4788757e804a30baac6b3fc9695bf5562465dd3f1da8eb8460ad5b404d9a2178", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "bed1906edd4906a15fd7b412b85b05e521e1f67c9a85418c55999277e553d0d3"},
-  "phoenix_live_view": {:hex, :phoenix_live_view, "0.19.3", "3918c1b34df8ac71a9a636806ba5b7f053349a0392b312e16f35b0bf4d070aab", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "545626887948495fd8ea23d83b75bd7aaf9dc4221563e158d2c4b52ea1dd7e00"},
+  "phoenix": {:hex, :phoenix, "1.7.7", "4cc501d4d823015007ba3cdd9c41ecaaf2ffb619d6fb283199fa8ddba89191e0", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5.3", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "8966e15c395e5e37591b6ed0bd2ae7f48e961f0f60ac4c733f9566b519453085"},
+  "phoenix_html": {:hex, :phoenix_html, "3.3.2", "d6ce982c6d8247d2fc0defe625255c721fb8d5f1942c5ac051f6177bffa5973f", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "44adaf8e667c1c20fb9d284b6b0fa8dc7946ce29e81ce621860aa7e96de9a11d"},
+  "phoenix_live_view": {:hex, :phoenix_live_view, "0.19.5", "6e730595e8e9b8c5da230a814e557768828fd8dfeeb90377d2d8dbb52d4ec00a", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "b2eaa0dd3cfb9bd7fb949b88217df9f25aed915e986a28ad5c8a0d054e7ca9d3"},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.1.3", "3168d78ba41835aecad272d5e8cd51aa87a7ac9eb836eabc42f6e57538e3731d", [:mix], [], "hexpm", "bba06bc1dcfd8cb086759f0edc94a8ba2bc8896d5331a1e2c2902bf8e36ee502"},
-  "phoenix_template": {:hex, :phoenix_template, "1.0.1", "85f79e3ad1b0180abb43f9725973e3b8c2c3354a87245f91431eec60553ed3ef", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "157dc078f6226334c91cb32c1865bf3911686f8bcd6bcff86736f6253e6993ee"},
+  "phoenix_template": {:hex, :phoenix_template, "1.0.3", "32de561eefcefa951aead30a1f94f1b5f0379bc9e340bb5c667f65f1edfa4326", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "16f4b6588a4152f3cc057b9d0c0ba7e82ee23afa65543da535313ad8d25d8e2c"},
   "plug": {:hex, :plug, "1.14.2", "cff7d4ec45b4ae176a227acd94a7ab536d9b37b942c8e8fa6dfc0fff98ff4d80", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "842fc50187e13cf4ac3b253d47d9474ed6c296a8732752835ce4a86acdf68d13"},
   "plug_crypto": {:hex, :plug_crypto, "1.2.5", "918772575e48e81e455818229bf719d4ab4181fcbf7f85b68a35620f78d89ced", [:mix], [], "hexpm", "26549a1d6345e2172eb1c233866756ae44a9609bd33ee6f99147ab3fd87fd842"},
   "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.7", "354c321cf377240c7b8716899e182ce4890c5938111a1296add3ec74cf1715df", [:make, :mix, :rebar3], [], "hexpm", "fe4c190e8f37401d30167c8c405eda19469f34577987c76dde613e838bbc67f8"},
   "telemetry": {:hex, :telemetry, "1.2.1", "68fdfe8d8f05a8428483a97d7aab2f268aaff24b49e0f599faa091f1d4e7f61c", [:rebar3], [], "hexpm", "dad9ce9d8effc621708f99eac538ef1cbe05d6a874dd741de2e689c47feafed5"},
   "timex": {:hex, :timex, "3.7.11", "bb95cb4eb1d06e27346325de506bcc6c30f9c6dea40d1ebe390b262fad1862d1", [:mix], [{:combine, "~> 0.10", [hex: :combine, repo: "hexpm", optional: false]}, {:gettext, "~> 0.20", [hex: :gettext, repo: "hexpm", optional: false]}, {:tzdata, "~> 1.1", [hex: :tzdata, repo: "hexpm", optional: false]}], "hexpm", "8b9024f7efbabaf9bd7aa04f65cf8dcd7c9818ca5737677c7b76acbc6a94d1aa"},
   "tzdata": {:hex, :tzdata, "1.1.1", "20c8043476dfda8504952d00adac41c6eda23912278add38edc140ae0c5bcc46", [:mix], [{:hackney, "~> 1.17", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "a69cec8352eafcd2e198dea28a34113b60fdc6cb57eb5ad65c10292a6ba89787"},
   "unicode_util_compat": {:hex, :unicode_util_compat, "0.7.0", "bc84380c9ab48177092f43ac89e4dfa2c6d62b40b8bd132b1059ecc7232f9a78", [:rebar3], [], "hexpm", "25eee6d67df61960cf6a794239566599b09e17e668d3700247bc498638152521"},
-  "websock": {:hex, :websock, "0.5.2", "b3c08511d8d79ed2c2f589ff430bd1fe799bb389686dafce86d28801783d8351", [:mix], [], "hexpm", "925f5de22fca6813dfa980fb62fd542ec43a2d1a1f83d2caec907483fe66ff05"},
-  "websock_adapter": {:hex, :websock_adapter, "0.5.3", "4908718e42e4a548fc20e00e70848620a92f11f7a6add8cf0886c4232267498d", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "cbe5b814c1f86b6ea002b52dd99f345aeecf1a1a6964e209d208fb404d930d3d"},
+  "websock": {:hex, :websock, "0.5.3", "2f69a6ebe810328555b6fe5c831a851f485e303a7c8ce6c5f675abeb20ebdadc", [:mix], [], "hexpm", "6105453d7fac22c712ad66fab1d45abdf049868f253cf719b625151460b8b453"},
+  "websock_adapter": {:hex, :websock_adapter, "0.5.4", "7af8408e7ed9d56578539594d1ee7d8461e2dd5c3f57b0f2a5352d610ddde757", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "d2c238c79c52cbe223fcdae22ca0bb5007a735b9e933870e241fce66afb4f4ab"},
   "yamerl": {:hex, :yamerl, "0.10.0", "4ff81fee2f1f6a46f1700c0d880b24d193ddb74bd14ef42cb0bcf46e81ef2f8e", [:rebar3], [], "hexpm", "346adb2963f1051dc837a2364e4acf6eb7d80097c0f53cbdc3046ec8ec4b4e6e"},
   "yaml_elixir": {:hex, :yaml_elixir, "2.9.0", "9a256da867b37b8d2c1ffd5d9de373a4fda77a32a45b452f1708508ba7bbcb53", [:mix], [{:yamerl, "~> 0.10", [hex: :yamerl, repo: "hexpm", optional: false]}], "hexpm", "0cb0e7d4c56f5e99a6253ed1a670ed0e39c13fc45a6da054033928607ac08dfc"},
 }

test/components/flash_message_test.exs

@@ -83,7 +83,7 @@ defmodule CrunchBerry.Components.FlashMessageTest do
       def render(assigns) do
         ~H"""
         <div>
-          <%= live_component(ComponentFixture, id: "test-fixture") %>
+          <.live_component module={ComponentFixture} id="test-fixture" />
         </div>
         """
       end

test/support/live_view_test/modal_live.ex

@@ -24,7 +24,7 @@ defmodule CrunchBerry.LiveViewTest.ModalLive do
     end
   end
 
-  alias CrunchBerry.Components.LiveHelpers
+  import CrunchBerry.Components.LiveHelpers
 
   def mount(params, _, socket) do
     socket = assign(socket, :params, params)
@@ -38,11 +38,11 @@ defmodule CrunchBerry.LiveViewTest.ModalLive do
       <%= if @params["show"] do %>
         <%= cond do %>
           <% @params["return_to"] -> %>
-            <%= LiveHelpers.live_modal(ModalComponent, id: "otter", return_to: @params["return_to"]) %>
+            <.live_modal component={ModalComponent} id="otter" return_to={@params["return_to"]} />
           <% @params["phx_target"] -> %>
-            <%= LiveHelpers.live_modal(ModalComponent, id: "otter", phx_target: @params["phx_target"]) %>
+            <.live_modal component={ModalComponent} id="otter" phx_target={@params["phx_target"]} />
           <% true -> %>
-            <%= LiveHelpers.live_modal(ModalComponent, id: "otter") %>
+            <.live_modal component={ModalComponent} id="otter" />
         <% end %>
       <% end %>
       <%= if Map.has_key?(assigns, :message) do %>