Updates resource injector to use type="module" instead of defer.

Refs #26. This is necessary to share chunks between multiple pages, since they will be loaded via ES modules. `type="module"` also is implicitly `defer`-ed, so no need to specify both.
dgp1130 · Feb 27, 2023 · c07b684 · c07b684
1 parent a8c862f
commit c07b684
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/tools/binaries/resource_injector/injector.ts b/tools/binaries/resource_injector/injector.ts
@@ -83,8 +83,8 @@ function injectScript(root: HTMLElement, action: InjectScript): void {
     // Insert a `<script />` tag at the end of the `<head />` element.
     const script = new HTMLElement('script', {});
     script.setAttribute('src', action.path);
+    script.setAttribute('type', 'module');
     script.setAttribute('async', '');
-    script.setAttribute('defer', '');
     head.appendChild(script);
 
     // Insert a trailing newline so subsequent insertions look a little better.

diff --git a/tools/binaries/resource_injector/injector_test.ts b/tools/binaries/resource_injector/injector_test.ts
@@ -30,9 +30,9 @@ describe('injector', () => {
 <html>
     <head>
         <title>Some title</title>
-    <script src="/foo.js" async defer></script>
-<script src="/bar.js" async defer></script>
-<script src="/baz.js" async defer></script>
+    <script src="/foo.js" type="module" async></script>
+<script src="/bar.js" type="module" async></script>
+<script src="/baz.js" type="module" async></script>
 </head>
     <body>
         <h2>Hello, World!</h2>
@@ -60,7 +60,7 @@ describe('injector', () => {
 <!DOCTYPE html>
 <html>
 <head>
-<script src="/foo.js" async defer></script>
+<script src="/foo.js" type="module" async></script>
 </head>
     <body>
         <h2>Hello, World!</h2>
@@ -86,7 +86,7 @@ describe('injector', () => {
             expect(injected).toBe(`
 <html>
 <head>
-<script src="/foo.js" async defer></script>
+<script src="/foo.js" type="module" async></script>
 </head>
     <body>
         <h2>Hello, World!</h2>

diff --git a/tools/binaries/resource_injector/resource_injector_test.ts b/tools/binaries/resource_injector/resource_injector_test.ts
@@ -66,9 +66,9 @@ describe('injector', () => {
 <html>
     <head>
         <title>Some title</title>
-    <script src="/foo.js" async defer></script>
-<script src="/bar.js" async defer></script>
-<script src="/baz.js" async defer></script>
+    <script src="/foo.js" type="module" async></script>
+<script src="/bar.js" type="module" async></script>
+<script src="/baz.js" type="module" async></script>
 </head>
     <body>
         <h2>Hello, World!</h2>
@@ -117,7 +117,7 @@ describe('injector', () => {
 <html>
     <head>
         <title>Some title</title>
-    <script src="/page.js" async defer></script>
+    <script src="/page.js" type="module" async></script>
 </head>
     <body>
         <h2>Hello, World!</h2>
@@ -192,7 +192,7 @@ describe('injector', () => {
 <html>
     <head>
         <title>Some title</title>
-    <script src="/baz.js" async defer></script>
+    <script src="/baz.js" type="module" async></script>
 </head>
     <body>
         <h2>Foo</h2>
@@ -209,7 +209,7 @@ describe('injector', () => {
 <html>
     <head>
         <title>Some title</title>
-    <script src="/baz.js" async defer></script>
+    <script src="/baz.js" type="module" async></script>
 </head>
     <body>
         <h2>Bar</h2>
@@ -226,7 +226,7 @@ describe('injector', () => {
 <html>
     <head>
         <title>Some title</title>
-    <script src="/baz.js" async defer></script>
+    <script src="/baz.js" type="module" async></script>
 </head>
     <body>
         <h2>Hello World</h2>