mdn · LeoMcA · Apr 15, 2025 · Apr 11, 2025 · Apr 11, 2025 · Apr 14, 2025
@@ -4,7 +4,6 @@ dist/*
 !dist/ssr/
 dist/ssr/*
 !dist/ssr/index.d.ts
-!dist/ssr/package.json
 out/
 .eslintcache
 .stylelintcache

@@ -2,15 +2,15 @@ import { readFile, writeFile } from "node:fs/promises";
 
 import { fdir } from "fdir";
 
-import ssr from "../dist/ssr/index.js";
+import { render } from "../dist/ssr/index.js";
 
 const BUILD_OUT_ROOT = "./out";
 
-const ssrManifest = JSON.parse(
-  await readFile("./dist/ssr/manifest.json", "utf8"),
-);
-const clientManifest = JSON.parse(
-  await readFile("./dist/client/manifest.json", "utf8"),
+/** @type {import("@rspack/core").StatsCompilation} */
+const ssrStats = JSON.parse(await readFile("./dist/ssr/stats.json", "utf8"));
+/** @type {import("@rspack/core").StatsCompilation} */
+const clientStats = JSON.parse(
+  await readFile("./dist/client/stats.json", "utf8"),
 );
 
 /**
@@ -85,12 +85,16 @@ async function ssrSingleDocument(file) {
     return;
   }
   try {
-    const html = await ssr.render(
-      context.url,
-      ssrManifest,
-      clientManifest,
-      context,
-    );
+    const html = await render(context.url, context, [
+      {
+        name: "ssr",
+        ...ssrStats,
+      },
+      {
+        name: "client",
+        ...clientStats,
+      },
+    ]);
     const outputFile = file.replace(/.json$/, ".html");
     await writeFile(outputFile, html);
     return outputFile;

@@ -1,43 +1,44 @@
-/**
- * @import { ManifestData } from "@rsbuild/core";
- */
-
 import { html } from "@lit-labs/ssr";
 
 /**
- * @param {ManifestData} manifest
- * @param {string} entry
+ * @param {import("@rspack/core").StatsCompilation} [manifest]
+ * @param {string} [entry]
  */
-export function tagsFromManifest({ entries }, entry = "index") {
-  const { js = [], css = [] } = entries[entry]?.initial || {};
+export function tagsFromManifest(manifest, entry = "index") {
+  const publicPath = manifest?.publicPath;
+  if (!publicPath) {
+    throw new Error("publicPath is not defined in manifest");
+  }
+
+  const scriptTags = [];
+  const styleTags = [];
+
+  for (const { name } of manifest.entrypoints?.[entry]?.assets || []) {
+    if (name.endsWith(".js")) {
+      scriptTags.push(
+        html`<script src=${publicPath + name} type="module"></script>`,
+      );
+    } else if (name.endsWith(".css")) {
+      styleTags.push(html`<link rel="stylesheet" href=${publicPath + name} />`);
+    }
+  }
 
-  const scriptTags = js.map((url) => html`<script src=${url} defer></script>`);
-  const styleTags = css.map(
-    (file) => html`<link rel="stylesheet" href=${file} />`,
-  );
   return { scriptTags, styleTags };
 }
 
 /**
- *
- * @param {ManifestData} ssrManifest
- * @param {ManifestData} clientManifest
  * @param {Fred.Context} context
- * @param {import("lit-html").TemplateResult} [markup]
- * @returns
+ * @param {import("lit-html").TemplateResult} markup
+ * @param {import("@rspack/core").StatsCompilation[]} manifest
  */
-export function renderHTML(ssrManifest, clientManifest, context, markup) {
-  const { styleTags: ssrStyleTags } = tagsFromManifest(ssrManifest);
+export function renderHTML(context, markup, manifest) {
+  const { styleTags: ssrStyleTags } = tagsFromManifest(
+    manifest.find((x) => x.name === "ssr"),
+  );
   const { scriptTags: clientScriptTags, styleTags: clientStyleTags } =
-    tagsFromManifest(clientManifest);
-  const { scriptTags: legacyScriptTags, styleTags: legacyStyleTags } =
-    tagsFromManifest(clientManifest, "legacy");
-
-  const legacyTags = context.path.endsWith("settings")
-    ? [legacyScriptTags, legacyStyleTags]
-    : [];
+    tagsFromManifest(manifest.find((x) => x.name === "client"));
 
-  const tags = [ssrStyleTags, clientScriptTags, clientStyleTags, ...legacyTags];
+  const tags = [ssrStyleTags, clientScriptTags, clientStyleTags];
   return html`
     <!doctype html>
     <html lang="en">

@@ -1,65 +1 @@
-/* do not uncomment the below, with our current rsbuild config it breaks all client side JS: */
-
-/* @import url("~prismjs/themes/prism.css"); */
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: var(--code-token-comment);
-}
-
-.token.punctuation {
-  color: var(--code-token-punctuation);
-}
-
-.token.attr-name,
-.token.builtin,
-.token.inserted,
-.token.selector,
-.token.property,
-.token.class-name,
-.token.function {
-  color: red;
-}
-
-.token.atrule,
-.token.attr-value {
-  color: blue;
-}
-
-.token.keyword {
-  color: green;
-}
-
-.token.tag,
-.token.char,
-.token.string,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: orangered;
-}
-
-.token.selector,
-.token.builtin,
-.token.template-string > .token.string,
-.token.inserted {
-  color: purple;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-variation-settings: "slnt" -10;
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
+@import url("prismjs/themes/prism.css");
@@ -14,3 +14,19 @@ import "./components/copy-button/index.js";
 
 // hooks:
 import "./hooks/code-examples.js";
+
+// reload on ssr changes:
+// TODO: extract into development-only file
+const hmr = new EventSource("/__webpack_hmr");
+
+hmr.addEventListener("message", (event) => {
+  try {
+    const message = JSON.parse(event.data);
+    if (message.action === "built") {
+      console.log(`Reloading page: ${message.name} bundle updated`);
+      location.reload();
+    }
+  } catch {
+    //
+  }
+});
@@ -23,11 +23,10 @@ import { runWithContext } from "./symmetric-context/server.js";
 
 /**
  * @param {string} path
- * @param {import("@rsbuild/core").ManifestData} ssrManifest
- * @param {import("@rsbuild/core").ManifestData} clientManifest
  * @param {Rari.BuiltPage} page
+ * @param {import("@rspack/core").StatsCompilation[]} manifest
  */
-export async function render(path, ssrManifest, clientManifest, page) {
+export async function render(path, page, manifest) {
   const locale = path.split("/")[1] || "en-US";
   if (locale === "qa") {
     path = path.replace("/qa/", "/en-US/");
@@ -91,8 +90,6 @@ export async function render(path, ssrManifest, clientManifest, page) {
           return NotFound(context);
       }
     })();
-    return await collectResult(
-      r(renderHTML(ssrManifest, clientManifest, context, component)),
-    );
+    return await collectResult(r(renderHTML(context, component, manifest)));
   });
 }
@@ -1,5 +1,5 @@
 import { html } from "lit";
-import "./grade-svg";
+import "./grade-svg.js";
 
 /**
  *

@@ -4,8 +4,8 @@ import { formatMinus, hostAsRedirectChain } from "../utils.js";
 
 import { Tooltip } from "./tooltip.js";
 import { Trend } from "./trend.js";
-import "./human-duration";
-import "./rescan-button";
+import "./human-duration.js";
+import "./rescan-button.js";
 
 /**
  *