🏗 Added support for ESM and SxG environment in coverage-map

build-system/tasks/coverage-map/index.js

@@ -16,22 +16,26 @@
 const argv = require('minimist')(process.argv.slice(2));
 const fs = require('fs').promises;
 const log = require('fancy-log');
+const {buildNewServer} = require('../../server/typescript-compile');
+const {cyan} = require('ansi-colors');
 const {dist} = require('../dist');
 const {installPackages} = require('../../common/utils');
 const {startServer, stopServer} = require('../serve');
 
 let puppeteer;
 let explore;
+let transform;
 
 const coverageJsonName = argv.json || 'coverage.json';
 const serverPort = argv.port || 8000;
-const testUrl =
-  argv.url || `http://localhost:${serverPort}/examples/everything.amp.html`;
-const outHtml = argv.html || 'coverage.html';
-const inputJs = argv.file || 'v0.js';
+const outHtml = argv.outputhtml || 'coverage.html';
+const inputHtml = argv.inputhtml || 'everything.amp.html';
+let testUrl = `http://localhost:${serverPort}/examples/${inputHtml}`;
+let inputJs = argv.file || 'v0.js';
 
 async function collectCoverage() {
-  log(`Opening browser and navigating to ${testUrl}...`);
+  puppeteer = require('puppeteer');
+  log('Opening browser and navigating to', cyan(`${testUrl}`) + '...');
   const browser = await puppeteer.launch({
     defaultViewport: {width: 1200, height: 800},
   });
@@ -52,8 +56,13 @@ async function collectCoverage() {
   log('Testing completed.');
   const jsCoverage = await page.coverage.stopJSCoverage();
   const data = JSON.stringify(jsCoverage);
-  log(`Writing to ${coverageJsonName} in dist/${coverageJsonName}...`);
-  await fs.writeFile(`dist/${coverageJsonName}`, data, () => {});
+  log(
+    'Writing to',
+    cyan(`${coverageJsonName}`),
+    'in',
+    cyan(`dist/${coverageJsonName}`) + '...'
+  );
+  await fs.writeFile(`dist/${coverageJsonName}`, data);
   await browser.close();
 }
 
@@ -78,26 +87,59 @@ async function autoScroll(page) {
   });
 }
 
+async function htmlTransform() {
+  transform = require('../../server/new-server/transforms/dist/transform')
+    .transform;
+  log('Transforming', cyan(`${inputHtml}`) + '...');
+  const transformed = await transform(`examples/${inputHtml}`);
+  const transformedName = `transformed.${inputHtml}`;
+  await fs.mkdir('dist/transformed', {recursive: true});
+  await fs.writeFile(`dist/transformed/${transformedName}`, transformed);
+  log(
+    'Transformation complete. It can be found at',
+    cyan(`dist/transformed/${transformedName}`) + '.'
+  );
+  testUrl = `http://localhost:${serverPort}/dist/transformed/${transformedName}`;
+}
+
 async function generateMap() {
+  explore = require('source-map-explorer').explore;
+
+  // Change source map explorer to mjs file extension if needed
+  if (argv.esm && inputJs.includes('.js')) {
+    inputJs = inputJs.replaceAll('.js', '.mjs');
+  }
+
   log(
-    `Generating heat map in dist/${outHtml} of ${inputJs}, based on ${coverageJsonName}...`
+    'Generating heat map in',
+    cyan(`dist/${outHtml}`),
+    'of',
+    cyan(`${inputJs}`),
+    'based on',
+    cyan(`${coverageJsonName}`) + '...'
+  );
+  await explore(
+    {code: `dist/${inputJs}`, map: `dist/${inputJs}.map`},
+    {
+      output: {format: 'html', filename: `dist/${outHtml}`},
+      coverage: `dist/${coverageJsonName}`,
+      onlyMapped: true,
+    }
   );
-  await explore(`dist/${inputJs}`, {
-    output: {format: 'html', filename: `${outHtml}`},
-    coverage: `dist/${coverageJsonName}`,
-    onlyMapped: true,
-  });
 }
 
 async function coverageMap() {
   installPackages(__dirname);
-
-  puppeteer = require('puppeteer');
-  explore = require('source-map-explorer').explore;
+  buildNewServer();
 
   if (!argv.nobuild) {
     await dist();
   }
+
+  if (argv.esm || argv.sxg) {
+    await htmlTransform();
+  }
+
   await startServer(
     {host: 'localhost', port: serverPort},
     {quiet: true},
@@ -116,14 +158,17 @@ coverageMap.description =
 coverageMap.flags = {
   json:
     '  Customize the name of the JSON output from puppeteer (out.json by default).',
-  url:
-    '  Set the URL for puppeteer testing, starting with  "http://localhost[:port_number]..." (http://localhost[:port_number]/examples/everything.amp.html by default).',
-  html:
+  inputhtml:
+    '  Set the input HTML for puppeteer testing, by designating the path that leads to the HTML file, starting at "examples/" (everything.amp.html by default).',
+  outputhtml:
     '  Customize the name of the HTML output from source map explorer (out.html by default).',
-  nobuild:
-    "  Skips dist build. Your working directory should be dist if you're using this flag.",
+  nobuild: '  Skips dist build.',
   port:
     '  Customize the port number of the local AMP server (8000 by default).',
   file:
-    '  Designate which JS file to view in coverage map, or *.js for all files (v0.js by default). If the JS file is not in the top level dist directory, you need to indicate the path to the JS file relative to dist.',
+    '  Designate which JS (or MJS) file to view in coverage map, or *.js for all files (v0.js by default). If the JS file is not in the top level dist directory, you need to indicate the path to the JS file relative to dist.',
+  esm:
+    '  Perform coverage test in ESM environment. This will trigger an additional HTML transformation.',
+  sxg:
+    '  Perform coverage test in SxG environment. This will trigger an additional HTML transformation.',
 };