mix mob.gen.live_screen (mob_dev v0.3.34)

Generates a paired Mob.Screen and Phoenix LiveView for LiveView mode apps.

Usage

mix mob.gen.live_screen NAME [PATH]

NAME is the LiveView module name (PascalCase). PATH is the URL path (defaults to /name derived from NAME).

Examples

mix mob.gen.live_screen Dashboard
# → lib/<app>_web/live/dashboard_live.ex  (LiveView)
# → lib/<app>/screens/dashboard_screen.ex (Mob.Screen)

mix mob.gen.live_screen Settings /preferences
# → path override: /preferences

What gets generated

LiveView (lib/<app>_web/live/<name>_live.ex)

defmodule MyAppWeb.DashboardLive do
  use MyAppWeb, :live_view
  use Mob.LiveView

  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  def render(assigns) do
    ~H"""
    <div>
      <h1>Dashboard</h1>
    </div>
    """
  end

  # Receive messages from the native layer:
  #   window.mob.send({ type: "back" })
  def handle_event("mob_message", _data, socket) do
    {:noreply, socket}
  end

  # Push messages to the native layer JS:
  #   push_event(socket, "mob_push", %{type: "haptic"})
end

Mob.Screen (lib/<app>/screens/<name>_screen.ex)

defmodule MyApp.DashboardScreen do
  use Mob.Screen

  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  def render(_assigns) do
    Mob.UI.webview(
      url: Mob.LiveView.local_url("/dashboard"),
      show_url: false
    )
  end
end

Router note

Add the LiveView to your Phoenix router:

live "/dashboard", DashboardLive

Then navigate to the screen from Elixir:

Mob.Socket.navigate(socket, {:push, MyApp.DashboardScreen})