r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

injects S3 CSS/JS files properly into preview, as found in #196

Browse source
This commit is contained in:
Cassie Tarakajian 2016-11-11 17:36:19 -05:00
parent 167828b872
commit ddc4fb32b1
1 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
client/modules/IDE/components/PreviewFrame.jsx
View file

@ -233,14 +233,25 @@ class PreviewFrame extends React.Component {
jsFiles.forEach(jsFile => { jsFiles.forEach(jsFile => {
const fileName = escapeStringRegexp(jsFile.name); const fileName = escapeStringRegexp(jsFile.name);
const fileRegex = new RegExp(`<script.*?src=('|")((\.\/)|\/)?${fileName}('|").*?>([\s\S]*?)<\/script>`, 'gmi'); const fileRegex = new RegExp(`<script.*?src=('|")((\.\/)|\/)?${fileName}('|").*?>([\s\S]*?)<\/script>`, 'gmi');
const replacementString = `<script data-tag="${startTag}${jsFile.name}">\n${jsFile.content}\n</script>`; let replacementString;
if (jsFile.url) {
replacementString = `<script data-tag="${startTag}${jsFile.name}" src="${jsFile.url}"></script>`;
} else {
replacementString = `<script data-tag="${startTag}${jsFile.name}">\n${jsFile.content}\n</script>`;
}
htmlFile = htmlFile.replace(fileRegex, replacementString); htmlFile = htmlFile.replace(fileRegex, replacementString);
}); });
cssFiles.forEach(cssFile => { cssFiles.forEach(cssFile => {
const fileName = escapeStringRegexp(cssFile.name); const fileName = escapeStringRegexp(cssFile.name);
const fileRegex = new RegExp(`<link.*?href=('|")((\.\/)|\/)?${fileName}('|").*?>`, 'gmi'); const fileRegex = new RegExp(`<link.*?href=('|")((\.\/)|\/)?${fileName}('|").*?>`, 'gmi');
htmlFile = htmlFile.replace(fileRegex, `<style>\n${cssFile.content}\n</style>`); let replacementString;
if (cssFile.url) {
replacementString = `<link rel="stylesheet" href="${cssFile.url}" >`;
} else {
replacementString = `<style>\n${cssFile.content}\n</style>`;
}
htmlFile = htmlFile.replace(fileRegex, replacementString);
}); });
const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi); const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi);