support remote HTML script elements (#559)

FredKSchott · Jun 30, 2020 · 262c08b · 262c08b · vercel · Jun 30, 2020
1 parent 1d709d5
commit 262c08b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 28 deletions.
diff --git a/src/rewrite-imports.ts b/src/rewrite-imports.ts
@@ -51,12 +51,15 @@ async function transformHtmlImports(code: string, replaceImport: (specifier: str
   const importRegex = new RegExp(HTML_JS_REGEX);
   while ((match = importRegex.exec(rewrittenCode))) {
     const [, scriptTag, scriptCode] = match;
-    rewrittenCode = spliceString(
-      rewrittenCode,
-      await transformEsmImports(scriptCode, replaceImport),
-      match.index + scriptTag.length,
-      match.index + scriptTag.length + scriptCode.length,
-    );
+    // Only transform a script element if it contains inlined code / is not empty.
+    if (scriptCode.trim()) {
+      rewrittenCode = spliceString(
+        rewrittenCode,
+        await transformEsmImports(scriptCode, replaceImport),
+        match.index + scriptTag.length,
+        match.index + scriptTag.length + scriptCode.length,
+      );
+    }
   }
   return rewrittenCode;
 }

diff --git a/src/scan-imports.ts b/src/scan-imports.ts
@@ -264,7 +264,11 @@ export async function scanImports(cwd: string, config: SnowpackConfig): Promise<
             baseExt,
             expandedExt,
             locOnDisk: filePath,
-            code: allMatches.map((script) => script[2]).join('\n'), // 3rd match is the code inside <script></script>
+            // match[2] is the code inside the <script></script> element
+            code: allMatches
+              .map((match) => match[2])
+              .filter((s) => s.trim())
+              .join('\n'),
           };
         }
       }

diff --git a/src/util.ts b/src/util.ts
@@ -22,7 +22,8 @@ export const DEV_DEPENDENCIES_DIR = path.join(PROJECT_CACHE_DIR, 'dev');
 const LOCKFILE_HASH_FILE = '.hash';
 
 export const HAS_CDN_HASH_REGEX = /\-[a-zA-Z0-9]{16,}/;
-export const HTML_JS_REGEX = /(<script.*?>)(.+?)<\/script>/gms;
+// NOTE(fks): Must match empty script elements to work properly.
+export const HTML_JS_REGEX = /(<script.*?>)(.*?)<\/script>/gms;
 
 export interface ImportMap {
   imports: {[packageName: string]: string};

diff --git a/test/build/cdn/expected-build/index.html b/test/build/cdn/expected-build/index.html
@@ -11,16 +11,8 @@
   <body>
     <div id="root"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!-- TEST: Don't break on remote script tags -->
+    <script src="https://unpkg.com/browse/preact@10.4.5/dist/preact.js"></script>
     <script type="module" src="/_dist_/index.js"></script>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/test/build/cdn/public/index.html b/test/build/cdn/public/index.html
@@ -11,16 +11,8 @@
   <body>
     <div id="root"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!-- TEST: Don't break on remote script tags -->
+    <script src="https://unpkg.com/browse/preact@10.4.5/dist/preact.js"></script>
     <script type="module" src="/_dist_/index.js"></script>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>