ace: Delete all `$$INCLUDE_CSS` logic

The intention of the deleted code was to reduce the number of fetches,
but it only saved a single fetch due to implementation flaws. The
right way to reduce the number of fetches is to use a bundling
technology such as webpack, and this change makes it easier to do so.
pull/4903/head
Richard Hansen 2021-03-01 02:21:22 -05:00 committed by John McLear
parent 66d3ac3783
commit b0862cd030
2 changed files with 9 additions and 84 deletions

View File

@ -220,44 +220,6 @@ const minify = async (req, res) => {
} }
}; };
// find all includes in ace.js and embed them.
const getAceFile = async () => {
let data = await fs.readFile(path.join(ROOT_DIR, 'js/ace.js'), 'utf8');
// Find all includes in ace.js and embed them
const filenames = [];
if (settings.minify) {
const regex = /\$\$INCLUDE_[a-zA-Z_]+\((['"])([^'"]*)\1\)/gi;
// This logic can be simplified via String.prototype.matchAll() once support for Node.js
// v11.x and older is dropped.
let matches;
while ((matches = regex.exec(data)) != null) {
filenames.push(matches[2]);
}
}
data += 'Ace2Editor.EMBEDED = Ace2Editor.EMBEDED || {};\n';
// Request the contents of the included file on the server-side and write
// them into the file.
await Promise.all(filenames.map(async (filename) => {
// Hostname "invalid.invalid" is a dummy value to allow parsing as a URI.
const baseURI = 'http://invalid.invalid';
let resourceURI = baseURI + path.join('/static/', filename);
resourceURI = resourceURI.replace(/\\/g, '/'); // Windows (safe generally?)
const [status, , body] = await requestURI(resourceURI, 'GET', {});
const error = !(status === 200 || status === 404);
if (!error) {
data += `Ace2Editor.EMBEDED[${JSON.stringify(filename)}] = ${
JSON.stringify(status === 200 ? body || '' : null)};\n`;
} else {
console.error(`getAceFile(): error getting ${resourceURI}. Status code: ${status}`);
}
}));
return data;
};
// Check for the existance of the file and get the last modification date. // Check for the existance of the file and get the last modification date.
const statFile = async (filename, dirStatLimit) => { const statFile = async (filename, dirStatLimit) => {
/* /*
@ -366,7 +328,6 @@ const getFileCompressed = async (filename, contentType) => {
}; };
const getFile = async (filename) => { const getFile = async (filename) => {
if (filename === 'js/ace.js') return await getAceFile();
if (filename === 'js/require-kernel.js') return requireDefinition(); if (filename === 'js/require-kernel.js') return requireDefinition();
return await fs.readFile(path.join(ROOT_DIR, filename)); return await fs.readFile(path.join(ROOT_DIR, filename));
}; };

View File

@ -178,39 +178,8 @@ const Ace2Editor = function () {
// returns array of {error: <browser Error object>, time: +new Date()} // returns array of {error: <browser Error object>, time: +new Date()}
this.getUnhandledErrors = () => loaded ? info.ace_getUnhandledErrors() : []; this.getUnhandledErrors = () => loaded ? info.ace_getUnhandledErrors() : [];
const sortFilesByEmbeded = (files) => {
const embededFiles = [];
let remoteFiles = [];
if (Ace2Editor.EMBEDED) {
for (let i = 0, ii = files.length; i < ii; i++) {
const file = files[i];
if (Object.prototype.hasOwnProperty.call(Ace2Editor.EMBEDED, file)) {
embededFiles.push(file);
} else {
remoteFiles.push(file);
}
}
} else {
remoteFiles = files;
}
return {embeded: embededFiles, remote: remoteFiles};
};
const addStyleTagsFor = (doc, files) => { const addStyleTagsFor = (doc, files) => {
const sorted = sortFilesByEmbeded(files); for (const file of files) {
const embededFiles = sorted.embeded;
const remoteFiles = sorted.remote;
if (embededFiles.length > 0) {
const css = embededFiles.map((f) => Ace2Editor.EMBEDED[f]).join('\n');
const style = doc.createElement('style');
style.type = 'text/css';
style.appendChild(doc.createTextNode(css));
doc.head.appendChild(style);
}
for (const file of remoteFiles) {
const link = doc.createElement('link'); const link = doc.createElement('link');
link.rel = 'stylesheet'; link.rel = 'stylesheet';
link.type = 'text/css'; link.type = 'text/css';
@ -229,19 +198,14 @@ const Ace2Editor = function () {
debugLog('Ace2Editor.init()'); debugLog('Ace2Editor.init()');
this.importText(initialCode); this.importText(initialCode);
// calls to these functions ($$INCLUDE_...) are replaced when this file is processed const includedCSS = [
// and compressed, putting the compressed code from the named file directly into the '../static/css/iframe_editor.css',
// source here. `../static/css/pad.css?v=${clientVars.randomVersionString}`,
// these lines must conform to a specific format because they are passed by the build script: ...hooks.callAll('aceEditorCSS').map(
const includedCSS = []; // Allow urls to external CSS - http(s):// and //some/path.css
const $$INCLUDE_CSS = (filename) => { includedCSS.push(filename); }; (p) => /\/\//.test(p) ? p : `../static/plugins/${p}`),
$$INCLUDE_CSS('../static/css/iframe_editor.css'); `../static/skins/${clientVars.skinName}/pad.css?v=${clientVars.randomVersionString}`,
$$INCLUDE_CSS(`../static/css/pad.css?v=${clientVars.randomVersionString}`); ];
includedCSS.push(...hooks.callAll('aceEditorCSS').map(
// Allow urls to external CSS - http(s):// and //some/path.css
(p) => /\/\//.test(p) ? p : `../static/plugins/${p}`));
$$INCLUDE_CSS(
`../static/skins/${clientVars.skinName}/pad.css?v=${clientVars.randomVersionString}`);
const skinVariants = clientVars.skinVariants.split(' ').filter((x) => x !== ''); const skinVariants = clientVars.skinVariants.split(' ').filter((x) => x !== '');