make extensions end in mjs file extension type (#26340)

* make extensions end in mjs file extension type * lint fixes * add test page * lint fixes * change names to mjs for calls to createModuleCompatibleES5Bundle * fix config not getting applied to the built main binaries * temp * add sourceMappingURL back since gulp-sourcemaps doesnt support it
ampproject · Feb 9, 2020 · af50ae0 · af50ae0
1 parent e6312c7
commit af50ae0
Show file tree

Hide file tree

Showing 7 changed files with 584 additions and 20 deletions.
diff --git a/build-system/compile/compile.js b/build-system/compile/compile.js
@@ -18,6 +18,7 @@
 const argv = require('minimist')(process.argv.slice(2));
 const del = require('del');
 const fs = require('fs-extra');
+const gap = require('gulp-append-prepend');
 const gulp = require('gulp');
 const gulpIf = require('gulp-if');
 const nop = require('gulp-nop');
@@ -398,6 +399,12 @@ function compile(
         )
         .on('error', reject)
         .pipe(sourcemaps.write('.'))
+        .pipe(
+          gulpIf(
+            options.esmPassCompilation,
+            gap.appendText(`\n//# sourceMappingURL=${outputFilename}.map`)
+          )
+        )
         .pipe(gulp.dest(outputDir))
         .on('end', resolve);
     }

diff --git a/build-system/tasks/dist.js b/build-system/tasks/dist.js
@@ -26,6 +26,7 @@ const {
   compileJs,
   endBuildStep,
   hostname,
+  maybeToEsmName,
   mkdirSync,
   printConfigHelp,
   printNobuildHelp,
@@ -128,11 +129,11 @@ async function dist() {
   await stopNailgunServer(distNailgunPort);
 
   if (argv.esm) {
-    await Promise.all([
-      createModuleCompatibleES5Bundle('v0.js'),
-      createModuleCompatibleES5Bundle('amp4ads-v0.js'),
-      createModuleCompatibleES5Bundle('shadow-v0.js'),
-    ]);
+    await createModuleCompatibleES5Bundle('v0.mjs');
+    if (!argv.core_runtime_only) {
+      await createModuleCompatibleES5Bundle('amp4ads-v0.mjs');
+      await createModuleCompatibleES5Bundle('shadow-v0.mjs');
+    }
   }
 
   if (!argv.core_runtime_only) {
@@ -157,7 +158,7 @@ function buildExperiments(options) {
       watch: false,
       minify: options.minify || argv.minify,
       includePolyfills: true,
-      minifiedName: 'experiments.js',
+      minifiedName: maybeToEsmName('experiments.js'),
     }
   );
 }
@@ -199,7 +200,7 @@ async function buildWebPushPublisherFiles(options) {
     WEB_PUSH_PUBLISHER_FILES.forEach(fileName => {
       const tempBuildDir = `build/all/amp-web-push-${version}/`;
       const builtName = fileName + '.js';
-      const minifiedName = fileName + '.js';
+      const minifiedName = maybeToEsmName(fileName + '.js');
       const p = compileJs('./' + tempBuildDir, builtName, './' + distDir, {
         watch: options.watch,
         includePolyfills: true,
@@ -322,7 +323,7 @@ function postBuildWebPushPublisherFilesVersion() {
   WEB_PUSH_PUBLISHER_VERSIONS.forEach(version => {
     const basePath = `extensions/amp-web-push/${version}/`;
     WEB_PUSH_PUBLISHER_FILES.forEach(fileName => {
-      const minifiedName = fileName + '.js';
+      const minifiedName = maybeToEsmName(fileName + '.js');
       if (!fs.existsSync(distDir + '/' + minifiedName)) {
         throw new Error(`Cannot find ${distDir}/${minifiedName}`);
       }

diff --git a/build-system/tasks/extension-helpers.js b/build-system/tasks/extension-helpers.js
@@ -24,10 +24,10 @@ const {
   extensionBundles,
   verifyExtensionBundles,
 } = require('../compile/bundles.config');
-const {compileJs, mkdirSync} = require('./helpers');
 const {endBuildStep} = require('./helpers');
 const {isTravisBuild} = require('../common/travis');
 const {jsifyCssAsync} = require('./jsify-css');
+const {maybeToEsmName, compileJs, mkdirSync} = require('./helpers');
 const {vendorConfigs} = require('./vendor-configs');
 
 const {green, red, cyan} = colors;
@@ -524,10 +524,12 @@ async function buildExtensionJs(path, name, version, latestVersion, options) {
   const aliasBundle = extensionAliasBundles[name];
   const isAliased = aliasBundle && aliasBundle.version == version;
   if (isAliased) {
-    const src = `${name}-${version}${options.minify ? '' : '.max'}.js`;
-    const dest = `${name}-${aliasBundle.aliasedVersion}${
-      options.minify ? '' : '.max'
-    }.js`;
+    const src = maybeToEsmName(
+      `${name}-${version}${options.minify ? '' : '.max'}.js`
+    );
+    const dest = maybeToEsmName(
+      `${name}-${aliasBundle.aliasedVersion}${options.minify ? '' : '.max'}.js`
+    );
     fs.copySync(`dist/v0/${src}`, `dist/v0/${dest}`);
     fs.copySync(`dist/v0/${src}.map`, `dist/v0/${dest}.map`);
   }

diff --git a/build-system/tasks/helpers.js b/build-system/tasks/helpers.js
@@ -88,7 +88,12 @@ const UNMINIFIED_TARGETS = [
  * Note: keep this list in sync with release script. Contact @ampproject/wg-infra
  * for details.
  */
-const MINIFIED_TARGETS = ['alp.js', 'amp4ads-v0.js', 'shadow-v0.js', 'v0.js'];
+const MINIFIED_TARGETS = [
+  'alp.js',
+  'amp4ads-v0.js',
+  'shadow-v0.js',
+  'v0.js',
+].map(maybeToEsmName);
 
 /**
  * Settings for the global Babelify transform while compiling unminified code
@@ -257,6 +262,14 @@ function appendToCompiledFile(srcFilename, destFilePath) {
   }
 }
 
+function toEsmName(name) {
+  return name.replace(/\.js$/, '.mjs');
+}
+
+function maybeToEsmName(name) {
+  return argv.esm ? toEsmName(name) : name;
+}
+
 /**
  * Minifies a given JavaScript file entry point.
  * @param {string} srcDir
@@ -268,7 +281,7 @@ function appendToCompiledFile(srcFilename, destFilePath) {
 function compileMinifiedJs(srcDir, srcFilename, destDir, options) {
   const timeInfo = {};
   const entryPoint = path.join(srcDir, srcFilename);
-  const {minifiedName} = options;
+  const minifiedName = maybeToEsmName(options.minifiedName);
   return closureCompile(entryPoint, destDir, minifiedName, options, timeInfo)
     .then(function() {
       const destPath = path.join(destDir, minifiedName);
@@ -278,17 +291,20 @@ function compileMinifiedJs(srcDir, srcFilename, destDir, options) {
         internalRuntimeVersion
       );
       if (options.latestName) {
-        fs.copySync(destPath, path.join(destDir, options.latestName));
+        fs.copySync(
+          destPath,
+          path.join(destDir, maybeToEsmName(options.latestName))
+        );
       }
     })
     .then(() => {
       let name = minifiedName;
       if (options.latestName) {
-        name += ` → ${options.latestName}`;
+        name += ` → ${maybeToEsmName(options.latestName)}`;
       }
       if (options.singlePassCompilation) {
         altMainBundles.forEach(bundle => {
-          name += `, ${bundle.name}.js`;
+          name += `, ${maybeToEsmName(`${bundle.name}.js`)}`;
         });
         name += ', and all extensions';
       }
@@ -297,7 +313,7 @@ function compileMinifiedJs(srcDir, srcFilename, destDir, options) {
     .then(() => {
       if (!argv.noconfig && MINIFIED_TARGETS.includes(minifiedName)) {
         return applyAmpConfig(
-          `${destDir}/${minifiedName}`,
+          maybeToEsmName(`${destDir}/${minifiedName}`),
           /* localDev */ !!argv.fortesting
         );
       }
@@ -308,7 +324,10 @@ function compileMinifiedJs(srcDir, srcFilename, destDir, options) {
       }
       return Promise.all(
         altMainBundles.map(({name}) =>
-          applyAmpConfig(`dist/${name}.js`, /* localDev */ !!argv.fortesting)
+          applyAmpConfig(
+            maybeToEsmName(`dist/${name}.js`),
+            /* localDev */ !!argv.fortesting
+          )
         )
       );
     });
@@ -719,6 +738,7 @@ module.exports = {
   doBuildJs,
   endBuildStep,
   hostname,
+  maybeToEsmName,
   mkdirSync,
   printConfigHelp,
   printNobuildHelp,