Alpine optimistic update out of sync #1367

spiffytech · 2023-04-12T13:19:20Z

spiffytech
Apr 12, 2023

I set up a toy scenario to test out optimistic updates using Alpine.js, but it's not working. Am I doing something wrong, or is there a bug?

What I want to happen:

User clicks the button
Alpine displays the new state it predicts the server will display
Simultaneously, HTMX submits the request to the server
When the request finishes, both displayed values (client and server state) are in sync, and Alpine's state is updated to whatever the server actually returned (even if it's different from predicted).

What's actually happening:

The first click works correctly.
The second click does an optimistic update, but when the request completes, both displayed values change (wrong), and they display mismatched values (true+false, false+true)
All subsequent clicks don't trigger Alpine's onclick logic at all, and HTMX page updates cycle the displayed values between mismatched value pairs.

<!DOCTYPE html>
<html>
<body>

<div hx-target="this" hx-ext="alpine-morph" hx-swap="morph">
	<div x-data="{bool: ${state.bool}}">
		<button type="button" x-on:click="bool = !bool" hx-post="/toggle" hx-trigger="click delay:1s">
			Toggle!
		</button>
               <!-- Server state -->
		<span>${state.bool}</span>
               <!-- Client state -->
		<span x-text="bool"></span>
	</div>
</div>

<script src="https://unpkg.com/htmx.org@latest"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/alpine-morph.js"></script>
<!-- Alpine Plugins -->
<script src="https://unpkg.com/@alpinejs/morph@latest/dist/cdn.min.js"></script>
<!-- Alpine Core -->
<script src="https://unpkg.com/alpinejs@latest/dist/cdn.min.js"></script>

</body>
</html>

jreviews · 2023-04-12T17:45:14Z

jreviews
Apr 12, 2023

For this particular example, if you are updating the Alpine x-data state directly from the server and you are swapping the entire Alpine component as well, then you should try this without using the alpine morph extension to see if that works. Alpine morph was initially developed, by me, but I never used it, to keep client side state even after swapping the html. For example, if you are using tabs, to retain the selected tab state after a swap without having to keep the tab state on the server as well.

1 reply

spiffytech Apr 14, 2023
Author

Ahhh, I see.

Updating the example to not use morphing fixes the Alpine-displayed data:

<div id="wrapper" hx-target="this" hx-select="#wrapper">
	<button type="button" hx-get="">Outside Alpine</button>

	<div x-data="{bool: false}">
		<button type="button" x-on:click="bool = !bool" hx-post="/toggle" hx-trigger="click delay:1s">
			Inside Alpine
		</button>
		<!-- Server-side state -->
		<span>${state.bool}</span>
		<!-- Client-side state -->
		<span x-text="bool">empty</span>
	</div>
</div>

However, I do need parts of my UI to morph, and in a complex-enough UI I expect to have Alpine components within an morph context.

I'm now testing Alpine with Idiomorph (since that sounds like the new official morph solution), and I can't figure out how to make them play nice together.

In this example, clicking the Inside Alpine button works correctly, while clicking the Outside Alpine button erases Alpine's modifications to the DOM:

<div id="wrapper" hx-target="this" hx-select="#wrapper" hx-ext="morph" hx-swap="morph:outerHTML">
	<button type="button" hx-get="">Outside Alpine</button>
	 
	<div x-data="{bool: false}" hx-swap="outerHTML">
		<button type="button" x-on:click="bool = !bool" hx-post="/toggle" hx-trigger="click delay:1s">
			Inside Alpine
		</button>
		<!-- Server-side state -->
		<span>${state.bool}</span>
		<!-- Client-side state -->
		<span x-text="bool">empty</span>
	</div>
</div>

Since the docs for hx-swap="outerHTML" say "replace", I figured the Alpine DOM node would get deleted + recreated, and Alpine would reinitialize it. But instead it looks like it's being preserved, so HTMX morphis it and it's left with the empty content.

What's the recommended approach for mix-n-matching morphing with Alpine?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Alpine optimistic update out of sync #1367

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Alpine optimistic update out of sync #1367

Uh oh!

Uh oh!

spiffytech Apr 12, 2023

Replies: 1 comment · 1 reply

Uh oh!

jreviews Apr 12, 2023

Uh oh!

spiffytech Apr 14, 2023 Author

spiffytech
Apr 12, 2023

Replies: 1 comment 1 reply

jreviews
Apr 12, 2023

spiffytech Apr 14, 2023
Author