Getting an object of translation

[RemiKalbe]

I have in my JSON something like that:

"countries": {
    "singular": "country",
    "list": {
      "AF": "Afghanistan",
      "AL": "Albania",
      "DZ": "Algeria",
      "AS": "American Samoa",
      "AD": "Andorra",
      "AO": "Angola",
      "AI": "Anguilla",
      "AQ": "Antarctica",
      "AG": "Antigua and Barbuda",
      ...
      }
}

and I would like to be able to do that

$_("countries.list")

and get the list of countries as an object.

Right now I get an error telling me that countries.list doesn't exist.
For the moment I will probably use the $dictionary but it is painful because everything is shallow so I need to manually filter each key to find what I want.

Am I missing something?

[kaisermann]

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

[RemiKalbe]

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?

[RemiKalbe]

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 😉

[kaisermann]

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.)

[RemiKalbe]

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 👍.

[RemiKalbe]

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>

[kaisermann]

Can you provide a repro?

[RemiKalbe]

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

[kaisermann]

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

[RemiKalbe]

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.

[kaisermann]

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.

[RemiKalbe]

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

[kaisermann]

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

[RemiKalbe]

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

[kaisermann]

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.

[RemiKalbe]

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.

[RemiKalbe]

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

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