From 4bf89a873eed4802ff08362e7ade08f0b332c360 Mon Sep 17 00:00:00 2001
From: Valeriy S <ValeraS@users.noreply.github.com>
Date: Wed, 12 Dec 2018 17:12:30 +0300
Subject: [PATCH] fix(client): transform html scripts

---
 .../Challenges/rechallenge/builders.js        |  5 +-
 .../Challenges/rechallenge/transformers.js    | 55 ++++++++++++++-----
 2 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/client/src/templates/Challenges/rechallenge/builders.js b/client/src/templates/Challenges/rechallenge/builders.js
index d3f1f86ddf..c1354a23d1 100644
--- a/client/src/templates/Challenges/rechallenge/builders.js
+++ b/client/src/templates/Challenges/rechallenge/builders.js
@@ -95,10 +95,7 @@ A required file can not have both a src and a link: src = ${src}, link = ${link}
 
   const body = Promise.all(files).then(files =>
     files
-      .reduce(
-        (body, file) => [...body, file.contents + file.tail + htmlCatch],
-        []
-      )
+      .reduce((body, file) => [...body, file.contents + htmlCatch], [])
       .map(source => createBody({ source }))
   );
 
diff --git a/client/src/templates/Challenges/rechallenge/transformers.js b/client/src/templates/Challenges/rechallenge/transformers.js
index 69e0d7ad6a..5c03a0e8bf 100644
--- a/client/src/templates/Challenges/rechallenge/transformers.js
+++ b/client/src/templates/Challenges/rechallenge/transformers.js
@@ -92,29 +92,58 @@ export const babelTransformer = cond([
 ]);
 
 const sassWorker = new WorkerExecutor('sass-compile');
+async function transformSASS(element) {
+  const styleTags = element.querySelectorAll('style[type="text/sass"]');
+  await Promise.all(
+    [].map.call(styleTags, async style => {
+      style.type = 'text/css';
+      style.innerHTML = await sassWorker.execute(style.innerHTML, 2000);
+    })
+  );
+}
 
-const htmlSassTransformCode = file => {
+function transformScript(element) {
+  const scriptTags = element.querySelectorAll('script');
+  scriptTags.forEach(script => {
+    script.innerHTML = tryTransform(babelTransformCode(babelOptionsJSX))(
+      script.innerHTML
+    );
+  });
+}
+
+const transformHtml = async function(file) {
   const div = document.createElement('div');
   div.innerHTML = file.contents;
-  const styleTags = div.querySelectorAll('style[type="text/sass"]');
-  if (styleTags.length > 0) {
-    return Promise.all(
-      [].map.call(styleTags, async style => {
-        style.type = 'text/css';
-        style.innerHTML = await sassWorker.execute(style.innerHTML, 2000);
-      })
-    ).then(() => vinyl.transformContents(() => div.innerHTML, file));
-  }
+  await Promise.all([transformSASS(div), transformScript(div)]);
   return vinyl.transformContents(() => div.innerHTML, file);
 };
 
-export const htmlSassTransformer = cond([
-  [testHTML, htmlSassTransformCode],
+export const composeHTML = cond([
+  [
+    testHTML,
+    flow(
+      partial(
+        vinyl.transformHeadTailAndContents,
+        source => {
+          const div = document.createElement('div');
+          div.innerHTML = source;
+          return div.innerHTML;
+        }
+      ),
+      partial(vinyl.compileHeadTail, '')
+    )
+  ],
+  [stubTrue, identity]
+]);
+
+export const htmlTransformer = cond([
+  [testHTML, transformHtml],
   [stubTrue, identity]
 ]);
 
 export const transformers = [
   replaceNBSP,
   babelTransformer,
-  htmlSassTransformer
+  composeHTML,
+  htmlTransformer
 ];