Lazy load Babel on REPL

babel · Aug 18, 2017 · 5b0b58f · 5b0b58f
1 parent d647d89
commit 5b0b58f
Show file tree

Hide file tree

Showing 10 changed files with 357 additions and 152 deletions.
diff --git a/js/repl/LoadingMessage.js b/js/repl/LoadingMessage.js
diff --git a/js/repl/PresetLoadingAnimation.js b/js/repl/PresetLoadingAnimation.js
@@ -1,8 +1,8 @@
 import { css } from 'glamor';
 import React from 'react';
 
-const PresetLoadingAnimation = () =>
-  <div className={styles.loadingAnimation}>
+const PresetLoadingAnimation = ({ className }) =>
+  <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
@@ -7,7 +7,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 PresetLoadingAnimation from './PresetLoadingAnimation';
 import scopedEval from './scopedEval';
 import {
   envPresetConfig,
@@ -21,12 +23,14 @@ import {
   loadPersistedState,
   configArrayToStateMap,
   configToState,
+  persistedStateToBabelState,
   persistedStateToEnvConfig
 } from './replUtils';
-import { media } from './styles';
+import { colors, media } from './styles';
 
 import type {
   BabelPresets,
+  BabelState,
   EnvConfig,
   PluginState,
   PluginStateMap,
@@ -35,6 +39,7 @@ import type {
 
 type Props = {};
 type State = {
+  babel: BabelState,
   builtIns: boolean,
   code: string,
   compiled: ?string,
@@ -82,7 +87,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,
@@ -105,18 +111,27 @@ export default class Repl extends React.Component {
       )
     };
 
-    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
     };
@@ -161,6 +176,27 @@ 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,
@@ -353,15 +389,18 @@ 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,
       lineWrap: this.state.lineWrap,
       presets: presetsArray.join(','),
       prettier: plugins.prettier.isEnabled,
       showSidebar: this.state.isSidebarExpanded,
-      targets: envConfigToTargetsString(envConfig)
+      targets: envConfigToTargetsString(envConfig),
+      version: this.state.babel.version,
     };
 
     StorageService.set('replState', state);
@@ -387,6 +426,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%'
   }),