gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(client): use iframe document element for transform (#45155)

Browse Source
This commit is contained in:
Shaun Hamilton
2022-02-18 09:52:15 +00:00
committed by GitHub
parent 1bdb03807a
commit c620077a7b
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/templates/Challenges/rechallenge/transformers.js
View File

@ -180,12 +180,13 @@ function getBabelOptions({ preview = false, protect = true }) {
} }
const sassWorker = createWorker(sassCompile); const sassWorker = createWorker(sassCompile);
async function transformSASS(contentDocument) { async function transformSASS(documentElement) {
// we only teach scss syntax, not sass. Also the compiler does not seem to be // we only teach scss syntax, not sass. Also the compiler does not seem to be
// able to deal with sass. // able to deal with sass.
const styleTags = contentDocument.querySelectorAll( const styleTags = documentElement.querySelectorAll(
'style[type~="text/scss"]' 'style[type~="text/scss"]'
); );
await Promise.all( await Promise.all(
[].map.call(styleTags, async style => { [].map.call(styleTags, async style => {
style.type = 'text/css'; style.type = 'text/css';
@ -194,10 +195,10 @@ async function transformSASS(contentDocument) {
); );
} }
async function transformScript(contentDocument) { async function transformScript(documentElement) {
await loadBabel(); await loadBabel();
await loadPresetEnv(); await loadPresetEnv();
const scriptTags = contentDocument.querySelectorAll('script'); const scriptTags = documentElement.querySelectorAll('script');
scriptTags.forEach(script => { scriptTags.forEach(script => {
script.innerHTML = tryTransform(babelTransformCode(babelOptionsJS))( script.innerHTML = tryTransform(babelTransformCode(babelOptionsJS))(
script.innerHTML script.innerHTML
@ -211,7 +212,7 @@ async function transformScript(contentDocument) {
const addImportedFiles = async function (fileP) { const addImportedFiles = async function (fileP) {
const file = await fileP; const file = await fileP;
const transform = frame => { const transform = frame => {
const documentElement = frame.contentDocument.documentElement; const documentElement = frame;
const link = const link =
documentElement.querySelector('link[href="styles.css"]') ?? documentElement.querySelector('link[href="styles.css"]') ??
documentElement.querySelector('link[href="./styles.css"]'); documentElement.querySelector('link[href="./styles.css"]');
@ -258,7 +259,7 @@ const transformWithFrame = async function (transform, contents) {
frame.contentDocument.documentElement.innerHTML = contents; frame.contentDocument.documentElement.innerHTML = contents;
// grab the contents now, in case the transformation fails // grab the contents now, in case the transformation fails
out = { contents: frame.contentDocument.documentElement.innerHTML }; out = { contents: frame.contentDocument.documentElement.innerHTML };
out = await transform(frame); out = await transform(frame.contentDocument.documentElement);
} finally { } finally {
document.body.removeChild(frame); document.body.removeChild(frame);
} }
@ -266,12 +267,12 @@ const transformWithFrame = async function (transform, contents) {
}; };
const transformHtml = async function (file) { const transformHtml = async function (file) {
const transform = async frame => { const transform = async documentElement => {
await Promise.all([ await Promise.all([
transformSASS(frame.contentDocument), transformSASS(documentElement),
transformScript(frame.contentDocument) transformScript(documentElement)
]); ]);
return { contents: frame.contentDocument.documentElement.innerHTML }; return { contents: documentElement.innerHTML };
}; };
const { contents } = await transformWithFrame(transform, file.contents); const { contents } = await transformWithFrame(transform, file.contents);