feat(babel-plugin-react-intl): remove FormattedHTMLMessage extraction

BREAKING CHANGE: As of [email protected], `FormattedHTMLMessage` is no longer supported so
we're removing this from our babel plugin as well

Author: Long Ho

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

@@ -24,7 +24,7 @@ $ npm install babel-plugin-react-intl
 
 **This Babel plugin only visits ES6 modules which `import` React Intl.**
 
-The default message descriptors for the app's default language will be extracted from: `defineMessages()`, `<FormattedMessage>`, and `<FormattedHTMLMessage>`; all of which are named exports of the React Intl package.
+The default message descriptors for the app's default language will be extracted from: `defineMessages()`, `<FormattedMessage>`; all of which are named exports of the React Intl package.
 
 If a message descriptor has a `description`, it'll be removed from the source after it's extracted to save bytes since it isn't used at runtime.
 
@@ -57,7 +57,7 @@ If a message descriptor has a `description`, it'll be removed from the source af
 
 - **`removeDefaultMessage`**: Remove `defaultMessage` field in generated js after extraction.
 
-- **`additionalComponentNames`**: Additional component names to extract messages from, e.g: `['FormattedFooBarMessage']`. **NOTE**: By default we check for the fact that `FormattedMessage` & `FormattedHTMLMessage` are imported from `moduleSourceName` to make sure variable alias works. This option does not do that so it's less safe.
+- **`additionalComponentNames`**: 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.
 
 - **`extractFromFormatMessageCall`**: 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'})`
 

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

@@ -29,7 +29,7 @@ import validate from 'schema-utils';
 import OPTIONS_SCHEMA from './options.schema.json';
 import {OptionsSchema} from './options.js';
 
-const DEFAULT_COMPONENT_NAMES = ['FormattedMessage', 'FormattedHTMLMessage'];
+const DEFAULT_COMPONENT_NAMES = ['FormattedMessage'];
 
 const EXTRACTED = Symbol('ReactIntlExtracted');
 const DESCRIPTOR_PROPS = new Set(['id', 'description', 'defaultMessage']);

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

@@ -1,56 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`emit asserts for:  output match: FormattedHTMLMessage 1`] = `
-Object {
-  "messages": Array [
-    Object {
-      "defaultMessage": "<h1>Hello World!</h1>",
-      "description": "The default message.",
-      "id": "foo.bar.baz",
-    },
-  ],
-}
-`;
-
-exports[`emit asserts for:  output match: FormattedHTMLMessage 2`] = `
-"\\"use strict\\";
-
-Object.defineProperty(exports, \\"__esModule\\", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require(\\"react\\"));
-
-var _reactIntl = require(\\"react-intl\\");
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== \\"function\\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-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; }
-
-class Foo extends _react.Component {
-  render() {
-    return _react.default.createElement(_reactIntl.FormattedHTMLMessage, {
-      id: \\"foo.bar.baz\\",
-      defaultMessage: \\"<h1>Hello World!</h1>\\"
-    });
-  }
-
-}
-
-exports.default = Foo;"
-`;
-
-exports[`emit asserts for:  output match: FormattedHTMLMessage 3`] = `
-Array [
-  Object {
-    "defaultMessage": "<h1>Hello World!</h1>",
-    "description": "The default message.",
-    "id": "foo.bar.baz",
-  },
-]
-`;
-
 exports[`emit asserts for:  output match: FormattedMessage 1`] = `
 Object {
   "messages": Array [
@@ -502,9 +451,6 @@ class Foo extends _react.Component {
     }), _react.default.createElement(_reactIntl.FormattedMessage, {
       id: \\"actual.js..5.object\\",
       defaultMessage: \\"NO ID\\"
-    }), _react.default.createElement(_reactIntl.FormattedHTMLMessage, {
-      id: \\"actual.js.foo.bar.delta.21.string\\",
-      defaultMessage: \\"<h1>Hello World!</h1>\\"
     }));
   }
 
@@ -544,11 +490,6 @@ Array [
     },
     "id": "actual.js..5.object",
   },
-  Object {
-    "defaultMessage": "<h1>Hello World!</h1>",
-    "description": "The default message.",
-    "id": "actual.js.foo.bar.delta.21.string",
-  },
 ]
 `;
 

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

@@ -2,7 +2,6 @@ import React, {Component} from 'react';
 import {
   defineMessages,
   FormattedMessage,
-  FormattedHTMLMessage,
 } from 'react-intl';
 
 const msgs = defineMessages({
@@ -46,11 +45,6 @@ export default class Foo extends Component {
             metadata: 'Additional metadata content.',
           }}
         />
-        <FormattedHTMLMessage
-          id="foo.bar.delta"
-          defaultMessage="<h1>Hello World!</h1>"
-          description="The default message."
-        />
       </div>
     );
   }