From 9d12ef82c0f0df08c384b754e14c43d7263b24b8 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Wed, 13 Nov 2024 17:52:40 +0500
Subject: [PATCH] web: do not prefetch wa-sqlite wasm module on desktop

---
 apps/web/src/index.html |  1 -
 apps/web/vite.config.ts | 68 +++++++++++++++++++++++++++++++++++++++--
 2 files changed, 66 insertions(+), 3 deletions(-)
diff --git a/apps/web/src/index.html b/apps/web/src/index.html
index 796587cbe..582b09e9f 100644
--- a/apps/web/src/index.html
+++ b/apps/web/src/index.html
@@ -40,7 +40,6 @@
 
     <style id="theme-colors"></style>
     <script type="module" src="./index.ts"></script>
-    <link rel="prefetch" type="wasm" href="./common/sqlite/wa-sqlite.wasm" />
     <style>
       html {
         overscroll-behavior: none;
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index cd0c50f11..0e6383562 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { PluginOption, defineConfig } from "vite";
+import { Plugin, PluginOption, ResolvedConfig, defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import svgrPlugin from "vite-plugin-svgr";
 import envCompatible from "vite-plugin-env-compatible";
@@ -183,7 +183,16 @@ export default defineConfig({
         namedExport: "ReactComponent"
         // ...svgr options (https://react-svgr.com/docs/options/)
       }
-    })
+    }),
+    ...(isDesktop
+      ? []
+      : [
+          prefetchPlugin({
+            excludeFn: (assetName) =>
+              assetName.includes("wa-sqlite-async") ||
+              !assetName.includes("wa-sqlite")
+          })
+        ])
   ]
 });
 
@@ -211,3 +220,58 @@ function emitEditorStyles(): OutputPlugin {
     }
   };
 }
+
+function prefetchPlugin(options?: {
+  excludeFn?: (assetName: string) => boolean;
+}): Plugin {
+  let config: ResolvedConfig;
+  return {
+    name: "vite-plugin-bundle-prefetch",
+    apply: "build",
+    configResolved(resolvedConfig: ResolvedConfig) {
+      // store the resolved config
+      config = resolvedConfig;
+    },
+    transformIndexHtml(
+      html: string,
+      ctx: {
+        path: string;
+        filename: string;
+        bundle?: import("rollup").OutputBundle;
+        chunk?: import("rollup").OutputChunk;
+      }
+    ) {
+      const bundles = Object.keys(ctx.bundle ?? {});
+      const isLegacy = bundles.some((bundle) => bundle.includes("legacy"));
+      if (isLegacy) {
+        //legacy build won't add prefetch
+        return html;
+      }
+      // remove map files
+      let modernBundles = bundles.filter(
+        (bundle) => bundle.endsWith(".map") === false
+      );
+      const excludeFn = options?.excludeFn;
+      if (excludeFn) {
+        modernBundles = modernBundles.filter((bundle) => !excludeFn(bundle));
+      }
+      // Remove existing files and concatenate them into link tags
+      const prefechBundlesString = modernBundles
+        .filter((bundle) => html.includes(bundle) === false)
+        .map((bundle) => `<link rel="prefetch" href="${config.base}${bundle}">`)
+        .join("\n");
+
+      // Use regular expression to get the content within <head> </head>
+      const headContent = html.match(/<head>([\s\S]*)<\/head>/)?.[1] ?? "";
+      // Insert the content of prefetch into the head
+      const newHeadContent = `${headContent}${prefechBundlesString}`;
+      // Replace the original head
+      html = html.replace(
+        /<head>([\s\S]*)<\/head>/,
+        `<head>${newHeadContent}</head>`
+      );
+
+      return html;
+    }
+  };
+}
