feat: 🎸 Support getting deep localized objects/arrays

.eslintrc

@@ -6,5 +6,15 @@
   },
   "rules": {
     "@typescript-eslint/no-explicit-any": "off"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["test/**/*"],
+      "rules": {
+        "global-require": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "@typescript-eslint/no-require-imports": "off"
+      }
+    }
+  ]
 }

.nvmrc

@@ -1 +1 @@
-13.2.0
+12.0.0

docs/Getting Started.md

@@ -103,7 +103,7 @@ init({
 // starts loading 'en-US' and 'en'
 ```
 
-_Note_: Make sure to call your `i18n.js` file on your app's entrypoint. If you're using Sapper, remember to also call `init()` on your server-side code (`server.js`).
+_Note_: Make sure to call your `i18n.js` file on your app's entry-point. If you're using Sapper, remember to also call `init()` on your server-side code (`server.js`).
 
 Since we're using `register`, and not `addMessages`, we need to wait for it's loaders to finish before rendering your app.
 

package.json

@@ -29,8 +29,8 @@
     "test": "jest",
     "test:ci": "jest --silent",
     "test:watch": "jest --verbose --watchAll",
-    "lint": "eslint \"src/**/*.ts\"",
-    "format": "prettier --loglevel silent --write \"src/**/*.ts\"",
+    "lint": "eslint \"{src,test}/**/*.ts\"",
+    "format": "prettier --loglevel silent --write \"{src,test}/**/*.ts\"",
     "release": " git add package.json && git commit -m \"chore(release): v$npm_package_version :tada:\"",
     "pretest": "npm run build",
     "prebuild": "yarn clean",
@@ -77,6 +77,7 @@
     "@babel/preset-env": "^7.11.5",
     "@kiwi/eslint-config": "^1.2.0",
     "@kiwi/prettier-config": "^1.1.0",
+    "@types/dlv": "^1.1.2",
     "@types/estree": "0.0.45",
     "@types/intl": "^1.2.0",
     "@types/jest": "^26.0.14",
@@ -102,6 +103,8 @@
   },
   "dependencies": {
     "commander": "^4.0.1",
+    "deepmerge": "^4.2.2",
+    "dlv": "^1.1.3",
     "estree-walker": "^0.9.0",
     "intl-messageformat": "^7.5.2",
     "tiny-glob": "^0.2.6"

src/cli/extract.ts

@@ -10,8 +10,8 @@ import {
 import { walk } from 'estree-walker';
 import { Ast } from 'svelte/types/compiler/interfaces';
 import { parse } from 'svelte/compiler';
+import dlv from 'dlv';
 
-import { deepGet } from './includes/deepGet';
 import { deepSet } from './includes/deepSet';
 import { getObjFromExpression } from './includes/getObjFromExpression';
 import { Message } from './types';
@@ -191,7 +191,7 @@ export function extractMessages(
     } else {
       if (
         overwrite === false &&
-        typeof deepGet(accumulator, message.meta.id) !== 'undefined'
+        typeof dlv(accumulator, message.meta.id) !== 'undefined'
       ) {
         return;
       }

src/runtime/stores/dictionary.ts

@@ -1,11 +1,12 @@
 import { writable, derived } from 'svelte/store';
+import deepmerge from 'deepmerge';
+import dlv from 'dlv';
 
-import { LocaleDictionary, DeepDictionary, Dictionary } from '../types/index';
-import { flatObj } from '../includes/flatObj';
+import { LocaleDictionary, LocalesDictionary } from '../types/index';
 import { getFallbackOf } from './locale';
 
-let dictionary: Dictionary;
-const $dictionary = writable<Dictionary>({});
+let dictionary: LocalesDictionary;
+const $dictionary = writable<LocalesDictionary>({});
 
 export function getLocaleDictionary(locale: string) {
   return (dictionary[locale] as LocaleDictionary) || null;
@@ -20,15 +21,15 @@ export function hasLocaleDictionary(locale: string) {
 }
 
 export function getMessageFromDictionary(locale: string, id: string) {
-  if (hasLocaleDictionary(locale)) {
-    const localeDictionary = getLocaleDictionary(locale);
-
-    if (id in localeDictionary) {
-      return localeDictionary[id];
-    }
+  if (!hasLocaleDictionary(locale)) {
+    return null;
   }
 
-  return null;
+  const localeDictionary = getLocaleDictionary(locale);
+
+  const match = dlv(localeDictionary, id);
+
+  return match;
 }
 
 export function getClosestAvailableLocale(locale: string): string | null {
@@ -37,11 +38,9 @@ export function getClosestAvailableLocale(locale: string): string | null {
   return getClosestAvailableLocale(getFallbackOf(locale));
 }
 
-export function addMessages(locale: string, ...partials: DeepDictionary[]) {
-  const flattedPartials = partials.map((partial) => flatObj(partial));
-
+export function addMessages(locale: string, ...partials: LocaleDictionary[]) {
   $dictionary.update((d) => {
-    d[locale] = Object.assign(d[locale] || {}, ...flattedPartials);
+    d[locale] = deepmerge.all<LocaleDictionary>([d[locale] || {}, ...partials]);
 
     return d;
   });

src/runtime/types/index.ts

@@ -1,10 +1,11 @@
 import { Formats } from 'intl-messageformat';
 
-export interface DeepDictionary {
-  [key: string]: DeepDictionary | string | string[];
+export interface LocaleDictionary {
+  [key: string]: LocaleDictionary | LocaleDictionary[] | string | string[];
 }
-export type LocaleDictionary = Record<string, string>;
-export type Dictionary = Record<string, LocaleDictionary>;
+export type LocalesDictionary = {
+  [key: string]: LocaleDictionary;
+};
 
 export interface MessageObject {
   id?: string;

test/runtime/configs.test.ts

@@ -1,46 +1,46 @@
-import { get } from 'svelte/store'
+import { get } from 'svelte/store';
 
 import {
   init,
   getOptions,
   defaultOptions,
   defaultFormats,
-} from '../../src/runtime/configs'
-import { $locale } from '../../src/runtime/stores/locale'
+} from '../../src/runtime/configs';
+import { $locale } from '../../src/runtime/stores/locale';
 
 beforeEach(() => {
-  init(defaultOptions)
-})
+  init(defaultOptions);
+});
 
 test('inits the fallback locale', () => {
-  expect(getOptions().fallbackLocale).toBe(null)
+  expect(getOptions().fallbackLocale).toBeNull();
   init({
     fallbackLocale: 'en',
-  })
-  expect(getOptions().fallbackLocale).toBe('en')
-})
+  });
+  expect(getOptions().fallbackLocale).toBe('en');
+});
 
 test('inits the initial locale by string', () => {
   init({
     fallbackLocale: 'pt',
     initialLocale: 'en',
-  })
-  expect(getOptions().initialLocale).toBe('en')
-  expect(get($locale)).toBe('en')
-})
+  });
+  expect(getOptions().initialLocale).toBe('en');
+  expect(get($locale)).toBe('en');
+});
 
 test('adds custom formats for time, date and number values', () => {
-  const customFormats = require('../fixtures/formats.json')
+  const customFormats = require('../fixtures/formats.json');
 
   init({
     fallbackLocale: 'en',
     formats: customFormats,
-  })
-  expect(getOptions().formats).toMatchObject(defaultFormats)
-  expect(getOptions().formats).toMatchObject(customFormats)
-})
+  });
+  expect(getOptions().formats).toMatchObject(defaultFormats);
+  expect(getOptions().formats).toMatchObject(customFormats);
+});
 
 test('sets the minimum delay to set the loading store value', () => {
-  init({ fallbackLocale: 'en', loadingDelay: 300 })
-  expect(getOptions().loadingDelay).toBe(300)
-})
+  init({ fallbackLocale: 'en', loadingDelay: 300 });
+  expect(getOptions().loadingDelay).toBe(300);
+});