Feature to support Blazor Data Enhanced Nav and other features like it

[reecelikesramen]

I'm working on a project where most of my pages are Blazor SSR (static) components. For these static pages I've been using Alpine to add light interactivity and AsyncAlpine to split up JS files into components and dynamically load them.

Data enhanced nav is pretty nice for user experience in my opinion, I like the client side routing feel. I've been working on adjusting Alpine and AsyncAlpine to support it and I've made some progress that I'd like to share with the community. I've seen at least a few questions on here related to Blazor Data Enhanced Navigation, HTMX, and Phoenix Liveview and how it interacts with Alpine. My solution so far is not perfect, but it's substantially better than where I started.

I started with this, making a Razor Class Library for my project:

• https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/static-server-rendering?view=aspnetcore-10.0

How it works

Step 1

I hook into onEnhancedNavigationStart and defer Alpine mutations and also observe my own mutations for cleaning up some AsyncAlpine stuff

Alpine.deferMutations();
mutations.length = 0;
observer.observe(document.documentElement, { subtree: true, attributes: true, attributeOldValue: true });

Step 2

Then I hook into onEnhancedNavigationEnd (onEnhancedLoad won't have the DOM observations ready yet)

observer.disconnect();
for (const mutation of mutations) {
    if (mutation.type === 'attributes') {
        const { target, attributeName, oldValue } = mutation;
        const newValue = target.getAttribute(attributeName);
        if (attributeName === 'x-data' && oldValue !== newValue) {
            delete target._x_async;
        }
    }
}
Alpine.flushAndStopDeferringMutations();

Step 3

And finally, I added directly to the Alpine source, in the data directive definition:

 directive("data", (el, { expression }, { cleanup: cleanup2 }) => {
   if (shouldSkipRegisteringDataDuringClone(el))
     return;
   expression = expression === "" ? "{}" : expression;
   let magicContext = {};
   injectMagics(magicContext, el);
   let dataProviderContext = {};
   injectDataProviders(dataProviderContext, magicContext);
   let data2 = evaluate(el, expression, { scope: dataProviderContext });
   if (data2 === void 0 || data2 === true)
     data2 = {};
   injectMagics(data2, el);
   let reactiveData = reactive(data2);
   initInterceptors(reactiveData);
   let undo = addScopeToNode(el, reactiveData);
   reactiveData["init"] && evaluate(el, reactiveData["init"]);
   cleanup2(() => {
     reactiveData["destroy"] && evaluate(el, reactiveData["destroy"]);
     undo();
+    delete el._x_dataStack;
   });
 });

Explanation of Steps

1. Capture DOM mutations to detect when x-data on an element has changed. Stop Alpine from doing stuff during Data Enhanced Nav
2. For all DOM mutations where x-data has changed, clear that elements _x_async member. During Blazor Enhanced Nav, if x-data changes, the _x_async member is preserved. AsyncAlpine depends on this being reset in order to defer the initialization of this element's data (and subsequently its children). It does this by adding x-ignore to the element and removing it once the relevant component has been downloaded and added to Alpine's data store. After doing this, let Alpine start processing DOM mutations.
3. Remove the _x_dataStack member from the element when cleaning up x-data. I tried adding this to the DOM mutations loop by delete target._x_async but the undo() function in Alpine's data directive definition depends on it to clean up the data stack. As far as I've tested so far, this doesn't break the library, but I really have no clue how everything in Alpine works under the hood yet. What I ran into is for an element which had it's x-data attribute change from one data definition to another, that elements _x_dataStack field would be an empty array instead of falsy, which caused the closestDataStack function to fail to properly find a parent with data. Specifically, if (node._x_dataStack) would be true for [] on an element which previous had x-data, but was removed after the nav.

Remaining Issues

• After enhanced navigation, it looks like some directives aren't firing until they are mutated again. For example, I have a persistent x-data for a theme toggle that doesn't change across navigations. After an enhanced nav, it is put into an uninitialized state until I interact with it, and is still kinda broken. Some elements added during the enhanced nav also don't initialize. I have some rows in a table with x-html that don't get evaluated. If I just edit/save the x-html attribute without changing it, it evaluates. This leads me to believe that there is more checking I have to before just nuking _x_dataStack on x-data's cleanup, or it has to do with how Alpine reads DOM changes by Blazor, or maybe it's the deferral.

Before nav:

After nav:

After nav, after interaction:

Future

I will try to keep improving this when substantial issues pop up. This project is for an internal staff area I'm still working on, So I can tolerate a little bit of weirdness and can't dedicate all my time to fixing this completely. I'd love it if other people could help me dig into this and put together a PR for Alpine and AsyncAlpine that helps support Alpine for frameworks that do live DOM patching.

[davidwebca]

I'm exactly battling this problem right now, only we don't use Alpine Async.

In my main layout, I have a navigation component that is interactive, has an x-show="$store.global.navOpened" that's built on a global store Alpine.store('global', { ... }).

When changing pages, the dom diffing of Blazor "resets" this component. The x-show not only doesn't evaluate once the page is changed, but the menu appears as if the value was "true" (it's not). To be noted: Alpine does interact with it because there's an x-cloak on the element initially and if it gets added, regardless if it's blazor or my custom code, it gets removed instantly.

Then, if I change the values of navOpened, it's still reactive and resumes its normal functionality. The menu is wrongly opened after changing page, even if its value is false, but if I set navOpened to true and then false again, it closes and resumes working normally).

TL;DR:

• Mutation Observers of both frameworks seem to conflict in mysterious ways
• Blazor destroys Alpine's state, but preserves its reactivity somehow unless it's just Alpine that re-instates its reactivity but not completely / improperly
• What I'm looking for would be some ways to plug both functionalities together, maybe by fixing their initialization sequence 🤔

[cdock1029]

Have you tried data-permanent to prevent Blazor from modifying your element? It's not so well known or documented, they keep moving around where in the docs this is described..

Ctrl+F data-permanent in the docs here:

https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-10.0

dotnet/aspnetcore#50437

[reecelikesramen]

data-permanent isn't exactly what I'm looking for at least because it prevents any child of an element with x-data from being updated.

[reecelikesramen]

@davidwebca I see around here that the common perception is that enhanced navigation destroys Alpine's state but I don't think it's true. The x fields on elements persist (kind of too much) and internally Alpine responds to Blazor's mutation of the DOM.

I think Alpine wasn't designed to be tolerant to external state-preserving DOM mutations like Blazor. Usually when x-data's cleanup function runs it's not because a new element was added in its place with a new x-data value. This prevents x_dataStack from fully clearing, causing scope to not cascade to children.