From a056f1eb60c6baf5f72488d5c367d0635774a42f Mon Sep 17 00:00:00 2001
From: KS <Magi-KS@users.noreply.github.com>
Date: Mon, 1 Aug 2022 00:20:17 +0800
Subject: [PATCH] inject script for hmr when there is only normal script in
 html (#8330)

---
 packages/core/integration-tests/test/html.js  | 25 +++++++++++++++++++
 .../transformers/html/src/HTMLTransformer.js  |  8 +++---
 .../transformers/html/src/dependencies.js     |  6 ++---
 packages/transformers/html/src/inline.js      | 10 ++++----
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/packages/core/integration-tests/test/html.js b/packages/core/integration-tests/test/html.js
index 6db1fe45d16..f4bb022b218 100644
--- a/packages/core/integration-tests/test/html.js
+++ b/packages/core/integration-tests/test/html.js
@@ -211,6 +211,31 @@ describe('html', function () {
     assert(/<script src=".+?\.js"><\/script>$/.test(html));
   });
 
+  it('should insert empty script tag for HMR at the end of the body when having normal inline script', async function () {
+    const b = await bundle(
+      path.join(__dirname, '/integration/html-inline-js/index.html'),
+      {
+        hmrOptions: {},
+      },
+    );
+
+    assertBundles(b, [
+      {type: 'js', assets: ['index.html']},
+      {type: 'js', assets: ['index.html']},
+      {type: 'js', assets: ['index.html']},
+      {type: 'js', assets: ['index.html']},
+      {type: 'js', assets: ['index.html']},
+      {name: 'index.html', assets: ['index.html']},
+    ]);
+
+    const html = await outputFS.readFile(
+      path.join(distDir, 'index.html'),
+      'utf8',
+    );
+
+    assert(/<script src=".+?\.js"><\/script><\/body>/.test(html));
+  });
+
   it('should support canonical links', async function () {
     let b = await bundle(
       path.join(__dirname, '/integration/html-canonical/index.html'),
diff --git a/packages/transformers/html/src/HTMLTransformer.js b/packages/transformers/html/src/HTMLTransformer.js
index 2f13a963559..36ff8851f3d 100644
--- a/packages/transformers/html/src/HTMLTransformer.js
+++ b/packages/transformers/html/src/HTMLTransformer.js
@@ -37,9 +37,9 @@ export default (new Transformer({
 
     asset.bundleBehavior = 'isolated';
     let ast = nullthrows(await asset.getAST());
-    let hasScripts;
+    let hasModuleScripts;
     try {
-      hasScripts = collectDependencies(asset, ast);
+      hasModuleScripts = collectDependencies(asset, ast);
     } catch (errors) {
       if (Array.isArray(errors)) {
         throw new ThrowableDiagnostic({
@@ -59,14 +59,14 @@ export default (new Transformer({
       throw errors;
     }
 
-    const {assets: inlineAssets, hasScripts: hasInlineScripts} =
+    const {assets: inlineAssets, hasModuleScripts: hasInlineModuleScripts} =
       extractInlineAssets(asset, ast);
 
     const result = [asset, ...inlineAssets];
 
     // empty <script></script> is added to make sure HMR is working even if user
     // didn't add any.
-    if (options.hmrOptions && !(hasScripts || hasInlineScripts)) {
+    if (options.hmrOptions && !(hasModuleScripts || hasInlineModuleScripts)) {
       const script = {
         tag: 'script',
         attrs: {
diff --git a/packages/transformers/html/src/dependencies.js b/packages/transformers/html/src/dependencies.js
index 0200829f346..c9c0c23581b 100644
--- a/packages/transformers/html/src/dependencies.js
+++ b/packages/transformers/html/src/dependencies.js
@@ -118,7 +118,7 @@ export default function collectDependencies(
   ast: AST,
 ): boolean {
   let isDirty = false;
-  let hasScripts = false;
+  let hasModuleScripts = false;
   let seen = new Set();
   const errors = [];
   PostHTML().walk.call(ast.program, node => {
@@ -245,7 +245,7 @@ export default function collectDependencies(
       });
 
       asset.setAST(ast);
-      hasScripts = true;
+      if (sourceType === 'module') hasModuleScripts = true;
       return copy ? [node, copy] : node;
     }
 
@@ -293,5 +293,5 @@ export default function collectDependencies(
     throw errors;
   }
 
-  return hasScripts;
+  return hasModuleScripts;
 }
diff --git a/packages/transformers/html/src/inline.js b/packages/transformers/html/src/inline.js
index 5b7b777e9ec..9cecc7d2f75 100644
--- a/packages/transformers/html/src/inline.js
+++ b/packages/transformers/html/src/inline.js
@@ -16,7 +16,7 @@ const SCRIPT_TYPES = {
 };
 
 interface ExtractInlineAssetsResult {
-  hasScripts: boolean;
+  hasModuleScripts: boolean;
   assets: Array<TransformerResult>;
 }
 
@@ -29,7 +29,7 @@ export default function extractInlineAssets(
 
   // Extract inline <script> and <style> tags for processing.
   let parts: Array<TransformerResult> = [];
-  let hasScripts = false;
+  let hasModuleScripts = false;
   PostHTML().walk.call(program, (node: PostHTMLNode) => {
     let parcelKey = hashString(`${asset.id}:${key++}`);
     if (node.tag === 'script' || node.tag === 'style') {
@@ -140,8 +140,8 @@ export default function extractInlineAssets(
           },
         });
 
-        if (type === 'js') {
-          hasScripts = true;
+        if (env && env.sourceType === 'module') {
+          hasModuleScripts = true;
         }
       }
     }
@@ -174,6 +174,6 @@ export default function extractInlineAssets(
 
   return {
     assets: parts,
-    hasScripts,
+    hasModuleScripts,
   };
 }