fix(compile-web): added the ability to update link tags with rel='modulepreload'

Author: sabhas

src/commands/web/internal/getTags.ts

@@ -6,6 +6,11 @@ export const getSasjsTags = (parsedHtml: JSDOM) =>
 export const getScriptTags = (parsedHtml: JSDOM) =>
   Array.from(parsedHtml.window.document.getElementsByTagName('script'))
 
+export const getModulePreload = (parsedHtml: JSDOM) =>
+  Array.from(parsedHtml.window.document.getElementsByTagName('link')).filter(
+    (s) => s.getAttribute('rel') === 'modulepreload'
+  )
+
 export const getStyleInPageTags = (parsedHtml: JSDOM) =>
   Array.from(parsedHtml.window.document.getElementsByTagName('style'))
 

src/commands/web/internal/updateAllTags.ts

@@ -8,7 +8,8 @@ import {
   getSourceTags,
   getStyleInPageTags,
   getSasjsTags,
-  getManifestTags
+  getManifestTags,
+  getModulePreload
 } from './getTags'
 import { updateScriptTag } from './updateScriptTag'
 import { updateLinkTag } from './updateLinkTag'
@@ -51,6 +52,15 @@ export const updateAllTags = async (
     ).catch((e) => assetsNotFound.push(e))
   })
 
+  const modulePreloadTags = getModulePreload(parsedHtml)
+  modulePreloadTags.forEach((tag) => {
+    try {
+      updateLinkTag(tag, assetPathMap)
+    } catch (error) {
+      assetsNotFound.push(error as Error)
+    }
+  })
+
   const styleExternalTags = getStyleTags(parsedHtml)
   const styleInPageTags = getStyleInPageTags(parsedHtml)
   const styleTags = [...styleExternalTags, ...styleInPageTags]

src/commands/web/internal/updateLinkTag.ts

@@ -18,7 +18,9 @@ export const updateLinkTag = (
 
   const assetPath = assetPathMap.find(
     (entry) =>
-      entry.source === linkSourcePath || `./${entry.source}` === linkSourcePath
+      entry.source === linkSourcePath ||
+      `./${entry.source}` === linkSourcePath ||
+      `/${entry.source}` === linkSourcePath
   )
 
   if (!assetPath?.target) {

src/commands/web/internal/updateScriptTag.ts

@@ -54,7 +54,9 @@ export const updateScriptTag = async (
         'src',
         assetPathMap.find(
           (entry) =>
-            entry.source === scriptPath || `./${entry.source}` === scriptPath
+            entry.source === scriptPath ||
+            `./${entry.source}` === scriptPath ||
+            `/${entry.source}` === scriptPath
         )!.target
       )
     }

src/commands/web/internal/updateStyleTag.ts

@@ -54,7 +54,9 @@ export const updateStyleTag = async (
         'href',
         assetPathMap.find(
           (entry) =>
-            entry.source === scriptPath || `./${entry.source}` === scriptPath
+            entry.source === scriptPath ||
+            `./${entry.source}` === scriptPath ||
+            `/${entry.source}` === scriptPath
         )!.target
       )
     }