Watching Phoenix LiveView Talk by Chris McCord

JS.* is really nice feature! Because things like hide/show and over simple user interactions has required external javascript library like Alpine.js to work without server interactions, but now JS.* will do all of that

This talk and tech is so incredibly awesome. Enjoyed every minute. Slots, JS, and navigating over websockets… super great! ty!!

Great Talk, great new features!

Is the code for the LiveView.JS part (https://www.youtube.com/watch?v=Of1phFsC4ZI&t=1991s) available somewhere?

Or any other material about this?

I’m not sure what’s possible with the tools provided. E.g. can I do sth like this:

<button phx-click={JS.push("clicked", value: someCustomJavascriptFunction()}>

I’ve read that, but being lazy, I’d like a working demo-project.

https://github.com/livebook-dev/livebook/pull/674/commits/6e572e14b5f2d9ff13be1cca467a4e646584fb54

This feels like a good starter for JS.

I think that this commit contains the code that Chris used in his talk:

https://github.com/chrismccord/phoenix_live_view_example/commit/37113ee545f8952153ed43c6cdb461abfd8deba4

Nice, I checked there earlier, but it didnt find any JS usage then. This repo is a real treasure trove, studying it is highly recommended.

Yes thats it, thank you.

Just had a look at this. The demo is there and running but relies on some local files, here are the steps to get it running.

1. clone and checkout cm-js-cmds branch
2. in /assets/js/app.js

- import {LiveSocket} from "./phoenix_live_view"
+ import {LiveSocket} from "phoenix_live_view"

3. in mix.exs

- {:phoenix_live_view, path: "~/oss/phoenix_live_view", override: true},
+ {:phoenix_live_view, "~> 0.17.0"},

4. update deps, setup ecto
5. demo is at /posts (not on the overview page)

EDIT:

found one more thing to update:

--- a/lib/demo_web/live/post_live/show.html.heex
+++ b/lib/demo_web/live/post_live/show.html.heex
@@ -1,14 +1,16 @@
 <h1>Show Post</h1>
 
 <%= if @live_action in [:edit] do %>
-  <%= live_modal DemoWeb.PostLive.FormComponent,
-    id: @post.id,
-    title: @page_title,
-    action: @live_action,
-    post: @post,
-    return_to: Routes.post_show_path(@socket, :show, @post) %>
+  <.modal
+    component={DemoWeb.PostLive.FormComponent}
+    id={@post.id}
+    title={@page_title}
+    action={@live_action}
+    post={@post}
+    return_to={Routes.post_show_path(@socket, :show, @post)} />
 <% end %>