Reorganize sourcemap cache

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
+}

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)
   }
 }
 

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)
   }
 }
 

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
   }

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 */`
   }