fix: do not process scripts with non-JS type attribute (#1767)

modernweb-dev · Nov 6, 2021 · d406c77 · d406c77
1 parent b2c081d
commit d406c77
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/.changeset/shy-kangaroos-clap.md b/.changeset/shy-kangaroos-clap.md
@@ -0,0 +1,5 @@
+---
+'@web/dev-server-esbuild': patch
+---
+
+Do not process scripts with non-JS type attribute
diff --git a/packages/dev-server-esbuild/src/EsbuildPlugin.ts b/packages/dev-server-esbuild/src/EsbuildPlugin.ts
@@ -134,7 +134,14 @@ export class EsbuildPlugin implements Plugin {
     const documentAst = parseHtml(context.body as string);
     const inlineScripts = queryAll(
       documentAst,
-      predicates.AND(predicates.hasTagName('script'), predicates.NOT(predicates.hasAttr('src'))),
+      predicates.AND(
+        predicates.hasTagName('script'),
+        predicates.NOT(predicates.hasAttr('src')),
+        predicates.OR(
+          predicates.NOT(predicates.hasAttr('type')),
+          predicates.hasAttrValue('type', 'module'),
+        ),
+      ),
     );
 
     if (inlineScripts.length === 0) {

diff --git a/packages/dev-server-esbuild/test/target.test.ts b/packages/dev-server-esbuild/test/target.test.ts
@@ -349,4 +349,40 @@ describe('esbuildPlugin target', function () {
       server.stop();
     }
   });
+
+  it('should leave non-js types as they are', async () => {
+    const importmapString = '{"imports":{"foo":"./bar.js"}}';
+    const jsonString = '{test:1}';
+    const { server, host } = await createTestServer({
+      rootDir: __dirname,
+      plugins: [
+        {
+          name: 'test',
+          serve(context) {
+            if (context.path === '/index.html') {
+              return `<html>
+  <body>
+    <script type="importmap">${importmapString}</script>
+    <script type="application/json">${jsonString}</script>
+  </body>
+</html>`;
+            }
+          },
+        },
+        esbuildPlugin({ js: true, target: 'es2016' }),
+      ],
+    });
+
+    try {
+      const response = await fetch(`${host}/index.html`);
+      const text = await response.text();
+
+      expect(response.status).to.equal(200);
+      expect(response.headers.get('content-type')).to.equal('text/html; charset=utf-8');
+      expect(text).to.include(importmapString);
+      expect(text).to.include(jsonString);
+    } finally {
+      server.stop();
+    }
+  });
 });