Why scoped translation is only available in child component ?

[PacoDu]

Hi 👋 ,
I just noticed that scoped translation (introduced with <Speak> component) doesn't work for HTML declared in the same scope as the <Speak> component (it took me some time to realise my issue was coming from this behavior).

With qwik-speak you can't write:

    <Speak assets={['page']}>
      <h1>{t('app.title')}</h1>
      <h2>{t('app.subtitle')}</h2>
      <p>{t("page.text@@I'm a default value")}</p>
    </Speak>

Instead you have to write:

   (...)
    <Speak assets={['page']}>
       <Page />
    </Speak>

I think this should be stated more clearly than only a comment in the quick start exemple :p. Or add a warning if translation is used like in the 1st exemple ?

What is the reason we need to create sub component ?

Thanks !

[robisim74]

Hi @PacoDu,

good question. I too find it tedious to create a child component, but this seems to be the behavior of Slot components (such as Speak component) in Qwik. From the docs:

Slots in Qwik are symbolic, allowing Qwik to render parents and children in perfect isolation, allowing to render the parent component without ever rerender the childrens and vice versa.

Due to their isolation, it can be observed that Qwik renders direct child components and the Speak component asynchronously, so that the assets loaded by the Speak component are not immediately available to direct children.

Maybe this behavior will change in the future, but you're right: I need to explain it better in the documentation.

[PacoDu]

Sorry, I missed the notification ! Thanks a lot for your insights, I better understand now why it behave this way.