Lazy load babel on REPL

js/repl/PresetLoadingAnimation.js

@@ -1,8 +1,14 @@
 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}`} />

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,32 @@ 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) {
+      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}>
+          <div className={styles.loaderContent}>
+            {message}
+            {state.babel.isLoading &&
+              <PresetLoadingAnimation className={styles.loadingAnimation} />}
+          </div>
+        </div>
+      );
+    }
+
     const options = {
       lineWrapping: state.lineWrap,
     };
@@ -167,6 +187,19 @@ 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();
+      }
+    });
+  }
+
   _checkForUnloadedPlugins() {
     const {
       envConfig,
@@ -370,7 +403,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 +414,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 +444,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%",
   }),