feat!: Bump react-intl to v10 (#288)

Bumps react-intl to v10.

BREAKING CHANGE: removes deprecated `injectIntl`+`intlShape`.

Author: bradenmacdonald

docs/how_tos/i18n.rst

@@ -44,17 +44,15 @@ These steps will allow your application to accept translation strings. See `fron
 
 #. For places in your code where you need a display string, and it has to be a plain JavaScript string (e.g., a button label), you will need to do the following:
 
-   #. Inject the ``intl`` object into your component:
+   #. Use a hook to access the ``intl`` object within your component:
 
-      #. ``import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';``;
+      #. ``import { useIntl } from '@openedx/frontend-base';``;
 
-      #. add ``intl: intlShape.isRequired`` to your component's ``propTypes``.
-
-      #. instead of ``export Foo``, ``export injectIntl(Foo)`` .
+      #. write ``const intl = useIntl();`` near the beginning of your component.
 
    #. Define your messages using ``defineMessages``. This function doesn't actually do anything; it's just a hook for the translation pipeline to be able to find your translation strings. You can call ``defineMessages`` wherever you want, but if you have a lot of them you might want to move them to a separate file. Either ``MyAppName.messages.js`` (if your entire app has only a few strings) or ``SomeComponent.messages.js`` will work. Your file should look like the example below. For your own sanity, using a short camel-case string for the property name is fine as long as ``id`` is globally unique in the MFE. Example::
 
-       import { defineMessages } from '@edx/frontend-platform/i18n';
+       import { defineMessages } from '@openedx/frontend-base';
 
        const messages = defineMessages({
          'cartPayNow': {

package-lock.json

@@ -116,7 +116,7 @@
     "prop-types": "^15.8.1",
     "react-dev-utils": "12.0.1",
     "react-focus-on": "^3.10.2",
-    "react-intl": "^6.6.6",
+    "react-intl": "^10.1.20",
     "react-refresh": "0.18.0",
     "react-refresh-typescript": "^2.0.9",
     "react-responsive": "^10.0.0",
@@ -160,7 +160,7 @@
     "nodemon": "^3.1.4"
   },
   "peerDependencies": {
-    "@openedx/paragon": "^23.20.0",
+    "@openedx/paragon": "^23.23.0",
     "@tanstack/react-query": "^5.81.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package.json

@@ -23,66 +23,6 @@
  *
  */
 
-/**
- * @name createIntl
- * @kind function
- * @see {@link https://formatjs.io/docs/react-intl/api#createIntl Intl}
- */
-
-/**
- * @name FormattedDate
- * @kind class
- * @see {@link https://formatjs.io/docs/react-intl/components/#formatteddate Intl}
- */
-
-/**
- * @name FormattedTime
- * @kind class
- * @see {@link https://formatjs.io/docs/react-intl/components/#formattedtime Intl}
- */
-
-/**
- * @name FormattedRelativeTime
- * @kind class
- * @see {@link https://formatjs.io/docs/react-intl/components/#formattedrelativetime Intl}
- */
-
-/**
- * @name FormattedNumber
- * @kind class
- * @see {@link https://formatjs.io/docs/react-intl/components/#formattednumber Intl}
- */
-
-/**
- * @name FormattedPlural
- * @kind class
- * @see {@link https://formatjs.io/docs/react-intl/components/#formattedplural Intl}
- */
-
-/**
- * @name FormattedMessage
- * @kind class
- * @see {@link https://formatjs.io/docs/react-intl/components/#formattedmessage Intl}
- */
-
-/**
- * @name IntlProvider
- * @kind class
- * @see {@link https://formatjs.io/docs/react-intl/components/#intlprovider Intl}
- */
-
-/**
- * @name defineMessages
- * @kind function
- * @see {@link https://formatjs.io/docs/react-intl/api#definemessagesdefinemessage Intl}
- */
-
-/**
- * @name useIntl
- * @kind function
- * @see {@link https://formatjs.io/docs/react-intl/api#useIntl Intl}
- */
-
 export {
   createIntl,
   defineMessages,
@@ -93,7 +33,10 @@ export {
   FormattedRelativeTime,
   FormattedTime,
   IntlProvider,
-  useIntl
+  useIntl,
+  type IntlConfig,
+  type ResolvedIntlConfig,
+  type IntlShape,
 } from 'react-intl';
 
 export {
@@ -104,14 +47,9 @@ export {
   getPrimaryLanguageSubtag,
   getSupportedLanguageList,
   handleRtl,
-  intlShape,
   isRtl,
   LOCALE_CHANGED,
   LOCALE_TOPIC,
   mergeMessages,
-  updateLocale
+  updateLocale,
 } from './lib';
-
-export {
-  default as injectIntl
-} from './injectIntlWithShim';

runtime/i18n/index.js runtime/i18n/index.tsruntime/i18n/index.js renamed to runtime/i18n/index.ts

@@ -1,5 +1,4 @@
 import merge from 'lodash/merge';
-import PropTypes from 'prop-types';
 import { MessageFormatElement } from 'react-intl';
 import Cookies from 'universal-cookie';
 
@@ -51,18 +50,6 @@ const rtlLocales = [
 
 let messages: Record<string, Record<string, string> | Record<string, MessageFormatElement[]> | undefined>;
 
-/**
- * @memberof module:Internationalization
- *
- * Prior versions of react-intl (our primary implementation of the i18n service) included a
- * PropTypes-based 'shape' for its `intl` object.  This has since been removed.  For legacy
- * compatibility, we include an `intlShape` export that is set to PropTypes.object.  Usage of this
- * export is deprecated.
- *
- * @deprecated
- */
-export const intlShape = PropTypes.object;
-
 /**
  * @memberof module:Internationalization
  */

runtime/i18n/injectIntlWithShim.jsx

@@ -67,15 +67,16 @@ export {
   getPrimaryLanguageSubtag,
   getSupportedLanguageList,
   handleRtl,
-  injectIntl,
   IntlProvider,
-  intlShape,
   isRtl,
   LOCALE_CHANGED,
   LOCALE_TOPIC,
   mergeMessages,
   updateLocale,
-  useIntl
+  useIntl,
+  type IntlConfig,
+  type ResolvedIntlConfig,
+  type IntlShape,
 } from './i18n';
 
 export {

runtime/i18n/lib.ts

@@ -19,7 +19,7 @@ module.exports = {
     '<rootDir>/setupTest.js',
   ],
   transformIgnorePatterns: [
-    '/node_modules/(?!(@openedx|@edx)/)',
+    '/node_modules/(?!(@openedx|@edx|react-intl|@formatjs|intl-messageformat)/)',
   ],
   modulePathIgnorePatterns: [
     '/dist/',

runtime/index.ts

@@ -19,6 +19,8 @@ describe('helpButtonSlotOperation', () => {
     mergeAppConfig(TEST_APP_ID, { SUPPORT_URL: 'https://help.example.com/test' });
 
     const op = helpButtonSlotOperation({ appId: TEST_APP_ID, role: TEST_ROLE });
+    // The following is for TypeScript, since `WidgetRendererProps` sometimes has 'element' and sometimes 'component'.
+    if (!('element' in op)) throw new Error(`Expected ${JSON.stringify(op)} to have an 'element'.`);
     expect(isValidElement(op.element)).toBe(true);
 
     const getUrl = (op.element as React.ReactElement<{ getUrl: () => string | undefined }>).props.getUrl;

runtime/jest.config.js

@@ -20,7 +20,7 @@ module.exports = {
     'setupTest.js',
   ],
   transformIgnorePatterns: [
-    '/node_modules/(?!(@openedx|@edx)/)',
+    '/node_modules/(?!(@openedx|@edx|react-intl|@formatjs|intl-messageformat)/)',
   ],
   testPathIgnorePatterns: [
     '/site.config.test.tsx',