Need help with understanding plural format syntax and structuring code on SSR flow

[aakash14goplani]

Hello @jarda-svoboda

I have two part question:

1. Need help in grasping plural format syntax

   • I come from ICU format background and though sveltekit-i18n supports this format, I still want to understand behavior of default formatter. Consider this string:

     "You have {{count:gte; 0:{{count:number;}} {{count; 0:no messages at all; 1:one new message; default: {{count}} new messages}}!; default:no new messages...}}"
     

   • value = 0, message -> "You have 0 no messages at all!"
   • value = 1, message -> "You have 1 one new message!"
   • value > 1, message -> "You have 2 2 new messages!"
   • value < 0, message -> "You have no new messages..."
   • As you can see, the numerical part is repeated twice, perhaps because of 0:{{count:number;}} but if I omit this, nothing gets rendered on string. Only way to avoid this is by adding garbage value 0:{{n}}
   • Query Can you please help me understand importance of 0:{{}} and why we can't omit it as I fail to see its importance

2. Structuring code in SSR flow

   • Following examples setup in repo, I understood that the structure should be followed as below:
   • In layout.server.ts file

     export const load = async ({ url }) => {
       const { pathname } = url;
       const initLocale = 'en'; // get from cookie / user session etc...
       await loadTranslations(initLocale, pathname); // keep this just before the `return`
       return {
         i18n: { locale: initLocale, route: pathname },
         translations: translations.get(),
       };
     };

   • In layout.ts file

     export const load = async ({ data }) => {
       const { i18n, translations } = data;
       const { locale, route } = i18n;
       addTranslations(translations);
       await setRoute(route);
       await setLocale(locale);
       return i18n;
     };

   • However, I don't understand the need of having code split-up into two files, I have written everything under layout.ts and things works well for me. Query: I am missing out something here, is my understand correct that we can combine the above two logic into single piece?
   • This is what I have on my local machine in layout.ts and is working fine

     export const load: LayoutLoad = async ({ url }) => {
       const { pathname } = url;
       const initLocale = getInitialLocale();
       await loadTranslations(initLocale, pathname);
       return { locale: initLocale, route: pathname };
     };
     
     function getInitialLocale(): string {
       if (browser) {
         try {
           return window.navigator.language.split('-')[0];
         }
         catch(e) {
           return 'en';
         }
       }
       return 'en';
     }

[jarda-svoboda]

Hi @aakash14goplani!

1. Yes, this library supports ICU Message syntax as well - you just need to replace the default message parser by the ICU one - if needed, example here
   • If you want to use the default message syntax, i would use something like:

{{count:gt; 0:You have {{count:number;}} new {{count:gte; 1:message; 2:messages}}!; default:You don't have any messages..}}

2. Splitting between server and client layouts provides higher efficiency loading your translation definitions. The idea is to load them during the SSR only on the first visit. Then translation definitions are passed to the layout data and added using addTranslations on the client side so it's not necessary to trigger another loading here.