Skip to content

Instantly share code, notes, and snippets.

@dvic
Last active August 15, 2023 17:23
Show Gist options
  • Save dvic/1b3d958c1ed9815ec8327cf42ffb13e3 to your computer and use it in GitHub Desktop.
Save dvic/1b3d958c1ed9815ec8327cf42ffb13e3 to your computer and use it in GitHub Desktop.
demonstrates that you cannot use string fields with phoenix liveview
Application.put_env(:sample, Example.Endpoint,
http: [ip: {127, 0, 0, 1}, port: 5001],
server: true,
live_view: [signing_salt: "aaaaaaaa"],
secret_key_base: String.duplicate("a", 64)
)
Mix.install([
{:plug_cowboy, "~> 2.5"},
{:jason, "~> 1.0"},
{:phoenix, "~> 1.7.7"},
{:phoenix_live_view, "~> 0.19.5"}
])
defmodule Example.ErrorView do
def render(template, _), do: Phoenix.Controller.status_message_from_template(template)
end
defmodule Items do
end
defmodule Example.HomeLive do
use Phoenix.LiveView, layout: {__MODULE__, :live}
def mount(_params, _session, socket) do
items = %{"foo" => "foo"}
{:ok, assign(socket, items: items, form: to_form(items))}
end
defp phx_vsn, do: Application.spec(:phoenix, :vsn)
defp lv_vsn, do: Application.spec(:phoenix_live_view, :vsn)
def render("live.html", assigns) do
~H"""
<script src={"https://cdn.jsdelivr.net/npm/phoenix@#{phx_vsn()}/priv/static/phoenix.min.js"}></script>
<script src={"https://cdn.jsdelivr.net/npm/phoenix_live_view@#{lv_vsn()}/priv/static/phoenix_live_view.min.js"}></script>
<script>
let liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket)
liveSocket.connect()
</script>
<style>
* { font-size: 1.1em; }
</style>
<%= @inner_content %>
"""
end
def render(assigns) do
~H"""
<.item field={@form["foo"]} />
<button phx-click="change_item">change</button>
"""
end
def item(assigns) do
~H"<div><%= @field.value %></div>"
end
def handle_event("change_item", _params, socket) do
socket =
update(socket, :items, fn items ->
Map.update!(items, "foo", fn foo -> foo <> "!" end)
end)
# recreate the form
socket = assign(socket, :form, to_form(socket.assigns.items))
{:noreply, socket}
end
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
{:ok, _} = Supervisor.start_link([Example.Endpoint], strategy: :one_for_one)
Process.sleep(:infinity)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment