From 59e0eacab3f15e6fdc8d858dea6c1753f0927037 Mon Sep 17 00:00:00 2001
From: Brian Ng <bng412@gmail.com>
Date: Sat, 19 Aug 2017 11:05:35 -0500
Subject: [PATCH 1/4] Lazy load Babel on REPL

---
 js/repl/LoadingMessage.js         |   0
 js/repl/PresetLoadingAnimation.js |   8 +-
 js/repl/Repl.js                   |  79 +++++++-
 js/repl/ReplOptions.js            | 297 ++++++++++++++++--------------
 js/repl/UriUtils.js               |   4 +
 js/repl/loadBabel.js              |  43 +++++
 js/repl/loadBuildArtifacts.js     |  39 ++++
 js/repl/replUtils.js              |  15 ++
 js/repl/types.js                  |  18 +-
 repl2.html                        |   1 -
 10 files changed, 350 insertions(+), 154 deletions(-)
 create mode 100644 js/repl/LoadingMessage.js
 create mode 100644 js/repl/loadBabel.js
 create mode 100644 js/repl/loadBuildArtifacts.js

diff --git a/js/repl/LoadingMessage.js b/js/repl/LoadingMessage.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/js/repl/PresetLoadingAnimation.js b/js/repl/PresetLoadingAnimation.js
index 636af654c4..bced120d43 100644
--- a/js/repl/PresetLoadingAnimation.js
+++ b/js/repl/PresetLoadingAnimation.js
@@ -1,8 +1,12 @@
 import { css } from "glamor";
 import React from "react";
 
-const PresetLoadingAnimation = () =>
-  <div className={styles.loadingAnimation}>
+type PresetLoadingAnimationProps = {
+  className: ?string,
+};
+
+const PresetLoadingAnimation = ({ className }: PresetLoadingAnimationProps) =>
+  <div className={`${className || ""} ${styles.loadingAnimation}`}>
     <div className={`${styles.loadingTick} ${styles.loadingTick1}`} />
     <div className={`${styles.loadingTick} ${styles.loadingTick2}`} />
     <div className={`${styles.loadingTick} ${styles.loadingTick3}`} />
diff --git a/js/repl/Repl.js b/js/repl/Repl.js
index 9066d3a33e..168bc6075f 100644
--- a/js/repl/Repl.js
+++ b/js/repl/Repl.js
@@ -8,8 +8,9 @@ import ReplOptions from "./ReplOptions";
 import StorageService from "./StorageService";
 import UriUtils from "./UriUtils";
 import compile from "./compile";
+import loadBabel from "./loadBabel";
 import loadPlugin from "./loadPlugin";
-import scopedEval from "./scopedEval";
+import PresetLoadingAnimation from "./PresetLoadingAnimation";
 import {
   envPresetConfig,
   pluginConfigs,
@@ -22,12 +23,15 @@ import {
   loadPersistedState,
   configArrayToStateMap,
   configToState,
+  persistedStateToBabelState,
   persistedStateToEnvConfig,
 } from "./replUtils";
-import { media } from "./styles";
+import scopedEval from "./scopedEval";
+import { colors, media } from "./styles";
 
 import type {
   BabelPresets,
+  BabelState,
   EnvConfig,
   PluginState,
   PluginStateMap,
@@ -36,6 +40,7 @@ import type {
 
 type Props = {};
 type State = {
+  babel: BabelState,
   builtIns: boolean,
   code: string,
   compiled: ?string,
@@ -86,7 +91,8 @@ export default class Repl extends React.Component {
 
     // A partial State is defined first b'c this._compile needs it.
     // The compile helper will then populate the missing State values.
-    const state = {
+    this.state = {
+      babel: persistedStateToBabelState(persistedState),
       builtIns: persistedState.builtIns,
       code: persistedState.code,
       compiled: null,
@@ -110,18 +116,28 @@ export default class Repl extends React.Component {
       sourceMap: null,
     };
 
-    this.state = {
-      ...state,
-      ...this._compile(persistedState.code, state),
-    };
-
-    // Load any plug-ins enabled by query params.
-    this._checkForUnloadedPlugins();
+    this._setupBabel();
   }
 
   render() {
     const state = this.state;
 
+    if (!state.babel.isLoaded) {
+      const message = state.babel.isLoading
+        ? "Loading Babel..."
+        : "An error occurred while loading Babel :(";
+
+      return (
+        <div className={styles.loader}>
+          <div className={styles.loaderContent}>
+            {message}
+            {state.babel.isLoading &&
+              <PresetLoadingAnimation className={styles.loadingAnimation} />}
+          </div>
+        </div>
+      );
+    }
+
     const options = {
       lineWrapping: state.lineWrap,
     };
@@ -167,6 +183,30 @@ 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()
+      );
+    });
+  }
+
   _checkForUnloadedPlugins() {
     const {
       envConfig,
@@ -370,7 +410,9 @@ export default class Repl extends React.Component {
     const state = {
       babili: plugins["babili-standalone"].isEnabled,
       browsers: envConfig.browsers,
+      build: this.state.babel.build,
       builtIns: this.state.builtIns,
+      circleciRepo: this.state.babel.circleciRepo,
       code: this.state.code,
       debug: this.state.debugEnvPreset,
       evaluate: this.state.runtimePolyfillState.isEnabled,
@@ -379,6 +421,7 @@ export default class Repl extends React.Component {
       prettier: plugins.prettier.isEnabled,
       showSidebar: this.state.isSidebarExpanded,
       targets: envConfigToTargetsString(envConfig),
+      version: this.state.babel.version,
     };
 
     StorageService.set("replState", state);
@@ -408,6 +451,22 @@ export default class Repl extends React.Component {
 }
 
 const styles = {
+  loader: css({
+    alignItems: "center",
+    background: colors.inverseBackgroundDark,
+    color: colors.inverseForegroundLight,
+    display: "flex",
+    height: "100vh",
+    justifyContent: "center",
+  }),
+  loadingAnimation: css({
+    justifyContent: "center",
+    margin: "2rem 0 0 0",
+  }),
+  loaderContent: css({
+    margin: "auto",
+    textAlign: "center",
+  }),
   codeMirrorPanel: css({
     flex: "0 0 50%",
   }),
diff --git a/js/repl/ReplOptions.js b/js/repl/ReplOptions.js
index 67d223ffc5..026e2b4a9a 100644
--- a/js/repl/ReplOptions.js
+++ b/js/repl/ReplOptions.js
@@ -78,146 +78,150 @@ class ExpandedContainer extends Component {
 
     return (
       <div className={styles.expandedContainer}>
-        <div className={styles.section}>
-          <div className={styles.sectionHeader}>Settings</div>
-          <PluginToggle
-            config={runtimePolyfillConfig}
-            label="Evaluate"
-            onSettingChange={onSettingChange}
-            state={runtimePolyfillState}
-          />
-          <label className={styles.settingsLabel}>
-            <input
-              checked={lineWrap}
-              onChange={this._onLineWrappingChange}
-              className={styles.inputCheckboxLeft}
-              type="checkbox"
-            />
-            Line Wrap
-          </label>
-          {pluginConfigs.map(config =>
-            <PluginToggle
-              config={config}
-              key={config.package}
-              onSettingChange={onSettingChange}
-              state={pluginState[config.package]}
-            />
-          )}
-        </div>
-        <div className={styles.section}>
-          <div className={styles.sectionHeader}>Presets</div>
-          {presetPluginConfigs.map(config =>
+        <div className={styles.sectionsWrapper}>
+          <div className={styles.section}>
+            <div className={styles.sectionHeader}>Settings</div>
             <PluginToggle
-              config={config}
-              key={config.package}
+              config={runtimePolyfillConfig}
+              label="Evaluate"
               onSettingChange={onSettingChange}
-              state={presetState[config.package]}
-            />
-          )}
-        </div>
-        <div className={`${styles.section} ${styles.sectionEnv}`}>
-          <label
-            className={`${styles.sectionHeader} ${styles.sectionEnvHeader}`}
-          >
-            {envPresetState.isLoading
-              ? <PresetLoadingAnimation />
-              : "Env Preset"}
-
-            <input
-              checked={envConfig.isEnvPresetEnabled}
-              className={styles.envPresetCheckbox}
-              type="checkbox"
-              onChange={this._onEnvPresetEnabledChange}
+              state={runtimePolyfillState}
             />
-          </label>
-          <div className={styles.envPresetColumn}>
+            <label className={styles.settingsLabel}>
+              <input
+                checked={lineWrap}
+                onChange={this._onLineWrappingChange}
+                className={styles.inputCheckboxLeft}
+                type="checkbox"
+              />
+              Line Wrap
+            </label>
+            {pluginConfigs.map(config =>
+              <PluginToggle
+                config={config}
+                key={config.package}
+                onSettingChange={onSettingChange}
+                state={pluginState[config.package]}
+              />
+            )}
+          </div>
+          <div className={styles.section}>
+            <div className={styles.sectionHeader}>Presets</div>
+            {presetPluginConfigs.map(config =>
+              <PluginToggle
+                config={config}
+                key={config.package}
+                onSettingChange={onSettingChange}
+                state={presetState[config.package]}
+              />
+            )}
+          </div>
+          <div className={`${styles.section} ${styles.sectionEnv}`}>
             <label
-              className={`${styles.envPresetColumnLabel} ${styles.highlight}`}
+              className={`${styles.sectionHeader} ${styles.sectionEnvHeader}`}
             >
-              Browser
+              {envPresetState.isLoading
+                ? <PresetLoadingAnimation />
+                : "Env Preset"}
+
+              <input
+                checked={envConfig.isEnvPresetEnabled}
+                className={styles.envPresetCheckbox}
+                type="checkbox"
+                onChange={this._onEnvPresetEnabledChange}
+              />
+            </label>
+            <div className={styles.envPresetColumn}>
+              <label
+                className={`${styles.envPresetColumnLabel} ${styles.highlight}`}
+              >
+                Browser
+              </label>
+              <textarea
+                disabled={disableEnvSettings}
+                className={styles.envPresetInput}
+                onChange={this._onBrowsersChange}
+                placeholder={envPresetDefaults.browsers.placeholder}
+                value={envConfig.browsers}
+              />
+            </div>
+            <label className={styles.envPresetRow}>
+              <span className={`${styles.envPresetLabel} ${styles.highlight}`}>
+                Electron
+              </span>
+              <input
+                className={`${styles.envPresetNumber} ${styles.envPresetInput}`}
+                disabled={
+                  !envPresetState.isLoaded ||
+                  !envConfig.isEnvPresetEnabled ||
+                  !envConfig.isElectronEnabled
+                }
+                type="number"
+                min={envPresetDefaults.electron.min}
+                max={999}
+                step={envPresetDefaults.electron.step}
+                onChange={this._onElectronChange}
+                value={envConfig.electron}
+              />
+              <input
+                checked={envConfig.isElectronEnabled}
+                className={styles.envPresetCheckbox}
+                disabled={disableEnvSettings}
+                onChange={this._onIsElectronEnabledChange}
+                type="checkbox"
+              />
+            </label>
+            <label className={styles.envPresetRow}>
+              <span className={`${styles.envPresetLabel} ${styles.highlight}`}>
+                Node
+              </span>
+              <input
+                className={`${styles.envPresetNumber} ${styles.envPresetInput}`}
+                disabled={
+                  !envPresetState.isLoaded ||
+                  !envConfig.isEnvPresetEnabled ||
+                  !envConfig.isNodeEnabled
+                }
+                type="number"
+                min={envPresetDefaults.node.min}
+                max={999}
+                step={envPresetDefaults.node.step}
+                onChange={this._onNodeChange}
+                value={envConfig.node}
+              />
+              <input
+                checked={envConfig.isNodeEnabled}
+                className={styles.envPresetCheckbox}
+                disabled={disableEnvSettings}
+                onChange={this._onIsNodeEnabledChange}
+                type="checkbox"
+              />
+            </label>
+            <label className={styles.settingsLabel}>
+              <input
+                checked={builtIns}
+                className={styles.inputCheckboxLeft}
+                disabled={runtimePolyfillState.isEnabled || disableEnvSettings}
+                onChange={this._onBuiltInsChange}
+                type="checkbox"
+              />
+              Built-ins
+            </label>
+            <label className={styles.settingsLabel}>
+              <input
+                checked={debugEnvPreset}
+                className={styles.inputCheckboxLeft}
+                disabled={disableEnvSettings}
+                onChange={this._onDebugChange}
+                type="checkbox"
+              />
+              Debug
             </label>
-            <textarea
-              disabled={disableEnvSettings}
-              className={styles.envPresetInput}
-              onChange={this._onBrowsersChange}
-              placeholder={envPresetDefaults.browsers.placeholder}
-              value={envConfig.browsers}
-            />
           </div>
-          <label className={styles.envPresetRow}>
-            <span className={`${styles.envPresetLabel} ${styles.highlight}`}>
-              Electron
-            </span>
-            <input
-              className={`${styles.envPresetNumber} ${styles.envPresetInput}`}
-              disabled={
-                !envPresetState.isLoaded ||
-                !envConfig.isEnvPresetEnabled ||
-                !envConfig.isElectronEnabled
-              }
-              type="number"
-              min={envPresetDefaults.electron.min}
-              max={999}
-              step={envPresetDefaults.electron.step}
-              onChange={this._onElectronChange}
-              value={envConfig.electron}
-            />
-            <input
-              checked={envConfig.isElectronEnabled}
-              className={styles.envPresetCheckbox}
-              disabled={disableEnvSettings}
-              onChange={this._onIsElectronEnabledChange}
-              type="checkbox"
-            />
-          </label>
-          <label className={styles.envPresetRow}>
-            <span className={`${styles.envPresetLabel} ${styles.highlight}`}>
-              Node
-            </span>
-            <input
-              className={`${styles.envPresetNumber} ${styles.envPresetInput}`}
-              disabled={
-                !envPresetState.isLoaded ||
-                !envConfig.isEnvPresetEnabled ||
-                !envConfig.isNodeEnabled
-              }
-              type="number"
-              min={envPresetDefaults.node.min}
-              max={999}
-              step={envPresetDefaults.node.step}
-              onChange={this._onNodeChange}
-              value={envConfig.node}
-            />
-            <input
-              checked={envConfig.isNodeEnabled}
-              className={styles.envPresetCheckbox}
-              disabled={disableEnvSettings}
-              onChange={this._onIsNodeEnabledChange}
-              type="checkbox"
-            />
-          </label>
-          <label className={styles.settingsLabel}>
-            <input
-              checked={builtIns}
-              className={styles.inputCheckboxLeft}
-              disabled={runtimePolyfillState.isEnabled || disableEnvSettings}
-              onChange={this._onBuiltInsChange}
-              type="checkbox"
-            />
-            Built-ins
-          </label>
-          <label className={styles.settingsLabel}>
-            <input
-              checked={debugEnvPreset}
-              className={styles.inputCheckboxLeft}
-              disabled={disableEnvSettings}
-              onChange={this._onDebugChange}
-              type="checkbox"
-            />
-            Debug
-          </label>
         </div>
-
+        <div className={styles.babelVersion}>
+          v{window.Babel.version}
+        </div>
         <div
           className={`${styles.closeButton} ${nestedCloseButton}`}
           onClick={() => onIsExpandedChange(false)}
@@ -373,14 +377,14 @@ const styles = {
     },
   }),
   expandedContainer: css({
+    flexDirection: "column",
     minWidth: "150px",
     display: "flex",
     overflow: "auto",
-    boxSshadow:
+    boxShadow:
       "rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.24) 0px 1px 4px",
 
     [media.large]: {
-      flexDirection: "column",
       height: "100%",
 
       [`& .${nestedCloseButton}`]: {
@@ -389,10 +393,6 @@ const styles = {
     },
 
     [media.mediumAndDown]: {
-      flexDirection: "row",
-      flexWrap: "wrap",
-      overflow: "auto",
-
       [`& .${nestedCloseButton}`]: {
         bottom: "-1.5rem",
       },
@@ -431,6 +431,15 @@ const styles = {
       transform: "rotate(90deg)",
     },
   }),
+  sectionsWrapper: css({
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+
+    [media.large]: {
+      display: "block",
+    },
+  }),
   section: css({
     display: "flex",
     flexDirection: "column",
@@ -526,4 +535,16 @@ const styles = {
       opacity: 0.5,
     },
   }),
+  babelVersion: css({
+    fontFamily: "monospace",
+    fontSize: "1.25rem",
+    marginLeft: "auto",
+    paddingRight: "1.5rem",
+
+    [media.large]: {
+      borderTop: "2px solid #121417",
+      margin: 0,
+      padding: "1rem 1.5rem",
+    },
+  }),
 };
diff --git a/js/repl/UriUtils.js b/js/repl/UriUtils.js
index ec00a6be2b..8b17a7e7f9 100644
--- a/js/repl/UriUtils.js
+++ b/js/repl/UriUtils.js
@@ -59,14 +59,18 @@ const parseQuery = () => {
     [
       "babili",
       "browsers",
+      "build",
       "builtIns",
       "debug",
+      "circleciRepo",
       "evaluate",
       "lineWrap",
       "presets",
       "prettier",
       "showSidebar",
       "targets",
+      "targets",
+      "version",
     ],
     state
   );
diff --git a/js/repl/loadBabel.js b/js/repl/loadBabel.js
new file mode 100644
index 0000000000..0bad6407dd
--- /dev/null
+++ b/js/repl/loadBabel.js
@@ -0,0 +1,43 @@
+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);
+  }
+
+  // See if a CircleCI build number was passed in the path
+  // Prod (with URL rewriting): /repl/build/12345/
+  // Dev: /repl/#?build=12345
+  let build = config.build;
+
+  const buildFromPath = window.location.pathname.match(/\/build\/([0-9]+)\/?$/);
+
+  if (buildFromPath) {
+    build = buildFromPath[1];
+  }
+
+  if (build) {
+    loadBuildArtifacts(config.circleciRepo, build, doLoad);
+    return;
+  }
+
+  // See if a released version of Babel was passed
+  // Prod (with URL rewriting): /repl/version/1.2.3/
+  // Dev: /repl/#?version=1.2.3
+  let version = config.version;
+
+  const versionFromPath = window.location.pathname.match(/\/version\/(.+)\/?$/);
+
+  if (versionFromPath) {
+    version = versionFromPath[1];
+  }
+
+  // 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
+  }
+
+  doLoad(`https://unpkg.com/babel-standalone@${version}/babel.js`);
+}
diff --git a/js/repl/loadBuildArtifacts.js b/js/repl/loadBuildArtifacts.js
new file mode 100644
index 0000000000..7dd387996a
--- /dev/null
+++ b/js/repl/loadBuildArtifacts.js
@@ -0,0 +1,39 @@
+export default function loadBuildArtifacts(
+  repo: string = "babel/babel",
+  build: string,
+  cb: (url: string) => void
+) {
+  // 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 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)
+    );
+
+    if (!artifacts || artifacts.length === 0) {
+      alert(
+        `Could not find valid babel-standalone artifact in build #${build}`
+      );
+      return;
+    }
+
+    cb(artifacts[0].url);
+  };
+
+  xhr.onerror = function() {
+    alert(`Could not load Babel build #${build} :(`);
+  };
+
+  xhr.send();
+}
diff --git a/js/repl/replUtils.js b/js/repl/replUtils.js
index c5040d0c9b..0008192886 100644
--- a/js/repl/replUtils.js
+++ b/js/repl/replUtils.js
@@ -6,6 +6,7 @@ import UriUtils from "./UriUtils";
 
 import type {
   BabelPresetEnvResult,
+  BabelState,
   EnvConfig,
   PersistedState,
   PluginConfig,
@@ -39,7 +40,9 @@ export const loadPersistedState = (): PersistedState => {
   return {
     babili: merged.babili === true,
     browsers: merged.browsers || "",
+    build: merged.build || "",
     builtIns: merged.builtIns === true,
+    circleciRepo: merged.circleciRepo || "",
     code: merged.code || "",
     debug: merged.debug === true,
     evaluate: merged.evaluate === true,
@@ -48,11 +51,23 @@ export const loadPersistedState = (): PersistedState => {
     prettier: merged.prettier === true,
     showSidebar: merged.showSidebar !== false, // Default to show
     targets: merged.targets || "",
+    version: merged.version || "",
   };
 };
 
 type DefaultPlugins = { [name: string]: boolean };
 
+export const persistedStateToBabelState = (
+  persistedState: PersistedState
+): BabelState => ({
+  build: persistedState.build,
+  circleciRepo: persistedState.circleciRepo,
+  didError: false,
+  isLoaded: false,
+  isLoading: true,
+  version: persistedState.version,
+});
+
 export const configArrayToStateMap = (
   pluginConfigs: PluginConfigs,
   defaults: DefaultPlugins = {}
diff --git a/js/repl/types.js b/js/repl/types.js
index 1811c6db4d..b43342cbc0 100644
--- a/js/repl/types.js
+++ b/js/repl/types.js
@@ -23,12 +23,21 @@ export type PluginConfig = {
 
 export type PluginConfigs = Array<PluginConfig>;
 
-export type PluginState = {
-  config: PluginConfig,
+type LazyLoadedState = {
   didError: boolean,
-  isEnabled: boolean,
   isLoaded: boolean,
   isLoading: boolean,
+};
+
+export type BabelState = LazyLoadedState & {
+  build: string,
+  circleciRepo: string,
+  version: string,
+};
+
+export type PluginState = LazyLoadedState & {
+  config: PluginConfig,
+  isEnabled: boolean,
   plugin: any,
 };
 
@@ -44,7 +53,9 @@ export type CompileConfig = {
 export type PersistedState = {
   babili: boolean,
   browsers: string,
+  build: string,
   builtIns: boolean,
+  circleciRepo: string,
   code: string,
   debug: boolean,
   evaluate: boolean,
@@ -53,6 +64,7 @@ export type PersistedState = {
   prettier: boolean,
   showSidebar: boolean,
   targets: string,
+  version: string,
 };
 
 type BabelPresetTargetsMap = {
diff --git a/repl2.html b/repl2.html
index 414b61b5a6..4c84818274 100644
--- a/repl2.html
+++ b/repl2.html
@@ -3,7 +3,6 @@
 permalink: /repl2/
 fullscreen: true
 third_party_js:
-- https://unpkg.com/babel-standalone@^6
 - https://unpkg.com/react@16.0.0-beta.3/umd/react.production.min.js
 - https://unpkg.com/react-dom@16.0.0-beta.3/umd/react-dom.production.min.js
 - https://unpkg.com/codemirror@5.28.0/lib/codemirror.js

From 848320b3582341acd218adb9d0e08e652d100d78 Mon Sep 17 00:00:00 2001
From: Brian Ng <bng412@gmail.com>
Date: Mon, 21 Aug 2017 10:42:30 -0500
Subject: [PATCH 2/4] review fixes and bubble up error message

---
 js/repl/PresetLoadingAnimation.js |  4 +++-
 js/repl/Repl.js                   | 39 +++++++++++++------------------
 js/repl/UriUtils.js               |  1 -
 js/repl/loadBabel.js              | 24 +++++++++++++++----
 js/repl/loadBuildArtifacts.js     | 36 +++++++++++++++-------------
 js/repl/types.js                  |  1 +
 6 files changed, 60 insertions(+), 45 deletions(-)

diff --git a/js/repl/PresetLoadingAnimation.js b/js/repl/PresetLoadingAnimation.js
index bced120d43..f3a3494f59 100644
--- a/js/repl/PresetLoadingAnimation.js
+++ b/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}`} />
diff --git a/js/repl/Repl.js b/js/repl/Repl.js
index 168bc6075f..bddf824f9d 100644
--- a/js/repl/Repl.js
+++ b/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();
+      }
     });
   }
 
diff --git a/js/repl/UriUtils.js b/js/repl/UriUtils.js
index 8b17a7e7f9..e392406f7d 100644
--- a/js/repl/UriUtils.js
+++ b/js/repl/UriUtils.js
@@ -69,7 +69,6 @@ const parseQuery = () => {
       "prettier",
       "showSidebar",
       "targets",
-      "targets",
       "version",
     ],
     state
diff --git a/js/repl/loadBabel.js b/js/repl/loadBabel.js
index 0bad6407dd..0de4cd72fe 100644
--- a/js/repl/loadBabel.js
+++ b/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`);
diff --git a/js/repl/loadBuildArtifacts.js b/js/repl/loadBuildArtifacts.js
index 7dd387996a..931822984e 100644
--- a/js/repl/loadBuildArtifacts.js
+++ b/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();
diff --git a/js/repl/types.js b/js/repl/types.js
index b43342cbc0..cce6b59937 100644
--- a/js/repl/types.js
+++ b/js/repl/types.js
@@ -31,6 +31,7 @@ type LazyLoadedState = {
 
 export type BabelState = LazyLoadedState & {
   build: string,
+  errorMessage?: string,
   circleciRepo: string,
   version: string,
 };

From 26f1c361361507a61966f1b7724155610b24d657 Mon Sep 17 00:00:00 2001
From: Brian Ng <bng412@gmail.com>
Date: Mon, 21 Aug 2017 10:46:02 -0500
Subject: [PATCH 3/4] change bg of version on desktop

---
 js/repl/ReplOptions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/repl/ReplOptions.js b/js/repl/ReplOptions.js
index 026e2b4a9a..1a558bc1c8 100644
--- a/js/repl/ReplOptions.js
+++ b/js/repl/ReplOptions.js
@@ -542,7 +542,7 @@ const styles = {
     paddingRight: "1.5rem",
 
     [media.large]: {
-      borderTop: "2px solid #121417",
+      background: "#181a1f",
       margin: 0,
       padding: "1rem 1.5rem",
     },

From ece04944e4c6ca60d05c8b7166874568ce7f8218 Mon Sep 17 00:00:00 2001
From: Brian Ng <bng412@gmail.com>
Date: Mon, 21 Aug 2017 15:39:46 -0500
Subject: [PATCH 4/4] fixes

---
 js/repl/PresetLoadingAnimation.js |  2 +-
 js/repl/Repl.js                   | 21 ++++++++++++---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/js/repl/PresetLoadingAnimation.js b/js/repl/PresetLoadingAnimation.js
index f3a3494f59..7693bcf67b 100644
--- a/js/repl/PresetLoadingAnimation.js
+++ b/js/repl/PresetLoadingAnimation.js
@@ -8,7 +8,7 @@ type PresetLoadingAnimationProps = {
 const PresetLoadingAnimation = ({
   className = "",
 }: PresetLoadingAnimationProps) =>
-  <div className={`${className || ""} ${styles.loadingAnimation}`}>
+  <div className={`${className} ${styles.loadingAnimation}`}>
     <div className={`${styles.loadingTick} ${styles.loadingTick1}`} />
     <div className={`${styles.loadingTick} ${styles.loadingTick2}`} />
     <div className={`${styles.loadingTick} ${styles.loadingTick3}`} />
diff --git a/js/repl/Repl.js b/js/repl/Repl.js
index bddf824f9d..8a09f40776 100644
--- a/js/repl/Repl.js
+++ b/js/repl/Repl.js
@@ -125,7 +125,7 @@ export default class Repl extends React.Component {
     if (!state.babel.isLoaded) {
       let message = "Loading Babel...";
 
-      if (!state.babel.isLoading && state.babel.didError) {
+      if (state.babel.didError) {
         message =
           state.babel.errorMessage ||
           "An error occurred while loading Babel :(";
@@ -189,14 +189,17 @@ export default class Repl extends React.Component {
 
   _setupBabel() {
     loadBabel(this.state.babel, babelState => {
-      this.setState(state => ({
-        ...babelState,
-        ...(babelState.isLoaded ? this._compile(state.code, state) : null),
-      }));
-
-      if (babelState.isLoaded) {
-        this._checkForUnloadedPlugins();
-      }
+      this.setState(
+        state => ({
+          ...babelState,
+          ...(babelState.isLoaded ? this._compile(state.code, state) : null),
+        }),
+        () => {
+          if (babelState.isLoaded) {
+            this._checkForUnloadedPlugins();
+          }
+        }
+      );
     });
   }