Fix loading client-side CSS during page transitions

Former-commit-id: f2b6acad6a2e77d3982dd684f88edca222edab06

1 files changed, 75 insertions, 16 deletions

diff --git a/demos/hello-next/bun-framework-next/page-loader.ts b/demos/hello-next/bun-framework-next/page-loader.ts
index 84e623ab1..5674697d9 100644
--- a/demos/hello-next/bun-framework-next/page-loader.ts
+++ b/demos/hello-next/bun-framework-next/page-loader.ts
@@ -2,6 +2,23 @@ import NextPageLoader from "next/dist/client/page-loader";
 import getAssetPathFromRoute from "next/dist/shared/lib/router/utils/get-asset-path-from-route";
 import createRouteLoader from "./route-loader";
 
+function insertStyleSheet(url: string) {
+  if (document.querySelector(`link[href="${url}"]`)) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve, reject) => {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = url;
+
+    link.onload = () => void resolve();
+
+    link.onerror = () => void reject();
+    document.head.appendChild(link);
+  });
+}
+
 export default class PageLoader extends NextPageLoader {
   public routeLoader: RouteLoader;
 
@@ -10,39 +27,81 @@ export default class PageLoader extends NextPageLoader {
 
     // TODO: assetPrefix?
     this.routeLoader = createRouteLoader("");
+
+    // Rewrite the pages object to omit the entry script
+    // At this point, the entry point has been loaded so we don't want to do that again.
+    for (let name in pages) {
+      for (let i = 0; i < pages[name].length; i += 1) {
+        const lastDot = pages[name][i].lastIndexOf(".");
+        if (lastDot == -1) continue;
+        if (
+          pages[name][i].substring(lastDot - ".entry".length, lastDot) !==
+          ".entry"
+        )
+          continue;
+
+        pages[name][i] =
+          pages[name][i].substring(0, lastDot - ".entry".length) +
+          pages[name][i].substring(lastDot);
+      }
+    }
+
     this.pages = pages;
+    this.pageList = Object.keys(this.pages);
   }
 
+  pageList: string[];
+  pages: Record<string, string[]>;
+
   getPageList() {
-    return Object.keys(this.pages);
+    return this.pageList;
   }
 
+  cssQueue = [];
+
+  onImportCSS = (event) => {
+    this.cssQueue.push(insertStyleSheet(event.detail).then(() => void 0));
+  };
   async loadPage(route: string): Promise<GoodPageCache> {
-    try {
-      const assets =
-        globalThis.__NEXT_DATA__.pages[route] ||
-        globalThis.__NEXT_DATA__.pages[getAssetPathFromRoute(route)];
-
-      var src;
-      console.log(getAssetPathFromRoute(route), assets);
-      for (let asset of assets) {
-        if (!asset.endsWith(".css")) {
-          src = asset;
-          break;
-        }
+    const assets =
+      this.pages[route] || this.pages[getAssetPathFromRoute(route)];
+
+    var src;
+    console.log(getAssetPathFromRoute(route), assets);
+    for (let asset of assets) {
+      if (!asset.endsWith(".css")) {
+        src = asset;
+        break;
       }
+    }
+    console.assert(src, "Invalid or unknown route passed to loadPage");
 
-      console.assert(src, "Invalid or unknown route passed to loadPage");
+    document.removeEventListener("onimportcss", this.onImportCSS);
+    this.cssQueue.length = 0;
+    document.addEventListener("onimportcss", this.onImportCSS, {
+      passive: true,
+    });
+    try {
       const res = await import(src);
-      console.log({ res });
 
+      if (this.cssQueue.length > 0) {
+        await Promise.all(this.cssQueue);
+
+        this.cssQueue.length = 0;
+      }
+      document.removeEventListener("onimportcss", this.onImportCSS);
       return {
         page: res.default,
         mod: res,
+        styleSheets: [],
         __N_SSG: false,
         __N_SSP: false,
       };
-    } catch (err) {}
+
+      debugger;
+    } catch (exception) {
+      debugger;
+    }
 
     // return this.routeLoader.loadRoute(route).then((res) => {
     //   debugger;