SolidJS•15mo ago

i18n and context issues

Hey folks, I am currently migrating to the 2.0.0 release of @solid-primitives/i18n. (https://github.com/solidjs-community/solid-primitives/tree/main/packages/i18n#readme) However I have a few questions: 1. The way t is being defined in the docs will always give me the famous reactive variable 'xxx' should be used within JSX error. Which makes sense. Therefore I wonder, why all examples are build this way even though locales and therefore the current dict might change? Is this an error on the library end or do I misunderstand something here? Here's what my Provider looks like:

export function I18nProvider(props: { children: JSXElement }) {
  const [locale, setLocale] = createSignal<Locale>("en");
  const dict = createMemo(() => i18n.flatten(dictionaries[locale()]));
  const t = i18n.translator(dict);

  return (
    <I18nContext.Provider
      value={{
        t,
        setLocale,
        locale,
      }}
    >
      {props.children}
    </I18nContext.Provider>
  );
}

export function I18nProvider(props: { children: JSXElement }) {
  const [locale, setLocale] = createSignal<Locale>("en");
  const dict = createMemo(() => i18n.flatten(dictionaries[locale()]));
  const t = i18n.translator(dict);

  return (
    <I18nContext.Provider
      value={{
        t,
        setLocale,
        locale,
      }}
    >
      {props.children}
    </I18nContext.Provider>
  );
}

2. Is there a way to make properties of a context provider still be reactive but not accessors? I find it a bit annyoing, that I need to use t()() instead of t() when consuming my context Thanks in advance 🙂

GitHub

solid-primitives/packages/i18n at main · solidjs-community/solid-pr...

A library of high-quality primitives that extend SolidJS reactivity. - solidjs-community/solid-primitives

2 Replies

thetarnav•15mo ago

1. this looks like an eslint warning. eslint doesn’t have enough information to know exactly if something will work or not, you just have to see yourself and ignore the warning if it’s a false positive. 2. It can be a getter I guess but I’m not really sure what’s the problem. you can look at solid-site for reference of usage with context: https://github.com/solidjs/solid-site/blob/main/src/AppContext.tsx

GitHub

solid-site/src/AppContext.tsx at main · solidjs/solid-site

Code that powers the SolidJS.com platform. Contribute to solidjs/solid-site development by creating an account on GitHub.

oneiroOP•15mo ago

A thanks @thetarnav using getters did the trick.

Gaming

Programming

i18n and context issues