Fix: array of object as return value

robisim74 · Mar 6, 2023 · 293b701 · 293b701
1 parent 36dc2b9
commit 293b701
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 13 deletions.
diff --git a/docs/translate.md b/docs/translate.md
@@ -16,14 +16,14 @@ $translate('home.title@@Qwik Speak')
     }
   }
   ```
-- After extraction, it returns the value in json files
+- After extraction, it returns the value in files
 - In prod mod, `$translate` function is replaced by its translation both in server files and in chunks sent to the browser:
   ```jsx
   `Qwik Speak`
   ```
 
 
-## Params
+## Params interpolation
 `$translate` function accept params as well:
 ```jsx
 $translate('home.greeting@@Hi! I am {{name}}', { name: 'Qwik Speak' })
@@ -35,7 +35,7 @@ Hi! I am Qwik Speak
 ```
 
 
-## Arrays and objects
+## Array of keys
 `$translate` function accepts array of keys:
 ```jsx
 $translate(['value1@@Value 1', 'value2@@Value 2'])
@@ -46,7 +46,8 @@ and returns an array of translated values:
 ["Value 1", "Value 2"]
 ```
 
-It can get arrays and objects directly from json files:
+## Arrays and objects as values
+It can get arrays and objects directly from files:
 ```json
 {
   "home": {
@@ -70,15 +71,15 @@ $translate<string[]>('home.array')
 $translate<Translation>('home.obj')
 ```
 
-Finally, it is possible to set arrays and objects directly as the default value:
+Finally, it is possible to set arrays and objects passing a _valid stringified_ default value:
 
 ```jsx
 $translate<string[]>('home.array@@["one","two","three"]')
 $translate<Translation>('home.obj@@{"one":"1","two":"2"}')
 ```
-and access by array position:
+You can also access by array position:
 ```jsx
 $translate('home.array.2@@three')
 ```
 
-> Make sure you are passing a valid stringified array or object as default value
+> To reduce complexity (arrays and objects are _inlined_ during build) it is recommended to use objects with _a depth not greater than 1_. For the same reason, `params` interpolation is not supported when you return an array or an object
diff --git a/src/library/core.ts b/src/library/core.ts
@@ -68,7 +68,7 @@ export const getValue = (
   }
 
   if (defaultValue) {
-    if (!/^[[{](?![[{]).*[\]}]$/.test(defaultValue))
+    if (!/^[[{].*[\]}]$/.test(defaultValue) || /^{{/.test(defaultValue))
       return params ? transpileParams(defaultValue, params) : defaultValue;
     // Default value is an array/object
     return JSON.parse(defaultValue);

diff --git a/src/tests/config.ts b/src/tests/config.ts
@@ -10,7 +10,11 @@ const translationData: Translation = {
       array: ['Test1', 'Test2'],
     },
     one: 'One software developer',
-    other: '{{value}} software developers'
+    other: '{{value}} software developers',
+    arrayObjects: [
+      { one: '1' },
+      { two: '3' }
+    ]
   },
   'it-IT': {
     test: 'Prova'

diff --git a/src/tests/translate.test.ts b/src/tests/translate.test.ts
@@ -47,7 +47,14 @@ describe('translate function', () => {
   });
   test('object', () => {
     const value = t('nested', {}, ctx);
-    expect(value).toEqual({ test: 'Test', array: ['Test1', 'Test2'], });
+    expect(value).toEqual({ test: 'Test', array: ['Test1', 'Test2'] });
+  });
+  test('array of objects', () => {
+    const value = t('arrayObjects', {}, ctx);
+    expect(value).toEqual([
+      { one: '1' },
+      { two: '3' }
+    ]);
   });
   test('translate when locale changes', async () => {
     await changeLocale({

diff --git a/tools/extract/index.ts b/tools/extract/index.ts
@@ -247,7 +247,9 @@ export async function qwikSpeakExtract(options: QwikSpeakExtractOptions) {
     [key, defaultValue] = key.split(resolvedOptions.keyValueSeparator);
 
     // Objects/arrays
-    if (/^[[{](?![[{]).*[\]}]$/.test(defaultValue)) defaultValue = JSON.parse(defaultValue);
+    if (/^[[{].*[\]}]$/.test(defaultValue) && !/^{{/.test(defaultValue)) {
+      defaultValue = JSON.parse(defaultValue);
+    }
 
     for (const lang of resolvedOptions.supportedLangs) {
       deepSet(translation[lang], key.split(resolvedOptions.keySeparator), defaultValue || '');

diff --git a/tools/tests/extract.test.ts b/tools/tests/extract.test.ts
@@ -45,6 +45,12 @@ describe('extract', () => {
       "two",
       "three"
     ],
+    "arrayObjects": [
+      {
+        "one": "1",
+        "two": "2"
+      }
+    ],
     "dates": "Dates & relative time",
     "devs": {
       "one": "",

diff --git a/tools/tests/mock.ts b/tools/tests/mock.ts
@@ -184,9 +184,10 @@ export const Home = component$(() => {
 
   const state = useStore({ count: 0 });
 
-  const tArray = t('home.array@@["one", "two"]');
+  const tArray = t<string[]>('home.array@@["one", "two"]');
   const item = t('home.array.2@@three');
-  const tObject = t('home.obj@@{"one": "1", "two": "2"}');
+  const tObject = t<Translation>('home.obj@@{"one": "1", "two": "2"}');
+  const tArrayObjects = t<Translation[]>('home.arrayObjects@@[{"one": "1", "two": "2"}]');
   
   return (
     <>