Getting an object of translation about svelte-i18n HOT 17 CLOSED

The _ method will always return a localized string. If you want iterate through some items and translate them, you need to have a separate object (like that list of yours, loop through it and call the _ method with the id of each country. The dictionary of messages is not supposed to be something you would iterate over like that 😁.

Here's a simple REPL to demonstrate that: https://svelte.dev/repl/49412f11564b41a183f414177ffc52b9?version=3.18.2

from svelte-i18n.

It's not super practical, I literally have the identifier of all the countries to copy and paste 🤡.
Is it possible to get a version of $dictionary not shallow?

from svelte-i18n.

If anyone comes into this need, I did this

import { pickBy } from "lodash"

let dic = $dictionary[$locale];
let countries = [];
pickBy(dic, (v, k) => {
  if (k.includes("countries.list")) {
    const key = k.split(".")[2];
    countries.push({ key, value: v });
  }
});

It does the trick, but something native could be really cool 😉

from svelte-i18n.

Following what you wanted on the OP, what would$_("countries.list") render? It's a POJO, svelte would just output [object Object].

Dictionaries are flatten since #39 and I understand that it's not the optimal solution to have an extra list, but there's currently no other way to do that. Having a deep dictionary only adds complexity to the code and it wasn't necessarily being useful. I still think that using the dictionary to loop through values isn't the right way of doing this, but I'm open to discussion.

(about your workaround: I'd manually import pickBy and includes so the rest can get tree-shaken.)

from svelte-i18n.

I don't want it to be rendered, I just want to get back an object to then use it for a dropdown.
The dropdown take care of extracting each key value from the object.
I'll change the import 👍.

from svelte-i18n.

Ok, so for some reason my workaround only works server side.
In the browser the $dictionary is undefined.

event tho I have that

<script context="module">
  import { waitLocale } from "svelte-i18n";

  export async function preload() {
    return waitLocale();
  }
</script>

from svelte-i18n.

Can you provide a repro?

from svelte-i18n.

https://svelte.dev/repl/5a7d490941a243e3baec71e7d024e88e?version=3.18.2

from svelte-i18n.

The async function preload() { ... } only works in sapper. If you're just using svelte, you can use the $loading store: https://github.com/kaisermann/svelte-i18n/blob/master/docs/Locale.md#loading

from svelte-i18n.

I'm using Sapper.
Also

'loading' is not exported by node_modules/svelte-i18n/dist/runtime.esm.js

In my repro I used $isLoading, as you saw the repro doesn't work anyway.

from svelte-i18n.

Oh okay, so please provide a sapper repro, not a svelte one 😁 A simple .zip helps a lot.

And my bad, outdated doc. It's called $isLoading! Just updated the docs.

from svelte-i18n.

My point was, shouldn't the svelte one works? because it doesn't 😥.
I'll create a zip.

from svelte-i18n.

Move those references to $dictionary and $locale to inside the $: block: https://svelte.dev/repl/5589264db1f8400faf5e6465e21071ab?version=3.18.2

from svelte-i18n.

Here you are
https://github.com/RemiKalbe/svelte-i18n-repro-sdb

from svelte-i18n.

Hey @RemiKalbe 👋 Sorry for taking so long to answer you. It seems that when you're getting the current dictionary via let dic = $dictionary[$locale];, in the client, the $locale is, in example, en-US. However, since the server doesn't have a navigator object, it sets its $locale to en. That's the reason for the difference between them both.

I'm thinking if it makes sense to return a merged dictionary of, in example, en-us and en when getting the dictionary for the en-US locale. However, this kind of direct access to the current locale (full) dictionary wasn't in the scope of the project and I'm not sure if it's useful for many cases apart from yours. Making it return a "full" dictionary will involve changing a bit how the lib resolve messages and I'd need to cache and invalidate it whenever the dictionary is altered.

from svelte-i18n.

What would be great is that if $dictionary[$locale] of a given $locale doesn't exist it fallback to the default one set in the init.

from svelte-i18n.

For now, I'll just to that, thank you for solving my issue 😉

let dic =
      typeof $dictionary[$locale] === "undefined"
        ? $dictionary["en"]
        : $dictionary[$locale];

from svelte-i18n.