From 89ae611e4ac0bc3beb3e14e43b4e00cd310bc8c2 Mon Sep 17 00:00:00 2001 From: Francis Rubio Date: Tue, 2 Jan 2024 02:20:35 +0800 Subject: [PATCH] Reorganize sourcemap cache --- cache/index.js.map | 1 + cache/styles.min.css.map | 1 + scripts/utilities.js | 15 +++++++++++++++ src/assets/scripts/__scripts.11ty.js | 13 +++++++------ src/assets/scripts/__sourcemap.11ty.js | 10 ++++++---- src/assets/styles/__sourcemap.11ty.js | 10 +++++----- src/assets/styles/__styles.11ty.js | 10 ++++++---- 7 files changed, 41 insertions(+), 19 deletions(-) create mode 100644 cache/index.js.map create mode 100644 cache/styles.min.css.map create mode 100644 scripts/utilities.js diff --git a/cache/index.js.map b/cache/index.js.map new file mode 100644 index 0000000..9491595 --- /dev/null +++ b/cache/index.js.map @@ -0,0 +1 @@ +{"version":3,"names":["Console","constructor","console","log"],"sources":["index.js"],"sourcesContent":["class Console {\r\n constructor() {\r\n console.log(\"Hello, World!\")\r\n }\r\n}"],"mappings":"AAAA,KAAM,CAAAA,OAAQ,CACZC,WAAWA,CAAA,CAAG,CACZC,OAAO,CAACC,GAAG,CAAC,eAAe,CAC7B,CACF"} \ No newline at end of file diff --git a/cache/styles.min.css.map b/cache/styles.min.css.map new file mode 100644 index 0000000..ff0e89a --- /dev/null +++ b/cache/styles.min.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["file:///C:/Users/teacherbuknoy/Documents/personal-projects/eleventy-template/src/assets/styles/base/_reset.scss"],"names":[],"mappings":"CAmBA,mBAGE,sBAeF,KACE,mBAWF,KACE,SAWF,SACE,aAWF,GACE,eAEF,GACE,iBAEF,GACE,kBAEF,GACE,eAEF,GACE,iBAEF,GACE,iBAWF,GACE,eAWF,IACE,qBAaF,GACE,mBACA,qBACA,cACA,SACA,iBAcF,+CAQE,cACA,sBACA,eAEF,sBACE,aAgBF,QACE,iBAEF,OACE,aAcF,qBAIE,YAYF,MACE,WAWF,IACE,kBAWF,IACE,gBAeF,8EAWE,cAYF,6BAEE,sBACA,UA8BF,OACE,gBACA,eAeF,cACE,YACA,kBAeF,uCACE,mBAGE,gCACA,kCACA,uCACA,yCACA,gCACA,+BACA,mCA6BJ,KACE,gBAEF,kBAME,iBAEF,gCAIE,kBAGF,uBAEE,UACA,aACA,WACA,cACA,qBACA,sBACA,iBACA"} \ No newline at end of file diff --git a/scripts/utilities.js b/scripts/utilities.js new file mode 100644 index 0000000..ae7240d --- /dev/null +++ b/scripts/utilities.js @@ -0,0 +1,15 @@ +const { dirname } = require('path') +const { constants, promises: { access } } = require('fs') + +async function getAppPath() { + for (let path of module.paths) { + try { + await access(path, constants.F_OK) + return dirname(path) + } catch (e) { /* Do nothing, move to the next path */ } + } +} + +module.exports = { + getAppPath +} \ No newline at end of file diff --git a/src/assets/scripts/__scripts.11ty.js b/src/assets/scripts/__scripts.11ty.js index 96ccf8c..9fb102a 100644 --- a/src/assets/scripts/__scripts.11ty.js +++ b/src/assets/scripts/__scripts.11ty.js @@ -22,23 +22,24 @@ class Script { } } - compile(bundleName) { + async compile(bundleName) { console.log('[JS] Compiling: ', bundleName) const filepath = path.join(__dirname, this.inputFiles[bundleName]) const transformedCode = babel.transformFileSync(filepath, {}) - this.renderSourceMap(bundleName, transformedCode.map) + await this.renderSourceMap(bundleName, transformedCode.map) return `${transformedCode.code}\n//# sourceMappingURL=${bundleName}.js.map` } - renderSourceMap(filename, content) { - const filepath = path.join(__dirname, '__sourcemaps/', `${filename}.js.map`) + async renderSourceMap(filename, content) { + const appPath = await require('../../../scripts/utilities').getAppPath() + const filepath = path.join(appPath, 'cache/', `${filename}.js.map`) fs.writeFileSync(filepath, JSON.stringify(content)) } - render({ bundleName }) { - return this.compile(bundleName) + async render({ bundleName }) { + return await this.compile(bundleName) } } diff --git a/src/assets/scripts/__sourcemap.11ty.js b/src/assets/scripts/__sourcemap.11ty.js index 93acab4..484e221 100644 --- a/src/assets/scripts/__sourcemap.11ty.js +++ b/src/assets/scripts/__sourcemap.11ty.js @@ -1,6 +1,7 @@ const path = require('path') const fs = require('fs') const Script = require('./__scripts.11ty') + class ScriptSourceMap { constructor() { this.inputFiles = new Script().inputFiles @@ -19,16 +20,17 @@ class ScriptSourceMap { } } - compile(filename) { + async compile(filename) { console.log('[JS] Compiling sourcemap: ', filename) - const filepath = path.join(__dirname, '__sourcemaps', `${filename}.js.map`) + const appPath = await require('../../../scripts/utilities').getAppPath() + const filepath = path.join(appPath, 'cache', `${filename}.js.map`) const content = fs.readFileSync(filepath, { encoding: 'utf-8' }) return content } - render({ bundleName }) { - return this.compile(bundleName) + async render({ bundleName }) { + return await this.compile(bundleName) } } diff --git a/src/assets/styles/__sourcemap.11ty.js b/src/assets/styles/__sourcemap.11ty.js index e594d02..eacd21b 100644 --- a/src/assets/styles/__sourcemap.11ty.js +++ b/src/assets/styles/__sourcemap.11ty.js @@ -1,6 +1,5 @@ const path = require('path') const fs = require('fs') - const Stylesheets = require('./__styles.11ty') class StylesheetSourcemap { @@ -29,16 +28,17 @@ class StylesheetSourcemap { } } - compile(filename) { - const filepath = path.join(__dirname, '__sourcemaps', `${filename}.min.css.map`) + async compile(filename) { + const appPath = await require('../../../scripts/utilities').getAppPath() + const filepath = path.join(appPath, 'cache', `${filename}.min.css.map`) const content = fs.readFileSync(filepath, { encoding: 'utf-8' }) return content } - render({ cssFile }) { + async render({ cssFile }) { console.log("[CSS] Rendering sourcemap:", this.inputFiles[cssFile]) - const result = this.compile(cssFile) + const result = await this.compile(cssFile) return result } diff --git a/src/assets/styles/__styles.11ty.js b/src/assets/styles/__styles.11ty.js index 7fc275c..5257cf6 100644 --- a/src/assets/styles/__styles.11ty.js +++ b/src/assets/styles/__styles.11ty.js @@ -34,17 +34,19 @@ class Stylesheets { return sass.compile(filepath, config) } - renderSourcemap(filename, content) { - const filepath = path.join(__dirname, '__sourcemaps/', `${filename}.min.css.map`) + async renderSourcemap(filename, content) { + const appPath = await require('../../../scripts/utilities').getAppPath() + console.log('[APP PATH]', appPath) + const filepath = path.join(appPath, 'cache', `${filename}.min.css.map`) fs.writeFileSync(filepath, JSON.stringify(content)) } - render({ cssFile }) { + async render({ cssFile }) { console.log("[CSS] Rendering style:", this.inputFiles[cssFile]) const scss = path.join(__dirname, `/${this.inputFiles[cssFile]}`) const result = this.compile(scss, this.configure()) - this.renderSourcemap(cssFile, result.sourceMap) + await this.renderSourcemap(cssFile, result.sourceMap) return `${result.css}\n/*# sourceMappingURL=${cssFile}.min.css.map */` }