From b0862cd030127f35d5b8ef92411911474d7b31a6 Mon Sep 17 00:00:00 2001 From: Richard Hansen Date: Mon, 1 Mar 2021 02:21:22 -0500 Subject: [PATCH] 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. --- src/node/utils/Minify.js | 39 ----------------------------- src/static/js/ace.js | 54 +++++++--------------------------------- 2 files changed, 9 insertions(+), 84 deletions(-) diff --git a/src/node/utils/Minify.js b/src/node/utils/Minify.js index f4826021..95446346 100644 --- a/src/node/utils/Minify.js +++ b/src/node/utils/Minify.js @@ -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. const statFile = async (filename, dirStatLimit) => { /* @@ -366,7 +328,6 @@ const getFileCompressed = async (filename, contentType) => { }; const getFile = async (filename) => { - if (filename === 'js/ace.js') return await getAceFile(); if (filename === 'js/require-kernel.js') return requireDefinition(); return await fs.readFile(path.join(ROOT_DIR, filename)); }; diff --git a/src/static/js/ace.js b/src/static/js/ace.js index 3fc9ac77..6d07ecba 100644 --- a/src/static/js/ace.js +++ b/src/static/js/ace.js @@ -178,39 +178,8 @@ const Ace2Editor = function () { // returns array of {error: , time: +new Date()} 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 sorted = sortFilesByEmbeded(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) { + for (const file of files) { const link = doc.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; @@ -229,19 +198,14 @@ const Ace2Editor = function () { debugLog('Ace2Editor.init()'); this.importText(initialCode); - // calls to these functions ($$INCLUDE_...) are replaced when this file is processed - // and compressed, putting the compressed code from the named file directly into the - // source here. - // these lines must conform to a specific format because they are passed by the build script: - const includedCSS = []; - const $$INCLUDE_CSS = (filename) => { includedCSS.push(filename); }; - $$INCLUDE_CSS('../static/css/iframe_editor.css'); - $$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 includedCSS = [ + '../static/css/iframe_editor.css', + `../static/css/pad.css?v=${clientVars.randomVersionString}`, + ...hooks.callAll('aceEditorCSS').map( + // Allow urls to external CSS - http(s):// and //some/path.css + (p) => /\/\//.test(p) ? p : `../static/plugins/${p}`), + `../static/skins/${clientVars.skinName}/pad.css?v=${clientVars.randomVersionString}`, + ]; const skinVariants = clientVars.skinVariants.split(' ').filter((x) => x !== '');