Generate .js files in addition to .mjs

.gitignore

@@ -18,6 +18,7 @@ local-builds/
 firebase-debug.log
 .firebase
 
-# Generated `.mjs` files from TypeScript source
+# Generated files from TypeScript source
+packages/workbox-core/**/*.js
 packages/workbox-core/**/*.mjs
 packages/workbox-core/**/*.d.ts

gulp-tasks/build-packages.js

@@ -19,7 +19,7 @@ const cleanPackage = async (packagePath) => {
   if (await fs.pathExists(path.join(packagePath, 'src', 'index.ts'))) {
     // Store the list of deleted files, so we can delete directories after.
     const deletedPaths = await del([
-      path.posix.join(packagePath, '**/*.+(mjs|d.ts)'),
+      path.posix.join(packagePath, '**/*.+(js|mjs|d.ts)'),
       // Don't delete files in node_modules
       '!**/node_modules', '!**/node_modules/**/*',
     ]);

gulp-tasks/transpile-typescript.js

@@ -24,26 +24,30 @@ const {AsyncDebounce} = require('../infra/utils/AsyncDebounce');
 const packagesDir = path.resolve('packages');
 
 /**
- * Returns a Rollup plugin that replaces extensions within filenames and
- * imports. This is a bit of a hack, but it's needed until to solve:
+ * Returns a Rollup plugin that generates both `.js` and `.mjs` files for each
+ * `.ts` source file. This is a bit of a hack, but it's needed until to solve:
  * https://github.com/rollup/rollup/issues/2847
- *
- * @param {string} oldExt
- * @param {string} newExt
  */
-const renameImportExtensionsPlugin = (oldExt, newExt) => {
+const generateMjsOutputFiles = () => {
   return {
     generateBundle: (options, bundle) => {
       const importPattern =
-          new RegExp(`((?:import|export)[^']+')([^']+?)\\${oldExt}';`, 'g');
+          new RegExp(`((?:import|export)[^']+')([^']+?)\\.ts';`, 'g');
 
       for (const chunkInfo of Object.values(bundle)) {
         if (chunkInfo.fileName.endsWith('.ts')) {
-          chunkInfo.fileName = chunkInfo.fileName
-              .replace(new RegExp(`\\${oldExt}$`), newExt);
+          // Rename the `.ts` imports and filenames to `.js`;
+          const assetBasename = chunkInfo.fileName.replace(/.ts$/, '');
+
+          chunkInfo.fileName = assetBasename + '.js';
+          chunkInfo.code = chunkInfo.code.replace(importPattern, `$1$2.js';`);
 
-          chunkInfo.code = chunkInfo.code
-              .replace(importPattern, `$1$2${newExt}';`);
+          // Create mirror `.mjs` files for each `.js` file.
+          const mjsSource =
+              `export * from './${path.basename(assetBasename)}.js';`;
+
+          fs.outputFileSync(
+              path.join(options.dir, assetBasename + '.mjs'), mjsSource);
         }
       }
     },
@@ -63,13 +67,19 @@ let moduleBundleCache;
  * @param {string} packageName
  */
 const transpilePackage = async (packageName) => {
-  const packagePath = path.join(packagesDir, packageName);
+  console.log({packageName});
 
+  const packagePath = path.join(packagesDir, packageName);
   const input = path.join(packagePath, 'src', 'index.ts');
+
+  console.log({packagesDir});
+  console.log({packagePath});
+  console.log({input});
+
   const plugins = [
     resolve(),
     typescript2(),
-    renameImportExtensionsPlugin('.ts', '.mjs'),
+    generateMjsOutputFiles(),
   ];
 
   const bundle = await rollup({
@@ -97,6 +107,9 @@ const transpilePackage = async (packageName) => {
  * @param {string} packagePath
  */
 const transpilePackagesOrSkip = async (packagePath) => {
+  console.log('path.sep', path.sep);
+  console.log(packagePath.split(path.sep));
+
   const packageName = packagePath.split(path.sep).slice(-1)[0];
 
   if (await fs.pathExists(path.join(packagePath, 'src'))) {

infra/testing/server/routes/build-file.js

@@ -24,12 +24,15 @@ async function handler(req, res) {
   } else {
     const pkg = outputFilenameToPkgMap[packageFile];
 
-    // If the pkg.module references something in the build directory, use
-    // that, otherwise use pkg.main.
+    // If the pkg.module or pkg.main references something in the build
+    // directory, use that. Otherwise base the build file on the pkg name.
+
     if (pkg.module && pkg.module.startsWith('build/')) {
       file = path.join(pkgDir, pkg.module);
-    } else {
+    } else if (pkg.main && pkg.main.startsWith('build/')) {
       file = path.join(pkgDir, pkg.main);
+    } else {
+      file = path.join(pkgDir, 'build', `${pkg.name}.prod.js`);
     }
 
     // When not specifying a dev or prod build via the filename,