feat: Lingui compiles to typescript files (#942)

Author: semoal

docs/guides/typescript.rst

@@ -53,13 +53,13 @@ In your ``webpack.config.js``, use both ``babel-loader`` and ``ts-loader`` for T
    To supply babel options for the extraction process use :conf:`extractBabelOptions` configuration option.
 
 
-:conf:`compileNamespace` must be set to ``es`` (ES6 default export) in the Lingui config
+:conf:`compileNamespace` must be set to ``ts`` (ES6 default export) in the Lingui config
 otherwise compiled catalogs can't be imported using ES ``import``, but rather CommonJS ``require``:
 
 .. code:: js
 
   {
-    "compileNamespace": "es"
+    "compileNamespace": "ts"
   }
 
 Type definitions

docs/ref/cli.rst

@@ -139,3 +139,8 @@ Prints additional information.
 
 Specify namespace for compiled message catalogs (also see :conf:`compileNamespace` for
 global configuration).
+
+.. lingui-cli-option:: --typescript
+
+Is the same as using :conf:`compileNamespace` with the value "ts".
+Generates a {compiledFile}.d.ts and the compiled file is generated using the extension .ts

docs/ref/conf.rst

@@ -199,6 +199,20 @@ Use ES6 named export:
 
    /* eslint-disable */export const messages = {"..."}
 
+ts
+^^
+
+Use ES6 named export + .ts file with an additional {compiledFile}.d.ts file:
+
+.. code-block:: js
+
+   /* eslint-disable */export const messages = {"..."}
+
+.. code-block:: js
+      import { Messages } from '@lingui/core';
+      declare const messages: Messages;
+      export { messages };
+
 (window|global)\.(.*)
 ^^^^^^^^^^^^^^^^^^^^^
 

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

@@ -10,6 +10,8 @@ exports[`createCompiledCatalog options.namespace should compile with es 1`] = `/
 
 exports[`createCompiledCatalog options.namespace should compile with global 1`] = `/*eslint-disable*/global.test={messages:{}};`;
 
+exports[`createCompiledCatalog options.namespace should compile with ts 1`] = `/*eslint-disable*/export const messages={};`;
+
 exports[`createCompiledCatalog options.namespace should compile with window 1`] = `/*eslint-disable*/window.test={messages:{}};`;
 
 exports[`createCompiledCatalog options.namespace should error with invalid value 1`] = `Invalid namespace param: "global"`;

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

@@ -969,6 +969,25 @@ describe("writeCompiled", function () {
     )
   })
 
+  it("saves TS modules to .ts files", function () {
+    const localeDir = copyFixture(fixture("locales", "initial/"))
+    const catalog = new Catalog(
+      {
+        name: "messages",
+        path: path.join(localeDir, "{locale}", "messages"),
+        include: [],
+        exclude: [],
+      },
+      mockConfig()
+    )
+
+    const namespace = "ts"
+    const compiledCatalog = createCompiledCatalog("en", {}, { namespace })
+    expect(catalog.writeCompiled("en", compiledCatalog, namespace)).toMatch(
+      /\.ts$/
+    )
+  })
+
   it("saves anything else than ES modules to .js files", function () {
     const localeDir = copyFixture(fixture("locales", "initial/"))
     const catalog = new Catalog(

packages/cli/src/api/catalog.ts

@@ -14,6 +14,7 @@ import extract from "./extractors"
 import { prettyOrigin, removeDirectory } from "./utils"
 import { CliExtractOptions } from "../lingui-extract"
 import { CliExtractTemplateOptions } from "../lingui-extract-template"
+import { CompiledCatalogNamespace } from "./compile"
 
 const NAME = "{name}"
 const LOCALE = "{locale}"
@@ -343,9 +344,17 @@ export class Catalog {
     poFormat.write(filename, messages, options)
   }
 
-  writeCompiled(locale: string, compiledCatalog: string, namespace?: string) {
-    const ext = `.${namespace === "es" ? "mjs" : "js"}`
-    const filename = this.path.replace(LOCALE, locale) + ext
+  writeCompiled(locale: string, compiledCatalog: string, namespace?: CompiledCatalogNamespace) {
+    let ext;
+    if (namespace === "es") {
+      ext = "mjs"
+    } else if (namespace === "ts") {
+      ext = "ts"
+    } else {
+      ext = "js"
+    }
+
+    const filename = `${this.path.replace(LOCALE, locale)}.${ext}`
 
     const basedir = path.dirname(filename)
     if (!fs.existsSync(basedir)) {

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

@@ -89,6 +89,10 @@ describe("createCompiledCatalog", () => {
       expect(getCompiledCatalog("es")).toMatchSnapshot()
     })
 
+    it("should compile with ts", () => {
+      expect(getCompiledCatalog("ts")).toMatchSnapshot()
+    })
+
     it("should compile with window", () => {
       expect(getCompiledCatalog("window.test")).toMatchSnapshot()
     })

packages/cli/src/api/compile.ts

@@ -5,7 +5,7 @@ import * as R from "ramda"
 
 import pseudoLocalize from "./pseudoLocalize"
 
-type CompiledCatalogNamespace = "cjs" | "es" | string
+export type CompiledCatalogNamespace = "cjs" | "es" | "ts" | string
 
 type CompiledCatalogType = {
   [msgId: string]: string
@@ -53,7 +53,7 @@ export function createCompiledCatalog(
 }
 
 function buildExportStatement(expression, namespace: CompiledCatalogNamespace) {
-  if (namespace === "es") {
+  if (namespace === "es" || namespace === "ts") {
     // export const messages = { message: "Translation" }
     return t.exportNamedDeclaration(
       t.variableDeclaration("const", [

packages/cli/src/lingui-compile.ts

@@ -82,7 +82,7 @@ function command(config: LinguiConfig, options) {
       if (doMerge) {
         mergedCatalogs = { ...mergedCatalogs, ...messages }
       } else {
-        const namespace = options.namespace || config.compileNamespace
+        const namespace = options.typescript ? "ts" : options.namespace || config.compileNamespace
         const compiledCatalog = createCompiledCatalog(locale, messages, {
           strict: false,
           namespace,
@@ -97,7 +97,7 @@ function command(config: LinguiConfig, options) {
         )
 
         if (options.typescript) {
-          const typescriptPath = compiledPath.replace(/\.jsx?$/, "") + ".d.ts"
+          const typescriptPath = compiledPath.replace(/\.ts?$/, "") + ".d.ts"
           fs.writeFileSync(
             typescriptPath,
             `import { Messages } from '@lingui/core';
@@ -156,7 +156,7 @@ if (require.main === module) {
   const results = command(config, {
     verbose: program.verbose || false,
     allowEmpty: !program.strict,
-    typescript: program.typescript || false,
+    typescript: program.typescript || config.compileNamespace === "ts" || false,
     namespace: program.namespace, // we want this to be undefined if user does not specify so default can be used
   })
 

packages/conf/index.d.ts

@@ -24,7 +24,7 @@ export declare type FallbackLocales = LocaleObject | DefaultLocaleObject
 
 export declare type LinguiConfig = {
     catalogs: CatalogConfig[];
-    compileNamespace: string;
+    compileNamespace: "es" | "cjs" | "ts" | string;
     extractBabelOptions: Record<string, unknown>;
     compilerBabelOptions: GeneratorOptions;
     fallbackLocales: FallbackLocales;
@@ -56,7 +56,7 @@ export declare const configValidation: {
         };
         compilerBabelOptions: GeneratorOptions;
         catalogs: CatalogConfig[];
-        compileNamespace: string;
+        compileNamespace: "es" | "ts" | "cjs" | string;
         fallbackLocales: FallbackLocales;
         format: CatalogFormat;
         formatOptions: CatalogFormatOptions;