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

parse CSS files for links to S3

Browse source
This commit is contained in:
Cassie Tarakajian 2016-10-25 18:38:20 -04:00
parent 17fab1782e
commit b48cf1ebdc
1 changed files with 25 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
client/modules/IDE/components/PreviewFrame.js
View file

@ -7,6 +7,8 @@ import loopProtect from 'loop-protect';
import { getBlobUrl } from '../actions/files'; import { getBlobUrl } from '../actions/files';
const startTag = '@fs-'; const startTag = '@fs-';
const MEDIA_FILE_REGEX = /^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp|mp3|wav|aiff|ogg|json|txt|csv|svg|obj|mp4|ogg|webm|mov)('|")$/i;
const STRING_REGEX = /(['"])((\\\1|.)*?)\1/gm;
function getAllScriptOffsets(htmlFile) { function getAllScriptOffsets(htmlFile) {
const offs = []; const offs = [];
@ -168,20 +170,17 @@ class PreviewFrame extends React.Component {
htmlFile = hijackConsoleLogsScript() + htmlFile; htmlFile = hijackConsoleLogsScript() + htmlFile;
const mediaFiles = this.props.files.filter(file => file.url); const mediaFiles = this.props.files.filter(file => file.url);
const textFiles = this.props.files.filter(file => file.name.match(/(.+\.json$|.+\.txt$|.+\.csv$)/i) && file.url === undefined); const textFiles = this.props.files.filter(file => file.name.match(/(.+\.json$|.+\.txt$|.+\.csv$)/i) && file.url === undefined);
console.log(textFiles);
const jsFiles = []; const jsFiles = [];
this.props.jsFiles.forEach(jsFile => { this.props.jsFiles.forEach(jsFile => {
const newJSFile = { ...jsFile }; const newJSFile = { ...jsFile };
let jsFileStrings = newJSFile.content.match(/(['"])((\\\1|.)*?)\1/gm); let jsFileStrings = newJSFile.content.match(STRING_REGEX);
const jsFileRegex = /^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp|mp3|wav|aiff|ogg|json|txt|csv|svg|obj|mp4|ogg|webm|mov)('|")$/i;
jsFileStrings = jsFileStrings || []; jsFileStrings = jsFileStrings || [];
jsFileStrings.forEach(jsFileString => { jsFileStrings.forEach(jsFileString => {
if (jsFileString.match(jsFileRegex)) { if (jsFileString.match(MEDIA_FILE_REGEX)) {
const filePath = jsFileString.substr(1, jsFileString.length - 2); const filePath = jsFileString.substr(1, jsFileString.length - 2);
const filePathArray = filePath.split('/'); const filePathArray = filePath.split('/');
const fileName = filePathArray[filePathArray.length - 1]; const fileName = filePathArray[filePathArray.length - 1];
console.log(fileName);
mediaFiles.forEach(file => { mediaFiles.forEach(file => {
if (file.name === fileName) { if (file.name === fileName) {
newJSFile.content = newJSFile.content.replace(filePath, file.url); // eslint-disable-line newJSFile.content = newJSFile.content.replace(filePath, file.url); // eslint-disable-line
@ -200,6 +199,26 @@ class PreviewFrame extends React.Component {
jsFiles.push(newJSFile); jsFiles.push(newJSFile);
}); });
const cssFiles = [];
this.props.cssFiles.forEach(cssFile => {
const newCSSFile = { ...cssFile };
let cssFileStrings = newCSSFile.content.match(STRING_REGEX);
cssFileStrings = cssFileStrings || [];
cssFileStrings.forEach(cssFileString => {
if (cssFileString.match(MEDIA_FILE_REGEX)) {
const filePath = cssFileString.substr(1, cssFileString.length - 2);
const filePathArray = filePath.split('/');
const fileName = filePathArray[filePathArray.length - 1];
mediaFiles.forEach(file => {
if (file.name === fileName) {
newCSSFile.content = newCSSFile.content.replace(filePath, file.url); // eslint-disable-line
}
});
}
});
cssFiles.push(newCSSFile);
});
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');
@ -207,7 +226,7 @@ class PreviewFrame extends React.Component {
htmlFile = htmlFile.replace(fileRegex, replacementString); htmlFile = htmlFile.replace(fileRegex, replacementString);
}); });
this.props.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>`); htmlFile = htmlFile.replace(fileRegex, `<style>\n${cssFile.content}\n</style>`);