fix(babel-plugin-react-intl): extract messages without defaultMessage, fix #536

Author: Long Ho

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

@@ -427,7 +427,7 @@ export default declare((api: any, options: OptionsSchema) => {
           // write `<FormattedMessage {...descriptor} />`, because it will be
           // skipped here and extracted elsewhere. The descriptor will
           // be extracted only (storeMessage) if a `defaultMessage` prop.
-          if (descriptorPath.id && descriptorPath.defaultMessage) {
+          if (descriptorPath.id || descriptorPath.defaultMessage) {
             // Evaluate the Message Descriptor values in a JSX
             // context, then store it.
             const descriptor = evaluateMessageDescriptor(
@@ -444,23 +444,43 @@ export default declare((api: any, options: OptionsSchema) => {
               this.ReactIntlMessages
             );
 
-            attributes.forEach(attr => {
-              const ketPath = attr.get('name');
-              const msgDescriptorKey = getMessageDescriptorKey(ketPath);
-              if (
-                // Remove description since it's not used at runtime.
-                msgDescriptorKey === 'description' ||
-                // Remove defaultMessage if opts says so.
-                (removeDefaultMessage && msgDescriptorKey === 'defaultMessage')
-              ) {
-                attr.remove();
-              } else if (
-                overrideIdFn &&
-                getMessageDescriptorKey(ketPath) === 'id'
-              ) {
-                attr.get('value').replaceWith(t.stringLiteral(descriptor.id));
+            let idAttr: NodePath<t.JSXAttribute> | undefined;
+            let descriptionAttr: NodePath<t.JSXAttribute> | undefined;
+            let defaultMessageAttr: NodePath<t.JSXAttribute> | undefined;
+            for (const attr of attributes) {
+              switch (getMessageDescriptorKey(attr.get('name'))) {
+                case 'description':
+                  descriptionAttr = attr;
+                  break;
+                case 'defaultMessage':
+                  defaultMessageAttr = attr;
+                  break;
+                case 'id':
+                  idAttr = attr;
+                  break;
               }
-            });
+            }
+
+            if (descriptionAttr) {
+              descriptionAttr.remove();
+            }
+
+            if (removeDefaultMessage && defaultMessageAttr) {
+              defaultMessageAttr.remove();
+            }
+
+            if (overrideIdFn) {
+              if (idAttr) {
+                idAttr.get('value').replaceWith(t.stringLiteral(descriptor.id));
+              } else if (defaultMessageAttr) {
+                defaultMessageAttr.insertBefore(
+                  t.jsxAttribute(
+                    t.jsxIdentifier('id'),
+                    t.stringLiteral(descriptor.id)
+                  )
+                );
+              }
+            }
 
             // Tag the AST node so we don't try to extract it twice.
             tagAsExtracted(path);

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

@@ -278,6 +278,11 @@ Object {
       "description": undefined,
       "id": "TRANSLATION_KEY",
     },
+    Object {
+      "defaultMessage": undefined,
+      "description": undefined,
+      "id": "foo.bar.baz",
+    },
   ],
 }
 `;
@@ -324,6 +329,9 @@ Array [
   Object {
     "id": "TRANSLATION_KEY",
   },
+  Object {
+    "id": "foo.bar.baz",
+  },
 ]
 `;
 
@@ -491,6 +499,9 @@ class Foo extends _react.Component {
     return _react.default.createElement(\\"div\\", null, _react.default.createElement(\\"h1\\", null, _react.default.createElement(_reactIntl.FormattedMessage, msgs.header)), _react.default.createElement(\\"p\\", null, _react.default.createElement(_reactIntl.FormattedMessage, msgs.content)), _react.default.createElement(_reactIntl.FormattedMessage, {
       id: \\"HELLO.foo.bar.zoo.12.object\\",
       defaultMessage: \\"Hello World!\\"
+    }), _react.default.createElement(_reactIntl.FormattedMessage, {
+      id: \\"HELLO..5.object\\",
+      defaultMessage: \\"NO ID\\"
     }), _react.default.createElement(_reactIntl.FormattedHTMLMessage, {
       id: \\"HELLO.foo.bar.delta.21.string\\",
       defaultMessage: \\"<h1>Hello World!</h1>\\"
@@ -525,6 +536,14 @@ Array [
     },
     "id": "HELLO.foo.bar.zoo.12.object",
   },
+  Object {
+    "defaultMessage": "NO ID",
+    "description": Object {
+      "metadata": "Additional metadata content.",
+      "text": "Something for the translator. Another description",
+    },
+    "id": "HELLO..5.object",
+  },
   Object {
     "defaultMessage": "<h1>Hello World!</h1>",
     "description": "The default message.",

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

@@ -39,6 +39,13 @@ export default class Foo extends Component {
             metadata: 'Additional metadata content.',
           }}
         />
+        <FormattedMessage
+          defaultMessage="NO ID"
+          description={{
+            text: 'Something for the translator. Another description',
+            metadata: 'Additional metadata content.',
+          }}
+        />
         <FormattedHTMLMessage
           id="foo.bar.delta"
           defaultMessage="<h1>Hello World!</h1>"