feat(client): bundling test dependencies

client/package-lock.json

@@ -10597,6 +10597,11 @@
         "topo": "2.x.x"
       }
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+    },
     "js-levenshtein": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.3.tgz",

client/package.json

@@ -32,6 +32,7 @@
     "gatsby-remark-prismjs": "^3.0.2",
     "gatsby-source-filesystem": "^2.0.5",
     "gatsby-transformer-remark": "^2.1.8",
+    "jquery": "3.3.1",
     "lodash": "^4.17.10",
     "loop-protect": "^2.1.6",
     "monaco-editor-webpack-plugin": "^1.5.4",

client/src/client/frame-runner.js

@@ -1,3 +1,9 @@
+import chai from 'chai';
+import '@babel/polyfill';
+import jQuery from 'jquery';
+
+window.$ = jQuery;
+
 document.addEventListener('DOMContentLoaded', function() {
   const {
     timeout,
@@ -10,7 +16,6 @@ document.addEventListener('DOMContentLoaded', function() {
     throwError
   } = document.__deps__.rx;
   const frameReady = document.__frameReady;
-  const chai = parent.chai;
   const source = document.__source;
   const __getUserInput = document.__getUserInput || (x => x);
   const checkChallengePayload = document.__checkChallengePayload;
@@ -56,10 +61,6 @@ document.addEventListener('DOMContentLoaded', function() {
         return source;
       }
     };
-    const userCode = document.createElement('script');
-    userCode.type = 'text/javascript';
-    userCode.text = code;
-    document.body.appendChild(userCode);
     const assert = chai.assert;
     const getUserInput = __getUserInput;
     // Iterate through the test one at a time
@@ -70,7 +71,7 @@ document.addEventListener('DOMContentLoaded', function() {
         let test;
         let __result;
         // uncomment the following line to inspect
-        // the framerunner as it runs tests
+        // the frame-runner as it runs tests
         // make sure the dev tools console is open
         // debugger;
         try {

client/src/client/workers/test-evaluator.js

@@ -1,8 +1,5 @@
-/* global chai, importScripts */
+import chai from 'chai';
-importScripts(
+import '@babel/polyfill';
-  'https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js',
-  'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js'
-);
 
 const oldLog = self.console.log.bind(self.console);
 self.console.log = function proxyConsole(...args) {

client/src/templates/Challenges/rechallenge/builders.js

@@ -93,26 +93,22 @@ A required file can not have both a src and a link: src = ${src}, link = ${link}
       return head.concat(element);
     }, '');
 
-  const body = Promise.all(files).then(
+  const body = Promise.all(files).then(files =>
-    files => files.reduce(
+    files
-      (body, file) => [...body, file.contents + file.tail + htmlCatch],
+      .reduce(
-      []
+        (body, file) => [...body, file.contents + file.tail + htmlCatch],
-    )
+        []
-    .map(source => createBody({ source }))
+      )
+      .map(source => createBody({ source }))
   );
 
-  /* eslint-disable max-len */
-  const babelPolyfillCDN =
-    'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js';
-  const babelPolyfill = `<script src="${babelPolyfillCDN}" type="text/javascript"></script>`;
-  /* eslint-enable max-len */
   const frameRunner =
     '<script src="/js/frame-runner.js" type="text/javascript"></script>';
 
   return from(
-    Promise.all([head, body, babelPolyfill, frameRunner, sourceMap]).then(
+    Promise.all([head, body, frameRunner, sourceMap]).then(
-      ([head, body, babelPolyfill, frameRunner, sourceMap]) => ({
+      ([head, body, frameRunner, sourceMap]) => ({
-        build: head + body + babelPolyfill + frameRunner,
+        build: head + frameRunner + body,
         sources: sourceMap
       })
     )

client/src/templates/Challenges/utils/build.js

@@ -1,5 +1,4 @@
-import { combineLatest, of } from 'rxjs';
+import { of } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { flow } from 'lodash';
 
 import { throwers } from '../rechallenge/throwers';
@@ -13,9 +12,6 @@ import { transformers, testJS$JSX } from '../rechallenge/transformers';
 import { cssToHtml, jsToHtml, concatHtml } from '../rechallenge/builders.js';
 import { isPromise } from './polyvinyl';
 
-const jQueryCDN =
-  'https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js';
-const jQuery = `<script src='${jQueryCDN}' type='text/javascript'></script>`;
 const frameRunner =
   "<script src='/js/frame-runner.js' type='text/javascript'></script>";
 
@@ -24,9 +20,6 @@ const globalRequires = [
     link:
       'https://cdnjs.cloudflare.com/' +
       'ajax/libs/normalize/4.2.0/normalize.min.css'
-  },
-  {
-    src: jQueryCDN
   }
 ];
 
@@ -118,11 +111,9 @@ export function buildBackendChallenge(state) {
   const {
     solution: { value: url }
   } = backendFormValuesSelector(state);
-  return combineLatest(of(frameRunner), of(jQuery)).pipe(
+  return of({
-    map(([frameRunner, jQuery]) => ({
+    build: frameRunner,
-      build: jQuery + frameRunner,
+    sources: { url },
-      sources: { url },
+    checkChallengePayload: { solution: url }
-      checkChallengePayload: { solution: url }
+  });
-    }))
-  );
 }

client/src/templates/Challenges/utils/frame.js

@@ -12,7 +12,6 @@ import {
 import { configure, shallow, mount } from 'enzyme';
 import Adapter16 from 'enzyme-adapter-react-16';
 import { setConfig } from 'react-hot-loader';
-import 'chai';
 
 import { isJSEnabledSelector } from '../redux';