denysvuika/preact-translate

Minimalistic translate (i18n) library for Preact

preact-translate's Issues

TranslateProvider trying to fetch assets/en.json even if translations key is passed

The following code:

<TranslateProvider translations={{ fr: phrases, en: {} }} lang="fr">
  ...
</TranslationProvider>

Is still producing a xhr call to fetch assets/en.json, see this console output:

Redundant fetch for the same language

Description

In this demo, you can see duplicated requests to en.json from the DevTool's Network panel.

Expected behavior

en.json should be fetch only once

Actual behavior

en.json is fetched twice

is there a way to ensure translations are serve side rendered?

a) love the library's simplicity
b) ran into some hiccups:

1. All the translations flash from translation key -> translation on page load (while en.json is being fetched)
   e.g. "footer.contact" is rendered onto the screen, quickly followed by the translation (e.g. "Contact Us")

2. SSR is not rendering the translation
   e.g. in the page source code I literally see <a href="/contact">footer.contact</a>

if #2 could be fixed, then it would fix #1 for most cases.

any recommendations or thoughts on ☝️ ??

Setup unit testing

Configure unit testing.

Notes: for the time being there are some issues with PreactX RC and jest, needs investigation

Use translation module outside of a JSX component

I ran into this use case lately and didn't find any built-in way to achieve this.
What are your thoughts and do you accept PRs on this one ?

Would you like to add size-limit ?)

https://github.com/ai/size-limit ?
Size Limit will prevent mistakes: is somebody will send PR, Size Limit will check it on CI.

cc @ai

Include translations in bundle

Include translations directly into the bundle

Advantages

• Translations are immediately available after page load
• similar approach as i18n
• can be an optional feature

Downsides

• increasing bundle size (especially in bigger projects)

In nested routes, JSON 404s

When using a nested route, the translation library looks for the JSON relative to the route rather than at the root of the project.

So when on a page that is generated by: <Route path="/trick/:id" component={Trick} />, the url is something like:
http://localhost:3000/trick/3 but the translate library looks for the localization JSON in http://localhost:3000/trick/assets/en.json rather than at the root http://localhost:3000/assets/en.json and it 404s.

Any suggestions on how to use this library on custom routes?