From f7a6ede50bb9496ed94195f7109640a8891490a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Valim?= Date: Wed, 9 Aug 2023 12:41:36 +0200 Subject: [PATCH] Remove incomplete Alpine integration example --- guides/client/js-interop.md | 31 +++++++++++-------------------- 1 file changed, 11 insertions(+), 20 deletions(-) diff --git a/guides/client/js-interop.md b/guides/client/js-interop.md index d3187a610b..de2a2afcb4 100644 --- a/guides/client/js-interop.md +++ b/guides/client/js-interop.md @@ -249,28 +249,19 @@ libraries to (re)initialize DOM elements or copy attributes as necessary as Live performs its own patch operations. The update operation cannot be cancelled or deferred, and the return value is ignored. -For example, the following option could be used to add -[Alpine.js](https://github.com/alpinejs/alpine) support to your project: - - let liveSocket = new LiveSocket("/live", Socket, { - ..., - dom: { - onBeforeElUpdated(from, to){ - if(from._x_dataStack){ window.Alpine.clone(from, to) } - } - }, - }) - -You could also use the same approach to guarantee that some attributes set on the client-side are kept intact. -In the following example, all attributes starting with `data-js-` won't be replaced when the DOM is patched by LiveView: +For example, the following option could be used to guarantee that some attributes set on the client-side are kept intact: - onBeforeElUpdated(from, to){ - for (const attr of from.attributes){ - if (attr.name.startsWith("data-js-")){ - to.setAttribute(attr.name, attr.value); - } - } +```javascript +onBeforeElUpdated(from, to){ + for (const attr of from.attributes){ + if (attr.name.startsWith("data-js-")){ + to.setAttribute(attr.name, attr.value); } + } +} +``` + +In the example above, all attributes starting with `data-js-` won't be replaced when the DOM is patched by LiveView. ### Client-server communication