Babel fixes

appveyor.yml

@@ -24,8 +24,10 @@ install:
   - choco install -y googlechrome --ignore-checksums
   # Install the latest stable version of Node
   - ps: Install-Product node $env:nodejs_version
-  - npm install npm -g
-  - npm ci
+  - npm install
+
+# TODO: Switch to using npm ci instead of install
+# once Node LTS ships with npm 5.7 (with ci)
 
 # Disable automatic builds
 build: off

internals/scripts/extract-intl.js

@@ -1,28 +1,34 @@
-/* eslint-disable */
+/* eslint-disable no-restricted-syntax */
 /**
  * This script will extract the internationalization messages from all components
-   and package them in the translation json files in the translations file.
+ * and package them in the translation json files in the translations file.
  */
+
+require('shelljs/global');
+
 const fs = require('fs');
 const nodeGlob = require('glob');
-const transform = require('babel-core').transform;
+const { transformSync } = require('@babel/core');
+const get = require('lodash/get');
 
 const animateProgress = require('./helpers/progress');
 const addCheckmark = require('./helpers/checkmark');
 
-const pkg = require('../../package.json');
-const presets = pkg.babel.presets;
-const plugins = pkg.babel.plugins || [];
+const { appLocales, DEFAULT_LOCALE } = require('../../app/i18n');
 
-const i18n = require('../../app/i18n');
+const pkg = require('../../package.json');
+const { presets } = pkg.babel;
+let plugins = pkg.babel.plugins || [];
 
-const DEFAULT_LOCALE = i18n.DEFAULT_LOCALE;
+// TODO: The react-intl plugin must be restored here.
+// Without it, this script is pointless.
+// plugins.push('react-intl');
 
-require('shelljs/global');
+// NOTE: styled-components plugin is filtered out as it creates errors when used with transform
+plugins = plugins.filter(p => p !== 'styled-components');
 
 // Glob to match all js files except test files
 const FILES_TO_PARSE = 'app/**/!(*.test).js';
-const locales = i18n.appLocales;
 
 const newLine = () => process.stdout.write('\n');
 
@@ -54,15 +60,7 @@ const readFile = fileName =>
   new Promise((resolve, reject) => {
     fs.readFile(
       fileName,
-      (error, value) => (error ? reject(error) : resolve(value)),
-    );
-  });
-
-const writeFile = (fileName, data) =>
-  new Promise((resolve, reject) => {
-    fs.writeFile(
-      fileName,
-      data,
+      'utf8',
       (error, value) => (error ? reject(error) : resolve(value)),
     );
   });
@@ -72,7 +70,7 @@ const oldLocaleMappings = [];
 const localeMappings = [];
 
 // Loop to run once per locale
-for (const locale of locales) {
+for (const locale of appLocales) {
   oldLocaleMappings[locale] = {};
   localeMappings[locale] = {};
   // File to store translation messages into
@@ -94,44 +92,34 @@ for (const locale of locales) {
   }
 }
 
-/* push `react-intl` plugin to the existing plugins that are already configured in `package.json`
-   Example:
-   ```
-  "babel": {
-    "plugins": [
-      ["transform-object-rest-spread", { "useBuiltIns": true }]
-    ],
-    "presets": [
-      "env",
-      "react"
-    ]
-  }
-  ```
-*/
-plugins.push(['react-intl']);
-
-const extractFromFile = fileName => {
-  return readFile(fileName)
+const extractFromFile = fileName =>
+  readFile(fileName)
     .then(code => {
       // Use babel plugin to extract instances where react-intl is used
-      const { metadata: result } = transform(code, { presets, plugins });
+      let messages = [];
+      try {
+        const output = transformSync(code, { presets, plugins });
+        // TODO: Ensure that this is the correct path to find the react-intl messages
+        messages = get(output, 'metadata.react-intl.messages', []);
+      } catch (e) {
+        console.log(e); // eslint-disable-line
+      }
 
-      for (const message of result['react-intl'].messages) {
-        for (const locale of locales) {
+      for (const message of messages) {
+        for (const locale of appLocales) {
           const oldLocaleMapping = oldLocaleMappings[locale][message.id];
           // Merge old translations into the babel extracted instances where react-intl is used
           const newMsg =
             locale === DEFAULT_LOCALE ? message.defaultMessage : '';
-          localeMappings[locale][message.id] = oldLocaleMapping
-            ? oldLocaleMapping
-            : newMsg;
+          localeMappings[locale][message.id] = oldLocaleMapping || newMsg;
         }
       }
     })
     .catch(error => {
-      process.stderr.write(`Error transforming file: ${fileName}\n${error}`);
+      process.stderr.write(
+        `\nError transforming file: ${fileName}\n${error}\n`,
+      );
     });
-};
 
 const memoryTask = glob(FILES_TO_PARSE);
 const memoryTaskDone = task('Storing language files in memory');
@@ -144,27 +132,27 @@ memoryTask.then(files => {
   );
   const extractTaskDone = task('Run extraction on all files');
   // Run extraction on all files that match the glob on line 16
-  extractTask.then(result => {
+  extractTask.then(() => {
     extractTaskDone();
 
     // Make the directory if it doesn't exist, especially for first run
-    mkdir('-p', 'app/translations');
+    mkdir('-p', 'app/translations'); // eslint-disable-line
 
     let localeTaskDone;
     let translationFileName;
 
-    for (const locale of locales) {
+    for (const locale of appLocales) {
       translationFileName = `app/translations/${locale}.json`;
       localeTaskDone = task(
         `Writing translation messages for ${locale} to: ${translationFileName}`,
       );
 
       // Sort the translation JSON file so that git diffing is easier
       // Otherwise the translation messages will jump around every time we extract
-      let messages = {};
+      const messages = {};
       Object.keys(localeMappings[locale])
         .sort()
-        .forEach(function(key) {
+        .forEach(key => {
           messages[key] = localeMappings[locale][key];
         });