Reactivity doesn't work?

[taw]

So I've been trying to code a tiny app just to figure out how this works. I'm running it with tns preview and Android preview app.

The part that breaks is that it's supposed to display one icon or the other:

      {#if alive}
        <span class="fas alive" text="&#xf004;" />
      {:else}
        <span class="fas dead" text="&#xf54c;" />
      {/if}

Instead what I see is this when I get life to positive / negative is this:

I tried a bunch of variants of this code (life >= 0, some extra reactive variable, with and without else block etc.) and result is always the same - the element that's supposed to be removed isn't removed.

I'm pretty sure it would work in regular Svelte.

So I think that's a bug in Svelte Native?

[halfnelson]

It could be, sometimes it is a problem with the nativescript widget itself, some of which don't support element removal. In which case, instead of wrapping with an if, you need to toggle the visibility of the element (instead of add remove from the Dom)

…

On Sun, 16 Aug 2020, 11:56 am Tomasz Wegrzanowski, ***@***.***> wrote: So I've been trying to code a tiny app just to figure out how this works <https://github.com/taw/svelte-native-life-counter/blob/master/app/LifeCounter.svelte>. I'm running it with tns preview and Android preview app. The part that breaks is that it's supposed to display one icon or the other: {#if alive} <span class="fas alive" text="&#xf004;" /> {:else} <span class="fas dead" text="&#xf54c;" /> {/if} Instead what I see is this when I get life to positive / negative is this: [image: 2020-08-16 02 51 46] <https://user-images.githubusercontent.com/17444/90324846-cc483380-df6b-11ea-9b29-eb2004333476.jpg> I tried a bunch of variants of this code (life >= 0, some extra reactive variable, with and without else block etc.) and result is always the same - the element that's supposed to be removed isn't removed. I'm pretty sure it would work in regular Svelte. So I think that's a bug in Svelte Native? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#166>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEGS5G7AXFXWBKMULFXPZ3SA44FHANCNFSM4QASHCDQ> .

[taw]

Is there any documentation of what works and what doesn't?

[halfnelson]

Issues tab on GitHub outlines the ones we know about

…

On Sun, 16 Aug 2020, 1:42 pm Tomasz Wegrzanowski, ***@***.***> wrote: Is there any documentation of what works and what doesn't? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#166 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEGS5AMGAYX4M5YQAALHDTSA5IQ7ANCNFSM4QASHCDQ> .

[taw]

Here's something closer to minimum test case. This one does CATDOGCATDOGCATDOG...

<script>
  let cat = true;
</script>

<page>
	<stackLayout>
		<button on:tap={() => cat=true}>CAT</button>
		<button on:tap={() => cat=false}>DOG</button>
		<label>
			<formattedString>
				{#if cat}
					<span text="CAT" />
				{:else}
					<span text="DOG" />
				{/if}
			</formattedString>
		</label>
	</stackLayout>
</page>

I guess the whole formattedString would need to get nuked and regenerated on every update inside it?

[taw]

Here's another one. This one doesn't update at all, stays as CAT regardless of component state:

<script>
  let cat = true;
</script>

<page>
  <stackLayout>
    <button on:tap={() => cat=true}>CAT</button>
    <button on:tap={() => cat=false}>DOG</button>
    <label>
      {#if cat}
        <formattedString>
          <span text="CAT" />
        </formattedString>
      {:else}
        <formattedString>
          <span text="DOG" />
        </formattedString>
      {/if}
    </label>
  </stackLayout>
</page>

[taw]

Finally this one works:

<script>
  let cat = true;
</script>

<page>
  <stackLayout>
    <button on:tap={() => cat=true}>CAT</button>
    <button on:tap={() => cat=false}>DOG</button>
    {#if cat}
      <label>
        <formattedString>
          <span text="CAT" />
        </formattedString>
      </label>
    {:else}
      <label>
        <formattedString>
          <span text="DOG" />
        </formattedString>
      </label>
    {/if}
  </stackLayout>
</page>

It's still 2 components not updating their contents properly, failing in different ways (label just not updating; formattedString adding only).

[halfnelson]

Thanks for the repro, I'll check it out.

…

On Wed, 19 Aug 2020, 7:26 pm Tomasz Wegrzanowski, ***@***.***> wrote: Finally this one works: <script> let cat = true; </script> <page> <stackLayout> <button on:tap={() => cat=true}>CAT</button> <button on:tap={() => cat=false}>DOG</button> {#if cat} <label> <formattedString> <span text="CAT" /> </formattedString> </label> {:else} <label> <formattedString> <span text="DOG" /> </formattedString> </label> {/if} </stackLayout> </page> It's still 2 components not updating their contents properly, failing in different ways (label just not updating; formattedString adding only). — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#166 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEGS5AO5AK3ZBLFCID22Y3SBOLFRANCNFSM4QASHCDQ> .

[halfnelson]

Deployed in 0.8.5.
Thanks for the bug report and repro, this fix will help other components too 👍