fix: remoteLoader parse complex structures failed #1087

Author: Sergio Moreno

packages/remote-loader/package.json

@@ -38,6 +38,7 @@
     "esm/"
   ],
   "dependencies": {
+    "json5": "^2.2.0",
     "@babel/generator": "^7.14.5",
     "@babel/types": "^7.14.5",
     "messageformat-parser": "^4.1.3",

packages/remote-loader/src/browserCompiler.ts

@@ -1,5 +1,6 @@
 import * as R from "ramda"
 import * as t from "@babel/types"
+import JSON5 from "json5"
 import generate from "@babel/generator"
 import { parse } from "messageformat-parser"
 
@@ -11,14 +12,14 @@ export function createBrowserCompiledCatalog(messages: Record<string, any>) {
   })
 
   const ast = t.objectExpression(compiledMessages)
-  const code = generate(ast as any, {
+  const code =  generate(ast as any, {
     minified: true,
     jsescOption: {
       minimal: true,
     }
   }).code
 
-  return JSON.parse(code)
+  return JSON5.parse(code)
 }
 
 /**

packages/remote-loader/test/index.test.ts

@@ -5,9 +5,19 @@ describe("remote-loader", () => {
   it("should compile correctly JSON messages coming from the fly", async () => {
     const unlink = createConfig("minimal")
     const messages = await simulatedJsonResponse()
-    const remoteMessages = remoteLoader({ format: "minimal", messages})
+    const remoteMessages = remoteLoader({ format: "minimal", messages })
     expect(remoteMessages).toMatchInlineSnapshot(`
       Object {
+        customKey: Array [
+          Array [
+            someVariable,
+            select,
+            Object {
+              other: SomeOtherText,
+              someVarValue: SomeTextHere,
+            },
+          ],
+        ],
         property.key: value,
         {0} Deposited: Array [
           Array [
@@ -36,6 +46,16 @@ describe("remote-loader", () => {
       expect(remoteLoader({ format: "minimal", messages, fallbackMessages }))
         .toMatchInlineSnapshot(`
         Object {
+          customKey: Array [
+            Array [
+              someVariable,
+              select,
+              Object {
+                other: SomeOtherText,
+                someVarValue: SomeTextHere,
+              },
+            ],
+          ],
           property.key: value,
           {0} Deposited: Array [
             Array [
@@ -62,11 +82,12 @@ function simulatedJsonResponse(nully?: boolean) {
       "property.key": nully ? "" : "value",
       "{0} Deposited": "{0} Deposited",
       "{0} Strategy": "{0} Strategy",
+      customKey:
+        "{someVariable, select, someVarValue {SomeTextHere} other {SomeOtherText}}",
     })
   })
 }
 
-
 function createConfig(format: string) {
   const filename = `${process.cwd()}/.linguirc`
   const config = `

yarn.lock

@@ -8521,6 +8521,13 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+json5@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
+  integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
+  dependencies:
+    minimist "^1.2.5"
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"