Make modals client-side using Alpine.js

otakulan · Jan 22, 2024 · 73f29b2 · 73f29b2
1 parent f09afa0
commit 73f29b2
Show file tree

Hide file tree

Showing 14 changed files with 676 additions and 419 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -1,8 +1,23 @@
-import {Socket} from "phoenix"
-import {LiveSocket} from "phoenix_live_view"
+import { Socket } from "phoenix"
+import { LiveSocket } from "phoenix_live_view"
+import Alpine from "alpinejs"
+import focus from "@alpinejs/focus"
+
+window.Alpine = Alpine
+Alpine.plugin(focus)
+Alpine.start()
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket("/live", Socket, {
+  params: { _csrf_token: csrfToken },
+  dom: {
+    onBeforeElUpdated(from, to) {
+      if (from._x_dataStack) {
+        window.Alpine.clone(from, to)
+      }
+    }
+  }
+})
 
 // Connect if there are any LiveViews on the page
 liveSocket.connect()

diff --git a/assets/package.json b/assets/package.json
@@ -10,12 +10,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "alpinejs": "^3.12.3"
+    "@alpinejs/focus": "^3.13.3",
+    "alpinejs": "^3.13.3"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.14",
-    "daisyui": "^3.1.9",
+    "daisyui": "^4.6.0",
     "postcss": "^8.4.24",
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.3.2"

diff --git a/assets/yarn.lock b/assets/yarn.lock
diff --git a/config/config.exs b/config/config.exs
@@ -9,7 +9,7 @@ import Config
 config :esbuild,
   path: System.get_env("MIX_ESBUILD_PATH"),
   default: [
-    args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/js --external:/images/*),
+    args: ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/js --external:/images/*),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]

diff --git a/default.nix b/default.nix
@@ -16,7 +16,7 @@ let
   mixFodDeps = beamPackages.fetchMixDeps {
     pname = "${pname}-deps";
     inherit src version;
-    hash = "sha256-DCKtG/m48Pg3enY7ZU1uUMEH4L/UvgXY9PWf37l1gZ0=";
+    hash = "sha256-i0Ke1iqNQOnJHTD61Nk8BshwKQvjpmI+Kbac+fk294E=";
   };
 
   yarnDeps = mkYarnModules {

diff --git a/flake.lock b/flake.lock
diff --git a/flake.nix b/flake.nix
@@ -101,6 +101,7 @@
       systems = [
         # systems for which you want to build the `perSystem` attributes
         "x86_64-linux"
+        "x86_64-darwin"
         "aarch64-linux"
         "aarch64-darwin"
       ];