feat: config accepts compilerBabelOptions (#906)

* chore: fixed catalogsMergePath warning on configuration

Author: semoal

docs/ref/conf.rst

@@ -20,6 +20,7 @@ Default config:
     }],
     "compileNamespace": "cjs",
     "extractBabelOptions": {},
+    "compilerBabelOptions": {},
     "fallbackLocales": {},
     "format": "po",
     "locales": [],
@@ -230,7 +231,37 @@ extracted. This is required when project doesn't use standard Babel config
      }
    }
 
-.. config:: fallbackLocales
+.. config:: extractBabelOptions
+
+compilerBabelOptions
+-------------------
+
+Default: ``{
+   "minified": true,
+   "jsescOption": {
+      "minimal": true
+   }
+}``
+
+
+Specify extra babel options used to generate files when messages are being
+compiled. We use internaly ``@babel/generator`` that accepts some configuration for generating code with/out ASCII characters.
+These are all the options available: https://github.com/mathiasbynens/jsesc
+
+.. code-block:: json
+
+   {
+     "compilerBabelOptions": {
+       "jsescOption": {
+         "minimal": false
+      }
+     }
+   }
+
+This example configuration will compile with scaped ASCII characters. https://github.com/mathiasbynens/jsesc#minimal
+
+.. config:: compilerBabelOptions
+
 
 fallbackLocales
 --------------

examples/create-react-app/package.json

@@ -20,6 +20,7 @@
     "start": "yarn extract && yarn compile && react-scripts start",
     "build": "yarn extract && yarn compile && react-scripts build",
     "test": "react-scripts test",
+    "test:ci": "yarn extract && yarn compile && react-scripts test --watchAll=false",
     "eject": "react-scripts eject",
     "extract": "lingui extract",
     "compile": "lingui compile"

packages/cli/src/api/__snapshots__/compile.test.ts.snap

@@ -2,6 +2,10 @@
 
 exports[`compile should report failed message on error 1`] = `Can't parse message. Please check correct syntax: "{value, plural, one {Book} other {Books"`;
 
+exports[`createCompiledCatalog options.compilerBabelOptions by default should return catalog without ASCII chars 1`] = `/*eslint-disable*/module.exports={messages:{"Hello":"Alohà"}};`;
+
+exports[`createCompiledCatalog options.compilerBabelOptions should return catalog without ASCII chars 1`] = `/*eslint-disable*/module.exports={messages:{"Hello":"Aloh\\xE0"}};`;
+
 exports[`createCompiledCatalog options.namespace should compile with es 1`] = `/*eslint-disable*/export const messages={};`;
 
 exports[`createCompiledCatalog options.namespace should compile with global 1`] = `/*eslint-disable*/global.test={messages:{}};`;
@@ -10,7 +14,7 @@ exports[`createCompiledCatalog options.namespace should compile with window 1`]
 
 exports[`createCompiledCatalog options.namespace should error with invalid value 1`] = `Invalid namespace param: "global"`;
 
-exports[`createCompiledCatalog options.pseudoLocale should return catalog with pseudolocalized messages 1`] = `/*eslint-disable*/module.exports={messages:{"Hello":"\\xC0\\u0125\\u014D\\u0134"}};`;
+exports[`createCompiledCatalog options.pseudoLocale should return catalog with pseudolocalized messages 1`] = `/*eslint-disable*/module.exports={messages:{"Hello":"ÀĥōĴ"}};`;
 
 exports[`createCompiledCatalog options.pseudoLocale should return compiled catalog when pseudoLocale doesn't match current locale 1`] = `/*eslint-disable*/module.exports={messages:{"Hello":"Ahoj"}};`;
 

packages/cli/src/api/compile.test.ts

@@ -1,14 +1,14 @@
 import generate from "@babel/generator"
 import { compile, createCompiledCatalog } from "./compile"
 
-describe("compile", function () {
+describe("compile", () => {
   const getSource = (message) =>
     generate(compile(message) as any, {
       compact: true,
       minified: true,
     }).code
 
-  it("should optimize string only messages", function () {
+  it("should optimize string only messages", () => {
     expect(getSource("Hello World")).toEqual('"Hello World"')
   })
 
@@ -17,21 +17,21 @@ describe("compile", function () {
     expect(getSource("''")).toEqual('"\'"')
   })
 
-  it("should compile arguments", function () {
+  it("should compile arguments", () => {
     expect(getSource("{name}")).toEqual('[["name"]]')
 
     expect(getSource("B4 {name} A4")).toEqual('["B4 ",["name"]," A4"]')
   })
 
-  it("should compile arguments with formats", function () {
+  it("should compile arguments with formats", () => {
     expect(getSource("{name, number}")).toEqual('[["name","number"]]')
 
     expect(getSource("{name, number, percent}")).toEqual(
       '[["name","number","percent"]]'
     )
   })
 
-  it("should compile plural", function () {
+  it("should compile plural", () => {
     expect(getSource("{name, plural, one {Book} other {Books}}")).toEqual(
       '[["name","plural",{one:"Book",other:"Books"}]]'
     )
@@ -53,7 +53,7 @@ describe("compile", function () {
     )
   })
 
-  it("should compile select", function () {
+  it("should compile select", () => {
     expect(getSource("{name, select, male {He} female {She}}")).toEqual(
       '[["name","select",{male:"He",female:"She"}]]'
     )
@@ -67,15 +67,15 @@ describe("compile", function () {
     )
   })
 
-  it("should report failed message on error", function () {
+  it("should report failed message on error", () => {
     expect(() =>
       getSource("{value, plural, one {Book} other {Books")
     ).toThrowErrorMatchingSnapshot()
   })
 })
 
-describe("createCompiledCatalog", function () {
-  describe("options.namespace", function () {
+describe("createCompiledCatalog", () => {
+  describe("options.namespace", () => {
     const getCompiledCatalog = (namespace) =>
       createCompiledCatalog(
         "fr",
@@ -85,24 +85,24 @@ describe("createCompiledCatalog", function () {
         }
       )
 
-    it("should compile with es", function () {
+    it("should compile with es", () => {
       expect(getCompiledCatalog("es")).toMatchSnapshot()
     })
 
-    it("should compile with window", function () {
+    it("should compile with window", () => {
       expect(getCompiledCatalog("window.test")).toMatchSnapshot()
     })
 
-    it("should compile with global", function () {
+    it("should compile with global", () => {
       expect(getCompiledCatalog("global.test")).toMatchSnapshot()
     })
 
-    it("should error with invalid value", function () {
+    it("should error with invalid value", () => {
       expect(() => getCompiledCatalog("global")).toThrowErrorMatchingSnapshot()
     })
   })
 
-  describe("options.strict", function () {
+  describe("options.strict", () => {
     const getCompiledCatalog = (strict) =>
       createCompiledCatalog(
         "cs",
@@ -115,16 +115,16 @@ describe("createCompiledCatalog", function () {
         }
       )
 
-    it("should return message key as a fallback translation", function () {
+    it("should return message key as a fallback translation", () => {
       expect(getCompiledCatalog(false)).toMatchSnapshot()
     })
 
-    it("should't return message key as a fallback in strict mode", function () {
+    it("should't return message key as a fallback in strict mode", () => {
       expect(getCompiledCatalog(true)).toMatchSnapshot()
     })
   })
 
-  describe("options.pseudoLocale", function () {
+  describe("options.pseudoLocale", () => {
     const getCompiledCatalog = (pseudoLocale) =>
       createCompiledCatalog(
         "ps",
@@ -136,12 +136,37 @@ describe("createCompiledCatalog", function () {
         }
       )
 
-    it("should return catalog with pseudolocalized messages", function () {
+    it("should return catalog with pseudolocalized messages", () => {
       expect(getCompiledCatalog("ps")).toMatchSnapshot()
     })
 
-    it("should return compiled catalog when pseudoLocale doesn't match current locale", function () {
+    it("should return compiled catalog when pseudoLocale doesn't match current locale", () => {
       expect(getCompiledCatalog("en")).toMatchSnapshot()
     })
   })
+
+  describe("options.compilerBabelOptions", () => {
+    const getCompiledCatalog = (opts = {}) =>
+      createCompiledCatalog(
+        "ru",
+        {
+          Hello: "Alohà",
+        },
+        opts
+      )
+
+    it("by default should return catalog without ASCII chars", () => {
+      expect(getCompiledCatalog()).toMatchSnapshot()
+    })
+
+    it("should return catalog without ASCII chars", () => {
+      expect(getCompiledCatalog({
+        compilerBabelOptions: { 
+          jsescOption: {
+            minimal: false,
+          }
+        }
+      })).toMatchSnapshot()
+    })
+  })
 })

packages/cli/src/api/compile.ts

@@ -15,14 +15,15 @@ export type CreateCompileCatalogOptions = {
   strict?: boolean
   namespace?: CompiledCatalogNamespace
   pseudoLocale?: string
+  compilerBabelOptions?: Record<string, unknown>
 }
 
 export function createCompiledCatalog(
   locale: string,
   messages: CompiledCatalogType,
   options: CreateCompileCatalogOptions
 ) {
-  const { strict = false, namespace = "cjs", pseudoLocale } = options
+  const { strict = false, namespace = "cjs", pseudoLocale, compilerBabelOptions = {} } = options
   const compiledMessages = R.keys(messages).map((key: string) => {
     // Don't use `key` as a fallback translation in strict mode.
     let translation = messages[key] || (!strict ? key : "")
@@ -41,8 +42,12 @@ export function createCompiledCatalog(
 
   return (
     "/*eslint-disable*/" +
-    generate(ast as any, {
+    generate(ast, {
       minified: true,
+      jsescOption: {
+        minimal: true,
+      },
+      ...compilerBabelOptions,
     }).code
   )
 }

packages/cli/src/lingui-compile.ts

@@ -4,7 +4,7 @@ import * as R from "ramda"
 import program from "commander"
 import * as plurals from "make-plural"
 
-import { getConfig } from "@lingui/conf"
+import { getConfig, LinguiConfig } from "@lingui/conf"
 
 import { getCatalogs } from "./api/catalog"
 import { createCompiledCatalog } from "./api/compile"
@@ -16,7 +16,7 @@ const noMessages: (catalogs: Object[]) => boolean = R.pipe(
   R.all(R.equals<any>(true))
 )
 
-function command(config, options) {
+function command(config: LinguiConfig, options) {
   const catalogs = getCatalogs(config)
 
   if (noMessages(catalogs)) {
@@ -87,6 +87,7 @@ function command(config, options) {
           strict: false,
           namespace,
           pseudoLocale: config.pseudoLocale,
+          compilerBabelOptions: config.compilerBabelOptions,
         })
 
         const compiledPath = catalog.writeCompiled(

packages/conf/index.d.ts

@@ -23,14 +23,15 @@ export declare type FallbackLocales = LocaleObject | DefaultLocaleObject
 export declare type LinguiConfig = {
     catalogs: CatalogConfig[];
     compileNamespace: string;
-    extractBabelOptions: Object;
+    extractBabelOptions: Record<string, unknown>;
+    compilerBabelOptions: Record<string, unknown>;
     fallbackLocales: FallbackLocales;
     format: CatalogFormat;
     prevFormat: CatalogFormat;
     formatOptions: CatalogFormatOptions;
     localeDir: string;
     locales: string[];
-    catalogsMergePath?: string;
+    catalogsMergePath: string;
     orderBy: OrderBy;
     pseudoLocale: string;
     rootDir: string;
@@ -51,6 +52,7 @@ export declare const configValidation: {
             plugins: string[];
             presets: string[];
         };
+        compilerBabelOptions: Record<string, unknown>;
         catalogs: CatalogConfig[];
         compileNamespace: string;
         fallbackLocales: FallbackLocales;

packages/conf/src/__snapshots__/index.test.ts.snap

@@ -108,7 +108,9 @@ Object {
       path: ./locale/{locale}/messages,
     },
   ],
+  catalogsMergePath: ,
   compileNamespace: cjs,
+  compilerBabelOptions: Object {},
   extractBabelOptions: Object {
     plugins: Array [],
     presets: Array [],

packages/conf/src/index.ts

@@ -32,12 +32,13 @@ type ModuleSource = [string, string?];
 export type LinguiConfig = {
   catalogs: CatalogConfig[]
   compileNamespace: string
-  extractBabelOptions: Object
+  extractBabelOptions: Record<string, unknown>
+  compilerBabelOptions: Record<string, unknown>
   fallbackLocales?: FallbackLocales
   format: CatalogFormat
   formatOptions: CatalogFormatOptions
   locales: string[]
-  catalogsMergePath?: string
+  catalogsMergePath: string
   orderBy: OrderBy
   pseudoLocale: string
   rootDir: string
@@ -62,7 +63,9 @@ export const defaultConfig: LinguiConfig = {
       exclude: ["*/node_modules/*"],
     },
   ],
+  catalogsMergePath: "",
   compileNamespace: "cjs",
+  compilerBabelOptions: {},
   extractBabelOptions: { plugins: [], presets: [] },
   fallbackLocales: {},
   format: "po",

scripts/verdaccio-integration.js

@@ -18,7 +18,7 @@ async function main() {
 
   spinner.start("Running tests")
   try {
-    await exec('yarn test --watchAll=false', OPTS)
+    await exec('yarn test:ci', OPTS)
     spinner.succeed()
   } catch (error) {
     spinner.fail()