Improve index.html loading

ije · ije · commit 1209fb9543e0 · 2022-04-29T01:00:49.000+08:00
diff --git a/server/html.ts b/server/html.ts
@@ -8,16 +8,22 @@ import { getAlephPkgUri } from "./config.ts";
 
 await initLolHtml(decodeLolHtmlWasm());
 
+type LoadOptions = {
+  isDev: boolean;
+  ssr?: { suspense?: boolean };
+  hmrWebSocketUrl?: string;
+};
+
 // laod the `index.html`
 // - fix relative url to absolute url of `src` and `href`
 // - add `./framework/core/hmr.ts` when in `development` mode
 // - add `./framework/core/nomodule.ts`
 // - check the `<head>` and `<body>` elements
 // - check the `<ssr-body>` element if the ssr is enabled
 // - add `data-suspense` attribute to `<body>` if using suspense ssr
-export async function loadAndFixIndexHtml(isDev: boolean, ssr?: { suspense?: boolean }): Promise<Uint8Array> {
+export async function loadAndFixIndexHtml(options: LoadOptions): Promise<Uint8Array> {
   const { html, hasSSRBody } = await loadIndexHtml();
-  return fixIndexHtml(html, { isDev, ssr, hasSSRBody });
+  return fixIndexHtml(html, hasSSRBody, options);
 }
 
 async function loadIndexHtml(): Promise<{ html: Uint8Array; hasSSRBody: boolean }> {
@@ -84,11 +90,8 @@ async function loadIndexHtml(): Promise<{ html: Uint8Array; hasSSRBody: boolean
   }
 }
 
-function fixIndexHtml(
-  html: Uint8Array,
-  options: { isDev: boolean; ssr?: { suspense?: boolean }; hasSSRBody: boolean },
-): Uint8Array {
-  const { isDev, ssr, hasSSRBody } = options;
+function fixIndexHtml(html: Uint8Array, hasSSRBody: boolean, options: LoadOptions): Uint8Array {
+  const { isDev, ssr, hmrWebSocketUrl } = options;
   const alephPkgUri = getAlephPkgUri();
   const chunks: Uint8Array[] = [];
   const rewriter = new HTMLRewriter("utf8", (chunk: Uint8Array) => chunks.push(chunk));
@@ -157,6 +160,15 @@ function fixIndexHtml(
       },
     });
   }
+  if (isDev && hmrWebSocketUrl) {
+    rewriter.on("head", {
+      element(el: Element) {
+        el.append(`<script>window.__hmrWebSocketUrl=${JSON.stringify(hmrWebSocketUrl)};</script>`, {
+          html: true,
+        });
+      },
+    });
+  }
 
   try {
     rewriter.write(html);
diff --git a/server/mod.ts b/server/mod.ts
@@ -267,7 +267,11 @@ export const serve = (options: ServerOptions = {}) => {
     let indexHtml: Uint8Array | null | undefined = Reflect.get(globalThis, "__ALEPH_INDEX_HTML");
     if (indexHtml === undefined) {
       try {
-        indexHtml = await loadAndFixIndexHtml(isDev, typeof ssr === "function" ? {} : ssr);
+        indexHtml = await loadAndFixIndexHtml({
+          isDev,
+          ssr: typeof ssr === "function" ? {} : ssr,
+          hmrWebSocketUrl: options.hmrWebSocketUrl,
+        });
       } catch (err) {
         if (err instanceof Deno.errors.NotFound) {
           indexHtml = null;
@@ -285,16 +289,6 @@ export const serve = (options: ServerOptions = {}) => {
       return new Response("Not Found", { status: 404 });
     }
 
-    if (isDev && options.hmrWebSocketUrl) {
-      customHTMLRewriter.set("head", {
-        element(el) {
-          el.append(`<script>window.__hmrWebSocketUrl=${JSON.stringify(options.hmrWebSocketUrl)};</script>`, {
-            html: true,
-          });
-        },
-      });
-    }
-
     // render html
     return renderer.fetch(req, ctx, {
       indexHtml,
