feat(babel-plugin-react-intl): add destructured formatMessage su… (#582)

Co-authored-by: Long ͭ̊Ho <[email protected]>

Author: fsmaia

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

@@ -8,14 +8,16 @@ import * as p from 'path';
 import {outputJSONSync} from 'fs-extra';
 import {parse} from 'intl-messageformat-parser/dist';
 const {declare} = require('@babel/helper-plugin-utils') as any;
-import {types as t, PluginObj} from '@babel/core';
+import {PluginObj, types as t} from '@babel/core';
+
 import {
   ObjectExpression,
   JSXAttribute,
   StringLiteral,
   JSXIdentifier,
   JSXExpressionContainer,
   Identifier,
+  ObjectPattern,
   ObjectProperty,
   SourceLocation,
   Expression,
@@ -24,7 +26,7 @@ import {
   isTypeCastExpression,
   isTSTypeAssertion,
 } from '@babel/types';
-import {NodePath} from '@babel/traverse';
+import {NodePath, Scope} from '@babel/traverse';
 import validate from 'schema-utils';
 import OPTIONS_SCHEMA from './options.schema.json';
 import {OptionsSchema} from './options.js';
@@ -257,9 +259,40 @@ function referencesImport(
   return importedNames.some(name => path.referencesImport(mod, name));
 }
 
+function isFormatMessageDestructuring(scope: Scope) {
+  const binding = scope.getBinding('formatMessage');
+  const block = scope.block as t.FunctionDeclaration;
+
+  // things like `const {formatMessage} = intl; formatMessage(...)`
+  if (binding && t.isVariableDeclarator(binding.path.node)) {
+    const nodeObject = binding.path.node.id as ObjectPattern;
+    return nodeObject.properties.find(
+      (value: any) => value.key.name === 'intl'
+    );
+  }
+
+  // things like const fn = ({ intl: { formatMessage }}) => { formatMessage(...) }
+  if (t.isObjectPattern(block.params[0])) {
+    return block.params[0].properties.find(
+      (value: any) => value.key.name === 'intl'
+    );
+  }
+
+  return false;
+}
+
 function isFormatMessageCall(
-  callee: NodePath<Expression | V8IntrinsicIdentifier>
+  callee: NodePath<Expression | V8IntrinsicIdentifier>,
+  path: any
 ) {
+  if (
+    callee.isIdentifier() &&
+    callee.node.name === 'formatMessage' &&
+    isFormatMessageDestructuring(path.scope)
+  ) {
+    return true;
+  }
+
   if (!callee.isMemberExpression()) {
     return false;
   }
@@ -583,7 +616,7 @@ export default declare((api: any, options: OptionsSchema) => {
         }
 
         // Check that this is `intl.formatMessage` call
-        if (extractFromFormatMessageCall && isFormatMessageCall(callee)) {
+        if (extractFromFormatMessageCall && isFormatMessageCall(callee, path)) {
           const messageDescriptor = path.get('arguments')[0];
           if (messageDescriptor.isObjectExpression()) {
             processMessageObject(messageDescriptor);

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

@@ -334,6 +334,65 @@ Array [
 ]
 `;
 
+exports[`emit asserts for:  output match: extractFromFormatMessageCallStateless 1`] = `
+Object {
+  "messages": Array [
+    Object {
+      "defaultMessage": "bar",
+      "description": "baz",
+      "id": "foo",
+    },
+  ],
+}
+`;
+
+exports[`emit asserts for:  output match: extractFromFormatMessageCallStateless 2`] = `
+"\\"use strict\\";
+
+Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactIntl = require(\\"react-intl\\");
+
+var _react = _interopRequireDefault(require(\\"react\\"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Foo = ({
+  intl: {
+    formatMessage
+  }
+}) => {
+  const msgs = {
+    qux: formatMessage({
+      id: 'foo.bar.quux',
+      defaultMessage: 'Hello Stateless!',
+      description: 'A stateless message'
+    })
+  };
+  return _react.default.createElement(\\"div\\", null, _react.default.createElement(\\"h1\\", null, msgs.header), _react.default.createElement(\\"p\\", null, msgs.content), _react.default.createElement(\\"span\\", null, _react.default.createElement(_reactIntl.FormattedMessage, {
+    id: \\"foo\\",
+    defaultMessage: \\"bar\\"
+  })));
+};
+
+var _default = (0, _reactIntl.injectIntl)(Foo);
+
+exports.default = _default;"
+`;
+
+exports[`emit asserts for:  output match: extractFromFormatMessageCallStateless 3`] = `
+Array [
+  Object {
+    "defaultMessage": "bar",
+    "description": "baz",
+    "id": "foo",
+  },
+]
+`;
+
 exports[`emit asserts for:  output match: formatMessageCall 1`] = `
 Object {
   "messages": Array [
@@ -582,6 +641,21 @@ Array [
     "description": "Another message",
     "id": "foo.bar.biff",
   },
+  Object {
+    "defaultMessage": "Hello Stranger!",
+    "description": "A different message",
+    "id": "foo.bar.qux",
+  },
+  Object {
+    "defaultMessage": "bar",
+    "description": "baz",
+    "id": "foo",
+  },
+]
+`;
+
+exports[`options respects extractFromFormatMessageCall from stateless components 1`] = `
+Array [
   Object {
     "defaultMessage": "bar",
     "description": "baz",

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

@@ -1,5 +1,5 @@
+import {FormattedMessage, injectIntl} from 'react-intl';
 import React, {Component} from 'react';
-import {injectIntl, FormattedMessage} from 'react-intl';
 
 const objectPointer = {
   id: 'foo.bar.invalid',
@@ -10,6 +10,9 @@ const objectPointer = {
 class Foo extends Component {
   render() {
     const {intl} = this.props;
+    const {
+      intl: {formatMessage},
+    } = this.props;
     const msgs = {
       baz: this.props.intl.formatMessage({
         id: 'foo.bar.baz',
@@ -21,6 +24,11 @@ class Foo extends Component {
         defaultMessage: 'Hello Nurse!',
         description: 'Another message',
       }),
+      qux: formatMessage({
+        id: 'foo.bar.qux',
+        defaultMessage: 'Hello Stranger!',
+        description: 'A different message',
+      }),
       invalid: this.props.intl.formatMessage(objectPointer),
     };
 

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

@@ -0,0 +1,25 @@
+import {FormattedMessage, injectIntl} from 'react-intl';
+
+import React from 'react';
+
+const Foo = ({intl: {formatMessage}}) => {
+  const msgs = {
+    qux: formatMessage({
+      id: 'foo.bar.quux',
+      defaultMessage: 'Hello Stateless!',
+      description: 'A stateless message',
+    }),
+  };
+
+  return (
+    <div>
+      <h1>{msgs.header}</h1>
+      <p>{msgs.content}</p>
+      <span>
+        <FormattedMessage id="foo" defaultMessage="bar" description="baz" />
+      </span>
+    </div>
+  );
+};
+
+export default injectIntl(Foo);

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

@@ -173,6 +173,21 @@ describe('options', () => {
     expect(require(join(fixtureDir, 'actual.json'))).toMatchSnapshot();
   });
 
+  it('respects extractFromFormatMessageCall from stateless components', () => {
+    const fixtureDir = join(
+      fixturesDir,
+      'extractFromFormatMessageCallStateless'
+    );
+    expect(() =>
+      transform(join(fixtureDir, 'actual.js'), {
+        extractFromFormatMessageCall: true,
+      })
+    ).not.toThrow();
+
+    // Check message output
+    expect(require(join(fixtureDir, 'actual.json'))).toMatchSnapshot();
+  });
+
   it('additionalComponentNames', () => {
     const fixtureDir = join(fixturesDir, 'additionalComponentNames');
     expect(() =>