Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
genki opened this issue Oct 7, 2024 · 1 comment
Labels
STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working

Comments

@genki
Copy link
Contributor

genki commented Oct 7, 2024

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 genki added STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working labels Oct 7, 2024
@genki genki changed the title [🐞] Return value of the tagged function is only reactive if it is alone. [🐞] Return value of the tagged function is only reactive if it is alone in an element. Oct 7, 2024
@genki
Copy link
Contributor Author

genki commented Oct 8, 2024

I think this issue may be relating with #6585

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant