LocalLiveView: Integrate event handling with Phoenix (#494)

Changed custom JS handling to overwriting functions in View class
objects.
It allows to use both localLiveViews and phoenixLiveViews at the same
page.

Author: FranekKubis

examples/local-lv-compare/.gitignore

@@ -35,3 +35,5 @@ compare_live_views-*.tar
 # In case you use Node.js/npm, you want to ignore these.
 npm-debug.log
 /assets/node_modules/
+
+/assets/vendor/local_live_view

examples/local-lv-compare/assets/build.mjs

@@ -0,0 +1,34 @@
+import * as esbuild from "esbuild";
+import { popcorn } from "local_live_view/esbuild";
+import { dirname, resolve } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const isWatch = process.argv.includes("--watch");
+
+const ctx = await esbuild.context({
+  entryPoints: ["js/app.js"],
+  bundle: true,
+  target: "es2022",
+  format: "esm",
+  sourcemap: isWatch ? "inline" : true,
+  outdir: "../priv/static/assets/js",
+  external: ["/fonts/*", "/images/*"],
+  nodePaths: [
+    resolve(__dirname, "../deps"),
+    process.env.MIX_BUILD_PATH ?? resolve(__dirname, "../_build/dev"),
+  ],
+  plugins: [
+    popcorn({
+      bundlePath: resolve(__dirname, "../priv/static/assets/js/wasm/bundle.avm"),
+    }),
+  ],
+});
+
+if (isWatch) {
+  await ctx.watch();
+  console.log("[esbuild] watching...");
+} else {
+  await ctx.rebuild();
+  await ctx.dispose();
+}

examples/local-lv-compare/assets/js/app.js

@@ -37,6 +37,10 @@ topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
 window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
 window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
 
+// setup local live views, which will override the default pushWithReply and join functions of the live view to instead call popcorn
+import { setup } from "local_live_view"
+setup(liveSocket, { bundlePath: "bundle.avm" });
+
 // connect if there are any LiveViews on the page
 liveSocket.connect()
 liveSocket.enableLatencySim(500)

examples/local-lv-compare/assets/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "local_lv_compare",
+  "private": true,
+  "dependencies": {
+    "local_live_view": "workspace:*"
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "watch": "node build.mjs --watch"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.0"
+  }
+}

examples/local-lv-compare/config/config.exs

@@ -30,16 +30,6 @@ config :compare_live_views, CompareLiveViewsWeb.Endpoint,
 # at the `config/runtime.exs`.
 config :compare_live_views, CompareLiveViews.Mailer, adapter: Swoosh.Adapters.Local
 
-# Configure esbuild (the version is required)
-config :esbuild,
-  version: "0.25.4",
-  compare_live_views: [
-    args:
-      ~w(js/app.js --bundle --target=es2022 --outdir=../priv/static/assets/js --format=esm --external:/fonts/* --external:/images/* --alias:@=.),
-    cd: Path.expand("../assets", __DIR__),
-    env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]}
-  ]
-
 # Configure tailwind (the version is required)
 config :tailwind,
   version: "4.1.7",

examples/local-lv-compare/config/dev.exs

@@ -15,7 +15,10 @@ config :compare_live_views, CompareLiveViewsWeb.Endpoint,
   debug_errors: true,
   secret_key_base: "kkoz3bWTFeKbaSGq3oqEQwL7bpFAR4f0ejreK+rg71pTgpW8WCFdz+rksVqa6MAE",
   watchers: [
-    esbuild: {Esbuild, :install_and_run, [:compare_live_views, ~w(--sourcemap=inline --watch)]},
+    node: ["build.mjs", "--watch",
+      cd: Path.expand("../assets", __DIR__),
+      env: %{"MIX_BUILD_PATH" => Mix.Project.build_path()}
+    ],
     tailwind: {Tailwind, :install_and_run, [:compare_live_views, ~w(--watch)]}
   ]
 

examples/local-lv-compare/lib/compare_live_views_web/components/layouts/root.html.heex

@@ -8,9 +8,7 @@
       {assigns[:page_title]}
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
-    <script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
-    </script>
-    <script type="module" src="./local_live_view/local_live_view.js" defer>
+    <script defer phx-track-static type="module" src={~p"/assets/js/app.js"}>
     </script>
     <script>
       (() => {
@@ -27,7 +25,7 @@
           setTheme(localStorage.getItem("phx:theme") || "system");
         }
         window.addEventListener("storage", (e) => e.key === "phx:theme" && setTheme(e.newValue || "system"));
-        
+
         window.addEventListener("phx:set-theme", (e) => setTheme(e.target.dataset.phxTheme));
       })();
     </script>

examples/local-lv-compare/lib/compare_live_views_web/controllers/page_html/home.html.heex

@@ -4,6 +4,6 @@
   </div>
 
   <div class="half" id="right-half">
-    <div data-pop-view="DemoModalOffline"></div>
+    <div data-pop-view="DemoModalOffline" id="DemoModalOffline"></div>
   </div>
 </div>

examples/local-lv-compare/local/config/config.exs

@@ -1,8 +1,4 @@
 import Config
 
 config :popcorn,
-  out_dir: "../priv/static/local_live_view/wasm",
-  add_tracing: false
-
-config :local_live_view,
-  out_dir: "../priv/static/local_live_view"
+  out_dir: "../priv/static/assets/js/wasm"

examples/local-lv-compare/local/lib/demo_modal_offline.ex

@@ -4,12 +4,12 @@ defmodule DemoModalOffline do
   def render(assigns) do
     ~H"""
     <p>LOCAL LIVE VIEW</p>
-    <button class="show-modal-button" pop-click="show_modal">SHOW OFFLINE MODAL</button>
+    <button class="show-modal-button" phx-click="show_modal">SHOW OFFLINE MODAL</button>
 
     <%= if @show_modal do %>
     <div class="modal">
       <div class="modal-content">
-        <span class="close" pop-click="close_modal">&times;</span>
+        <span class="close" phx-click="close_modal">&times;</span>
         <p>OFFLINE MODAL</p>
       </div>
     </div>