From d87c16e65e3fd77bc00e43fff5c0d36202620d57 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Thu, 16 Jan 2020 11:27:26 +0100
Subject: [PATCH] fix: only load preset when needed

---
 .../Challenges/rechallenge/transformers.js    | 40 ++++++++++++++-----
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/client/src/templates/Challenges/rechallenge/transformers.js b/client/src/templates/Challenges/rechallenge/transformers.js
index 3589a35ae9..eff7b2f88a 100644
--- a/client/src/templates/Challenges/rechallenge/transformers.js
+++ b/client/src/templates/Challenges/rechallenge/transformers.js
@@ -47,12 +47,6 @@ async function loadBabel() {
   Babel = await import(
     /* webpackChunkName: "@babel/standalone" */ '@babel/standalone'
   );
-  presetEnv = await import(
-    /* webpackChunkName: "@babel/preset-env" */ '@babel/preset-env'
-  );
-  presetReact = await import(
-    /* webpackChunkName: "@babel/preset-react" */ '@babel/preset-react'
-  );
   /* eslint-enable no-inline-comments */
   Babel.registerPlugin(
     'loopProtection',
@@ -62,13 +56,19 @@ async function loadBabel() {
     'testLoopProtection',
     protect(testProtectTimeout, testLoopProtectCB, loopsPerTimeoutCheck)
   );
+}
+
+async function loadPresetEnv() {
+  if (presetEnv) return;
+  /* eslint-disable no-inline-comments */
+  presetEnv = await import(
+    /* webpackChunkName: "@babel/preset-env" */ '@babel/preset-env'
+  );
+  /* eslint-enable no-inline-comments */
+
   babelOptionsJSBase = {
     presets: [presetEnv]
   };
-  babelOptionsJSX = {
-    plugins: ['loopProtection'],
-    presets: [presetEnv, presetReact]
-  };
   babelOptionsJS = {
     ...babelOptionsJSBase,
     plugins: ['testLoopProtection']
@@ -79,6 +79,23 @@ async function loadBabel() {
   };
 }
 
+async function loadPresetReact() {
+  if (presetReact) return;
+  /* eslint-disable no-inline-comments */
+  presetReact = await import(
+    /* webpackChunkName: "@babel/preset-react" */ '@babel/preset-react'
+  );
+  if (!presetEnv)
+    presetEnv = await import(
+      /* webpackChunkName: "@babel/preset-env" */ '@babel/preset-env'
+    );
+  /* eslint-enable no-inline-comments */
+  babelOptionsJSX = {
+    plugins: ['loopProtection'],
+    presets: [presetEnv, presetReact]
+  };
+}
+
 const babelTransformCode = options => code =>
   Babel.transform(code, options).code;
 
@@ -128,6 +145,7 @@ const babelTransformer = ({ preview = false, protect = true }) => {
       testJS,
       async code => {
         await loadBabel();
+        await loadPresetEnv();
         return partial(
           vinyl.transformHeadTailAndContents,
           tryTransform(babelTransformCode(options))
@@ -138,6 +156,7 @@ const babelTransformer = ({ preview = false, protect = true }) => {
       testJSX,
       async code => {
         await loadBabel();
+        await loadPresetReact();
         return flow(
           partial(
             vinyl.transformHeadTailAndContents,
@@ -164,6 +183,7 @@ async function transformSASS(element) {
 
 async function transformScript(element) {
   await loadBabel();
+  await loadPresetReact();
   const scriptTags = element.querySelectorAll('script');
   scriptTags.forEach(script => {
     script.innerHTML = tryTransform(babelTransformCode(babelOptionsJSX))(