Clarify toast customization and adopt Quokka

.formatter.exs

@@ -1,6 +1,6 @@
 [
   import_deps: [:phoenix],
-  plugins: [Phoenix.LiveView.HTMLFormatter, Styler],
+  plugins: [Phoenix.LiveView.HTMLFormatter, Quokka],
   inputs: ["{mix,.formatter}.exs", "*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}"],
   subdirectories: ["demo"]
 ]

README.md

@@ -277,6 +277,13 @@ msgstr "Aguanta mientras volvemos a la normalidad"
     component-specific presentation or behavior without adding library-level options. LiveToast does not interpret
     metadata.
 
+### Custom rendering and classes
+
+The `component` option and `toast_component_fn` render the content inside a LiveToast-managed toast shell. The shell
+continues to provide the hook, timing attributes, enter and exit animations, stacking, and dismiss button. Use
+[`toast_class_fn/1`](https://hexdocs.pm/live_toast/LiveToast.html#toast_class_fn/1) to change that outer shell's
+classes; use a custom component function for the icon, title, body, action, and other toast content.
+
 ### Default custom toast component
 
 Pass `toast_component_fn` to `LiveToast.toast_group` when all programmatic toasts in that host should use the same

config/config.exs

@@ -1,8 +1,9 @@
 import Config
 
-config :phoenix, :json_library, Jason
-config :logger, :level, :debug
 config :logger, :backends, []
+config :logger, :level, :debug
+
+config :phoenix, :json_library, Jason
 
 if Mix.env() == :dev do
   esbuild = fn args ->

demo/.formatter.exs

@@ -1,5 +1,5 @@
 [
   import_deps: [:phoenix],
-  plugins: [Phoenix.LiveView.HTMLFormatter, Styler],
+  plugins: [Phoenix.LiveView.HTMLFormatter, Quokka],
   inputs: ["{mix,.formatter}.exs", "*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}"]
 ]

demo/config/config.exs

@@ -1,34 +1,26 @@
 import Config
 
-config :esbuild,
-  version: "0.17.11",
-  demo: [
-    args: ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
-    cd: Path.expand("../assets", __DIR__),
-    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
-  ]
-
-config :tailwind,
-  version: "3.4.0",
-  demo: [
-    args: ~w(
-  --config=tailwind.config.cjs
-           --input=css/app.css
-                   --output=../priv/static/assets/app.css
-  ),
-    cd: Path.expand("../assets", __DIR__)
-  ]
+alias Phoenix.Endpoint.Cowboy2Adapter
 
 config :demo, DemoWeb.Endpoint,
   url: [host: "localhost"],
-  adapter: Phoenix.Endpoint.Cowboy2Adapter,
+  adapter: Cowboy2Adapter,
   render_errors: [
     formats: [html: DemoWeb.ErrorHTML, json: DemoWeb.ErrorJSON],
     layout: false
   ],
   pubsub_server: Demo.PubSub,
   live_view: [signing_salt: "mca0adK+"]
 
+config :esbuild,
+  version: "0.17.11",
+  demo: [
+    args:
+      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
+    cd: Path.expand("../assets", __DIR__),
+    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+  ]
+
 config :live_toast,
   gettext_backend: Demo.Gettext
 
@@ -38,4 +30,15 @@ config :logger, :console,
 
 config :phoenix, :json_library, Jason
 
+config :tailwind,
+  version: "3.4.0",
+  demo: [
+    args: ~w(
+  --config=tailwind.config.cjs
+           --input=css/app.css
+                   --output=../priv/static/assets/app.css
+  ),
+    cd: Path.expand("../assets", __DIR__)
+  ]
+
 import_config "#{config_env()}.exs"

demo/config/dev.exs

@@ -1,5 +1,14 @@
 import Config
 
+config :demo, DemoWeb.Endpoint,
+  live_reload: [
+    patterns: [
+      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
+      ~r"priv/gettext/.*(po)$",
+      ~r"lib/demo_web/(controllers|live|components)/.*(ex|heex)$"
+    ]
+  ]
+
 config :demo, DemoWeb.Endpoint,
   reloadable_apps: [:live_toast, :demo],
   http: [ip: {127, 0, 0, 1}, port: 4004],
@@ -12,15 +21,5 @@ config :demo, DemoWeb.Endpoint,
     tailwind: {Tailwind, :install_and_run, [:demo, ~w(--watch)]}
   ]
 
-config :demo, DemoWeb.Endpoint,
-  live_reload: [
-    patterns: [
-      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
-      ~r"priv/gettext/.*(po)$",
-      ~r"lib/demo_web/(controllers|live|components)/.*(ex|heex)$"
-    ]
-  ]
-
-config :phoenix, :stacktrace_depth, 20
-
 config :phoenix, :plug_init_mode, :runtime
+config :phoenix, :stacktrace_depth, 20

demo/config/runtime.exs

@@ -15,13 +15,13 @@ if config_env() == :prod do
   host = System.get_env("PHX_HOST") || "example.com"
   port = String.to_integer(System.get_env("PORT") || "4004")
 
-  config :demo, :dns_cluster_query, System.get_env("DNS_CLUSTER_QUERY")
-
   config :demo, DemoWeb.Endpoint,
     url: [host: host, port: 443, scheme: "https"],
     http: [
       ip: {0, 0, 0, 0, 0, 0, 0, 0},
       port: port
     ],
     secret_key_base: secret_key_base
+
+  config :demo, :dns_cluster_query, System.get_env("DNS_CLUSTER_QUERY")
 end

demo/config/test.exs

@@ -1,9 +1,10 @@
 import Config
 
-config :logger, level: :warning
-config :phoenix, :plug_init_mode, :runtime
-
 config :demo, DemoWeb.Endpoint,
   http: [ip: {127, 0, 0, 1}, port: 4002],
   secret_key_base: "C+Yn8zjDt2z+Sbl3NhLDra8U+J1QlqLoTSLx7w9BkToiWOnPk58H9nqTq+Y9OR3A",
   server: false
+
+config :logger, level: :warning
+
+config :phoenix, :plug_init_mode, :runtime

demo/lib/demo_web/components/layouts.ex

@@ -29,7 +29,8 @@ defmodule DemoWeb.Layouts do
         "items-end bottom-0 left-1/2 transform -translate-x-1/2 flex-col-reverse sm:top-auto",
       assigns[:corner] == :bottom_right && "items-end bottom-0 right-0 flex-col-reverse sm:top-auto",
       assigns[:corner] == :top_left && "items-start top-0 left-0 flex-col sm:bottom-auto",
-      assigns[:corner] == :top_center && "items-start top-0 left-1/2 transform -translate-x-1/2 flex-col sm:bottom-auto",
+      assigns[:corner] == :top_center &&
+        "items-start top-0 left-1/2 transform -translate-x-1/2 flex-col sm:bottom-auto",
       assigns[:corner] == :top_right && "items-start top-0 right-0 flex-col sm:bottom-auto"
     ]
   end

demo/lib/demo_web/endpoint.ex

@@ -1,14 +1,16 @@
 defmodule DemoWeb.Endpoint do
   use Phoenix.Endpoint, otp_app: :demo
 
+  alias Phoenix.LiveView.Socket
+
   @session_options [
     store: :cookie,
     key: "_demo_key",
     signing_salt: "GqxXCs/D",
     same_site: "Lax"
   ]
 
-  socket("/live", Phoenix.LiveView.Socket,
+  socket("/live", Socket,
     websocket: [connect_info: [session: @session_options]],
     longpoll: [connect_info: [session: @session_options]]
   )

demo/lib/demo_web/live/home_live.ex

@@ -203,7 +203,7 @@ defmodule DemoWeb.HomeLive do
       end
 
     duration =
-      case Map.get(payload, "duration", nil) do
+      case Map.get(payload, "duration") do
         d when is_integer(d) -> d
         d when is_binary(d) -> String.to_integer(d)
         _ -> nil

demo/lib/demo_web/live/tabs/customization.html.heex

@@ -31,7 +31,7 @@
 
   <h2 class="text-lg font-semibold mb-3">Custom Class Function</h2>
   <p>
-    If you need more control over the styles, you can also pass a custom class function (that generates the class string for the main element). Note that there are a lot of required things in the default implementation of this class. It is best to take the example from the docs and extend it rather than start from zero.
+    A custom class function changes the outer toast shell, which owns the LiveToast hook, timing, animation, and dismiss button. Note that there are a lot of required things in the default implementation of this class. It is best to take the example from the docs and extend it rather than start from zero.
   </p>
 
   <h2 class="text-lg font-semibold mb-3">Custom JavaScript</h2>
@@ -41,6 +41,9 @@
 
   <h2 class="text-lg font-semibold mb-3">Custom Components</h2>
   <p>
-    If you need total control, you can pass a custom component to the toast functions. This hijacks the normal rendering and then you can pretty much do whatever you want in terms of generating the DOM elements.
+    A custom component renders the toast content inside the LiveToast shell. Use it to control the icon, title, body, actions, and application-specific markup while LiveToast continues to manage timing, animation, and dismissal. Pass it to an individual toast, or define
+    <code class="text-rose-600 bg-zinc-50 rounded px-1">toast_component_fn</code>
+    on <code class="text-rose-600 bg-zinc-50 rounded px-1">toast_group</code>
+    to use it for every programmatic toast in that host.
   </p>
 </div>

demo/mix.exs

@@ -34,13 +34,13 @@ defmodule Demo.MixProject do
       {:ecto, ">= 0.0.0"},
       {:esbuild, "~> 0.2"},
       {:ex_check, "~> 0.14.0", only: [:dev], runtime: false},
-      {:credo, "~> 1.7.12", only: [:dev], runtime: false},
+      {:credo, "~> 1.7.12", only: [:dev, :test], runtime: false},
       {:dialyxir, ">= 0.0.0", only: [:dev], runtime: false},
       {:doctor, ">= 0.0.0", only: [:dev], runtime: false},
       {:ex_doc, ">= 0.0.0", only: [:dev], runtime: false},
       {:gettext, ">= 0.26.2"},
       {:mix_audit, ">= 0.0.0", only: [:dev], runtime: false},
-      {:styler, "~> 0.11.9", only: [:dev, :test], runtime: false},
+      {:quokka, github: "s3cur3/quokka", branch: "jump", only: [:dev, :test], runtime: false},
       {:phoenix_html, "~> 4.0"},
       {:phoenix_live_reload, "~> 1.2", only: :dev},
       {:floki, ">= 0.30.0", only: :test},

demo/mix.lock

@@ -37,8 +37,8 @@
   "plug": {:hex, :plug, "1.16.1", "40c74619c12f82736d2214557dedec2e9762029b2438d6d175c5074c933edc9d", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a13ff6b9006b03d7e33874945b2755253841b238c34071ed85b0e86057f8cddc"},
   "plug_cowboy": {:hex, :plug_cowboy, "2.7.2", "fdadb973799ae691bf9ecad99125b16625b1c6039999da5fe544d99218e662e4", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "245d8a11ee2306094840c000e8816f0cbed69a23fc0ac2bcf8d7835ae019bb2f"},
   "plug_crypto": {:hex, :plug_crypto, "2.1.0", "f44309c2b06d249c27c8d3f65cfe08158ade08418cf540fd4f72d4d6863abb7b", [:mix], [], "hexpm", "131216a4b030b8f8ce0f26038bc4421ae60e4bb95c5cf5395e1421437824c4fa"},
+  "quokka": {:git, "https://github.com/s3cur3/quokka.git", "4280a5bbe34d612c012ed5bc08c22c933d497bf9", [branch: "jump"]},
   "ranch": {:hex, :ranch, "2.2.0", "25528f82bc8d7c6152c57666ca99ec716510fe0925cb188172f41ce93117b1b0", [:make, :rebar3], [], "hexpm", "fa0b99a1780c80218a4197a59ea8d3bdae32fbff7e88527d7d8a4787eff4f8e7"},
-  "styler": {:hex, :styler, "0.11.9", "2595393b94e660cd6e8b582876337cc50ff047d184ccbed42fdad2bfd5d78af5", [:mix], [], "hexpm", "8b7806ba1fdc94d0a75127c56875f91db89b75117fcc67572661010c13e1f259"},
   "tailwind": {:hex, :tailwind, "0.2.2", "9e27288b568ede1d88517e8c61259bc214a12d7eed271e102db4c93fcca9b2cd", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "ccfb5025179ea307f7f899d1bb3905cd0ac9f687ed77feebc8f67bdca78565c4"},
   "telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"},
   "thousand_island": {:hex, :thousand_island, "1.3.10", "a9971ebab1dfb36e2710a86b37c3f54973fbc9470d892035334415521fb53328", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "17ab1f1b13aadb1f4b4c8e5b59c06874d701119fed082884c9c6d38addad254f"},

docs.exs

@@ -28,6 +28,6 @@ bandit = {Bandit, plug: Router, scheme: :http, port: Router.port()}
 {:ok, _} = Supervisor.start_link([bandit], strategy: :one_for_one)
 
 # unless running from IEx, sleep idenfinitely so we can serve requests
-unless IEx.started?() do
+if !IEx.started?() do
   Process.sleep(:infinity)
 end

lib/live_toast.ex

@@ -8,6 +8,7 @@ defmodule LiveToast do
   alias LiveToast.Components
   alias Phoenix.LiveView
   alias Phoenix.LiveView.JS
+  alias Phoenix.LiveView.Rendered
 
   @enforce_keys [:kind, :msg]
   defstruct [
@@ -40,7 +41,7 @@ defmodule LiveToast do
           }
 
   @typedoc "`Phoenix.Component` that renders a part of the toast message."
-  @type component_fn() :: (map() -> Phoenix.LiveView.Rendered.t())
+  @type component_fn() :: (map() -> Rendered.t())
 
   @typedoc "Milliseconds before expiry, or `:infinity` for a persistent toast."
   @type duration() :: non_neg_integer() | :infinity

lib/live_toast/live_component.ex

@@ -40,7 +40,7 @@ defmodule LiveToast.LiveComponent do
 
     flash_map = assigns[:f]
 
-    sync_toast_kind = Map.get(sync_toast, :kind, nil)
+    sync_toast_kind = Map.get(sync_toast, :kind)
 
     sync_toast_kind =
       if is_atom(sync_toast_kind) do

lib/mix/tasks/docs/run.ex

@@ -34,7 +34,7 @@ defmodule Mix.Tasks.Docs.Run do
     {:ok, _} = Supervisor.start_link([bandit], strategy: :one_for_one)
 
     # unless running from IEx, sleep idenfinitely so we can serve requests
-    unless IEx.started?() do
+    if !IEx.started?() do
       Process.sleep(:infinity)
     end
   end

mix.exs

@@ -40,12 +40,12 @@ defmodule LiveToast.MixProject do
       {:esbuild, "~> 0.2", only: :dev},
       {:bandit, "~> 1.1", only: :dev},
       {:ex_check, "~> 0.14.0", only: [:dev], runtime: false},
-      {:credo, "~> 1.7.12", only: [:dev], runtime: false},
+      {:credo, "~> 1.7.12", only: [:dev, :test], runtime: false},
       {:dialyxir, ">= 0.0.0", only: [:dev], runtime: false},
       {:doctor, ">= 0.0.0", only: [:dev], runtime: false},
       {:ex_doc, "~> 0.32.2", only: [:dev], runtime: false},
       {:mix_audit, ">= 0.0.0", only: [:dev], runtime: false},
-      {:styler, "~> 0.11.9", only: [:dev, :test], runtime: false},
+      {:quokka, github: "s3cur3/quokka", branch: "jump", only: [:dev, :test], runtime: false},
       {:makeup, "1.1.2", only: [:dev], runtime: false},
       {:makeup_elixir, "0.16.2", only: [:dev], runtime: false},
       {:makeup_js, "~> 0.1.0", only: [:dev], runtime: false},

mix.lock

@@ -33,7 +33,7 @@
   "phoenix_template": {:hex, :phoenix_template, "1.0.4", "e2092c132f3b5e5b2d49c96695342eb36d0ed514c5b252a77048d5969330d639", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "2c0c81f0e5c6753faf5cca2f229c9709919aba34fab866d3bc05060c9c444206"},
   "plug": {:hex, :plug, "1.16.1", "40c74619c12f82736d2214557dedec2e9762029b2438d6d175c5074c933edc9d", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a13ff6b9006b03d7e33874945b2755253841b238c34071ed85b0e86057f8cddc"},
   "plug_crypto": {:hex, :plug_crypto, "2.1.0", "f44309c2b06d249c27c8d3f65cfe08158ade08418cf540fd4f72d4d6863abb7b", [:mix], [], "hexpm", "131216a4b030b8f8ce0f26038bc4421ae60e4bb95c5cf5395e1421437824c4fa"},
-  "styler": {:hex, :styler, "0.11.9", "2595393b94e660cd6e8b582876337cc50ff047d184ccbed42fdad2bfd5d78af5", [:mix], [], "hexpm", "8b7806ba1fdc94d0a75127c56875f91db89b75117fcc67572661010c13e1f259"},
+  "quokka": {:git, "https://github.com/s3cur3/quokka.git", "4280a5bbe34d612c012ed5bc08c22c933d497bf9", [branch: "jump"]},
   "telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"},
   "thousand_island": {:hex, :thousand_island, "1.3.9", "095db3e2650819443e33237891271943fad3b7f9ba341073947581362582ab5a", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "25ab4c07badadf7f87adb4ab414e0ed374e5f19e72503aa85132caa25776e54f"},
   "websock": {:hex, :websock, "0.5.3", "2f69a6ebe810328555b6fe5c831a851f485e303a7c8ce6c5f675abeb20ebdadc", [:mix], [], "hexpm", "6105453d7fac22c712ad66fab1d45abdf049868f253cf719b625151460b8b453"},