Refactor ElixirBoilerplateWeb to segment in each components in separate modules

Author: gcauchon

assets/js/app.js

@@ -1,8 +1,6 @@
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
 import 'phoenix_html';
 
-const DELAY_IN_MILISECONDS = 200;
-
 // Establish Phoenix Socket and LiveView configuration.
 import {Socket} from 'phoenix';
 import {LiveSocket} from 'phoenix_live_view';

lib/elixir_boilerplate_web/api/version/controller.ex

@@ -1,5 +1,5 @@
 defmodule ElixirBoilerplateWeb.Api.Version.Controller do
-  use ElixirBoilerplateWeb, :controller
+  use ElixirBoilerplateWeb.Controller
 
   @spec index(Plug.Conn.t(), map) :: Plug.Conn.t()
   def index(conn, _) do

lib/elixir_boilerplate_web/component.ex

@@ -0,0 +1,9 @@
+defmodule ElixirBoilerplateWeb.Component do
+  defmacro __using__(_opts) do
+    quote do
+      use Phoenix.LiveComponent
+
+      unquote(ElixirBoilerplateWeb.html_helpers())
+    end
+  end
+end

lib/elixir_boilerplate_web/controller.ex

@@ -0,0 +1,15 @@
+defmodule ElixirBoilerplateWeb.Controller do
+  defmacro __using__(_opts) do
+    quote do
+      use Phoenix.Controller,
+        namespace: ElixirBoilerplateWeb,
+        formats: [:html, :json],
+        layouts: [html: ElixirBoilerplateWeb.Layouts]
+
+      import Plug.Conn
+      import ElixirBoilerplate.Gettext
+
+      unquote(ElixirBoilerplateWeb.verified_routes())
+    end
+  end
+end

lib/elixir_boilerplate_web/elixir_boilerplate_web.ex

@@ -1,88 +1,13 @@
 defmodule ElixirBoilerplateWeb do
-  @moduledoc """
-  The entrypoint for defining your web interface, such
-  as controllers, components, channels, and so on.
-  This can be used in your application as:
-      use ElixirBoilerplateWeb, :controller
-      use ElixirBoilerplateWeb, :html
-  The definitions below will be executed for every controller,
-  component, etc, so keep them short and clean, focused
-  on imports, uses and aliases.
-  Do NOT define functions inside the quoted expressions
-  below. Instead, define additional modules and import
-  those modules here.
-  """
-
   def static_paths, do: ~w(assets fonts images favicon.ico robots.txt)
 
-  def router do
-    quote do
-      use Phoenix.Router, helpers: false
-
-      # Import common connection and controller functions to use in pipelines
-      import Plug.Conn
-      import Phoenix.Controller
-      import Phoenix.LiveView.Router
-    end
-  end
-
-  def channel do
-    quote do
-      use Phoenix.Channel
-    end
-  end
-
-  def controller do
-    quote do
-      use Phoenix.Controller,
-        namespace: ElixirBoilerplateWeb,
-        formats: [:html, :json],
-        layouts: [html: ElixirBoilerplateWeb.Layouts]
-
-      import Plug.Conn
-      import ElixirBoilerplate.Gettext
-
-      unquote(verified_routes())
-    end
-  end
-
-  def live_view do
-    quote do
-      use Phoenix.LiveView,
-        layout: {ElixirBoilerplateWeb.Layouts, :live}
-
-      unquote(html_helpers())
-    end
-  end
-
-  def live_component do
-    quote do
-      use Phoenix.LiveComponent
-
-      unquote(html_helpers())
-    end
-  end
-
-  def html do
-    quote do
-      use Phoenix.Component
-
-      # Import convenience functions from controllers
-      import Phoenix.Controller,
-        only: [get_csrf_token: 0, view_module: 1, view_template: 1]
-
-      # Include general helpers for rendering HTML
-      unquote(html_helpers())
-    end
-  end
-
-  defp html_helpers do
+  def html_helpers do
     quote do
       # HTML escaping functionality
       import Phoenix.HTML
+
       # Core UI components and translation
       import ElixirBoilerplate.Gettext
-      import ElixirBoilerplateWeb.Components.Branding
       import ElixirBoilerplateWeb.Components.Core
 
       # Shortcut for generating JS commands
@@ -101,11 +26,4 @@ defmodule ElixirBoilerplateWeb do
         statics: ElixirBoilerplateWeb.static_paths()
     end
   end
-
-  @doc """
-  When used, dispatch to the appropriate controller/view/etc.
-  """
-  defmacro __using__(which) when is_atom(which) do
-    apply(__MODULE__, which, [])
-  end
 end

lib/elixir_boilerplate_web/errors/error_html.ex

@@ -1,5 +1,5 @@
 defmodule ElixirBoilerplateWeb.Errors.ErrorHTML do
-  use ElixirBoilerplateWeb, :html
+  use ElixirBoilerplateWeb.HTML
 
   # If you want to customize your error pages,
   # uncomment the embed_templates/1 call below

lib/elixir_boilerplate_web/home/html.ex

@@ -1,5 +1,7 @@
 defmodule ElixirBoilerplateWeb.Home.HTML do
-  use ElixirBoilerplateWeb, :html
+  use ElixirBoilerplateWeb.HTML
+
+  alias ElixirBoilerplateWeb.Components.Branding
 
   embed_templates("templates/*")
 

lib/elixir_boilerplate_web/home/live.ex

@@ -1,5 +1,5 @@
 defmodule ElixirBoilerplateWeb.Home.Live do
-  use ElixirBoilerplateWeb, :live_view
+  use ElixirBoilerplateWeb.LiveView
 
   def mount(_, _, socket) do
     socket = assign(socket, :message, "Hello, world!")

lib/elixir_boilerplate_web/home/templates/index.html.heex

@@ -4,7 +4,7 @@
   <div class="mx-auto max-w-2xl">
     <div class="home">
       <a target="_blank" href="https://github.com/mirego/elixir-boilerplate">
-        <.logo width={500} />
+        <Branding.logo width={500} />
       </a>
 
       <p>

lib/elixir_boilerplate_web/home/templates/index_live.html.heex

@@ -4,7 +4,7 @@
   <div class="mx-auto max-w-2xl">
     <div class="home">
       <a target="_blank" href="https://github.com/mirego/elixir-boilerplate">
-        <.logo width={500} />
+        <Branding.logo width={500} />
       </a>
 
       <p>