From 1c07449b54e8d00d3692de3b8d3a380549f80197 Mon Sep 17 00:00:00 2001 From: shibao Date: Sat, 12 Feb 2022 02:15:45 -0500 Subject: [PATCH] add alpine.js --- assets/js/app.js | 10 ++++++++++ assets/package-lock.json | 43 ++++++++++++++++++++++++++++++++++++++++ assets/package.json | 1 + 3 files changed, 54 insertions(+) diff --git a/assets/js/app.js b/assets/js/app.js index 46c76f8..19a9a7d 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -26,9 +26,15 @@ import { Socket } from 'phoenix' import { LiveSocket } from 'phoenix_live_view' import topbar from '../vendor/topbar' import MaintainAttrs from './maintain_attrs' +import Alpine from 'alpinejs' const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content') const liveSocket = new LiveSocket('/live', Socket, { + dom: { + onBeforeElUpdated (from, to) { + if (from._x_dataStack) { window.Alpine.clone(from, to) } + } + }, params: { _csrf_token: csrfToken }, hooks: { MaintainAttrs } }) @@ -46,3 +52,7 @@ liveSocket.connect() // >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session // >> liveSocket.disableLatencySim() window.liveSocket = liveSocket + +// alpine.js +window.Alpine = Alpine +Alpine.start() diff --git a/assets/package-lock.json b/assets/package-lock.json index 3a1f5bb..81bf59f 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -7,6 +7,7 @@ "license": "MIT", "dependencies": { "@fortawesome/fontawesome-free": "^5.15.4", + "alpinejs": "^3.9.0", "install": "^0.13.0", "npm": "^7.22.0", "phoenix": "file:../deps/phoenix", @@ -1569,6 +1570,19 @@ "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", "dev": true }, + "node_modules/@vue/reactivity": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz", + "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==", + "dependencies": { + "@vue/shared": "3.1.5" + } + }, + "node_modules/@vue/shared": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", + "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -1844,6 +1858,14 @@ "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", "dev": true }, + "node_modules/alpinejs": { + "version": "3.9.0", + "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.9.0.tgz", + "integrity": "sha512-Dy8YOCR/BZ6WxKrfml/NCSX/JPBY8wKMqWmlyIbaneE98V9y8ZjSzv+g7VrXCkiDob1t8gf+lVNmH/tX0jfuYg==", + "dependencies": { + "@vue/reactivity": "~3.1.1" + } + }, "node_modules/amdefine": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", @@ -18437,6 +18459,19 @@ "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", "dev": true }, + "@vue/reactivity": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz", + "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==", + "requires": { + "@vue/shared": "3.1.5" + } + }, + "@vue/shared": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", + "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" + }, "@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -18698,6 +18733,14 @@ "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", "dev": true }, + "alpinejs": { + "version": "3.9.0", + "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.9.0.tgz", + "integrity": "sha512-Dy8YOCR/BZ6WxKrfml/NCSX/JPBY8wKMqWmlyIbaneE98V9y8ZjSzv+g7VrXCkiDob1t8gf+lVNmH/tX0jfuYg==", + "requires": { + "@vue/reactivity": "~3.1.1" + } + }, "amdefine": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", diff --git a/assets/package.json b/assets/package.json index ae02dcb..5a6aa08 100644 --- a/assets/package.json +++ b/assets/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@fortawesome/fontawesome-free": "^5.15.4", + "alpinejs": "^3.9.0", "install": "^0.13.0", "npm": "^7.22.0", "phoenix": "file:../deps/phoenix",