refactor(client): simplify transformation pipeline functions (#57402)

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

@@ -239,7 +239,8 @@ export const embedFilesInHtml = async function (challengeFiles) {
   const { indexHtml, stylesCss, scriptJs, indexJsx, indexTs } =
     challengeFilesToObject(challengeFiles);
 
-  const embedStylesAndScript = (documentElement, contentDocument) => {
+  const embedStylesAndScript = contentDocument => {
+    const documentElement = contentDocument.documentElement;
     const link =
       documentElement.querySelector('link[href="styles.css"]') ??
       documentElement.querySelector('link[href="./styles.css"]');
@@ -294,13 +295,13 @@ export const embedFilesInHtml = async function (challengeFiles) {
       embedStylesAndScript,
       indexHtml.contents
     );
-    return [challengeFiles, contents];
+    return contents;
   } else if (indexJsx) {
-    return [challengeFiles, `<script>${indexJsx.contents}</script>`];
+    return `<script>${indexJsx.contents}</script>`;
   } else if (scriptJs) {
-    return [challengeFiles, `<script>${scriptJs.contents}</script>`];
+    return `<script>${scriptJs.contents}</script>`;
   } else if (indexTs) {
-    return [challengeFiles, `<script>${indexTs.contents}</script>`];
+    return `<script>${indexTs.contents}</script>`;
   } else {
     throw Error('No html, ts or js(x) file found');
   }
@@ -319,12 +320,13 @@ const parseAndTransform = async function (transform, contents) {
   const parser = new DOMParser();
   const newDoc = parser.parseFromString(contents, 'text/html');
 
-  return await transform(newDoc.documentElement, newDoc);
+  return await transform(newDoc);
 };
 
 const getHtmlTranspiler = scriptOptions =>
   async function (file) {
-    const transform = async documentElement => {
+    const transform = async contentDocument => {
+      const documentElement = contentDocument.documentElement;
       await Promise.all([
         transformSASS(documentElement),
         transformScript(documentElement, scriptOptions)

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

@@ -243,10 +243,7 @@ export async function buildDOMChallenge(
   const usesTestRunner = options?.usesTestRunner ?? false;
   const finalFiles = await Promise.all(challengeFiles.map(pipeLine));
   const error = finalFiles.find(({ error }) => error)?.error;
-  const [embeddedFiles, contents] = (await embedFilesInHtml(finalFiles)) as [
-    ChallengeFile[],
-    string
-  ];
+  const contents = (await embedFilesInHtml(finalFiles)) as string;
 
   // if there is an error, we just build the test runner so that it can be
   // used to run tests against the code without actually running the code.
@@ -264,7 +261,7 @@ export async function buildDOMChallenge(
     // necessary at the moment.
     challengeType: challengeTypes.html,
     build: concatHtml(toBuild),
-    sources: buildSourceMap(embeddedFiles),
+    sources: buildSourceMap(finalFiles),
     loadEnzyme: hasJsx,
     error
   };