Skip to content

Commit

Permalink
Remove incomplete Alpine integration example
Browse files Browse the repository at this point in the history
  • Loading branch information
@josevalim
josevalim committed Aug 9, 2023
1 parent 562a92b commit f7a6ede
Showing 1 changed file with 11 additions and 20 deletions.
31 changes: 11 additions & 20 deletions guides/client/js-interop.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

7 comments on commit f7a6ede

@DaTrader
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@josevalim Is there a complete one?

@josevalim
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are blog posts that go step by step, but I can’t say which is up to date. You probably know better.

@DaTrader
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually I don't. I saw some posts trying to solve problems with the Alpine/LiveView integration I myself don't have. TBH, other than this :at option issue I have with the 0.19.5+ integration I don't have other complaints.

@Matsa59
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

-      if(from && from._x_dataStack){
-        window.Alpine.clone(from, to);
-      }
+      window.Alpine.cloneNode(from, to);

do the job for Alpine, in fact clone function from alpine is deprecated, you should use cloneNode (https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/clone.js#L21)

@DaTrader
Copy link

@DaTrader DaTrader commented on f7a6ede Jan 31, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Matsa59 The upgrade does not solve the issue with the inserted elements no longer getting initialized.

One still needs to use a hook to initialize Alpine for the inserted element manually, as I described it here:

https://github.com/liveview-alpine/integration?tab=readme-ov-file#alpine-related-hooks-optional

and here:

https://github.com/liveview-alpine/integration?tab=readme-ov-file#prepending-items-to-a-stream-in-lv-v019x

and you must keep the if clause you deleted above, otherwise you get this:

Uncaught TypeError: root is undefined
    inline http://localhost:4000/assets/app.js:9050
    fullHandler http://localhost:4000/assets/app.js:6720
    initTree http://localhost:4000/assets/app.js:6213
    initTree http://localhost:4000/assets/app.js:6213
    cloneNode http://localhost:4000/assets/app.js:7197
    initTree http://localhost:4000/assets/app.js:6210
    deferHandlingDirectives http://localhost:4000/assets/app.js:6693
    initTree http://localhost:4000/assets/app.js:6209
    cloneNode http://localhost:4000/assets/app.js:7196
    dontRegisterReactiveSideEffects http://localhost:4000/assets/app.js:7235
    cloneNode http://localhost:4000/assets/app.js:7195
    onBeforeElUpdated http://localhost:4000/assets/app.js:11390
    triggerDOM http://localhost:4000/assets/app.js:5298
    ..

@DaTrader
Copy link

@DaTrader DaTrader commented on f7a6ede Jan 31, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UPDATE: Actually, the new cloneNode function seems to mess up everything everywhere. It simply does not work the same as the old clone function.
FYI, the app I am working on is full of Alpine code and it all works with the clone function or at least it used to as of LV 0.20.1.

Now I can see the latest LV is forcing me to initialize Alpine manually on many more elements than I used to in LV 0.20.1.

@josevalim I'm still in the process of upgrading from 0.20.1 to 0.20.3+ and it's not without new issues (some having nothing to do with Alpine as reported in an issue today).

@Matsa59
Copy link

@Matsa59 Matsa59 commented on f7a6ede Jan 31, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DaTrader maybe you'll be interested by alpinejs/alpine#4000

Alpine badly handle dom changes and for phx-stream phoenix liveview could append / delete/ append for new inserted element

So I just update the lifecycle system of Alpine and it works great for us

Please sign in to comment.