chore: 🤖 testing partial loading and merging

.prettierrc

@@ -1,7 +1,7 @@
 {
   "semi": false,
   "printWidth": 100,
-  "trailingComma": "all",
+  "trailingComma": "es5",
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "singleQuote": true

example/messages/en.json

@@ -0,0 +1,10 @@
+{
+  "title": {
+    "index": "Sapper project template!"
+  },
+  "messages": {
+    "success": "Great success!",
+    "high_five": "High five",
+    "try_editing": "Try editing this file (src/routes/index.svelte) to test live reloading."
+  }
+}

example/src/i18n.js

@@ -1,7 +1,6 @@
-import { dictionary } from 'svelte-i18n'
+import { registerLocaleLoader } from 'svelte-i18n'
 
-dictionary.set({
-  'pt-BR': () => import('../messages/pt-BR.json'),
-  'en-US': () => import('../messages/en-US.json'),
-  'es-ES': () => import('../messages/es-ES.json'),
-})
+registerLocaleLoader('en', () => import('../messages/en.json'))
+registerLocaleLoader('pt-BR', () => import('../messages/pt-BR.json'))
+registerLocaleLoader('en-US', () => import('../messages/en-US.json'))
+registerLocaleLoader('es-ES', () => import('../messages/es-ES.json'))

example/src/routes/_layout.svelte

@@ -30,16 +30,16 @@
   }
 </style>
 
-<Lang let:loading>
-  {loading}
-</Lang>
+<Lang let:loading>{loading}</Lang>
 
 <Nav {segment} />
 
 <main>
   <select bind:value={$locale}>
     {#each $locales as locale}
-      <option value={locale}>{localeLabels[locale]}</option>
+      {#if locale in localeLabels}
+        <option value={locale}>{localeLabels[locale]}</option>
+      {/if}
     {/each}
   </select>
   <slot />

example/src/routes/about/index.svelte

@@ -1,12 +1,12 @@
 <script context="module">
-  // import { partial } from 'svelte-i18n'
+  import { registerLocaleLoader, flushLocaleQueue } from 'svelte-i18n'
+
+  registerLocaleLoader('en-US', () => import('./_locales/en-US.json'))
+  registerLocaleLoader('pt-BR', () => import('./_locales/pt-BR.json'))
+  registerLocaleLoader('es-ES', () => import('./_locales/es-ES.json'))
 
   export async function preload() {
-    // return partial({
-    //   'en-US': () => import('./_locales/en-US.json'),
-    //   'pt-BR': () => import('./_locales/pt-BR.json'),
-    //   'es-ES': () => import('./_locales/es-ES.json'),
-    // })
+    return flushLocaleQueue()
   }
 </script>
 
@@ -20,8 +20,4 @@
 
 <h1>{$_('about_this_site', { default: 'About this site' })}</h1>
 
-<p>
-  {$_('about_content[0]', {
-    default: "This is the 'about' page. There's not much here.",
-  })}
-</p>
+<p>{$_('about_content[0]', { default: "This is the 'about' page. There's not much here." })}</p>

test/client/index.test.ts

@@ -7,6 +7,8 @@ import {
   addCustomFormats,
   customFormats,
   preloadLocale,
+  registerLocaleLoader,
+  flushLocaleQueue,
 } from '../../src/client'
 
 global.Intl = require('intl')
@@ -16,12 +18,13 @@ let currentLocale: string
 
 const dict = {
   en: require('../fixtures/en.json'),
-  'en-GB': () => import('../fixtures/en-GB.json'),
-  pt: () => import('../fixtures/pt.json'),
-  'pt-BR': () => import('../fixtures/pt-BR.json'),
-  'pt-PT': () => import('../fixtures/pt-PT.json'),
 }
 
+registerLocaleLoader('en-GB', () => import('../fixtures/en-GB.json'))
+registerLocaleLoader('pt', () => import('../fixtures/pt.json'))
+registerLocaleLoader('pt-BR', () => import('../fixtures/pt-BR.json'))
+registerLocaleLoader('pt-PT', () => import('../fixtures/pt-PT.json'))
+
 format.subscribe(formatFn => {
   _ = formatFn
 })
@@ -29,7 +32,6 @@ dictionary.set(dict)
 locale.subscribe((l: string) => {
   currentLocale = l
 })
-locale.set('en')
 
 describe('locale', () => {
   it('should change locale', () => {
@@ -61,6 +63,15 @@ describe('dictionary', () => {
     expect(loaded[0][0]).toEqual('pt')
     expect(loaded[1][0]).toEqual('pt-PT')
   })
+
+  it('load a partial dictionary and merge it with the existing one', async () => {
+    locale.set('en')
+    registerLocaleLoader('en', () => import('../fixtures/partials/en.json'))
+    expect(_('page.title_about')).toBe('page.title_about')
+
+    await flushLocaleQueue('en')
+    expect(_('page.title_about')).toBe('About')
+  })
 })
 
 describe('formatting', () => {
@@ -219,7 +230,6 @@ describe('custom formats', () => {
     locale.set('en-US')
 
     expect(_.number(123123123, { format: 'usd' })).toContain('$123,123,123.00')
-    expect(_.number(123123123, { format: 'brl' })).toContain('R$123,123,123.00')
 
     expect(_.date(new Date(2019, 0, 1), { format: 'customDate' })).toEqual('2019 AD')
 

test/fixtures/en.json

@@ -1,6 +1,9 @@
 {
   "hi": "hi yo",
   "switch.lang": "Switch language",
+  "page": {
+    "title_home": "Home"
+  },
   "greeting": {
     "ask": "Please type your name",
     "message": "Hello {name}, how are you?"

test/fixtures/partials/en.json

@@ -0,0 +1,5 @@
+{
+  "page": {
+    "title_about": "About"
+  }
+}

yarn.lock

@@ -1623,6 +1623,11 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 define-properties@^1.1.2, define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"