Handle front-end-libs challenges

packages/learn/src/templates/Challenges/classic/Show.js

@@ -58,6 +58,7 @@ class ShowClassic extends PureComponent {
     } = this.props;
     createFiles(files);
     initTests(tests);
+    console.log(challengeMeta);
     updateChallengeMeta(challengeMeta);
   }
 
@@ -92,6 +93,7 @@ class ShowClassic extends PureComponent {
       },
       files
     } = this.props;
+    console.log(files);
     const editors = Object.keys(files)
       .map(key => files[key])
       .map((file, index) => (
@@ -103,7 +105,10 @@ class ShowClassic extends PureComponent {
         </Fragment>
       ));
 
-    const showPreview = challengeType === challengeTypes.html;
+    const showPreview = (
+      challengeType === challengeTypes.html ||
+      challengeType === challengeTypes.modern
+    );
     const blockNameTitle = `${blockName} - ${title}`;
     return (
       <Fragment>
@@ -155,6 +160,11 @@ export const query = graphql`
           testString
         }
       }
+      required {
+        link
+        raw
+        src
+      }
       files {
         indexhtml {
           key
@@ -172,6 +182,14 @@ export const query = graphql`
           head
           tail
         }
+        indexjsx {
+          key
+          ext
+          name
+          contents
+          head
+          tail
+        }
       }
     }
   }

packages/learn/src/templates/Challenges/rechallenge/builders.js

@@ -49,11 +49,11 @@ export const cssToHtml = cond([
   [stubTrue, identity]
 ]);
 
-// FileStream::concactHtml(
+// FileStream::concatHtml(
 //   required: [ ...Object ],
 //   template: String
 // ) => Observable[{ build: String, sources: Dictionary }]
-export function concactHtml(required, template) {
+export function concatHtml(required, template) {
   const createBody = template ? _.template(template) : defaultTemplate;
   const source = this.shareReplay();
   const sourceMap = source.flatMap(files =>

packages/learn/src/templates/Challenges/redux/index.js

@@ -87,17 +87,12 @@ export const executeChallenge = createAction(types.executeChallenge);
 export const submitChallenge = createAction(types.submitChallenge);
 
 export const challengeFilesSelector = state => state[ns].challengeFiles;
-
 export const challengeMetaSelector = state => state[ns].challengeMeta;
-
 export const challengeTestsSelector = state => state[ns].challengeTests;
-
-export const isJSEnabledSelector = state => state[ns].isJSEnabled;
-
 export const consoleOutputSelector = state => state[ns].consoleOut;
-
 export const isCompletionModalOpenSelector = state =>
 state[ns].modal.completion;
+export const isJSEnabledSelector = state => state[ns].isJSEnabled;
 export const successMessageSelector = state => state[ns].successMessage;
 
 export const reducer = handleActions(

packages/learn/src/templates/Challenges/utils/build.js

@@ -6,6 +6,7 @@ import throwers from '../rechallenge/throwers';
 import {
   challengeFilesSelector,
   isJSEnabledSelector,
+  challengeMetaSelector,
   disableJSOnError
 } from '../redux';
 import {
@@ -13,7 +14,7 @@ import {
   proxyLoggerTransformer,
   testJS$JSX
 } from '../rechallenge/transformers';
-import { cssToHtml, jsToHtml, concactHtml } from '../rechallenge/builders.js';
+import { cssToHtml, jsToHtml, concatHtml } from '../rechallenge/builders.js';
 import { createFileStream, pipe } from './polyvinyl';
 
 const jQuery = {
@@ -40,8 +41,7 @@ function filterJSIfDisabled(state) {
 
 export function buildFromFiles(state, shouldProxyConsole) {
   const files = challengeFilesSelector(state);
-  const required = [];
-  /* challengeRequiredSelector(state);*/
+  const { required, template } = challengeMetaSelector(state);
   const finalRequires = [...globalRequires, ...required];
   const requiredFiles = Object.keys(files)
     .map(key => files[key])
@@ -53,12 +53,8 @@ export function buildFromFiles(state, shouldProxyConsole) {
     ::pipe(shouldProxyConsole ? proxyLoggerTransformer : identity)
     ::pipe(jsToHtml)
     ::pipe(cssToHtml)
-    ::concactHtml(
-      finalRequires,
-      false
-      /* challengeTemplateSelector(state) */
-    )
-    .catch(err => of(disableJSOnError(err)));
+    ::concatHtml(finalRequires, template)
+    .catch(err => disableJSOnError(err));
 }
 
 // export function buildBackendChallenge(state) {