review fixes and bubble up error message

js/repl/PresetLoadingAnimation.js

@@ -5,7 +5,9 @@ type PresetLoadingAnimationProps = {
   className: ?string,
 };
 
-const PresetLoadingAnimation = ({ className }: PresetLoadingAnimationProps) =>
+const PresetLoadingAnimation = ({
+  className = "",
+}: PresetLoadingAnimationProps) =>
   <div className={`${className || ""} ${styles.loadingAnimation}`}>
     <div className={`${styles.loadingTick} ${styles.loadingTick1}`} />
     <div className={`${styles.loadingTick} ${styles.loadingTick2}`} />

js/repl/Repl.js

@@ -123,9 +123,13 @@ export default class Repl extends React.Component {
     const state = this.state;
 
     if (!state.babel.isLoaded) {
-      const message = state.babel.isLoading
-        ? "Loading Babel..."
-        : "An error occurred while loading Babel :(";
+      let message = "Loading Babel...";
+
+      if (!state.babel.isLoading && state.babel.didError) {
+        message =
+          state.babel.errorMessage ||
+          "An error occurred while loading Babel :(";
+      }
 
       return (
         <div className={styles.loader}>
@@ -184,26 +188,15 @@ export default class Repl extends React.Component {
   }
 
   _setupBabel() {
-    loadBabel(this.state.babel, success => {
-      this.setState(
-        state => {
-          const babelState = state.babel;
-
-          if (success) {
-            babelState.isLoaded = true;
-            babelState.isLoading = false;
-          } else {
-            babelState.didError = true;
-            babelState.isLoading = false;
-          }
-
-          return {
-            babel: babelState,
-            ...this._compile(state.code, state),
-          };
-        },
-        () => this._checkForUnloadedPlugins()
-      );
+    loadBabel(this.state.babel, babelState => {
+      this.setState(state => ({
+        ...babelState,
+        ...(babelState.isLoaded ? this._compile(state.code, state) : null),
+      }));
+
+      if (babelState.isLoaded) {
+        this._checkForUnloadedPlugins();
+      }
     });
   }
 

js/repl/UriUtils.js

@@ -69,7 +69,6 @@ const parseQuery = () => {
       "prettier",
       "showSidebar",
       "targets",
-      "targets",
       "version",
     ],
     state

js/repl/loadBabel.js

@@ -2,9 +2,25 @@ import loadBuildArtifacts from "./loadBuildArtifacts";
 import loadScript from "./loadScript";
 import { BabelState, LoadScriptCallback } from "./types";
 
-export default function loadBabel(config: BabelState, cb: LoadScriptCallback) {
-  function doLoad(url) {
-    loadScript(url, cb);
+const DEFAULT_BABEL_VERSION = "6";
+
+export default function loadBabel(
+  config: BabelState,
+  cb: (config: BabelState) => void
+) {
+  function doLoad(url, error) {
+    loadScript(url, success => {
+      if (success) {
+        config.isLoaded = true;
+        config.isLoading = false;
+      } else {
+        config.didError = true;
+        config.errorMessage = error;
+        config.isLoading = false;
+      }
+
+      cb(config);
+    });
   }
 
   // See if a CircleCI build number was passed in the path
@@ -36,7 +52,7 @@ export default function loadBabel(config: BabelState, cb: LoadScriptCallback) {
 
   // No specific version passed, so just download the latest release.
   if (!version) {
-    version = "6"; // This should be changed to "latest" when Babel 7 is stable
+    version = DEFAULT_BABEL_VERSION;
   }
 
   doLoad(`https://unpkg.com/babel-standalone@${version}/babel.js`);

js/repl/loadBuildArtifacts.js

@@ -1,38 +1,42 @@
 export default function loadBuildArtifacts(
-  repo: string = "babel/babel",
+  repo: string,
   build: string,
-  cb: (url: string) => void
+  cb: (url: string, error: string) => void
 ) {
+  const urlRepo = repo && repo.length ? repo : "babel/babel";
+
   // Loading a build from CircleCI (eg. for a pull request). We need to
   // first call CircleCI's API to get the URL to the artifact.
-  const buildURL = `https://circleci.com/api/v1.1/project/github/${repo}/${build}/artifacts`;
+  const buildURL = `https://circleci.com/api/v1.1/project/github/${urlRepo}/${build}/artifacts`;
 
   const xhr = new XMLHttpRequest();
   xhr.open("get", buildURL, true);
 
   xhr.onload = function() {
     const response = JSON.parse(xhr.responseText);
-    if (response.message) {
-      alert(`Could not load Babel build #${build}: ${response.message}`);
-      return;
-    }
 
-    const artifacts = response.filter(x =>
-      /babel-standalone\/babel.js$/.test(x.path)
-    );
+    let url;
+    let error;
 
-    if (!artifacts || artifacts.length === 0) {
-      alert(
-        `Could not find valid babel-standalone artifact in build #${build}`
+    if (response.message) {
+      error = `Could not load Babel build #${build}: ${response.message}`;
+    } else {
+      const artifacts = response.filter(x =>
+        /babel-standalone\/babel.js$/.test(x.path)
       );
-      return;
+
+      if (!artifacts || artifacts.length === 0) {
+        error = `Could not find valid babel-standalone artifact in build #${build}`;
+      } else {
+        url = artifacts[0].url;
+      }
     }
 
-    cb(artifacts[0].url);
+    cb(url, error);
   };
 
   xhr.onerror = function() {
-    alert(`Could not load Babel build #${build} :(`);
+    cb(null, `Could not load Babel build #${build} :(`);
   };
 
   xhr.send();

js/repl/types.js

@@ -31,6 +31,7 @@ type LazyLoadedState = {
 
 export type BabelState = LazyLoadedState & {
   build: string,
+  errorMessage?: string,
   circleciRepo: string,
   version: string,
 };