From 4ce37fc312ccff8adbbe299f1fd88e1b371af190 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Tue, 25 Jun 2024 21:42:05 -0400
Subject: [PATCH] bug/issue 1241 prerendering formatting breaks bundle mapping
 optimization (#1244)

* wip

* handling all head tag bundle mapping
---
 .../plugins/resource/plugin-standard-html.js  | 26 ++++++++++++++-----
 .../greenwood.config.js                       |  5 ++++
 .../src/pages/index.html                      | 18 +++++++++++--
 3 files changed, 40 insertions(+), 9 deletions(-)
 create mode 100644 packages/cli/test/cases/build.config.optimization-overrides/greenwood.config.js

diff --git a/packages/cli/src/plugins/resource/plugin-standard-html.js b/packages/cli/src/plugins/resource/plugin-standard-html.js
index a2e5e869e..456a52443 100644
--- a/packages/cli/src/plugins/resource/plugin-standard-html.js
+++ b/packages/cli/src/plugins/resource/plugin-standard-html.js
@@ -17,6 +17,7 @@ import { getUserScripts, getPageLayout, getAppLayout } from '../../lib/layout-ut
 import { requestAsObject } from '../../lib/resource-utils.js';
 import unified from 'unified';
 import { Worker } from 'worker_threads';
+import htmlparser from 'node-html-parser';
 
 class StandardHtmlResource extends ResourceInterface {
   constructor(compilation, options) {
@@ -200,12 +201,19 @@ class StandardHtmlResource extends ResourceInterface {
     const pageResources = this.compilation.graph.find(page => page.outputPath === pathname || page.route === pathname).resources;
     let body = await response.text();
 
+    const root = htmlparser.parse(body, {
+      script: true,
+      style: true
+    });
+
     for (const pageResource of pageResources) {
       const keyedResource = this.compilation.resources.get(pageResource);
-      const { contents, src, type, optimizationAttr, optimizedFileContents, optimizedFileName, rawAttributes } = keyedResource;
+      const { contents, src, type, optimizationAttr, optimizedFileContents, optimizedFileName } = keyedResource;
 
       if (src) {
         if (type === 'script') {
+          const tag = root.querySelectorAll('script').find(script => script.getAttribute('src') === src);
+
           if (!optimizationAttr && optimization === 'default') {
             const optimizedFilePath = `${basePath}/${optimizedFileName}`;
 
@@ -215,17 +223,19 @@ class StandardHtmlResource extends ResourceInterface {
               <link rel="modulepreload" href="${optimizedFilePath}" as="script">
             `);
           } else if (optimizationAttr === 'inline' || optimization === 'inline') {
-            const isModule = rawAttributes.indexOf('type="module') >= 0 ? ' type="module"' : '';
+            const isModule = tag.rawAttrs.indexOf('type="module') >= 0 ? ' type="module"' : '';
 
-            body = body.replace(`<script ${rawAttributes}></script>`, `
+            body = body.replace(`<script ${tag.rawAttrs}></script>`, `
               <script ${isModule}>
                 ${optimizedFileContents.replace(/\.\//g, `${basePath}/`).replace(/\$/g, '$$$')}
               </script>
             `);
           } else if (optimizationAttr === 'static' || optimization === 'static') {
-            body = body.replace(`<script ${rawAttributes}></script>`, '');
+            body = body.replace(`<script ${tag.rawAttrs}></script>`, '');
           }
         } else if (type === 'link') {
+          const tag = root.querySelectorAll('link').find(link => link.getAttribute('href') === src);
+
           if (!optimizationAttr && (optimization !== 'none' && optimization !== 'inline')) {
             const optimizedFilePath = `${basePath}/${optimizedFileName}`;
 
@@ -239,11 +249,11 @@ class StandardHtmlResource extends ResourceInterface {
             // when pre-rendering, puppeteer normalizes everything to <link .../>
             // but if not using pre-rendering, then it could come out as <link ...></link>
             // not great, but best we can do for now until #742
-            body = body.replace(`<link ${rawAttributes}>`, `
+            body = body.replace(`<link ${tag.rawAttrs}>`, `
               <style>
                 ${optimizedFileContents}
               </style>
-            `).replace(`<link ${rawAttributes}/>`, `
+            `).replace(`<link ${tag.rawAttrs}/>`, `
               <style>
                 ${optimizedFileContents}
               </style>
@@ -252,8 +262,10 @@ class StandardHtmlResource extends ResourceInterface {
         }
       } else {
         if (type === 'script') {
+          const tag = root.querySelectorAll('script').find(script => script.innerHTML === contents);
+
           if (optimizationAttr === 'static' || optimization === 'static') {
-            body = body.replace(`<script ${rawAttributes}>${contents.replace(/\.\//g, '/').replace(/\$/g, '$$$')}</script>`, '');
+            body = body.replace(`<script ${tag.rawAttrs}>${contents.replace(/\.\//g, '/').replace(/\$/g, '$$$')}</script>`, '');
           } else if (optimizationAttr === 'none') {
             body = body.replace(contents, contents.replace(/\.\//g, `${basePath}/`).replace(/\$/g, '$$$'));
           } else {
diff --git a/packages/cli/test/cases/build.config.optimization-overrides/greenwood.config.js b/packages/cli/test/cases/build.config.optimization-overrides/greenwood.config.js
new file mode 100644
index 000000000..da3dd4d9c
--- /dev/null
+++ b/packages/cli/test/cases/build.config.optimization-overrides/greenwood.config.js
@@ -0,0 +1,5 @@
+// https://github.com/ProjectEvergreen/greenwood/issues/1241
+// to ensure formatting does not break bundle optimization linking
+export default {
+  prerender: true
+};
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html b/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html
index f60ba23a6..dd97780c5 100644
--- a/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html
+++ b/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html
@@ -2,9 +2,23 @@
 <html lang="en" prefix="og:http://ogp.me/ns#">
 
   <head>
-    <script type="module" src="/components/header.js" data-gwd-opt="static"></script>
     <script type="module" src="/components/footer.js" data-gwd-opt="inline"></script>
-    <link rel="stylesheet" href="/styles/theme.css" data-gwd-opt="inline"/>
+    <script
+      type="module"
+      src="../components/header.js"
+      data-gwd-opt="static"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="/styles/theme.css"
+      data-gwd-opt="inline"
+    />
+    <script
+      data-gwd-opt="static"
+      type="module"
+    >
+      console.log('I should not be here');
+    </script>
   </head>
 
   <body>