feat(@formatjs/cli): add support for pragma

--pragma <pragma>                                     parse specific additional custom pragma. This allows you to tag certain file with metadata such as `project`. For example with this file:

```
// @intl-meta project:my-custom-project
import {FormattedMessage} from 'react-intl';

<FormattedMessage defaultMessage="foo" id="bar" />;
```

and with option `{pragma: "@intl-meta"}`, we'll parse out `// @intl-meta project:my-custom-project` into `{project: 'my-custom-project'}` in the result file.

Author: Long Ho

packages/babel-plugin-react-intl/src/index.ts

@@ -420,7 +420,6 @@ export default declare((api: any, options: OptionsSchema) => {
         const pragmaLine = comments
           .map(c => c.value)
           .find(c => c.includes(pragma));
-        console.log(comments);
         if (!pragmaLine) {
           return;
         }
@@ -686,3 +685,4 @@ function getMessagesObjectFromExpression(
   }
   return currentPath;
 }
+export {OptionsSchema} from './options';

packages/cli/README.md

@@ -5,44 +5,42 @@ including React components that uses `react-intl`.
 
 ## Usage
 
-```shell
+````shell
 $ npm -g i @formatjs/cli
 $ formatjs extract --help
 Usage: formatjs extract [options] [files...]
+Usage: formatjs extract [options] [files...]
+
 Extract string messages from React components that use react-intl.
 The input language is expected to be TypeScript or ES2017 with JSX.
 
 Options:
-  --messages-dir <dir>                                  The target location where the plugin will output a `.json` file
-                                                        corresponding to each component from which React Intl messages
-                                                        were extracted. If not provided, the extracted message
+  --messages-dir <dir>                                  The target location where the plugin will output a `.json` file corresponding to each component from which React Intl messages were extracted. If not provided, the extracted message
                                                         descriptors will be printed to standard output.
-  --out-file <path>                                     The target file path where the plugin will output an aggregated \`.json\` file of allthe translations from the \`files\`
-                                                        supplied.
+  --out-file <path>                                     The target file path where the plugin will output an aggregated `.json` file of allthe translations from the `files` supplied.
                                                         This flag will ignore --messages-dir
-  --id-interpolation-pattern <pattern>                  If certain message descriptors don\'t have id, this \`pattern\` will be used to automaticallygenerate IDs for them. Default to
-                                                        \`[contenthash:5]\`.
+  --id-interpolation-pattern <pattern>                  If certain message descriptors don't have id, this `pattern` will be used to automaticallygenerate IDs for them. Default to `[contenthash:5]`.
                                                         See https://github.com/webpack/loader-utils#interpolatename for sample patterns
-  --extract-source-location                             Whether the metadata about the location of the message in the
-                                                        source file should be extracted. If `true`, then `file`,
-                                                        `start`, and `end` fields will exist for each extracted message
-                                                        descriptors. (default: false)
-  --module-source-name <name>                           The ES6 module source name of the React Intl package. Defaults
-                                                        to: `"react-intl"`, but can be changed to another name/path to
-                                                        React Intl.
-  --remove-default-message                              Remove `defaultMessage` field in generated js after extraction
-                                                        (default: false)
-  --additional-component-names <comma-separated-names>  Additional component names to extract messages from, e.g:
-                                                        `['FormattedFooBarMessage']`. **NOTE**: By default we check for
-                                                        the fact that `FormattedMessage` are
-                                                        imported from `moduleSourceName` to make sure variable alias
-                                                        works. This option does not do that so it's less safe.
-  --extract-from-format-message-call                    Opt-in to extract from `intl.formatMessage` call with the same
-                                                        restrictions, e.g: has to be called with object literal such as
-                                                        `intl.formatMessage({ id: 'foo', defaultMessage: 'bar',
-                                                        description: 'baz'})` (default: false)
-  --ignore                                              List of glob paths to **not** extract translations from.
-  --output-empty-json                                   Output file with empty [] if src has no messages. For build systems like bazel that relies on specific output mapping, not writing out a file can cause issues.
+  --extract-source-location                             Whether the metadata about the location of the message in the source file should be extracted. If `true`, then `file`, `start`, and `end` fields will exist for each extracted
+                                                        message descriptors. (default: false)
+  --module-source-name <name>                           The ES6 module source name of the React Intl package. Defaults to: `"react-intl"`, but can be changed to another name/path to React Intl.
+  --remove-default-message                              Remove `defaultMessage` field in generated js after extraction (default: false)
+  --additional-component-names <comma-separated-names>  Additional component names to extract messages from, e.g: `['FormattedFooBarMessage']`. **NOTE**: By default we check for the fact that `FormattedMessage` is imported from
+                                                        `moduleSourceName` to make sure variable alias works. This option does not do that so it's less safe.
+  --extract-from-format-message-call                    Opt-in to extract from `intl.formatMessage` call with the same restrictions, e.g: has to be called with object literal such as `intl.formatMessage({ id: 'foo', defaultMessage:
+                                                        'bar', description: 'baz'})` (default: false)
+  --output-empty-json                                   Output file with empty [] if src has no messages. For build systems like bazel that relies on specific output mapping, not writing out a file can cause issues. (default: false)
+  --ignore <files>                                      List of glob paths to **not** extract translations from.
   --throws                                              Whether to throw an exception when we fail to process any file in the batch.
-  -h, --help                                            output usage information
-```
+  --pragma <pragma>                                     parse specific additional custom pragma. This allows you to tag certain file with metadata such as `project`. For example with this file:
+
+        ```
+        // @intl-meta project:my-custom-project
+        import {FormattedMessage} from 'react-intl';
+
+        <FormattedMessage defaultMessage="foo" id="bar" />;
+        ```
+
+        and with option `{pragma: "@intl-meta"}`, we'll parse out `// @intl-meta project:my-custom-project` into `{project: 'my-custom-project'}` in the result file.
+  -h, --help                                            display help for command
+````

packages/cli/src/cli.ts

@@ -111,6 +111,19 @@ async function main(argv: string[]) {
       '--throws',
       'Whether to throw an exception when we fail to process any file in the batch.'
     )
+    .option(
+      '--pragma <pragma>',
+      `parse specific additional custom pragma. This allows you to tag certain file with metadata such as \`project\`. For example with this file:
+
+      \`\`\`
+      // @intl-meta project:my-custom-project
+      import {FormattedMessage} from 'react-intl';
+      
+      <FormattedMessage defaultMessage="foo" id="bar" />;
+      \`\`\`
+      
+      and with option \`{pragma: "@intl-meta"}\`, we'll parse out \`// @intl-meta project:my-custom-project\` into \`{project: 'my-custom-project'}\` in the result file.`
+    )
     .action(async (files: readonly string[], cmdObj: ExtractCLIOptions) => {
       const processedFiles = [];
       for (const f of files) {
@@ -132,6 +145,7 @@ async function main(argv: string[]) {
         additionalComponentNames: cmdObj.additionalComponentNames,
         extractFromFormatMessageCall: cmdObj.extractFromFormatMessageCall,
         outputEmptyJson: cmdObj.outputEmptyJson,
+        pragma: cmdObj.pragma,
       });
       process.exit(0);
     });

packages/cli/src/extract.ts

@@ -1,8 +1,6 @@
-import {ExtractedMessageDescriptor} from 'babel-plugin-react-intl/dist';
-import {OptionsSchema} from 'babel-plugin-react-intl/dist/options';
+import {ExtractionResult, OptionsSchema} from 'babel-plugin-react-intl';
 import * as babel from '@babel/core';
 import {warn, getStdinAsString} from './console_utils';
-import keyBy from 'lodash/keyBy';
 import {outputJSONSync} from 'fs-extra';
 import {interpolateName} from 'loader-utils';
 import {IOptions as GlobOptions} from 'glob';
@@ -61,19 +59,6 @@ function getBabelConfig(
   };
 }
 
-function getReactIntlMessages(
-  babelResult: babel.BabelFileResult | null
-): Record<string, ExtractedMessageDescriptor> {
-  if (babelResult === null) {
-    return {};
-  } else {
-    const messages: ExtractedMessageDescriptor[] = (babelResult.metadata as any)[
-      'react-intl'
-    ].messages;
-    return keyBy(messages, 'id');
-  }
-}
-
 export async function extract(
   files: readonly string[],
   {idInterpolationPattern, throws, ...babelOpts}: ExtractOptions
@@ -102,13 +87,14 @@ export async function extract(
         return throws ? promise : promise.catch(e => warn(e));
       })
     );
-    return Object.values(
-      results.reduce(
-        (all, babelResult) =>
-          babelResult ? {...all, ...getReactIntlMessages(babelResult)} : all,
-        {} as Record<string, ExtractedMessageDescriptor>
-      )
-    );
+    return results
+      .filter(r => r && r.metadata)
+      .map(
+        r =>
+          ((r as babel.BabelFileResult).metadata as any)[
+            'react-intl'
+          ] as ExtractionResult
+      );
   }
   if (files.length === 0 && process.stdin.isTTY) {
     warn('Reading source file from TTY.');
@@ -133,7 +119,11 @@ export async function extract(
     getBabelConfig(babelOpts)
   );
 
-  return Object.values(getReactIntlMessages(babelResult));
+  return [
+    ((babelResult as babel.BabelFileResult).metadata as any)[
+      'react-intl'
+    ] as ExtractionResult,
+  ];
 }
 
 export default async function extractAndWrite(
@@ -144,8 +134,12 @@ export default async function extractAndWrite(
   if (outFile) {
     extractOpts.messagesDir = undefined;
   }
-  const extractedMessages = await extract(files, extractOpts);
+  const extractionResults = await extract(files, extractOpts);
   const printMessagesToStdout = extractOpts.messagesDir == null && !outFile;
+  const extractedMessages = extractionResults
+    .map(m => m.messages)
+    .filter(Boolean)
+    .reduce((all, messages) => [...all, ...messages], []);
   if (outFile) {
     outputJSONSync(outFile, extractedMessages, {
       spaces: 2,

packages/cli/tests/extract/integration_tests/__snapshots__/index.test.ts.snap

@@ -230,6 +230,16 @@ Options:
   --output-empty-json                                   Output file with empty [] if src has no messages. For build systems like bazel that relies on specific output mapping, not writing out a file can cause issues. (default: false)
   --ignore <files>                                      List of glob paths to **not** extract translations from.
   --throws                                              Whether to throw an exception when we fail to process any file in the batch.
+  --pragma <pragma>                                     parse specific additional custom pragma. This allows you to tag certain file with metadata such as \`project\`. For example with this file:
+  
+        \`\`\`
+        // @intl-meta project:my-custom-project
+        import {FormattedMessage} from 'react-intl';
+        
+        <FormattedMessage defaultMessage=\\"foo\\" id=\\"bar\\" />;
+        \`\`\`
+        
+        and with option \`{pragma: \\"@intl-meta\\"}\`, we'll parse out \`// @intl-meta project:my-custom-project\` into \`{project: 'my-custom-project'}\` in the result file.
   -h, --help                                            display help for command
 "
 `;

packages/cli/tests/extract/integration_tests/defineMessages/actual.ignore.js

@@ -1,3 +1,4 @@
+// @react-intl project:foo
 import React, {Component} from 'react';
 import {defineMessages, FormattedMessage} from 'react-intl';