Using setTimeout in x-effect

[taobojlen]

I'm not sure if this is a bug, or if I'm doing something wrong.

My goal: when clicking a button, change the value of an x-data property for a second, then change it back. I would expect something like the following to work:

  <button
    x-data="{ text: 'Click me' }"
    @click="text = 'Clicked!'"
    x-effect="setTimeout(() => text = 'Click me', 1000)"
    x-text="text"
  />

However, as you can see in this JSFiddle, the setTimeout doesn't seem to run. I can see that x-effect does fire when I expect it to; it seems to be the setTimeout that breaks it.

Am I missing something?

[SimoTod]

x-effect will only track the variable if it's used directly in the expression. Because text is inside a callback within setTimeout, Alpine won't track the change. This version would work:

<button
    x-data="{ text: 'Click me' }"
    @click="text = 'Clicked!'"
    x-effect="text; setTimeout(() => text = 'Click me', 1000)"
    x-text="text"
  />

But...

since text is updated in a setTimeout callback, it's outside x-effect so it triggers the tracking again (another setTimeout) which means that, if you click the button again after it changes back, it will revert in less than 1 second.

In general it's not super robust, so you might just add the setTimeout in your click handler:

  <button
    x-data="{ text: 'Click me' }"
    @click="text = 'Clicked!'; setTimeout(() => text = 'Click me', 1000)"
    x-text="text"
  />

[Koniciuaaa]

You should write this in documentation, it's important thing. I thought x-effect run always when $store or data changed.

[SimoTod]

@Koniciuaaa documentation is open source, anyone can send a PR so I'm not sure why I should do it :) (I'm not the maintainer).