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