feat(babel-plugin-react-intl): add option to parse pragma

Author: Long Ho

packages/babel-plugin-react-intl/README.md

@@ -45,7 +45,7 @@ If a message descriptor has a `description`, it'll be removed from the source af
 }
 ```
 
-#### Options
+### Options
 
 - **`messagesDir`**: 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 only be accessible via Babel's API.
 
@@ -63,14 +63,25 @@ If a message descriptor has a `description`, it'll be removed from the source af
 
 - **`outputEmptyJson`**: 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.
 
+- **`pragma`**: parse specific additional custom pragma. This allows you to tag certain file with metadata such as `project`. For example with this file:
+
+```tsx
+// @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.
+
 ### Via Node API
 
 The extract message descriptors are available via the `metadata` property on the object returned from Babel's `transform()` API:
 
 ```javascript
 require('@babel/core').transform('code', {
   plugins: ['react-intl'],
-}); // => { code, map, ast, metadata['react-intl'].messages };
+}); // => { code, map, ast, metadata['react-intl'].messages, metadata['react-intl'].meta };
 ```
 
 [react intl]: http://formatjs.io/react/

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

@@ -45,6 +45,11 @@ interface MessageDescriptor {
 export type ExtractedMessageDescriptor = MessageDescriptor &
   Partial<SourceLocation> & {file?: string};
 
+export type ExtractionResult = {
+  messages: ExtractedMessageDescriptor[];
+  meta: Map<string, string>;
+};
+
 type MessageDescriptorPath = Record<
   keyof MessageDescriptor,
   NodePath<StringLiteral> | undefined
@@ -84,6 +89,7 @@ interface BabelTransformationFile {
 
 interface State {
   ReactIntlMessages: Map<string, ExtractedMessageDescriptor>;
+  ReactIntlMeta: Map<string, string>;
 }
 
 function getICUMessageValue(
@@ -335,7 +341,7 @@ export default declare((api: any, options: OptionsSchema) => {
     name: 'babel-plugin-react-intl',
     baseDataPath: 'options',
   });
-  const {messagesDir, outputEmptyJson} = options;
+  const {messagesDir, outputEmptyJson, pragma} = options;
 
   /**
    * Store this in the node itself so that multiple passes work. Specifically
@@ -355,6 +361,7 @@ export default declare((api: any, options: OptionsSchema) => {
     pre() {
       if (!this.ReactIntlMessages) {
         this.ReactIntlMessages = new Map();
+        this.ReactIntlMeta = new Map();
       }
     },
 
@@ -370,9 +377,12 @@ export default declare((api: any, options: OptionsSchema) => {
       const basename = filename
         ? p.basename(filename, p.extname(filename))
         : null;
-      const {ReactIntlMessages: messages} = this;
+      const {ReactIntlMessages: messages, ReactIntlMeta} = this;
       const descriptors = Array.from(messages.values());
-      state.metadata['react-intl'] = {messages: descriptors};
+      state.metadata['react-intl'] = {
+        messages: descriptors,
+        meta: ReactIntlMeta,
+      } as ExtractionResult;
 
       if (basename && messagesDir && (outputEmptyJson || descriptors.length)) {
         // Make sure the relative path is "absolute" before
@@ -401,6 +411,28 @@ export default declare((api: any, options: OptionsSchema) => {
     },
 
     visitor: {
+      ImportDeclaration(path) {
+        const comments = path.node.leadingComments;
+        const {ReactIntlMeta} = this;
+        if (!pragma || !comments) {
+          return;
+        }
+        const pragmaLine = comments
+          .map(c => c.value)
+          .find(c => c.includes(pragma));
+        console.log(comments);
+        if (!pragmaLine) {
+          return;
+        }
+        pragmaLine
+          .split(pragma)[1]
+          .trim()
+          .split(/\s+/g)
+          .forEach(kv => {
+            const [k, v] = kv.split(':');
+            ReactIntlMeta.set(k, v);
+          });
+      },
       JSXOpeningElement(
         path,
         {

packages/babel-plugin-react-intl/src/options.schema.json

@@ -11,7 +11,8 @@
     "removeDefaultMessage": {"type": "boolean"},
     "extractFromFormatMessageCall": {"type": "boolean"},
     "additionalComponentNames": {"type": "array", "items": {"type": "string"}},
-    "outputEmptyJson": {"type": "boolean"}
+    "outputEmptyJson": {"type": "boolean"},
+    "pragma": {"type": "string"}
   },
   "additionalProperties": false
 }

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

@@ -14,4 +14,5 @@ export interface OptionsSchema {
   extractFromFormatMessageCall?: boolean;
   additionalComponentNames?: string[];
   outputEmptyJson?: boolean;
+  pragma?: string;
 }

packages/babel-plugin-react-intl/test/__snapshots__/index.test.ts.snap

@@ -9,6 +9,7 @@ Object {
       "id": "foo.bar.baz",
     },
   ],
+  "meta": Map {},
 }
 `;
 
@@ -83,6 +84,9 @@ Object {
       "id": "escaped.apostrophe",
     },
   ],
+  "meta": Map {
+    "project" => "amazing",
+  },
 }
 `;
 
@@ -102,6 +106,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== \\"function\\") ret
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== \\"object\\" && typeof obj !== \\"function\\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+// @react-intl project:amazing
 const msgs = (0, _reactIntl.defineMessages)({
   header: {
     \\"id\\": \\"foo.bar.baz\\",
@@ -192,6 +197,7 @@ Object {
       "id": "foo.bar.baz",
     },
   ],
+  "meta": Map {},
 }
 `;
 
@@ -254,6 +260,7 @@ Object {
       "id": "foo.bar.baz",
     },
   ],
+  "meta": Map {},
 }
 `;
 
@@ -321,6 +328,7 @@ Object {
       "id": "foo.bar.baz",
     },
   ],
+  "meta": Map {},
 }
 `;
 
@@ -374,6 +382,7 @@ Object {
       "id": "foo",
     },
   ],
+  "meta": Map {},
 }
 `;
 
@@ -444,6 +453,7 @@ Object {
       "id": "foo",
     },
   ],
+  "meta": Map {},
 }
 `;
 

packages/babel-plugin-react-intl/test/fixtures/defineMessages/actual.js

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

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

@@ -38,7 +38,8 @@ describe('emit asserts for: ', () => {
       if (fs.existsSync(actualMessagesPath)) fs.unlinkSync(actualMessagesPath);
 
       const {code: actual, metadata} = transform(
-        join(fixtureDir, 'actual.js')
+        join(fixtureDir, 'actual.js'),
+        {pragma: '@react-intl'}
       )!;
       expect((metadata as any)['react-intl']).toMatchSnapshot();
       // Check code output