Update terra-base and terra-i18n packages (#2288)

Author: bjankord

jestconfig.js

@@ -3,6 +3,7 @@ module.exports = {
     'packages/**/src/*.js',
     'packages/**/src/*.jsx',
   ],
+  globalSetup: './jestglobalsetup.js',
   setupFiles: [
     'raf/polyfill',
     './jestsetup.js',
@@ -18,5 +19,9 @@ module.exports = {
     '\\.(svg|jpg|png|md)$': '<rootDir>/__mocks__/fileMock.js',
     '\\.(css|scss)$': 'identity-obj-proxy',
   },
+  moduleDirectories: [
+    'aggregated-translations',
+    'node_modules',
+  ],
   testURL: 'http://localhost',
 };

jestglobalsetup.js

@@ -0,0 +1,6 @@
+/* eslint-disable-next-line import/no-extraneous-dependencies */
+const aggregateTranslations = require('terra-toolkit/scripts/aggregate-translations/aggregate-translations');
+
+module.exports = () => {
+  aggregateTranslations();
+};

package.json

@@ -75,7 +75,7 @@
     "eslint": "^5.0.0",
     "eslint-config-terra": "^2.0.0",
     "gh-pages": "^1.1.0",
-    "glob": "^7.1.1",
+    "glob": "^7.1.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.1.0",
     "lerna": "^2.1.2",
@@ -84,7 +84,7 @@
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "react-router-dom": "^4.0.0",
-    "react-test-renderer": "^16.4.2",
+    "react-test-renderer": "^16.5.2",
     "stylelint": "^9.0.0",
     "stylelint-config-terra": "^2.0.0",
     "terra-dev-site": "^3.0.0",

packages/terra-base/CHANGELOG.md

@@ -3,6 +3,10 @@ Changelog
 
 Unreleased
 ----------
+### Breaking Changes
+* Locale prop is now required
+* This package no longer provides the `injectIntl`, `intlShape`, `FormattedMessage`, `IntlProvider` exports from react-intl
+* Removed div that wrapped children passed into the base component. The base component now uses a `<React.Fragment>` wrapper around children
 
 4.5.0 - (March 26, 2019)
 ------------------

packages/terra-base/package.json

@@ -22,7 +22,8 @@
   "homepage": "https://github.com/cerner/terra-core#readme",
   "peerDependencies": {
     "react": "^16.8.5",
-    "react-dom": "^16.8.5"
+    "react-dom": "^16.8.5",
+    "react-intl": "^2.8.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",

packages/terra-base/src/Base.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  I18nProvider, i18nLoader, injectIntl, intlShape, FormattedMessage, IntlProvider,
-} from 'terra-i18n';
+import { I18nProvider, i18nLoader } from 'terra-i18n';
 import './baseStyles';
 
 const propTypes = {
@@ -13,7 +11,7 @@ const propTypes = {
   /**
    * The locale name.
    */
-  locale: PropTypes.string,
+  locale: PropTypes.string.isRequired,
   /**
    * Customized translations provided by consuming application only for current locale.
    */
@@ -86,17 +84,9 @@ class Base extends React.Component {
     const messages = Object.assign({}, this.state.messages, customMessages);
     const renderChildren = strictMode ? (<React.StrictMode>{children}</React.StrictMode>) : children;
 
-    if (locale === undefined) {
-      return (
-        <div {...customProps} data-terra-base>
-          {renderChildren}
-        </div>
-      );
-    }
-
     if (!this.state.areTranslationsLoaded) return <div>{this.props.translationsLoadingPlaceholder}</div>;
     return (
-      <I18nProvider {...customProps} locale={this.state.locale} messages={messages} data-terra-base>
+      <I18nProvider {...customProps} locale={this.state.locale} messages={messages}>
         {renderChildren}
       </I18nProvider>
     );
@@ -107,6 +97,3 @@ Base.propTypes = propTypes;
 Base.defaultProps = defaultProps;
 
 export default Base;
-export {
-  injectIntl, intlShape, FormattedMessage, IntlProvider,
-};

packages/terra-base/src/terra-dev-site/test/base/DefaultBase.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Base from '../../../Base';
 
 const BaseDefault = () => (
-  <Base>
+  <Base locale="en">
     <h1>Heading 1</h1>
     <h2>Heading 2</h2>
     <h3>Heading 3</h3>

packages/terra-base/src/terra-dev-site/test/base/SwitchLocaleBase.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'terra-i18n';
+import { FormattedMessage } from 'react-intl';
 import Base from '../../../Base';
 
 const customMessages = {

packages/terra-base/tests/jest/Base.test.jsx

@@ -1,13 +1,24 @@
 import React from 'react';
 import Base from '../../src/Base';
 
+// Missing locale test
+it('throws error for missing required locale', () => {
+  const messages = { Terra: 'Terra' };
+
+  try {
+    shallow(<Base customMessages={messages}>String</Base>);
+  } catch (e) {
+    expect(e.message).toContain('The prop `locale` is marked as required in `Base`');
+  }
+});
+
 // Snapshot Tests
-it('should support rendering a string without translation', () => {
+it('should support rendering a string', () => {
   const base = shallow(<Base>String</Base>);
   expect(base).toMatchSnapshot();
 });
 
-it('should support rendering an array of children without translation', () => {
+it('should support rendering an array of children', () => {
   /* eslint-disable comma-dangle */
   const base = shallow(
     <Base>
@@ -19,18 +30,7 @@ it('should support rendering an array of children without translation', () => {
   /* eslint-enable comma-dangle */
 });
 
-// Snapshot Tests
-it('should render with stict mode when strict mode enabled', () => {
+it('should render with strict mode when strict mode enabled', () => {
   const base = shallow(<Base strictMode>String</Base>);
   expect(base).toMatchSnapshot();
 });
-
-it('throws error for missing required locale', () => {
-  const messages = { Terra: 'Terra' };
-
-  try {
-    shallow(<Base customMessages={messages}>String</Base>);
-  } catch (e) {
-    expect(e.message).toContain('Missing locale prop');
-  }
-});

packages/terra-base/tests/jest/__snapshots__/Base.test.jsx.snap

@@ -1,32 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render with stict mode when strict mode enabled 1`] = `
-<div
-  data-terra-base={true}
->
-  <StrictMode>
-    String
-  </StrictMode>
-</div>
-`;
+exports[`should render with strict mode when strict mode enabled 1`] = `<div />`;
 
-exports[`should support rendering a string without translation 1`] = `
-<div
-  data-terra-base={true}
->
-  String
-</div>
-`;
+exports[`should support rendering a string 1`] = `<div />`;
 
-exports[`should support rendering an array of children without translation 1`] = `
-<div
-  data-terra-base={true}
->
-  <div>
-    1
-  </div>
-  <div>
-    2
-  </div>
-</div>
-`;
+exports[`should support rendering an array of children 1`] = `<div />`;

packages/terra-i18n/CHANGELOG.md

@@ -3,6 +3,15 @@ Changelog
 
 Unreleased
 ----------
+### Breaking Changes
+* Removed post-install script which wrote default loaders
+* Removed aggregate-translations pre-build tool
+* Removed `src/defaultIntlLoaders.js`
+* Removed `src/defaultTranslationsLoaders.js`
+* Removed `require.ensure` syntax for loading Intl polyfill
+* Removed `injectIntl`, `intlShape`, `FormattedMessage`, `IntlProvider` exports from react-intl
+* Removed div that wrapped children passed into the I18nProvider component. The I18nProvider component now uses a `<React.Fragment>` wrapper around children
+* Removed run time check for supported locales. This is provide at build time with terra-toolkits aggregate-translations script
 
 3.5.0 - (March 26, 2019)
 ------------------

packages/terra-i18n/bin/aggregate-translations.js

@@ -1,5 +1,13 @@
 # Terra i18n Upgrade Guide
 
+## Changes from 3.0 to 4.0
+
+The terra-i18n `aggregate-translations` pre-build tool has been removed from this package.
+
+Along with this, the post-install script which wrote default intl and translation loaders has been removed.
+
+Use the [`aggregate-translations` pre-build tool from terra-toolkit instead.](https://github.com/cerner/terra-toolkit/blob/master/docs/AggregateTranslations.md)
+
 ## Changes from 2.0 to 3.0
 
 ### Changes to CSS Custom Properties

packages/terra-i18n/docs/AggregateTranslations.md

@@ -20,26 +20,15 @@
     "url": "https://github.com/cerner/terra-core/issues"
   },
   "homepage": "https://github.com/cerner/terra-core#readme",
-  "devDependencies": {
-    "babel-jest": "^19.0.0",
-    "memory-fs": "^0.4.1"
-  },
-  "bin": {
-    "aggregate-translations": "./bin/aggregate-translations.js"
-  },
   "peerDependencies": {
     "react": "^16.8.5",
-    "react-dom": "^16.8.5"
+    "react-dom": "^16.8.5",
+    "react-intl": "^2.8.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "commander": "^2.9.0",
-    "fs-extra": "^7.0.0",
-    "glob": "^7.1.1",
     "intl": "^1.2.5",
-    "lodash.startcase": "^4.4.0",
     "prop-types": "^15.5.8",
-    "react-intl": "^2.8.0",
     "terra-doc-template": "^2.7.0"
   },
   "scripts": {
@@ -48,7 +37,6 @@
     "compile:build": "babel src --out-dir lib --copy-files",
     "lint": "npm run lint:js",
     "lint:js": "eslint --ext .js,.jsx . --ignore-path ../../.eslintignore",
-    "postinstall": "node scripts/post-install/write-default-loaders.js",
     "test": "npm run test:jest && npm run test:wdio",
     "test:jest": "jest --config ../../jestconfig.js",
     "test:wdio": "../../node_modules/.bin/wdio ../../node_modules/terra-dev-site/config/wdio/wdio.conf.js"