QwikDev/qwik

[🐞] Return value of the tagged function is only reactive if it is alone in an element.

genki opened this issue · 6 comments

genki commented

Which component is affected?

Qwik Runtime

Describe the bug

I am making an i18n tool using tagged function to embed translative message in a jsx.
I found it doesn't reactively update when the locale has been changed in a condition that the title says.

Here's a simple example that causes this issue.

import { component$, useStore, Signal, useSignal, useTask$ } from "@builder.io/qwik";

const useFoo = (counter:Signal<number>) => {
  const state = useStore({});
  return (s:TemplateStringsArray) => {
    const key = s[0];
    useTask$(({track}) => {
      const count = track(() => counter.value)
      state[key] = `${key} - ${count}`
    })
    return state[key];
  }
}

const useBar = (counter:Signal<number>) => {
  const state = useStore({});
  return (key:string) => {
    useTask$(({track}) => {
      const count = track(() => counter.value)
      state[key] = `${key} - ${count}`
    })
    return state[key];
  }
}

export default component$(() => {
  const counter = useSignal(0);
  const t = useFoo(counter);
  const s = useBar(counter);
  return <>
    Count up
    <div>{t`hello`}</div>
    <div>{t`world`}!</div>
    <button onClick$={() => counter.value++}>Click</button>
    <div>{s("hello")}</div>
    <div>{s("world")}!</div>
  </>;
});

There are 4 lines that show message with counter value.
I have expected all of them are reactively updated when I click the button.
But the 2nd line does with no luck. This is strange.

Reproduction

https://qwikdev-build-v2.qwik-8nx.pages.dev/playground/#v=1.9.1&f=7VbLagJBEPyVzeJhRRO8JJAFhSSQL8hNhAm4ICis7Cgiw%2Fy7NV3z8nHw4EHB27LVM91d013dWdF8vn9cKpphHLnDgkOYf9KnKF14h%2FL03UpwQRJg%2Btu2jgZR8aar%2FVDnpJhEcvxeIJI8ju4r44osUafrvwaaBCO%2Bl%2F7quv99vCRcs2z2uERPRzN3uEgjvzIyv212IpzhlBlzwPv69zG%2Foe%2B3Td%2BbS4xTuJjBWvUMvmzxWvSMWFslZpbWPu50xMVjUVSJnm%2Bo4q3ogYeaS1eW4B0mf43uZIFB1ZmzcFONJGfiLmjWWGAwAzVBMHwEBkVjZ%2Fxw21yzTdzCazZq4dpPWS7AR8iu7VZzZV9yiNtxWgrNBQIHAzsROC7T2bW6KsVj2T93CUx8AktO0c6iv0%2F5fTz5PQA

Steps to reproduce

Please visit the link above and click the button to see this issue.

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M2
    Memory: 160.16 MB / 24.00 GB
    Shell: 3.6.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 20.12.1 - /opt/homebrew/opt/node@20/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.5.0 - /opt/homebrew/opt/node@20/bin/npm
    pnpm: 9.11.0 - /opt/homebrew/bin/pnpm
    bun: 1.1.26 - ~/.bun/bin/bun
  Browsers:
    Chrome: 129.0.6668.90
    Safari: 17.6
  npmPackages:
    @builder.io/qwik: file:../clone/qwik/packages/qwik => 1.9.0 
    @builder.io/qwik-city: file:../clone/qwik/packages/qwik-city => 1.9.0 
    typescript: ^5.3.3 => 5.3.3 
    undici: ^5.28.4 => 5.28.4

Additional Information

No response

genki commented

I think this issue may be relating with #6585

gioboa commented

Can you try with the v2 please?
pnpm create qwik@2.0.0-alpha.1

gioboa commented

with v2 code it's working fine, v2 will be release soon so I marked this issue with STATUS-3: solved by V2, thanks.

genki commented

@wmertens Great!