chore: client builds

Author: lowlighter

@mizu/render/client/mod.ts

@@ -10,6 +10,6 @@ export type * from "./client.ts"
 export default Client.default as Client
 
 // Start the client-side renderer if this module is the main entry point
-if (import.meta.main) {
+if ((import.meta.main) && (globalThis.window?.document)) {
   Client.default.render()
 }

deno.jsonc

@@ -24,13 +24,13 @@
     // Cache dependencies
     "cache": "deno cache **/mod.ts www/*.ts && deno test --no-run",
     // Serve website locally
-    "serve": "deno serve --allow-read --allow-env --allow-net --allow-run --port=4649 --location=http://localhost:4649 --watch www/serve.ts",
+    "serve": "deno serve --allow-read --allow-env --allow-net --allow-run --allow-write=/tmp --port=4649 --location=http://localhost:4649 --watch www/serve.ts",
     // Build project
     "build": "deno task build:clean && deno task build:www && deno task build:coverage",
     // Clean build artifacts
     "build:clean": "rm -rf .pages && mkdir -p .pages",
     // Build website
-    "build:www": "deno run --allow-read --allow-env --allow-net --allow-run --allow-write=.pages --location=http://localhost:4649 www/build.ts",
+    "build:www": "deno run --allow-read --allow-env --allow-net --allow-run --allow-write=.pages,/tmp --location=http://localhost:4649 www/build.ts",
     // Build coverage report
     "build:coverage": "deno task test:only --filter='/DENO/' --clean --coverage --fail-fast --reporter=dot && deno coverage --html && mv coverage/html .pages/coverage && deno run --allow-read --allow-net=img.shields.io --allow-write=.pages/coverage jsr:@libs/bundle/ts/cli/coverage --root=.pages/coverage"
   },
@@ -60,8 +60,7 @@
     "@libs/run": "jsr:@libs/run@3",
     "@libs/testing": "jsr:@libs/testing@3",
     "@libs/typing": "jsr:@libs/typing@3",
-    "@npm/jsdom": "npm:jsdom@25",
-    "canvas": "node:canvas"
+    "@npm/jsdom": "npm:jsdom@25"
   },
   "workspace": [
     "@mizu/bind",

www/build.ts

@@ -1,6 +1,6 @@
 // Imports
 import Mizu from "@mizu/render/static"
-import { default as serve, html } from "./serve.ts"
+import { default as serve, html, js } from "./serve.ts"
 import { fromFileUrl, join } from "@std/path"
 
 await using _ = Deno.serve({ port: Number(new URL(globalThis.location.href).port) }, serve.fetch)
@@ -9,6 +9,10 @@ await Mizu.generate([
   { source: () => html("index"), destination: "index.html", render: {} },
   { source: () => html("build"), destination: "build.html", render: {} },
   { source: () => html("playground"), destination: "playground.html", render: {} },
+  { source: () => js("@mizu/render/client", { format: "iife" }), destination: "client.js" },
+  { source: () => js("@mizu/render/client", { format: "esm" }), destination: "client.mjs" },
+  // { source: () => js("@mizu/render/server", { server: true }), destination: "server.mjs" },
+  // { source: () => js("@mizu/render/static", { server: true }), destination: "static.mjs" },
   { source: new URL("/matcha.css", globalThis.location.href), destination: "matcha.css" },
   { source: new URL("/highlight.js", globalThis.location.href), destination: "highlight.js" },
   { source: "*.{svg,css,png,js}", directory: fromFileUrl(import.meta.resolve("./static")), destination: "." },

www/serve.ts

@@ -45,15 +45,18 @@ function config(name: string, { parse = true } = {} as { parse?: boolean }) {
 }
 
 /** Generate JS. */
-export function js(exported: string, options?: Pick<NonNullable<Arg<typeof bundle, 1>>, "format"> & { server?: boolean }) {
+export function js(exported: string, options?: Pick<NonNullable<Arg<typeof bundle, 1>>, "format"> & { server?: boolean; raw?: Record<PropertyKey, unknown> }) {
   const name = exported.match(/^(?<name>@[a-z0-9][-a-z0-9]*[a-z0-9]\/[a-z0-9][-a-z0-9]*[a-z0-9]).*$/)?.groups?.name ?? exported
   const url = import.meta.resolve(exported)
   log.with({ name, url }).debug("bundling javascript")
   if (options?.server) {
-    Object.assign(options, { external: ["node:canvas"] })
+    options.raw ??= {}
+    options.raw.external = ["canvas", "node:canvas", "node:url", "utf-8-validate", "bufferutil", "supports-color"]
+    options.raw.platform = "node"
   }
   if (options?.format === "iife") {
-    Object.assign(options, { raw: { define: { "import.meta.main": "true" } } })
+    options.raw ??= {}
+    options.raw.define = { "import.meta.main": "true" }
   }
   return bundle(new URL(url), { ...options, banner })
 }
@@ -97,9 +100,13 @@ export default {
       handler: async () => new Response(await js("@mizu/render/client", { format: "esm" }), { headers: { "Content-Type": "application/javascript; charset=utf-8", "Access-Control-Allow-Origin": "*" } }),
     },
     {
-      pattern: new URLPattern({ pathname: "/server.js" }),
+      pattern: new URLPattern({ pathname: "/server.mjs" }),
       handler: async () => new Response(await js("@mizu/render/server", { server: true }), { headers: { "Content-Type": "application/javascript; charset=utf-8" } }),
     },
+    {
+      pattern: new URLPattern({ pathname: "/static.mjs" }),
+      handler: async () => new Response(await js("@mizu/render/static", { server: true }), { headers: { "Content-Type": "application/javascript; charset=utf-8" } }),
+    },
     {
       pattern: new URLPattern({ pathname: "/about/phases" }),
       handler: () => new Response(JSON.stringify(Object.fromEntries(Object.entries(Phase).filter(([_, value]) => Number.isFinite(value)))), { headers: { "content-type": "application/json; charset=utf-8" } }),