Force component to re-render (like Livewire $refresh)

[jacksleight]

Problem

Livewire has a $refresh method that forces the component to re-render, is there any equivalent in Alpine?

My use case is I have an element that is toggled with x-show, but part of the condition is based on the viewport size. By default nothing changes here when the window is resized:

<div
	x-data
	x-show="someConditionInvolvingViewportSize">
</div>

I thought it might be possible to use the new Resize plugin to trigger a re-render, but it don't think anything like this exists:

<div
	x-data
	x-resize.document="$refresh()"
	x-show="someConditionInvolvingViewportSize">
</div>
<!-- My condition uses `window.matchMedia`, which is why I don't need the dimensions provided by Resize -->

Is there another way?

Workaround

I found this works, but it would be great if there was a more official way to do it:

<div
	x-data="{ tick: 1 }"
	x-resize.document="tick++"
	x-show="tick && someConditionInvolvingViewportSize">
</div>

[SimoTod]

You need observable variables (something from x-data or something using Alpine.reactive) to have reactive directives in Alpine so the correct way to do it is

<div
	x-data="{ show: false }"
	x-resize.document="show = someConditionInvolvingViewportSize"
	x-show="show">
  ok
</div>

[SimoTod]

About the original question: no, there's nothing in Alpine for refreshing a component on demand.

[jacksleight]

Ah gotcha, that makes much more sense. Thanks!

[SimoTod]

No worries, just for completeness (and for those who are going to read the discussion in the future): Unless your condition is really complex and involves other stuff in addition to the viewport size, you can use a CSS rule to do it and it's usually more performant. 👍

[ekwoka]

If 100% unavoidable, you can Alpine.destroyTree then Alpine.initTree but I can be pretty confident in saying that this should never be the case.

(I mean, I've done it once, but it was for an Alpine Sandbox when you change the code...)