From ba58f92f0235ef3da7031a72982aa8747565c230 Mon Sep 17 00:00:00 2001 From: shibao Date: Sat, 12 Feb 2022 02:14:33 -0500 Subject: [PATCH] add alpine.js --- assets/js/app.js | 10 +++++++++ assets/package-lock.json | 44 +++++++++++++++++++++++++++++++++++++++- assets/package.json | 1 + 3 files changed, 54 insertions(+), 1 deletion(-) diff --git a/assets/js/app.js b/assets/js/app.js index 46c76f8a..c0c5c1ad 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -26,13 +26,23 @@ 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 } }) +// alpine.js +window.Alpine = Alpine +Alpine.start() + // Show progress bar on live navigation and form submits topbar.config({ barColors: { 0: '#29d' }, shadowColor: 'rgba(0, 0, 0, .3)' }) window.addEventListener('phx:page-loading-start', info => topbar.show()) diff --git a/assets/package-lock.json b/assets/package-lock.json index f172f8bb..6c2bd9fb 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -4,10 +4,10 @@ "requires": true, "packages": { "": { - "name": "assets", "license": "MIT", "dependencies": { "@fortawesome/fontawesome-free": "^5.15.4", + "alpinejs": "^3.9.0", "phoenix": "file:../deps/phoenix", "phoenix_html": "file:../deps/phoenix_html", "phoenix_live_view": "file:../deps/phoenix_live_view", @@ -2025,6 +2025,19 @@ "@types/node": "*" } }, + "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", @@ -2397,6 +2410,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/ansi-html-community": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz", @@ -14179,6 +14200,19 @@ "@types/node": "*" } }, + "@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", @@ -14497,6 +14531,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" + } + }, "ansi-html-community": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz", diff --git a/assets/package.json b/assets/package.json index 5b2bd20c..e830a489 100644 --- a/assets/package.json +++ b/assets/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@fortawesome/fontawesome-free": "^5.15.4", + "alpinejs": "^3.9.0", "phoenix": "file:../deps/phoenix", "phoenix_html": "file:../deps/phoenix_html", "phoenix_live_view": "file:../deps/phoenix_live_view",