phoenix.livemd

Untitled notebook

Mix.install(
  [
    :kino,
    {:bandit, "~> 0.7"},
    {:jason, "~> 1.0"},
    {:phoenix, "~> 1.7.1"},
    {:phoenix_live_view, "~> 0.18.17"}
  ],
  config: [
    sample: [
      {Example.Endpoint,
       [
         adapter: Bandit.PhoenixAdapter,
         http: [ip: {127, 0, 0, 1}, port: 5001],
         server: true,
         live_view: [signing_salt: "aaaaaaaa"],
         secret_key_base: String.duplicate("a", 64)
       ]}
    ]
  ]
)

Section

defmodule Example.ErrorView do
  def render(template, _), do: Phoenix.Controller.status_message_from_template(template)
end

defmodule Example.Router do
  use Phoenix.Router
  import Phoenix.LiveView.Router

  pipeline :browser do
    plug(:accepts, ["html"])
  end

  scope "/", Example do
    pipe_through(:browser)

    live("/", HomeLive, :index)
  end
end

defmodule Example.Endpoint do
  use Phoenix.Endpoint, otp_app: :sample
  socket("/live", Phoenix.LiveView.Socket)
  plug(Example.Router)
end

Kino.start_child(Example.Endpoint)

defmodule Iframe do
  use Kino.JS

  def new(source) do
    Kino.JS.new(__MODULE__, source)
  end

  asset "main.js" do
    """
    export function init(ctx, source) {
      var ifrm = document.createElement("iframe");
      ifrm.setAttribute("src", source);
      ifrm.style.width = "100%";
      ifrm.style.height = "500px";
      ifrm.style.border = "0";
      ctx.root.appendChild(ifrm);
    }
    """
  end
end

defmodule Example.HomeLive do
  use Phoenix.LiveView, layout: {__MODULE__, :live}

  def render("live.html", assigns) do
    ~H"""
    <script src="https://cdn.jsdelivr.net/npm/phoenix@1.7.1/priv/static/phoenix.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/phoenix_live_view@0.18.17/priv/static/phoenix_live_view.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      let liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket)
      liveSocket.connect()
    </script>
    <%= @inner_content %>
    """
  end

  def mount(_params, _session, socket) do
    {:ok, socket |> assign(form: to_form(%{}, as: :test))}
  end

  def render(assigns) do
    ~H"""
    B
    <.form for={@form}>
      <.inputs_for :let={f_nested} field={@form[:nested]}>
        <%= inspect f_nested[:name] %>
      </.inputs_for>
    </.form>
    """
  end
end

Iframe.new(Path.join(Example.Endpoint.url(), "/"))