qwik icon indicating copy to clipboard operation
qwik copied to clipboard

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

Open genki opened this issue 1 year ago • 1 comments

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 avatar Oct 07 '24 22:10 genki

I think this issue may be relating with https://github.com/QwikDev/qwik/issues/6585

genki avatar Oct 08 '24 22:10 genki

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

genki avatar Nov 27 '24 19:11 genki

Can you try with the v2 please? pnpm create [email protected]

gioboa avatar Nov 27 '24 20:11 gioboa

@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

wmertens avatar Nov 28 '24 06:11 wmertens

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

gioboa avatar Nov 28 '24 07:11 gioboa

@wmertens Great!

genki avatar Nov 30 '24 18:11 genki