@pablozaiden/webapp 0.5.2 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pablozaiden/webapp",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Opinionated Bun + React webapp framework for single-server apps",
   "license": "MIT",
   "type": "module",

package/src/build/build-binary.ts

@@ -31,18 +31,23 @@ export async function buildWebAppBinary(options: BuildWebAppBinaryOptions): Prom
   try {
     mkdirSync(cacheDir, { recursive: true });
     const webEntry = resolve(dirname(resolve(options.entrypoint)), options.web?.entry ?? "./web/main.tsx");
-    const browserEntry = resolve(cacheDir, "webapp-browser-entry.ts");
+    const rendererEntry = resolve(cacheDir, "webapp-renderer-prelude.ts");
+    const clientEntry = resolve(cacheDir, "webapp-client-entry.ts");
     const browserOutDir = resolve(cacheDir, "browser");
-    writeFileSync(browserEntry, `import { createRoot } from "react-dom/client";
+    writeFileSync(rendererEntry, `import { createRoot } from "react-dom/client";
 import { configureWebAppRenderer } from "@pablozaiden/webapp/web";
 
 configureWebAppRenderer(createRoot);
-import ${JSON.stringify(webEntry)};
+`);
+    writeFileSync(clientEntry, `import ${JSON.stringify(webEntry)};
 `);
     const browserBuild = await Bun.build({
-      entrypoints: [browserEntry],
+      entrypoints: [rendererEntry, clientEntry],
       outdir: browserOutDir,
       target: "browser",
+      format: "esm",
+      splitting: true,
+      publicPath: "/webapp-compiled/",
       minify: true,
       sourcemap: "external",
       define: options.define,
@@ -54,13 +59,17 @@ import ${JSON.stringify(webEntry)};
       throw new Error("Browser build failed");
     }
     const assets = browserBuild.outputs
+      .filter((output) => extname(output.path).toLowerCase() !== ".map")
       .map((output) => {
         const ext = extname(output.path).toLowerCase();
+        const fileName = basename(output.path);
         const publicPath = `/webapp-compiled/${basename(output.path)}`;
+        const scriptKind = ext === ".js" ? compiledScriptKind(fileName) : undefined;
         return {
           path: publicPath,
           contentType: contentTypeForOutput(ext),
-          role: ext === ".css" ? "style" : ext === ".js" ? "script" : "asset",
+          role: ext === ".css" ? "style" : scriptKind ? "script" : "asset",
+          ...(scriptKind ? { scriptOrder: scriptKind === "renderer" ? 0 : 1 } : {}),
           body: readFileSync(output.path).toString("base64"),
         };
       });
@@ -115,3 +124,9 @@ function contentTypeForOutput(ext: string): string {
   if (ext === ".map") return "application/json; charset=utf-8";
   return "application/octet-stream";
 }
+
+function compiledScriptKind(fileName: string): "renderer" | "client" | undefined {
+  if (/^webapp-renderer-prelude(?:[-.][\w-]+)?\.(?:mjs|js)$/.test(fileName)) return "renderer";
+  if (/^webapp-client-entry(?:[-.][\w-]+)?\.(?:mjs|js)$/.test(fileName)) return "client";
+  return undefined;
+}

package/src/server/create-web-app-server.ts

@@ -147,6 +147,7 @@ type CompiledClientAsset = {
   path: string;
   contentType: string;
   role: "script" | "style" | "asset";
+  scriptOrder?: number;
   body: string;
 };
 
@@ -481,7 +482,11 @@ function generatedHtml(
   const htmlAppleTouchPath = appleTouchPath.replace(/^\//, "./");
   const styleTags = compiledAssets?.filter((asset) => asset.role === "style").map((asset) => `    <link rel="stylesheet" href="${escapeAttribute(asset.path)}" />`).join("\n") ?? "";
   const scriptTags = compiledAssets
-    ? compiledAssets.filter((asset) => asset.role === "script").map((asset) => `    <script type="module" src="${escapeAttribute(asset.path)}"></script>`).join("\n")
+    ? compiledAssets
+        .filter((asset) => asset.role === "script")
+        .sort((left, right) => (left.scriptOrder ?? 0) - (right.scriptOrder ?? 0))
+        .map((asset) => `    <script type="module" src="${escapeAttribute(asset.path)}"></script>`)
+        .join("\n")
     : `    <script type="module" src="${escapeAttribute(relativePrelude ?? "")}"></script>
     <script type="module" src="${escapeAttribute(relativeEntry ?? "")}"></script>`;
   const manifestTags = pwaEnabled(web)