fix(es-dev-server): don't transform non-modules (#1067)

packages/es-dev-server/demo/syntax/module-features.js

@@ -1,6 +1,6 @@
 import { html, render } from 'lit-html';
 import module from './module-features-a.js';
 
-window.__importMeta = import.meta.url.endsWith('syntax/module-features.js');
+window.__importMeta = import.meta.url.indexOf('syntax/module-features.js') > 0;
 window.__staticImports = module === 'moduleFeaturesA';
 window.__dynamicImports = (async () => (await import('./module-features-b.js')).default === 'moduleFeaturesB')();

packages/es-dev-server/src/browser-scripts/system-js-legacy-resolve.js

@@ -0,0 +1,14 @@
+export default `
+<script>
+  (function() {
+    // appends a query param to each systemjs request to trigger es5 compilation
+    var originalResolve = System.constructor.prototype.resolve;
+    System.constructor.prototype.resolve = function () {
+      return Promise.resolve(originalResolve.apply(this, arguments))
+        .then(function (url) {
+          return url + (url.indexOf('?') > 0 ? '&' : '?') + 'transform-module';
+        });
+    };
+  })()
+</script>
+`;

packages/es-dev-server/src/middleware/compatibility-transform.js

@@ -5,6 +5,7 @@ import {
   getRequestFilePath,
   isPolyfill,
   RequestCancelledError,
+  shoudlTransformToModule,
 } from '../utils/utils.js';
 import { sendMessageToActiveBrowsers } from '../utils/message-channel.js';
 import { ResolveSyntaxError } from '../utils/resolve-module-imports.js';
@@ -60,6 +61,7 @@ export function createCompatibilityTransformMiddleware(cfg) {
       return undefined;
     }
 
+    const transformModule = shoudlTransformToModule(ctx.url);
     const filePath = getRequestFilePath(ctx, cfg.rootDir);
     // if there is no file path, this file was not served statically
     if (!filePath) {
@@ -76,6 +78,7 @@ export function createCompatibilityTransformMiddleware(cfg) {
         uaCompat,
         filePath,
         code,
+        transformModule,
       });
       ctx.body = transformedCode;
       ctx.status = 200;

packages/es-dev-server/src/utils/compatibility-transform.js

@@ -33,6 +33,7 @@ import { logDebug } from './utils.js';
  * @property {import('./user-agent-compat.js').UserAgentCompat} uaCompat
  * @property {string} filePath
  * @property {string} code
+ * @property {boolean} transformModule
  */
 
 /**
@@ -148,9 +149,9 @@ export function createCompatibilityTransform(cfg) {
 
     switch (cfg.compatibilityMode) {
       case compatibilityModes.AUTO:
-        return !file.uaCompat.supportsEsm;
+        return !file.uaCompat.supportsEsm && file.transformModule;
       case compatibilityModes.MAX:
-        return true;
+        return true && file.transformModule;
       default:
         return false;
     }

packages/es-dev-server/src/utils/transform-index-html.js

@@ -1,4 +1,5 @@
 import { extractResources, createIndexHTML } from '@open-wc/building-utils/index-html/index.js';
+import systemJsLegacyResolveScript from '../browser-scripts/system-js-legacy-resolve.js';
 import { polyfillsPresets } from './polyfills-presets.js';
 import { addPolyfilledImportMaps } from './import-maps.js';
 import { compatibilityModes, polyfillsModes } from '../constants.js';
@@ -89,6 +90,11 @@ export function getTransformedIndexHTML(cfg) {
     indexHTML = addPolyfilledImportMaps(indexHTML, resources);
   }
 
+  // inject systemjs resolver which appends a query param to trigger es5 compilation
+  if (polyfillModules) {
+    indexHTML = indexHTML.replace('</body>', `${systemJsLegacyResolveScript}</body>`);
+  }
+
   return {
     indexHTML,
     inlineModules,

packages/es-dev-server/src/utils/utils.js

@@ -148,6 +148,13 @@ export function isPolyfill(url) {
   return url.includes('/polyfills/');
 }
 
+/**
+ * @param {string} url
+ */
+export function shoudlTransformToModule(url) {
+  return url.includes('transform-module');
+}
+
 /**
  * @param {string} url
  */

packages/es-dev-server/test/middleware/compatibility-transform.test.js

@@ -31,8 +31,8 @@ async function fetchText(url, userAgent) {
 }
 
 async function expectCompatibilityTransform(userAgent, features = {}) {
-  const stage4Features = await fetchText('stage-4-features.js', userAgent);
-  const esModules = await fetchText('module-features.js', userAgent);
+  const stage4Features = await fetchText('stage-4-features.js?transform-modules', userAgent);
+  const esModules = await fetchText('module-features.js?transform-modules', userAgent);
 
   expect(stage4Features).to.include(
     features.objectSpread ? '_objectSpread({}, foo);' : 'bar = { ...foo',
@@ -55,9 +55,7 @@ async function expectCompatibilityTransform(userAgent, features = {}) {
       : "import module from './module-features-a.js';",
   );
   expect(esModules).to.include("import('./module-features-b.js')");
-  expect(esModules).to.include(
-    features.esModules ? 'meta.url.endsWith' : 'import.meta.url.endsWith',
-  );
+  expect(esModules).to.include(features.esModules ? 'meta.url.indexOf' : 'import.meta.url.indexOf');
 }
 
 async function expectSupportStage3(userAgent) {
@@ -396,7 +394,7 @@ describe('compatibility transform middleware', () => {
       );
 
       try {
-        const response = await fetch(`${host}app.js`);
+        const response = await fetch(`${host}app.js?transform-modules`);
         const responseText = await response.text();
         expect(response.status).to.equal(200);
         expect(responseText).to.include(
@@ -460,7 +458,7 @@ describe('compatibility transform middleware', () => {
     });
 
     it('transforms properly', async () => {
-      const response = await fetch(`${host}app.ts`);
+      const response = await fetch(`${host}app.ts?transform-modules`);
       const responseText = await response.text();
 
       expect(response.status).to.equal(200);

packages/es-dev-server/test/snapshots/transform-index-html/import-map-max.html

@@ -47,4 +47,17 @@
   }
 
   polyfills.length ? Promise.all(polyfills).then(loadEntries) : loadEntries();
-})();</script></body></html>
+})();</script>
+<script>
+  (function() {
+    // appends a query param to each systemjs request to trigger es5 compilation
+    var originalResolve = System.constructor.prototype.resolve;
+    System.constructor.prototype.resolve = function () {
+      return Promise.resolve(originalResolve.apply(this, arguments))
+        .then(function (url) {
+          return url + (url.indexOf('?') > 0 ? '&' : '?') + 'transform-module';
+        });
+    };
+  })()
+</script>
+</body></html>

packages/es-dev-server/test/snapshots/transform-index-html/inline-module-max.html

@@ -33,4 +33,17 @@
   }
 
   polyfills.length ? Promise.all(polyfills).then(loadEntries) : loadEntries();
-})();</script></body></html>
+})();</script>
+<script>
+  (function() {
+    // appends a query param to each systemjs request to trigger es5 compilation
+    var originalResolve = System.constructor.prototype.resolve;
+    System.constructor.prototype.resolve = function () {
+      return Promise.resolve(originalResolve.apply(this, arguments))
+        .then(function (url) {
+          return url + (url.indexOf('?') > 0 ? '&' : '?') + 'transform-module';
+        });
+    };
+  })()
+</script>
+</body></html>

packages/es-dev-server/test/snapshots/transform-index-html/simple-max.html

@@ -36,4 +36,17 @@
   }
 
   polyfills.length ? Promise.all(polyfills).then(loadEntries) : loadEntries();
-})();</script></body></html>
+})();</script>
+<script>
+  (function() {
+    // appends a query param to each systemjs request to trigger es5 compilation
+    var originalResolve = System.constructor.prototype.resolve;
+    System.constructor.prototype.resolve = function () {
+      return Promise.resolve(originalResolve.apply(this, arguments))
+        .then(function (url) {
+          return url + (url.indexOf('?') > 0 ? '&' : '?') + 'transform-module';
+        });
+    };
+  })()
+</script>
+</body></html>