Merge branch 'main' into 276-implement-displaying-event-handling-time

Author: hhubert6

.github/workflows/elixir-ci.yaml

@@ -49,9 +49,12 @@ jobs:
       - name: Compile project
         run: mix compile --warnings-as-errors
 
-      - name: Run tests
+      - name: Run unit tests
         run: mix test
 
+      - name: Run e2e tests
+        run: mix e2e
+
       - name: Check prettier
         working-directory: ./assets
         run: npx prettier . --check

README.md

@@ -86,6 +86,7 @@ config :live_debugger,
   secret_key_base: <SECRET_KEY_BASE>, # Secret key used for LiveDebugger.Endpoint
   signing_salt: "your_signing_salt", # Signing salt used for LiveDebugger.Endpoint
   adapter: Bandit.PhoenixAdapter # Adapter used in LiveDebugger.Endpoint
+  tracing_setup_delay: 0 # Time in ms after tracing will be initialized. Useful in case multi-nodes envs
 ```
 
 ## Contributing

config/config.exs

@@ -47,5 +47,30 @@ if config_env() == :dev do
       ]
     ]
 
+  config :live_debugger, server: true
+
   config :live_debugger, browser_features?: true
+  config :live_debugger, experimental_features: :all
+end
+
+if config_env() == :test do
+  config :wallaby,
+    driver: Wallaby.Chrome,
+    otp_app: :live_debugger,
+    chrome: [headless: true],
+    js_logger: nil
+
+  config :live_debugger,
+    server: true,
+    port: 4008
+
+  # 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_live_view,
+    # Enable helpful, but potentially expensive runtime checks
+    enable_expensive_runtime_checks: true
 end

dev/endpoint.ex

@@ -20,10 +20,12 @@ defmodule LiveDebuggerDev.Endpoint do
   plug(Plug.Static, from: {:phoenix, "priv/static"}, at: "/assets/phoenix")
   plug(Plug.Static, from: {:phoenix_live_view, "priv/static"}, at: "/assets/phoenix_live_view")
 
-  socket("/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket)
+  if Mix.env() == :dev do
+    socket("/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket)
 
-  plug(Phoenix.LiveReloader)
-  plug(Phoenix.CodeReloader)
+    plug(Phoenix.LiveReloader)
+    plug(Phoenix.CodeReloader)
+  end
 
   plug(Plug.Session, @session_options)
 

dev/live_components/send.ex

@@ -9,7 +9,7 @@ defmodule LiveDebuggerDev.LiveComponents.Send do
       <.box title="Send [LiveComponent]" color="green">
         <div class="flex flex-col gap-2">
           <div class="flex items-center gap-1">
-            <.button phx-click="send_message" phx-target={@myself} color="green">
+            <.button id="send-button" phx-click="send_message" phx-target={@myself} color="green">
               Send
             </.button>
 

dev/live_views/main.ex

@@ -7,8 +7,8 @@ defmodule LiveDebuggerDev.LiveViews.Main do
     socket =
       socket
       |> assign(counter: 0)
-      |> assign(slow_counter: 0)
-      |> assign(very_slow_counter: 0)
+      |> assign(counter_slow: 0)
+      |> assign(counter_very_slow: 0)
       |> assign(datetime: nil)
       |> assign(name: random_name())
       |> assign(single_element_list: [%Phoenix.LiveComponent.CID{cid: 1}])
@@ -22,7 +22,7 @@ defmodule LiveDebuggerDev.LiveViews.Main do
     <.box title="Main [LiveView]" color="blue">
       <div class="flex flex-col gap-2">
         <div class="flex items-center gap-2">
-          <.button phx-click="increment" color="blue">
+          <.button id="increment-button" phx-click="increment" color="blue">
             Increment
           </.button>
           <span class="text-xl"><%= @counter %></span>
@@ -31,16 +31,16 @@ defmodule LiveDebuggerDev.LiveViews.Main do
           <.button phx-click="slow-increment" color="blue">
             Slow Increment
           </.button>
-          <span class="text-xl"><%= @slow_counter %></span>
+          <span class="text-xl"><%= @counter_slow %></span>
         </div>
         <div class="flex items-center gap-2">
           <.button phx-click="very-slow-increment" color="blue">
             Very Slow Increment
           </.button>
-          <span class="text-xl"><%= @very_slow_counter %></span>
+          <span class="text-xl"><%= @counter_very_slow %></span>
         </div>
         <div class="flex items-center gap-1">
-          <.button phx-click="change_name" color="red">
+          <.button id="update-button" phx-click="change_name" color="red">
             Update
           </.button>
           <div>
@@ -82,17 +82,17 @@ defmodule LiveDebuggerDev.LiveViews.Main do
   end
 
   def handle_event("increment", _, socket) do
-    {:noreply, assign(socket, :counter, socket.assigns.counter + 1)}
+    {:noreply, update(socket, :counter, &(&1 + 1))}
   end
 
   def handle_event("slow-increment", _, socket) do
     Process.sleep(400)
-    {:noreply, assign(socket, :slow_counter, socket.assigns.slow_counter + 1)}
+    {:noreply, update(socket, :counter_slow, &(&1 + 1))}
   end
 
   def handle_event("very-slow-increment", _, socket) do
     Process.sleep(2500)
-    {:noreply, assign(socket, :very_slow_counter, socket.assigns.very_slow_counter + 1)}
+    {:noreply, update(socket, :counter_very_slow, &(&1 + 1))}
   end
 
   def handle_event("change_name", _, socket) do

dev/runner.ex

@@ -1,15 +1,49 @@
 defmodule LiveDebuggerDev.Runner do
   def run() do
     # Configures the endpoint
-    Application.put_env(:live_debugger_dev_app, LiveDebuggerDev.Endpoint,
+
+    config =
+      if Mix.env() == :test do
+        common_config() ++ test_only_config()
+      else
+        common_config() ++ dev_only_config()
+      end
+
+    Application.put_env(:live_debugger_dev_app, LiveDebuggerDev.Endpoint, config)
+
+    Application.put_env(:phoenix, :serve_endpoints, true)
+
+    Task.async(fn ->
+      children = [
+        {Phoenix.PubSub, name: LiveDebuggerDev.PubSub},
+        LiveDebuggerDev.Endpoint
+      ]
+
+      {:ok, _} = Supervisor.start_link(children, strategy: :one_for_one)
+
+      # For some reason `Application.put_env` doesn't work and LiveDebugger starts without config
+      Application.stop(:live_debugger)
+      Application.start(:live_debugger)
+
+      Process.sleep(:infinity)
+    end)
+  end
+
+  defp common_config() do
+    [
       url: [host: "localhost"],
       secret_key_base: "Hu4qQN3iKzTV4fJxhorPQlA/osH9fAMtbtjVS58PFgfw3ja5Z18Q/WSNR9wP4OfW",
       live_view: [signing_salt: "hMegieSe"],
-      http: [port: System.get_env("PORT") || 4004],
       debug_errors: true,
       check_origin: false,
       pubsub_server: LiveDebuggerDev.PubSub,
-      adapter: Bandit.PhoenixAdapter,
+      adapter: Bandit.PhoenixAdapter
+    ]
+  end
+
+  defp dev_only_config() do
+    [
+      http: [port: System.get_env("PORT") || 4004],
       watchers: [
         esbuild: {Esbuild, :install_and_run, [:dev_build, ~w(--watch)]},
         tailwind: {Tailwind, :install_and_run, [:dev_build, ~w(--watch)]}
@@ -28,23 +62,13 @@ defmodule LiveDebuggerDev.Runner do
           ~r"dev/layout.ex"
         ]
       ]
-    )
-
-    Application.put_env(:phoenix, :serve_endpoints, true)
-
-    Task.async(fn ->
-      children = [
-        {Phoenix.PubSub, name: LiveDebuggerDev.PubSub},
-        LiveDebuggerDev.Endpoint
-      ]
-
-      {:ok, _} = Supervisor.start_link(children, strategy: :one_for_one)
-
-      # For some reason `Application.put_env` doesn't work and LiveDebugger starts without config
-      Application.stop(:live_debugger)
-      Application.start(:live_debugger)
+    ]
+  end
 
-      Process.sleep(:infinity)
-    end)
+  defp test_only_config() do
+    [
+      http: [port: 4005],
+      server: true
+    ]
   end
 end

lib/live_debugger.ex

@@ -27,7 +27,8 @@ defmodule LiveDebugger do
         secret_key_base: Keyword.get(config, :secret_key_base, @default_secret_key_base),
         live_view: [signing_salt: Keyword.get(config, :signing_salt, @default_signing_salt)],
         adapter: Keyword.get(config, :adapter, default_adapter),
-        live_reload: Keyword.get(config, :live_reload, [])
+        live_reload: Keyword.get(config, :live_reload, []),
+        server: Keyword.get(config, :server, false)
       ]
 
     Application.put_env(@app_name, LiveDebugger.Endpoint, endpoint_config)

lib/live_debugger/components.ex

@@ -221,10 +221,13 @@ defmodule LiveDebugger.Components do
 
   def section(assigns) do
     ~H"""
-    <div class={[
-      "w-full min-w-[20rem] lg:max-w-[32rem] h-max flex flex-col shadow-custom rounded-sm bg-surface-0-bg border border-default-border"
-      | List.wrap(@class)
-    ]}>
+    <div
+      id={@id}
+      class={[
+        "w-full min-w-[20rem] flex flex-col shadow-custom rounded-sm bg-surface-0-bg border border-default-border"
+        | List.wrap(@class)
+      ]}
+    >
       <div class="pl-4 flex items-center h-12 p-2 border-b border-default-border">
         <div class="flex justify-between items-center w-full">
           <div class="font-medium text-sm"><%= @title %></div>
@@ -234,7 +237,7 @@ defmodule LiveDebugger.Components do
         </div>
       </div>
       <div class={[
-        "w-full flex overflow-auto rounded-sm bg-surface-0-bg p-2" | List.wrap(@inner_class)
+        "flex flex-1 overflow-auto rounded-sm bg-surface-0-bg m-2" | List.wrap(@inner_class)
       ]}>
         <%= render_slot(@inner_block) %>
       </div>
@@ -386,7 +389,7 @@ defmodule LiveDebugger.Components do
       id={@id}
       phx-hook="Fullscreen"
       class={[
-        "relative h-max w-full lg:w-max lg:min-w-[50rem] bg-surface-0-bg p-2 overflow-auto hidden flex-col rounded-md backdrop:bg-black backdrop:opacity-50"
+        "relative h-max w-full xl:w-max xl:min-w-[50rem] bg-surface-0-bg p-2 overflow-auto hidden flex-col rounded-md backdrop:bg-black backdrop:opacity-50"
         | List.wrap(@class)
       ]}
     >
@@ -553,7 +556,7 @@ defmodule LiveDebugger.Components do
           <.icon name="icon-logo-text" class="h-6 w-32" />
         </div>
         <div class="flex items-center">
-          <%= if LiveDebugger.Env.dev?() do %>
+          <%= if LiveDebugger.Feature.enabled?(:dark_mode) do %>
             <.nav_icon
               id="light-mode-switch"
               class="dark:hidden"