fix: remoteLoader pure functional on browser env (#1085)

semoal · web-flow · commit 85856acfa6b1 · 2021-06-14T19:54:43.000+02:00
diff --git a/package.json b/package.json
@@ -122,6 +122,10 @@
     {
       "path": "./packages/react/build/cjs/react.production.min.js",
       "limit": "5 kB"
+    },
+    {
+      "path": "./packages/remote-loader/build/cjs/remote-loader.production.min.js",
+      "limit": "5 kB"
     }
   ]
 }
diff --git a/packages/loader/index.d.ts b/packages/loader/index.d.ts
@@ -1,3 +0,0 @@
-declare type RemoteLoaderMessages<T> = string | Record<string, any> | T;
-export declare function remoteLoader<T>(locale: string, messages: RemoteLoaderMessages<T>, fallbackMessages?: RemoteLoaderMessages<T>): any;
-export {};
diff --git a/packages/loader/index.js b/packages/loader/index.js
@@ -1,2 +1 @@
-export { default } from "./src"
-export { remoteLoader } from "./src/remoteLoader"
+export { default } from "./src"
diff --git a/packages/loader/src/index.ts b/packages/loader/src/index.ts
@@ -1,2 +1,8 @@
 export { default } from "./webpackLoader"
-export { remoteLoader } from "./remoteLoader"
+
+export function remoteLoader() {
+  console.error(`
+    DEPRECATED: { remoteLoader } from "@lingui/loader"
+    Use instead: { remoteLoader } from "@lingui/remote-loader"
+  `);
+}
diff --git a/packages/loader/src/remoteLoader.ts b/packages/loader/src/remoteLoader.ts
diff --git a/packages/remote-loader/CHANGELOG.md b/packages/remote-loader/CHANGELOG.md
@@ -0,0 +1,5 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
diff --git a/packages/remote-loader/README.md b/packages/remote-loader/README.md
@@ -0,0 +1,5 @@
+[![License][badge-license]][license]
+[![Version][badge-version]][package]
+[![Downloads][badge-downloads]][package]
+
+# @lingui/remote-loader
diff --git a/packages/remote-loader/index.js b/packages/remote-loader/index.js
@@ -0,0 +1 @@
+export * from "./src"
diff --git a/packages/remote-loader/npm/index.js b/packages/remote-loader/npm/index.js
@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./cjs/remote-loader.production.min.js")
+} else {
+  module.exports = require("./cjs/remote-loader.development.js")
+}
diff --git a/packages/remote-loader/package.json b/packages/remote-loader/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@lingui/remote-loader",
+  "version": "3.10.2",
+  "description": "Load remotely your translations",
+  "main": "index.js",
+  "module": "esm/remote-loader.production.min.js",
+  "types": "cjs/index.d.ts",
+  "author": {
+    "name": "Sergio Moreno",
+    "email": "sergiomorenoalbert@gmail.com"
+  },
+  "license": "MIT",
+  "keywords": [
+    "remotely",
+    "component",
+    "i18n",
+    "internationalization",
+    "i9n",
+    "translation",
+    "icu",
+    "messageformat"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lingui/js-lingui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/lingui/js-lingui/issues"
+  },
+  "engines": {
+    "node": ">=10.0.0"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "cjs/",
+    "esm/"
+  ],
+  "peerDependencies": {},
+  "dependencies": {
+    "ramda": "^0.27.1",
+    "@babel/generator": "^7.14.5",
+    "@babel/types": "^7.14.5",
+    "messageformat-parser": "^4.1.3"
+  },
+  "devDependencies": {}
+}
diff --git a/packages/remote-loader/src/browserCompiler.ts b/packages/remote-loader/src/browserCompiler.ts
@@ -0,0 +1,111 @@
+import * as R from "ramda"
+import * as t from "@babel/types"
+import generate from "@babel/generator"
+import { parse } from "messageformat-parser"
+
+export function createBrowserCompiledCatalog(messages: Record<string, any>) {
+  const compiledMessages = R.keys(messages).map((key) => {
+    let translation = messages[key] || key
+
+    return t.objectProperty(t.stringLiteral(key.toString()), compile(translation))
+  })
+
+  const ast = t.objectExpression(compiledMessages)
+  const code = generate(ast as any, {
+    minified: true,
+    jsescOption: {
+      minimal: true,
+    }
+  }).code
+
+  return JSON.parse(code)
+}
+
+/**
+ * Compile string message into AST tree. Message format is parsed/compiled into
+ * JS arrays, which are handled in client.
+ */
+export function compile(message: string) {
+  let tokens: any
+
+  try {
+    tokens = parse(message)
+  } catch (e) {
+    throw new Error(
+      `Can't parse message. Please check correct syntax: "${message}" \n \n Messageformat-parser trace: ${e.message}`,
+    )
+  }
+  const ast = processTokens(tokens)
+
+  if (isString(ast)) return t.stringLiteral(ast)
+
+  return ast
+}
+
+function processTokens(tokens: any) {
+  // Shortcut - if the message doesn't include any formatting,
+  // simply join all string chunks into one message
+  if (!tokens.filter((token: any) => !isString(token)).length) {
+    return tokens.join("")
+  }
+
+  return t.arrayExpression(
+    tokens.map((token: any) => {
+      if (isString(token)) {
+        return t.stringLiteral(token)
+
+        // # in plural case
+      } else if (token.type === "octothorpe") {
+        return t.stringLiteral("#")
+
+        // simple argument
+      } else if (token.type === "argument") {
+        return t.arrayExpression([t.stringLiteral(token.arg)])
+
+        // argument with custom format (date, number)
+      } else if (token.type === "function") {
+        const params = [t.stringLiteral(token.arg), t.stringLiteral(token.key)]
+
+        const format = token.param && token.param.tokens[0]
+        if (format) {
+          params.push(t.stringLiteral(format.trim()))
+        }
+        return t.arrayExpression(params)
+      }
+
+      // complex argument with cases
+      const formatProps = []
+
+      if (token.offset) {
+        formatProps.push(
+          t.objectProperty(
+            t.identifier("offset"),
+            t.numericLiteral(parseInt(token.offset))
+          )
+        )
+      }
+
+      token.cases.forEach((item: any) => {
+        const inlineTokens = processTokens(item.tokens)
+        formatProps.push(
+          t.objectProperty(
+            t.identifier(item.key),
+            isString(inlineTokens)
+              ? t.stringLiteral(inlineTokens)
+              : inlineTokens
+          )
+        )
+      })
+
+      const params = [
+        t.stringLiteral(token.arg),
+        t.stringLiteral(token.type),
+        t.objectExpression(formatProps),
+      ]
+
+      return t.arrayExpression(params)
+    })
+  )
+}
+
+const isString = (s: any) => typeof s === "string"
diff --git a/packages/remote-loader/src/index.ts b/packages/remote-loader/src/index.ts
@@ -0,0 +1,46 @@
+import * as R from "ramda"
+import { createBrowserCompiledCatalog } from "./browserCompiler"
+import PARSERS from "./minimalParser"
+
+type RemoteLoaderOpts<T> = {
+  format?: "minimal"
+  fallbackMessages?: string | Record<string, any> | T
+  messages: string | Record<string, any> | T
+}
+
+function remoteLoader<T>({ format = "minimal", fallbackMessages, messages}: RemoteLoaderOpts<T>) {
+  let parsedMessages: any;
+  let parsedFallbackMessages: any;
+
+  if (format) {
+    const formatter = PARSERS[format]
+    if (fallbackMessages) {
+      // we do this because, people could just import the fallback and import the ./en/messages.js
+      // generated by lingui and the use case of format .po but fallback as .json module could be perfectly valid
+      parsedFallbackMessages = typeof fallbackMessages === "object" ? PARSERS.minimal(fallbackMessages) : formatter(fallbackMessages)
+    }
+
+    parsedMessages = formatter(messages)
+  } else {
+    throw new Error(`
+        *format* value in the Lingui configuration is required to make this loader 100% functional
+        Read more about this here: https://lingui.js.org/ref/conf.html#format
+      `)
+  }
+
+  const mapTranslationsToInterporlatedString = R.mapObjIndexed(
+    (_, key) => {
+      // if there's fallback and translation is empty, return the fallback
+      if (parsedMessages[key].translation === "" && parsedFallbackMessages?.[key]?.translation) {
+        return parsedFallbackMessages[key].translation
+      }
+
+      return parsedMessages[key].translation
+    },
+    parsedMessages,
+  )
+
+  return createBrowserCompiledCatalog(mapTranslationsToInterporlatedString)
+}
+
+export { remoteLoader }
diff --git a/packages/remote-loader/src/minimalParser.ts b/packages/remote-loader/src/minimalParser.ts
@@ -0,0 +1,16 @@
+import * as R from "ramda"
+
+const deserialize = (R.map((translation: string) => ({
+  translation,
+  obsolete: false,
+  message: null,
+  origin: [],
+})) as unknown) as (minimalCatalog: any) => any
+
+const PARSERS = {
+  minimal: <T>(content: Record<string, any> | T) => {
+    return deserialize(content)
+  }
+}
+
+export default PARSERS
diff --git a/packages/remote-loader/test/index.test.ts b/packages/remote-loader/test/index.test.ts
diff --git a/scripts/build/bundles.js b/scripts/build/bundles.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -122,6 +122,10 @@`
`122`	`122`	`{`
`123`	`123`	`"path": "./packages/react/build/cjs/react.production.min.js",`
`124`	`124`	`"limit": "5 kB"`
	`125`	`+ },`
	`126`	`+ {`
	`127`	`+ "path": "./packages/remote-loader/build/cjs/remote-loader.production.min.js",`
	`128`	`+ "limit": "5 kB"`
`125`	`129`	`}`
`126`	`130`	`]`
`127`	`131`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +0,0 @@`
`1`		`-declare type RemoteLoaderMessages<T> = string \| Record<string, any> \| T;`
`2`		`-export declare function remoteLoader<T>(locale: string, messages: RemoteLoaderMessages<T>, fallbackMessages?: RemoteLoaderMessages<T>): any;`
`3`		`-export {};`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`		`-export { default } from "./src"`
`2`		`-export { remoteLoader } from "./src/remoteLoader"`
	`1`	`+export { default } from "./src"`