[🐞] Return value of the tagged function is only reactive if it is alone in an element.
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
I think this issue may be relating with https://github.com/QwikDev/qwik/issues/6585
qwik-1.11.0 still has this issue https://qwik.dev/examples/introduction/hello-world/#v=1.11.0&f=7VbLagJBEPyVzeJhRRO8JJAFhSSQL8hNhAm4ICis7Cgiw%2Fy7NV3z8nHw4EHB27LVM91d013dWdF8vn9cKpphHLnDgkOYf9KnKF14h%2FL03UpwQRJg%2Btu2jgZR8aar%2FVDnpJhEcvxeIJI8ju4r44osUafrvwaaBCO%2Bl%2F7quv99vCRcs2z2uERPRzN3uEgjvzIyv212IpzhlBlzwPv69zG%2Foe%2B3Td%2BbS4xTuJjBWvUMvmzxWvSMWFslZpbWPu50xMVjUVSJnm%2Bo4q3ogYeaS1eW4B0mf43uZIFB1ZmzcFONJGfiLmjWWGAwAzVBMHwEBkVjZ%2Fxw21yzTdzCazZq4dpPWS7AR8iu7VZzZV9yiNtxWgrNBQIHAzsROC7T2bW6KsVj2T93CUx8AktO0c6iv0%2F5fTz5PQA
Can you try with the v2 please?
pnpm create [email protected]
@gioboa the V2 Playground is here and it works:
https://qwikdev-build-v2.qwik-8nx.pages.dev/playground/#f=7VbNysIwEHyVUjxU9PvwomBBQQWfwJsIESwICpVGEQl5dye7STb%2BHDx4UPBWOpvsZrKZnaRphv3Bs6bpxpHbzXgI8x%2F5JKUL95Df31sOLpgEhM7r2tFAKl41pR%2FqPCnGkRzvC0iSRzF9YVyTCXW6XFTQJATxfelJ06wvcZOwza66YBO97K3c4kxGfmFofttkRVjDU2bEA973v6%2F5H%2B%2F%2BVLV9ONW4RIoVolXL4Mtmf1nLULRVFGY52tctS1w9Fk0l9Eyhiu%2BiBxlKNl3JAT%2Fw8K%2FoTlIYVJ3PTNwUPToz465o7rHAYAJqBsHwDRgUjV%2FGjN3mQXyzOaqte37KRnMsyLlu9htl4aAFYncsptA8IbDTsWOCo5lOttVFThnz9mNKYJQTmCTFcyb9%2Fcnv98nvFQ
with v2 code it's working fine, v2 will be release soon so I marked this issue with STATUS-3: solved by V2, thanks.
@wmertens Great!