@lingui/macro 3.17.1 → 4.0.0-next.0

package/build/global.d.ts

@@ -1,3 +1,5 @@
+// read more about this file here
+// https://github.com/lingui/js-lingui/issues/936
 // @ts-ignore
 declare module "@lingui/macro" {
   import type { MessageDescriptor, I18n } from "@lingui/core"

package/build/index.d.ts

@@ -1,16 +1,36 @@
-import type { ReactElement, ComponentType, ReactNode } from "react"
-import type { MessageDescriptor, I18n } from "@lingui/core"
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { ReactElement, ReactNode, VFC, FC } from "react"
+import type { I18n, MessageDescriptor } from "@lingui/core"
 import type { TransRenderProps } from "@lingui/react"
 
-export type UnderscoreDigit<T = string> = { [digit: string]: T }
-export type ChoiceOptions<T = string> = {
+export type ChoiceOptions = {
+  /** Offset of value when calculating plural forms */
   offset?: number
-  zero?: T
-  one?: T
-  few?: T
-  many?: T
-  other?: T
-} & UnderscoreDigit<T>
+  zero?: string
+  one?: string
+  two?: string
+  few?: string
+  many?: string
+
+  /** Catch-all option */
+  other?: string
+  /** Exact match form, corresponds to =N rule */
+  [digit: `${number}`]: string
+}
+
+type MacroMessageDescriptor = (
+  | {
+      id: string
+      message?: string
+    }
+  | {
+      id?: string
+      message: string
+    }
+) & {
+  comment?: string
+  context?: string
+}
 
 /**
  * Translates a message descriptor
@@ -36,7 +56,7 @@ export type ChoiceOptions<T = string> = {
  *
  * @param descriptor The message descriptor to translate
  */
-export function t(descriptor: MessageDescriptor): string
+export function t(descriptor: MacroMessageDescriptor): string
 
 /**
  * Translates a template string using the global I18n instance
@@ -79,7 +99,7 @@ export function t(
  */
 export function t(i18n: I18n): {
   (literals: TemplateStringsArray, ...placeholders: any[]): string
-  (descriptor: MessageDescriptor): string
+  (descriptor: MacroMessageDescriptor): string
 }
 
 /**
@@ -124,6 +144,12 @@ export function selectOrdinal(
   options: ChoiceOptions
 ): string
 
+type SelectOptions = {
+  /** Catch-all option */
+  other: string
+  [matches: string]: string
+}
+
 /**
  * Selects a translation based on a value
  *
@@ -144,7 +170,7 @@ export function selectOrdinal(
  * @param value The key of choices to use
  * @param choices
  */
-export function select(value: string, choices: ChoiceOptions): string
+export function select(value: string, choices: SelectOptions): string
 
 /**
  * Define a message for later use
@@ -163,46 +189,109 @@ export function select(value: string, choices: ChoiceOptions): string
  *
  * @param descriptor The message descriptor
  */
-export function defineMessage(descriptor: MessageDescriptor): MessageDescriptor
+export function defineMessage(
+  descriptor: MacroMessageDescriptor
+): MessageDescriptor
 
-export type TransProps = {
+type CommonProps = {
   id?: string
   comment?: string
-  values?: Record<string, unknown>
   context?: string
-  children?: React.ReactNode
-  component?: React.ComponentType<TransRenderProps>
   render?: (props: TransRenderProps) => ReactElement<any, any> | null
   i18n?: I18n
 }
 
-export type ChoiceProps = {
-  value?: string | number
-} & TransProps &
-  ChoiceOptions<ReactNode>
+type TransProps = {
+  children: ReactNode
+} & CommonProps
+
+type PluralChoiceProps = {
+  value: string | number
+  /** Offset of value when calculating plural forms */
+  offset?: number
+  zero?: ReactNode
+  one?: ReactNode
+  two?: ReactNode
+  few?: ReactNode
+  many?: ReactNode
+
+  /** Catch-all option */
+  other: ReactNode
+  /** Exact match form, corresponds to =N rule */
+  [digit: `_${number}`]: ReactNode
+} & CommonProps
+
+type SelectChoiceProps = {
+  value: string
+  /** Catch-all option */
+  other: ReactNode
+  [option: `_${string}`]: ReactNode
+} & CommonProps
 
 /**
- * The types should be changed after this PR is merged
- * https://github.com/Microsoft/TypeScript/pull/26797
- *
- * then we should be able to specify that key of values is same type as value.
- * We would be able to remove separate type Values = {...} definition
- * eg.
- * type SelectProps<Values> = {
- *  value?: Values
- *  [key: Values]: string
- * }
+ * Trans is the basic macro for static messages,
+ * messages with variables, but also for messages with inline markup
  *
+ * @example
+ * ```
+ * <Trans>Hello {username}. Read the <a href="/docs">docs</a>.</Trans>
+ * ```
+ * @example
+ * ```
+ * <Trans id="custom.id">Hello {username}.</Trans>
+ * ```
  */
-type Values = { [key: string]: string }
+export const Trans: FC<TransProps>
 
-export type SelectProps = {
-  value: string
-  other: ReactNode
-} & TransProps &
-  Values
+/**
+ * Props of Plural macro are transformed into plural format.
+ *
+ * @example
+ * ```
+ * import { Plural } from "@lingui/macro"
+ * <Plural value={numBooks} one="Book" other="Books" />
+ *
+ * // ↓ ↓ ↓ ↓ ↓ ↓
+ * import { Trans } from "@lingui/react"
+ * <Trans id="{numBooks, plural, one {Book} other {Books}}" values={{ numBooks }} />
+ * ```
+ */
+export const Plural: VFC<PluralChoiceProps>
+/**
+ * Props of SelectOrdinal macro are transformed into selectOrdinal format.
+ *
+ * @example
+ * ```
+ * // count == 1 -> 1st
+ * // count == 2 -> 2nd
+ * // count == 3 -> 3rd
+ * // count == 4 -> 4th
+ * <SelectOrdinal
+ *     value={count}
+ *     one="#st"
+ *     two="#nd"
+ *     few="#rd"
+ *     other="#th"
+ * />
+ * ```
+ */
+export const SelectOrdinal: VFC<PluralChoiceProps>
 
-export const Trans: ComponentType<TransProps>
-export const Plural: ComponentType<ChoiceProps>
-export const Select: ComponentType<SelectProps>
-export const SelectOrdinal: ComponentType<ChoiceProps>
+/**
+ * Props of Select macro are transformed into select format
+ *
+ * @example
+ * ```
+ * // gender == "female"      -> Her book
+ * // gender == "male"        -> His book
+ * // gender == "non-binary"  -> Their book
+ *
+ * <Select
+ *     value={gender}
+ *     _male="His book"
+ *     _female="Her book"
+ *     other="Their book"
+ * />
+ * ```
+ */
+export const Select: VFC<SelectChoiceProps>

package/build/index.js

@@ -10,74 +10,80 @@ var _macroJs = _interopRequireDefault(require("./macroJs"));
 var _macroJsx = _interopRequireDefault(require("./macroJsx"));
 var _types = require("@babel/types");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const config = (0, _conf.getConfig)({
-  configPath: process.env.LINGUI_CONFIG
-});
-const getSymbolSource = name => {
-  if (Array.isArray(config.runtimeConfigModule)) {
-    if (name === "i18n") {
-      return config.runtimeConfigModule;
-    } else {
-      return ["@lingui/react", name];
-    }
-  } else {
-    if (config.runtimeConfigModule[name]) {
-      return config.runtimeConfigModule[name];
-    } else {
-      return ["@lingui/react", name];
-    }
-  }
-};
-const [i18nImportModule, i18nImportName = "i18n"] = getSymbolSource("i18n");
-const [TransImportModule, TransImportName = "Trans"] = getSymbolSource("Trans");
 const jsMacroTags = new Set(["defineMessage", "arg", "t", "plural", "select", "selectOrdinal"]);
 const jsxMacroTags = new Set(["Trans", "Plural", "Select", "SelectOrdinal"]);
+let config;
+function getConfig(_config) {
+  if (_config) {
+    config = _config;
+  }
+  if (!config) {
+    config = (0, _conf.getConfig)();
+  }
+  return config;
+}
 function macro({
   references,
   state,
-  babel
+  babel,
+  config
 }) {
-  const jsxNodes = [];
-  const jsNodes = [];
+  const opts = config;
+  const {
+    i18nImportModule,
+    i18nImportName,
+    TransImportModule,
+    TransImportName
+  } = getConfig(opts.linguiConfig).runtimeConfigModule;
+  const jsxNodes = new Set();
+  const jsNodes = new Set();
   let needsI18nImport = false;
+  let nameMap = new Map();
   Object.keys(references).forEach(tagName => {
     const nodes = references[tagName];
     if (jsMacroTags.has(tagName)) {
-      nodes.forEach(node => {
-        jsNodes.push(node.parentPath);
+      nodes.forEach(path => {
+        nameMap.set(tagName, path.node.name);
+        jsNodes.add(path.parentPath);
       });
     } else if (jsxMacroTags.has(tagName)) {
-      nodes.forEach(node => {
+      // babel-plugin-macros return JSXIdentifier nodes.
+      // Which is for every JSX element would be presented twice (opening / close)
+      // Here we're taking JSXElement and dedupe it.
+      nodes.forEach(path => {
+        nameMap.set(tagName, path.node.name);
+
         // identifier.openingElement.jsxElement
-        jsxNodes.push(node.parentPath.parentPath);
+        jsxNodes.add(path.parentPath.parentPath);
       });
     } else {
       throw nodes[0].buildCodeFrameError(`Unknown macro ${tagName}`);
     }
   });
-  jsNodes.filter(isRootPath(jsNodes)).forEach(path => {
-    if (alreadyVisited(path)) return;
+  const stripNonEssentialProps = process.env.NODE_ENV == "production" && !opts.extract;
+  const jsNodesArray = Array.from(jsNodes);
+  jsNodesArray.filter(isRootPath(jsNodesArray)).forEach(path => {
     const macro = new _macroJs.default(babel, {
-      i18nImportName
+      i18nImportName,
+      stripNonEssentialProps,
+      nameMap
     });
     if (macro.replacePath(path)) needsI18nImport = true;
   });
-  jsxNodes.filter(isRootPath(jsxNodes)).forEach(path => {
-    if (alreadyVisited(path)) return;
-    const macro = new _macroJsx.default(babel);
+  const jsxNodesArray = Array.from(jsxNodes);
+  jsxNodesArray.filter(isRootPath(jsxNodesArray)).forEach(path => {
+    const macro = new _macroJsx.default(babel, {
+      stripNonEssentialProps,
+      nameMap
+    });
     macro.replacePath(path);
   });
   if (needsI18nImport) {
     addImport(babel, state, i18nImportModule, i18nImportName);
   }
-  if (jsxNodes.length) {
+  if (jsxNodes.size) {
     addImport(babel, state, TransImportModule, TransImportName);
   }
-  if (process.env.LINGUI_EXTRACT === "1") {
-    return {
-      keepImports: true
-    };
-  }
 }
 function addImport(babel, state, module, importName) {
   const {
@@ -98,6 +104,14 @@ function addImport(babel, state, module, importName) {
     state.file.path.node.body.unshift(t.importDeclaration([t.importSpecifier(tIdentifier, tIdentifier)], t.stringLiteral(module)));
   }
 }
+
+/**
+ * Filtering nested macro calls
+ *
+ * <Macro>
+ *   <Macro /> <-- this would be filtered out
+ * </Macro>
+ */
 function isRootPath(allPath) {
   return node => function traverse(path) {
     if (!path.parentPath) {
@@ -107,15 +121,7 @@ function isRootPath(allPath) {
     }
   }(node);
 }
-const alreadyVisitedCache = new WeakSet();
-const alreadyVisited = path => {
-  if (alreadyVisitedCache.has(path)) {
-    return true;
-  } else {
-    alreadyVisitedCache.add(path);
-    return false;
-  }
-};
+;
 [...jsMacroTags, ...jsxMacroTags].forEach(name => {
   Object.defineProperty(module.exports, name, {
     get() {
@@ -123,5 +129,7 @@ const alreadyVisited = path => {
     }
   });
 });
-var _default = (0, _babelPluginMacros.createMacro)(macro);
+var _default = (0, _babelPluginMacros.createMacro)(macro, {
+  configName: "lingui"
+});
 exports.default = _default;