fix(learn): transformers don't apply

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

@@ -63,10 +63,12 @@ export const cssToHtml = cond([
 // ) => Observable[{ build: String, sources: Dictionary }]
 export function concatHtml(required, template, files) {
   const createBody = template ? _template(template) : defaultTemplate;
-  const sourceMap = files.reduce((sources, file) => {
+  const sourceMap = Promise.all(files).then(
-    sources[file.name] = file.source || file.contents;
+    files => files.reduce((sources, file) => {
-    return sources;
+      sources[file.name] = file.source || file.contents;
-  }, {});
+      return sources;
+    }, {})
+  );
 
   const head = required
     .map(({ link, src }) => {
@@ -91,12 +93,13 @@ A required file can not have both a src and a link: src = ${src}, link = ${link}
       return head.concat(element);
     }, '');
 
-  const body = files
+  const body = Promise.all(files).then(
-    .reduce(
+    files => files.reduce(
       (body, file) => [...body, file.contents + file.tail + htmlCatch],
       []
     )
-    .map(source => createBody({ source }));
+    .map(source => createBody({ source }))
+  );
 
   const frameRunner =
     '<script src="/js/frame-runner.js" type="text/javascript"></script>';

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

@@ -13,8 +13,6 @@ import {
 import * as Babel from '@babel/standalone';
 import presetEnv from '@babel/preset-env';
 import presetReact from '@babel/preset-react';
-import { of } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
 import protect from 'loop-protect';
 
 import * as vinyl from '../utils/polyvinyl.js';
@@ -86,20 +84,17 @@ const htmlSassTransformCode = file => {
   if (styleTags.length === 0 || typeof Sass === 'undefined') {
     return vinyl.transformContents(() => doc.body.innerHTML, file);
   }
-  return styleTags.reduce((obs, style) => {
+  return Promise.all(styleTags.map(style => (
-    return obs.pipe(
+    new Promise(resolve => {
-      switchMap(
+      window.Sass.compile(style.innerHTML, function(result) {
-        file =>
+        style.type = 'text/css';
-          new Promise(resolve => {
+        style.innerHTML = result.text;
-            window.Sass.compile(style.innerHTML, function(result) {
+        resolve();
-              style.type = 'text/css';
+      });
-              style.innerHTML = result.text;
+    })
-              resolve(vinyl.transformContents(() => doc.body.innerHTML, file));
+  ))).then(() => (
-            });
+    vinyl.transformContents(() => doc.body.innerHTML, file)
-          })
+  ));
-      )
-    );
-  }, of(file));
 };
 
 export const htmlSassTransformer = cond([

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

@@ -11,6 +11,7 @@ import {
 } from '../redux';
 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';
@@ -34,18 +35,34 @@ function filterJSIfDisabled(state) {
   return file => !(testJS$JSX(file) && !isJSEnabled);
 }
 
+const applyFunction = fn => file => {
+  if (file.error) {
+    return file;
+  }
+  try {
+    let newFile = fn(file);
+    if (typeof newFile !== 'undefined') {
+      if (isPromise(newFile)) {
+        newFile = newFile.catch(() => {
+          // file.error = e.message;
+          return file;
+        });
+      }
+      return newFile;
+    }
+    return file;
+  } catch {
+    // file.error = e.message;
+    return file;
+  }
+};
+
 const applyFunctions = fns => file =>
   fns.reduce((file, fn) => {
-    if (file.error) {
+    if (isPromise(file)) {
-      return file;
+      return file.then(applyFunction(fn));
-    }
-    try {
-      fn(file);
-    } catch (e) {
-      // file.error = e.message;
-    } finally {
-      return file;
     }
+    return applyFunction(fn)(file);
   }, file);
 const toHtml = [jsToHtml, cssToHtml];
 const pipeLine = flow(

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

@@ -1,9 +1,9 @@
 // originally based off of https://github.com/gulpjs/vinyl
 import invariant from 'invariant';
-import { of, Observable, from, isObservable } from 'rxjs';
+import { of, from, isObservable } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 
-const isPromise = value =>
+export const isPromise = value =>
   value &&
   typeof value.subscribe !== 'function' &&
   typeof value.then === 'function';
@@ -13,7 +13,7 @@ export function castToObservable(maybe) {
     return maybe;
   }
   if (isPromise(maybe)) {
-    return Observable.fromPromise(maybe);
+    return from(maybe);
   }
   return of(maybe);
 }