From 5b0b58fabfc4c1224e112809dfe0d974d2e01297 Mon Sep 17 00:00:00 2001
From: Brian Ng <bng412@gmail.com>
Date: Fri, 18 Aug 2017 11:07:51 -0500
Subject: [PATCH] Lazy load Babel on REPL

---
 js/repl/LoadingMessage.js         |   0
 js/repl/PresetLoadingAnimation.js |   4 +-
 js/repl/Repl.js                   |  75 +++++++-
 js/repl/ReplOptions.js            | 298 +++++++++++++++++-------------
 js/repl/UriUtils.js               |   5 +-
 js/repl/loadBabel.js              |  50 +++++
 js/repl/loadBuildArtifacts.js     |  39 ++++
 js/repl/replUtils.js              |  17 +-
 js/repl/types.js                  |  20 +-
 repl2.html                        |   1 -
 10 files changed, 357 insertions(+), 152 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 96bbcd11a6..23cb7d3feb 100644
--- 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
index 9a285ef673..22d1aa267e 100644
--- 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,7 +389,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,
@@ -361,7 +399,8 @@ export default class Repl extends React.Component {
       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%'
   }),
diff --git a/js/repl/ReplOptions.js b/js/repl/ReplOptions.js
index 7e23fc606d..95e9a19685 100644
--- a/js/repl/ReplOptions.js
+++ b/js/repl/ReplOptions.js
@@ -12,6 +12,7 @@ import Svg from './Svg';
 import { colors, media } from './styles';
 
 import type {
+  BabelState,
   EnvConfig,
   PluginConfig,
   PluginState,
@@ -23,6 +24,7 @@ type ToggleExpanded = (isExpanded: boolean) => void;
 type ToggleSetting = (name: string, isEnabled: boolean) => void;
 
 type Props = {
+  babel: BabelState,
   builtIns: boolean,
   className: string,
   debugEnvPreset: boolean,
@@ -78,144 +80,146 @@ 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
@@ -227,6 +231,10 @@ class ExpandedContainer extends Component {
             path="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
           />
         </div>
+
+        <div className={styles.babelVersion}>
+          v{window.Babel.version}
+        </div>
       </div>
     );
   }
@@ -372,7 +380,7 @@ const styles = {
     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]: {
@@ -427,6 +435,18 @@ const styles = {
       transform: 'rotate(90deg)'
     }
   }),
+  sectionsWrapper: css({
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    overflow: 'auto',
+
+    [media.large]: {
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
+      height: '100%',
+    },
+  }),
   section: css({
     display: 'flex',
     flexDirection: 'column',
@@ -521,5 +541,17 @@ const styles = {
     '&:disabled': {
       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 0c9eaaa6bd..39a18ed928 100644
--- a/js/repl/UriUtils.js
+++ b/js/repl/UriUtils.js
@@ -59,14 +59,17 @@ const parseQuery = () => {
     [
       'babili',
       'browsers',
+      'build',
       'builtIns',
+      'circleciRepo',
       'debug',
       '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..a1065626ff
--- /dev/null
+++ b/js/repl/loadBabel.js
@@ -0,0 +1,50 @@
+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..6ca3d90947
--- /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 7c961bab09..cfd0599f98 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,
@@ -47,12 +50,24 @@ export const loadPersistedState = (): PersistedState => {
     presets: merged.presets || '',
     prettier: merged.prettier === true,
     showSidebar: merged.showSidebar !== false, // Default to show
-    targets: merged.targets || ''
+    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 5a5463df9d..04e8c495f2 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
 };
 
@@ -43,7 +52,9 @@ export type CompileConfig = {
 export type PersistedState = {
   babili: boolean,
   browsers: string,
+  build: string,
   builtIns: boolean,
+  circleciRepo: string,
   code: string,
   debug: boolean,
   evaluate: boolean,
@@ -51,7 +62,8 @@ export type PersistedState = {
   presets: string,
   prettier: boolean,
   showSidebar: boolean,
-  targets: string
+  targets: string,
+  version: string,
 };
 
 type BabelPresetTargetsMap = {
diff --git a/repl2.html b/repl2.html
index cf74dea993..3f9d99e143 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