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!!

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

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 %>

Great Talk, great new features!

Is the code for the LiveView.JS part (ElixirConf 2021 - Chris McCord - The Future of Full-stack - YouTube) 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()}>