@pracht/vite-plugin 0.4.3 → 0.5.0

package/dist/index.d.mts

@@ -65,6 +65,14 @@ interface PrachtPluginOptions {
   prerenderConcurrency?: number;
   /** Maximum request body size (bytes) accepted by the dev SSR middleware. Defaults to 1 MiB. */
   maxBodySize?: number;
+  /**
+   * Per-route gzip client-JS budgets evaluated by `pracht build`, e.g.
+   * `{ "*": "120kb", "/dashboard": "200kb" }`. `"*"` applies to every route;
+   * explicit route paths override it. Values are byte counts or size strings
+   * ("120kb", "1mb"). Exceeded budgets fail the build unless
+   * `pracht build --no-budget-fail` is used.
+   */
+  budgets?: Record<string, string | number>;
   /**
    * Opt into precompiling safe Preact JSX DOM subtrees for SSR/SSG server bundles.
    * Client bundles keep the normal Preact JSX transform for hydration.

package/dist/index.mjs

@@ -1,7 +1,8 @@
 import { i as scanPagesDirectory, n as generatePagesManifestSource, o as createRouteLoaderHints } from "./pages-router-BN3V7ii7.mjs";
+import { createRequire } from "node:module";
 import { preactSsrPrecompile } from "@pracht/preact-ssr-precompile";
 import preact from "@preact/preset-vite";
-import { dirname, resolve } from "node:path";
+import { dirname, join, resolve } from "node:path";
 import { parseAst } from "vite";
 import { existsSync, readFileSync } from "node:fs";
 import { createNodeServerEntryModule } from "@pracht/adapter-node";
@@ -966,6 +967,7 @@ const DEFAULTS = {
 	pagesDefaultRender: "ssr",
 	prerenderConcurrency: 10,
 	maxBodySize: 1024 * 1024,
+	budgets: {},
 	precompileSsrJsx: false
 };
 function resolveOptions(options) {
@@ -975,8 +977,17 @@ function resolveOptions(options) {
 	};
 	if (!Number.isInteger(resolved.prerenderConcurrency) || resolved.prerenderConcurrency <= 0) throw new Error("pracht({ prerenderConcurrency }) expects a positive integer.");
 	if (!Number.isInteger(resolved.maxBodySize) || resolved.maxBodySize <= 0) throw new Error("pracht({ maxBodySize }) expects a positive integer number of bytes.");
+	validateBudgets(resolved.budgets);
 	return resolved;
 }
+function validateBudgets(budgets) {
+	for (const [key, value] of Object.entries(budgets)) {
+		if (key !== "*" && !key.startsWith("/")) throw new Error(`pracht({ budgets }) keys must be "*" or a route path starting with "/", got ${JSON.stringify(key)}.`);
+		const isValidNumber = typeof value === "number" && Number.isFinite(value) && value > 0;
+		const isValidString = typeof value === "string" && value.trim().length > 0;
+		if (!isValidNumber && !isValidString) throw new Error(`pracht({ budgets }) values must be a positive number of bytes or a size string like "120kb", got ${JSON.stringify(value)} for ${JSON.stringify(key)}.`);
+	}
+}
 //#endregion
 //#region src/plugin-codegen.ts
 function createPrachtClientModuleSource(options = {}, buildOptions = {}) {
@@ -1076,6 +1087,7 @@ function createPrachtServerModuleSource(options = {}, buildOptions = {}) {
 		`export const cssManifest = ${JSON.stringify(clientBuild.cssManifest)};`,
 		`export const jsManifest = ${JSON.stringify(clientBuild.jsManifest)};`,
 		`export const prerenderConcurrency = ${JSON.stringify(resolved.prerenderConcurrency)};`,
+		`export const budgets = ${JSON.stringify(resolved.budgets)};`,
 		"export { prerenderApp };",
 		""
 	];
@@ -1167,19 +1179,36 @@ function generatePagesAppInlineSource(options, root = process.cwd()) {
 //#region src/plugin-dev-ssr.ts
 const BODYLESS_METHODS = new Set(["GET", "HEAD"]);
 const DEFAULT_MAX_BODY_SIZE = 1024 * 1024;
+const DEVTOOLS_JSON_PATH = "/_pracht.json";
 function createDevSSRMiddleware(server, options = {}) {
 	const maxBodySize = options.maxBodySize ?? DEFAULT_MAX_BODY_SIZE;
+	let warnedDevtoolsCollision = false;
 	return async (req, res, next) => {
 		const url = req.url ?? "/";
 		const requestUrl = new URL(url, "http://localhost");
 		try {
 			const [framework, serverMod] = await Promise.all([server.ssrLoadModule("@pracht/core/server"), server.ssrLoadModule(PRACHT_SERVER_MODULE_ID)]);
-			if (shouldBypassDevSSR(requestUrl, req, {
+			const routeMatchers = {
 				app: serverMod.resolvedApp,
 				apiRoutes: serverMod.apiRoutes,
 				matchApiRoute: framework.matchApiRoute,
 				matchAppRoute: framework.matchAppRoute
-			})) return next();
+			};
+			if (requestUrl.pathname === "/_pracht" || requestUrl.pathname === "/_pracht.json") {
+				if (!warnedDevtoolsCollision && matchesResolvedRoute(requestUrl.pathname, routeMatchers)) {
+					warnedDevtoolsCollision = true;
+					server.config.logger.warn(`[pracht] An app route matches ${requestUrl.pathname}, which is reserved for the pracht devtools page in dev. The devtools page wins during development; the app route is only served in production builds.`);
+				}
+				await serveDevtools(server, res, {
+					apiRoutes: serverMod.apiRoutes ?? [],
+					app: serverMod.resolvedApp,
+					url,
+					wantsJson: requestUrl.pathname === DEVTOOLS_JSON_PATH
+				});
+				return;
+			}
+			if (shouldBypassDevSSR(requestUrl, req, routeMatchers)) return next();
+			if (isDevNotFoundRequest(requestUrl, req, routeMatchers)) return serveDevNotFound(server, res, next, url, requestUrl.pathname, routeMatchers);
 			let webRequest;
 			try {
 				webRequest = await nodeToWebRequest(req, maxBodySize);
@@ -1191,13 +1220,15 @@ function createDevSSRMiddleware(server, options = {}) {
 				}
 				throw err;
 			}
+			const timings = {};
 			const response = await framework.handlePrachtRequest({
 				app: serverMod.resolvedApp,
 				registry: serverMod.registry,
 				request: webRequest,
 				debugErrors: true,
 				clientEntryUrl: CLIENT_BROWSER_PATH,
-				apiRoutes: serverMod.apiRoutes
+				apiRoutes: serverMod.apiRoutes,
+				timings
 			});
 			if (response.status === 404) return next();
 			const contentType = response.headers.get("content-type") ?? "text/html";
@@ -1207,12 +1238,38 @@ function createDevSSRMiddleware(server, options = {}) {
 			response.headers.forEach((value, key) => {
 				res.setHeader(key, value);
 			});
+			const serverTiming = framework.formatServerTimingHeader(timings);
+			if (serverTiming) res.setHeader("Server-Timing", serverTiming);
 			res.end(body);
 		} catch (error) {
 			await handleDevError(server, req, res, next, url, error);
 		}
 	};
 }
+/**
+* Serve the dev-only `/_pracht` devtools page (or `/_pracht.json`) built from
+* the same resolved app graph that `pracht inspect` reports.
+*/
+async function serveDevtools(server, res, options) {
+	const devtools = await server.ssrLoadModule("@pracht/core/devtools");
+	const graph = await devtools.buildAppGraph({
+		apiRoutes: options.apiRoutes,
+		app: options.app,
+		loadModule: (file) => server.ssrLoadModule(file),
+		readSource: (file) => readFileSync(resolve(server.config.root, `.${file}`), "utf-8")
+	});
+	if (options.wantsJson) {
+		res.statusCode = 200;
+		res.setHeader("content-type", "application/json; charset=utf-8");
+		res.end(JSON.stringify(graph, null, 2));
+		return;
+	}
+	let html = devtools.buildDevtoolsHtml(graph);
+	html = await server.transformIndexHtml(options.url, html);
+	res.statusCode = 200;
+	res.setHeader("content-type", "text/html; charset=utf-8");
+	res.end(html);
+}
 async function handleDevError(server, req, res, next, url, error) {
 	if (error instanceof Error) server.ssrFixStacktrace(error);
 	if (req.headers["x-pracht-route-state-request"] === "1") {
@@ -1229,7 +1286,8 @@ async function handleDevError(server, req, res, next, url, error) {
 		const { buildErrorOverlayHtml } = await server.ssrLoadModule("@pracht/core/error-overlay");
 		let html = buildErrorOverlayHtml({
 			message: error instanceof Error ? error.message : String(error),
-			stack: error instanceof Error ? error.stack : void 0
+			stack: error instanceof Error ? error.stack : void 0,
+			root: server.config.root
 		});
 		html = await server.transformIndexHtml(url, html);
 		res.statusCode = 500;
@@ -1239,6 +1297,40 @@ async function handleDevError(server, req, res, next, url, error) {
 		next(error);
 	}
 }
+/**
+* True when a GET/HEAD document request matches no page route and no API
+* route — the dev middleware then serves the rich dev-only 404 page instead
+* of falling through to Vite. Route-state (JSON) requests and non-document
+* fetches keep their existing 404 behavior.
+*/
+function isDevNotFoundRequest(requestUrl, req, options = {}) {
+	const url = typeof requestUrl === "string" ? new URL(requestUrl, "http://localhost") : requestUrl;
+	if (isRouteStateRequest(url, req)) return false;
+	const method = (req.method ?? "GET").toUpperCase();
+	if (method !== "GET" && method !== "HEAD") return false;
+	const accept = readRequestHeader(req.headers.accept).toLowerCase();
+	if (!accept.includes("text/html") && !accept.includes("application/xhtml+xml")) return false;
+	return !matchesResolvedRoute(url.pathname, options);
+}
+async function serveDevNotFound(server, res, next, url, pathname, options) {
+	try {
+		const { buildDevNotFoundHtml } = await server.ssrLoadModule("@pracht/core/dev-404");
+		let html = buildDevNotFoundHtml({
+			apiRoutes: options.apiRoutes.map((route) => ({ path: route.path })),
+			requestedPath: pathname,
+			routes: options.app.routes.map((route) => ({
+				path: route.path,
+				render: route.render ?? null
+			}))
+		});
+		html = await server.transformIndexHtml(url, html);
+		res.statusCode = 404;
+		res.setHeader("content-type", "text/html; charset=utf-8");
+		res.end(html);
+	} catch {
+		next();
+	}
+}
 function shouldBypassDevSSR(requestUrl, req, options = {}) {
 	const url = typeof requestUrl === "string" ? new URL(requestUrl, "http://localhost") : requestUrl;
 	const pathname = url.pathname;
@@ -1363,10 +1455,16 @@ function pracht(options = {}) {
 			const isSSRBuild = env.isSsrBuild;
 			return {
 				appType: "custom",
-				build: { rollupOptions: { output: { manualChunks(id) {
+				...isSSRBuild ? {} : { build: { rollupOptions: { output: { manualChunks(id) {
 					if (id.includes("node_modules/preact") || id.includes("node_modules/preact-suspense")) return "vendor";
-				} } } },
-				...isEdge && isSSRBuild ? { ssr: { noExternal: true } } : {}
+				} } } } },
+				...isEdge && isSSRBuild ? {
+					ssr: {
+						noExternal: true,
+						target: "webworker"
+					},
+					build: { rollupOptions: { external: [/^cloudflare:/] } }
+				} : {}
 			};
 		},
 		configResolved(config) {
@@ -1450,7 +1548,7 @@ function pracht(options = {}) {
 		name: "pracht:optimize-deps-entries",
 		enforce: "post",
 		config(config) {
-			return withPrachtOptimizeDepsEntries(config, createPrachtOptimizeDepsEntries(resolved));
+			return withPrachtOptimizeDepsEntries(config, createPrachtOptimizeDepsEntries(resolved), createPrachtOptimizeDepsInclude(config.root ?? process.cwd()));
 		}
 	};
 	const precompilePlugin = resolved.precompileSsrJsx ? preactSsrPrecompile({
@@ -1481,10 +1579,26 @@ function rewriteManifestCoreImports(code) {
 		return `import ${typeKeyword ?? ""}{${specifiers}} from ${quote}@pracht/core/manifest${quote}`;
 	});
 }
-function withPrachtOptimizeDepsEntries(config, prachtEntries) {
+const PRACHT_OPTIMIZE_DEPS_INCLUDE = [
+	"@pracht/core",
+	"@pracht/core/client",
+	"@pracht/core/manifest"
+];
+function createPrachtOptimizeDepsInclude(root) {
+	try {
+		if (!toPosixPath(createRequire(join(root, "package.json")).resolve("@pracht/core/package.json")).includes("/node_modules/")) return [];
+		return PRACHT_OPTIMIZE_DEPS_INCLUDE;
+	} catch {
+		return [];
+	}
+}
+function withPrachtOptimizeDepsEntries(config, prachtEntries, prachtInclude) {
 	const environments = Object.fromEntries(Object.entries(config.environments ?? {}).map(([name, environment]) => [name, { optimizeDeps: { entries: mergeOptimizeDepsEntries(environment.optimizeDeps?.entries, prachtEntries) } }]));
 	return {
-		optimizeDeps: { entries: mergeOptimizeDepsEntries(config.optimizeDeps?.entries, prachtEntries) },
+		optimizeDeps: {
+			entries: mergeOptimizeDepsEntries(config.optimizeDeps?.entries, prachtEntries),
+			...prachtInclude.length > 0 ? { include: mergeOptimizeDepsEntries(config.optimizeDeps?.include, prachtInclude) } : {}
+		},
 		...Object.keys(environments).length > 0 ? { environments } : {}
 	};
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pracht/vite-plugin",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "Vite plugin for Pracht apps with virtual modules, dev SSR, prerendering, route inspection, and multi-adapter builds.",
   "keywords": [
     "pracht",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@preact/preset-vite": "^2.10.5",
     "@prefresh/vite": "^2.0.0",
-    "@pracht/adapter-node": "0.2.3",
-    "@pracht/core": "0.8.0",
-    "@pracht/preact-ssr-precompile": "0.1.1"
+    "@pracht/adapter-node": "0.2.5",
+    "@pracht/core": "0.9.0",
+    "@pracht/preact-ssr-precompile": "0.1.2"
   },
   "peerDependencies": {
     "vite": "^8.0.0"