Repository: ProjectEvergreen/greenwood (js)

Issue:
output sourcemaps for production builds
## Type of Change
- [ ] New Feature Request
- [ ] Documentation / Website
- [x] Improvement / Suggestion
- [ ] Bug
- [ ] Other (please clarify below)

## Summary
Came up as part of build time data access, #269.  Just checked, and it doesn't look like sourcemaps are being output?  (as part of a prod build anyway)
<img width="699" alt="Screen Shot 2020-04-11 at 5 35 26 PM" src="https://user-images.githubusercontent.com/895923/79055579-19ae4000-7c1c-11ea-85da-275d526b49e4.png">

## Details
Should make sure it is enabled in **webpack** and also make sure to install / use [source-map-explorer](https://www.npmjs.com/package/source-map-explorer)

Also should check it works in develop mode as well.

Pull request description:
enable sourcemaps with Rollup
<!--
## Submitting a Pull Request
We love contributions and appreciate any help you can offer!
-->

## Related Issue
resolves #319 

## Summary of Changes
1. Enabled [`output.sourcemap` option](https://rollupjs.org/guide/en/#outputsourcemap) for Rollup

## TODOs
1. [x] Update / add specs accordingly
1. [x] Need to do some file cleanup as both HTML files (since they are the `input`s to Rollup) ~~and any "scratch" files emitted as part of inlining~~ should get cleanup too
![Screen Shot 2021-07-01 at 12 48 33 PM](https://user-images.githubusercontent.com/895923/124160811-a71cc080-da6a-11eb-9671-9c10a80e56b6.png)
1. [x] Track full inlining - https://github.com/ProjectEvergreen/greenwood/issues/652

Patch:
diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
index 8bbbb962..e36a55df 100644
--- a/packages/cli/src/config/rollup.config.js
+++ b/packages/cli/src/config/rollup.config.js
@@ -484,6 +484,10 @@ function greenwoodHtmlPlugin(compilation) {
                 }
               });
           }
+          
+          // mark each HTML's sourcemap file (generated by Rollup) to be cleaned up
+          // would be nice if we could just prevent Rollup from generating sourcemaps for just our input files in the first place (GFI)
+          scratchFiles[`${htmlPath.replace(outputDir, '')}.map`] = true;
 
           await fs.promises.writeFile(htmlPath, html);
         } else {
@@ -524,7 +528,8 @@ module.exports = getRollupConfig = async (compilation) => {
     output: { 
       dir: outputDir,
       entryFileNames: '[name].[hash].js',
-      chunkFileNames: '[name].[hash].js'
+      chunkFileNames: '[name].[hash].js',
+      sourcemap: true
     },
     onwarn: (errorObj) => {
       const { code, message } = errorObj;


Test patch:
diff --git a/packages/cli/test/cases/build.config.mode-mpa/build.config.mode-mpa.spec.js b/packages/cli/test/cases/build.config.mode-mpa/build.config.mode-mpa.spec.js
index c05b514c..c434e77a 100644
--- a/packages/cli/test/cases/build.config.mode-mpa/build.config.mode-mpa.spec.js
+++ b/packages/cli/test/cases/build.config.mode-mpa/build.config.mode-mpa.spec.js
@@ -62,11 +62,13 @@ describe('Build Greenwood With: ', function() {
       let dom;
       let aboutDom;
       let partials;
+      let routerFiles;
 
       before(async function() {
         dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
         aboutDom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'about/index.html'));
         partials = await glob(`${this.context.publicDir}/_routes/**/*.html`);
+        routerFiles = await glob(`${this.context.publicDir}/router.*.js`);
       });
       
       it('should have one <script> tag in the <head> for the router', function() {
@@ -78,9 +80,7 @@ describe('Build Greenwood With: ', function() {
       });
 
       it('should have one router.js file in the output directory', function() {
-        const routerJsFiles = fs.readdirSync(this.context.publicDir).filter(file => file.indexOf('router') === 0);
-
-        expect(routerJsFiles.length).to.be.equal(1);
+        expect(routerFiles.length).to.be.equal(1);
       });
 
       it('should have one expected inline <script> tag in the <head> for router global variables', function() {
diff --git a/packages/cli/test/cases/build.default.import-node-modules/build.default.import-node-modules.spec.js b/packages/cli/test/cases/build.default.import-node-modules/build.default.import-node-modules.spec.js
index c21895cf..2dd19ebc 100644
--- a/packages/cli/test/cases/build.default.import-node-modules/build.default.import-node-modules.spec.js
+++ b/packages/cli/test/cases/build.default.import-node-modules/build.default.import-node-modules.spec.js
@@ -222,13 +222,14 @@ describe('Build Greenwood With: ', function() {
         const inlineScriptTag = dom.window.document.querySelectorAll('head > script:not([src])')[0];
         
         expect(inlineScriptTag.textContent.replace('\n', '')).to
-          .equal('import"/lit-html.d69ea26f.js";import"/lit-element.ea26fec7.js";document.getElementsByClassName("output-script-inline")[0].innerHTML="script tag module inline"');
+          // eslint-disable-next-line max-len
+          .equal('import"/lit-html.d69ea26f.js";import"/lit-element.ea26fec7.js";document.getElementsByClassName("output-script-inline")[0].innerHTML="script tag module inline"//# sourceMappingURL=1008626452-scratch.743d0af4.js.map');
       });
 
       it('should have the expected inline node_modules content in the second inline script tag which should include extra code from rollup', async function() {
         const inlineScriptTag = dom.window.document.querySelectorAll('head > script:not([src])')[1];
         
-        expect(inlineScriptTag.textContent.replace('\n', '')).to.equal('import"/lit-html.d69ea26f.js";import"/lit-element.ea26fec7.js";');
+        expect(inlineScriptTag.textContent.replace('\n', '')).to.equal('import"/lit-html.d69ea26f.js";import"/lit-element.ea26fec7.js";//# sourceMappingURL=1832243663-scratch.01361a49.js.map');
       });
 
       it('should have the expected output from the first inline <script> tag in the page output', async function() {
diff --git a/test/smoke-test.js b/test/smoke-test.js
index 75cec83c..4bf5f624 100644
--- a/test/smoke-test.js
+++ b/test/smoke-test.js
@@ -27,6 +27,10 @@ function publicDirectory(label) {
       it('should output one graph.json file', async function() {
         expect(await glob.promise(path.join(this.context.publicDir, 'graph.json'))).to.have.lengthOf(1);
       });
+
+      it('should not output any map files for HTML pages', async function() {
+        expect(await glob.promise(path.join(this.context.publicDir, '**/**/*.html.map'))).to.have.lengthOf(0);
+      });
     });
   });
 }