From 23888d618af280951fe67ff005ad2db1cc22db03 Mon Sep 17 00:00:00 2001 From: Oliver Eyton-Williams Date: Thu, 12 Sep 2024 12:40:36 +0200 Subject: [PATCH] feat: transform JSX in scripts (#55860) --- .../templates/Challenges/rechallenge/transformers.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/client/src/templates/Challenges/rechallenge/transformers.js b/client/src/templates/Challenges/rechallenge/transformers.js index 76a448cff18..e4419e6db08 100644 --- a/client/src/templates/Challenges/rechallenge/transformers.js +++ b/client/src/templates/Challenges/rechallenge/transformers.js @@ -177,9 +177,17 @@ async function transformSASS(documentElement) { async function transformScript(documentElement) { await loadBabel(); await loadPresetEnv(); + await loadPresetReact(); const scriptTags = documentElement.querySelectorAll('script'); scriptTags.forEach(script => { - script.innerHTML = babelTransformCode(getBabelOptions(presetsJS))( + const isBabel = script.type === 'text/babel'; + // TODO: make the use of JSX conditional on more than just the script type. + // It should only be used for React challenges since it would be confusing + // for learners to see the results of a transformation they didn't ask for. + const options = isBabel ? presetsJSX : presetsJS; + + if (isBabel) script.removeAttribute('type'); // otherwise the browser will ignore the script + script.innerHTML = babelTransformCode(getBabelOptions(options))( script.innerHTML ); });