Function buildDOMChallenge

packages/challenge-builder/src/build.ts:214–264

(
  {
    challengeFiles,
    required = [],
    template = '',
    challengeType
  }: BuildChallengeData,
  options?: BuildOptions
)

// abstraction (function, class, whatever) and then create the various functions
// out of it.
async function buildDOMChallenge(
  {
    challengeFiles,
    required = [],
    template = '',
    challengeType
  }: BuildChallengeData,
  options?: BuildOptions
): Promise<BuildResult> {
  // TODO: make this required in the schema.
  if (!challengeFiles) throw Error('No challenge files provided');
  const hasJsx = challengeFiles.some(
    challengeFile => challengeFile.ext === 'jsx' || challengeFile.ext === 'tsx'
  );

  await configureTSCompiler(challengeFiles);
  const sourceFiles = challengeFiles.filter(file => !isTSConfig(file));
  const isMultifile = sourceFiles.length > 1;
  // I'm reasonably sure this is fine, but we need to migrate transformers to
  // TypeScript to be sure.
  const transformers: ApplyFunctionProps[] = (isMultifile && hasJsx
    ? getMultifileJSXTransformers(options)
    : getTransformers(options)) as unknown as ApplyFunctionProps[];

  const pipeLine = composeFunctions(...transformers);
  const finalFiles = await Promise.all(sourceFiles.map(pipeLine));
  const error = finalFiles.find(({ error }) => error)?.error;
  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.
  const toBuild = error
    ? {}
    : {
        required,
        template,
        contents
      };

  const requiresReact16 = required.some(({ src }) =>
    src?.includes('https://cdnjs.cloudflare.com/ajax/libs/react/16.')
  );

  return {
    challengeType,
    build: concatHtml(toBuild),
    sources: buildSourceMap(finalFiles),
    loadEnzyme: requiresReact16,
    error
  };
}

async function buildJSChallenge(
  {