Re-render when external variable used in x-data is updated

[Telokis]

Hello!

I am trying to make my Alpine render more reactive. My x-data is based on an external variable (X.characters) that will be updated by a setInterval through some polling or websocket.
My issue is that when a change occurs, the component doesn't take it into account as I thought it would.

I have created a simple reproduction on CodePen and below is the code to be future-proof.
The example changes the online property of my character every 1s to simulate receiving the information from the server.
I would expect the printed info to alternate between Offline and GreatFighter depending on whether online is true or false but it stays stuck in the initial configuration.

HTML example

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>

<script>
	var X = {};

	X.characters = [{ name: "GreatFighter", online: false }];

	// Simulate online status change
	setInterval(() => {
		X.characters[0].online = !X.characters[0].online;
	}, 1000);

  // X.characters passed as parameter below
	const get_online_characters_index = (chars) => {
		const online_chars = chars.filter((c) => c.online);

		if (online_chars.length === 0) {
			return {};
		}

		return {
			1: online_chars[0],
		};
	};
</script>

<div x-data="{ chars: get_online_characters_index(X.characters) }">
	<div>
		<span class="characterr1">Character &gt;
			<span style="color: green" x-show="chars[1]" x-text="chars[1].name"></span>
			<span style="color: orange" x-show="!chars[1]">Offline</span>
		</span>
	</div>
</div>

[ekwoka]

This is just a design issue.

You aren't ever updating any reactive variables.

also that is Alpine v2...that's over 2 years old.

<div x-data="chars">
  <div>
    <span class="characterr1"
      >Character &gt;
      <span
        style="color: green"
        x-show="chars[1]"
        x-text="chars[1].name"
      ></span>
      <span
        style="color: orange"
        x-show="!chars[1]"
        >Offline</span
      >
    </span>
  </div>
</div>

Alpine.data('chars', () => ({
  characters: [{ name: 'GreatFighter', online: false }],
  get onlineCharacters() {
    return this.characters.filter((c) => c.online);
  },
  init() {
    setInterval(() => {
      this.characters[0].online =
        !this.characters[0].online;
    }, 1000);
  },
}));

[Telokis]

Hello and thanks for the reply!
In practice I'm using [email protected], the codepen was the first link I found and I didn't think about checking the version.

Thank you for your suggestion. Sadly that's not something I can implement, I'm trying to use AlpineJS locally in an otherwise huge project made of raw JS + jQuery. I was hoping I could leverage reactivity in some way but it seems like I misunderstood, nevermind!

[SimoTod]

You can potentially use https://alpinejs.dev/advanced/reactivity#alpine-reactive but doing all things manually will eventually bite you back I suspect.

[ekwoka]

I don't see why incrementally adding it means you can't do anything like the above.

You just call whatever function you're using now from Alpine. boom.

[Telokis]

The retrieved data is used in tens of different places across the codebase. Even if there was a way to access the data from outside the Alpine component, it would probably not be worth the effort.
Moreover, this is for a coding game so the data should be globally available so the players can access it from their own bot code.

That's why I wanted the other way around: make Alpine monitor the global variable so I can start using it here and there to progressively clean up the codebase.