AlpineJS and Blazor 8 Enhanced navigation

[oliverw]

When enabling Enhanced navigation in Blazor clicking an anchor results in the framework intercepting the request and performing a fetch request instead. Blazor then patches the response content into the page's DOM. I'd say this would cause problems since Alpine.start() only runs on the first full page load. It is possible to react when Blazor has patched the DOM:

Blazor.addEventListener('enhancedload', () => {
  // how to tell Alpine to update from changed dom?
});

I've read this thread regarding liveview and there's a lot of talk about using Alpine.discoverUninitializedComponents but I really didn't find any conclusive answer.

[SimoTod]

Have you tried? That post was about alpine v2. Alpine v3 is different, if the framework patches the Dom by adding/removing elements on a page where Alpine has already been started, Alpine should see the changes and initialise the new elements.

[oliverw]

@cdock1029 The answer is "kind of". But it's a neverending struggle. Avoid it if you can.

[cdock1029]

Reading here, this "blowing away of the dom completely" is a broad pain point

dotnet/aspnetcore#42561 (comment)

[cdock1029]

@cdock1029 The answer is "kind of". But it's a neverending struggle. Avoid it if you can.

Avoid which one? 😂

[oliverw]

@cdock1029 Blazor + AlpineJS, or anything that mutates the DOM.

[cdock1029]

@oliverw

For future reference in case you or others don't know, this solved my Blazor SSR issue entirely (preserve certain dom nodes so Alpine can maintain its visual state for them):

data-permanent

Found here:

https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-9.0

Blazor's enhanced navigation and form handing may undo dynamic changes to the DOM if the updated content isn't part of the server rendering. To preserve the content of an element, use the data-permanent attribute.

[reecelikesramen]

Working on this in #4714 and made some progress you might be interested in

[davidwebca]

Following this thread as I'm battling this issue right now.