@vertz/ui-server 0.2.38 → 0.2.41

package/dist/shared/{chunk-2ymwre0k.js → chunk-15kac8x8.js}

@@ -335,13 +335,102 @@ function createSSRDataChunk(key, data, nonce) {
 // src/ssr-render.ts
 import { compileTheme } from "@vertz/ui";
 import { EntityStore, MemoryCache, QueryEnvelopeStore } from "@vertz/ui/internals";
+
+// src/css-filter.ts
+function extractClassNamesFromHTML(html) {
+  const classes = new Set;
+  const attrRegex = /\bclass(?:Name)?="([^"]*)"/g;
+  let match;
+  while ((match = attrRegex.exec(html)) !== null) {
+    const value = match[1];
+    for (const cls of value.split(/\s+/)) {
+      if (cls)
+        classes.add(cls);
+    }
+  }
+  return classes;
+}
+function extractClassSelectorsFromCSS(css) {
+  const selectors = new Set;
+  const selectorRegex = /\.([\w-]+)/g;
+  let match;
+  while ((match = selectorRegex.exec(css)) !== null) {
+    selectors.add(match[1]);
+  }
+  return selectors;
+}
+function isKeyframesBlock(css) {
+  return /^\s*@keyframes\s/.test(css);
+}
+function hasOnlyClassSelectors(css) {
+  let stripped = css.replace(/\/\*[\s\S]*?\*\//g, "");
+  stripped = stripped.replace(/@keyframes\s+[\w-]+\s*\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\}/g, "");
+  stripped = stripped.replace(/@[\w-]+\s*\([^)]*\)\s*\{/g, "").replace(/^\s*\}/gm, "");
+  const ruleRegex = /([^{}]+)\{/g;
+  let match;
+  let foundAnySelector = false;
+  while ((match = ruleRegex.exec(stripped)) !== null) {
+    const selector = match[1].trim();
+    if (!selector)
+      continue;
+    foundAnySelector = true;
+    if (!selector.startsWith(".")) {
+      return false;
+    }
+  }
+  return foundAnySelector;
+}
+function filterCSSByHTML(html, cssStrings) {
+  if (cssStrings.length === 0 || !html)
+    return [];
+  const htmlClasses = extractClassNamesFromHTML(html);
+  const kept = [];
+  const pendingKeyframes = [];
+  for (const css of cssStrings) {
+    if (isKeyframesBlock(css)) {
+      const nameMatch = /@keyframes\s+([\w-]+)/.exec(css);
+      if (nameMatch) {
+        pendingKeyframes.push({ css, name: nameMatch[1] });
+      }
+      continue;
+    }
+    if (!hasOnlyClassSelectors(css)) {
+      kept.push(css);
+      continue;
+    }
+    const cssClasses = extractClassSelectorsFromCSS(css);
+    let used = false;
+    for (const cls of cssClasses) {
+      if (htmlClasses.has(cls)) {
+        used = true;
+        break;
+      }
+    }
+    if (used)
+      kept.push(css);
+  }
+  if (pendingKeyframes.length > 0) {
+    const survivingCss = kept.join(`
+`);
+    for (const kf of pendingKeyframes) {
+      if (survivingCss.includes(kf.name)) {
+        kept.push(kf.css);
+      }
+    }
+  }
+  return kept;
+}
+
+// src/ssr-render.ts
 var compiledThemeCache = new WeakMap;
+var compiledThemeWithMetricsCache = new WeakMap;
 function compileThemeCached(theme, fallbackMetrics) {
-  const cached = compiledThemeCache.get(theme);
+  const cache = fallbackMetrics ? compiledThemeWithMetricsCache : compiledThemeCache;
+  const cached = cache.get(theme);
   if (cached)
     return cached;
   const compiled = compileTheme(theme, { fallbackMetrics });
-  compiledThemeCache.set(theme, compiled);
+  cache.set(theme, compiled);
   return compiled;
 }
 function createRequestContext(url) {
@@ -377,7 +466,7 @@ function resolveAppFactory(module) {
   }
   return createApp;
 }
-function collectCSS(themeCss, module) {
+function collectCSS(themeCss, module, renderedHtml) {
   const alreadyIncluded = new Set;
   if (themeCss)
     alreadyIncluded.add(themeCss);
@@ -386,8 +475,13 @@ function collectCSS(themeCss, module) {
       alreadyIncluded.add(s);
   }
   const ssrCtx = ssrStorage.getStore();
-  const rawComponentCss = ssrCtx?.cssTracker?.size ? Array.from(ssrCtx.cssTracker) : module.getInjectedCSS?.() ?? [];
-  const componentCss = rawComponentCss.filter((s) => !alreadyIncluded.has(s));
+  const tracker = ssrCtx?.cssTracker;
+  const useTracker = tracker && tracker.size > 0;
+  const rawComponentCss = useTracker ? Array.from(tracker) : module.getInjectedCSS?.() ?? [];
+  let componentCss = rawComponentCss.filter((s) => !alreadyIncluded.has(s));
+  if (!useTracker && componentCss.length > 0 && renderedHtml) {
+    componentCss = filterCSSByHTML(renderedHtml, componentCss);
+  }
   const themeTag = themeCss ? `<style data-vertz-css>${themeCss}</style>` : "";
   const globalTag = module.styles && module.styles.length > 0 ? `<style data-vertz-css>${module.styles.join(`
 `)}</style>` : "";
@@ -468,7 +562,7 @@ async function ssrRenderToString(module, url, options) {
       const vnode = toVNode(app);
       const stream = renderToStream(vnode);
       const html = await streamToString(stream);
-      const css = collectCSS(themeCss, module);
+      const css = collectCSS(themeCss, module, html);
       const ssrData = resolvedQueries.length > 0 ? resolvedQueries.map(({ key, data }) => ({ key, data })) : [];
       return {
         html,
@@ -718,7 +812,7 @@ async function ssrRenderSinglePass(module, url, options) {
       const vnode = toVNode(app);
       const stream = renderToStream(vnode);
       const html = await streamToString(stream);
-      const css = collectCSS2(themeCss, module);
+      const css = collectCSS2(themeCss, module, html);
       const ssrData = discoveredData.resolvedQueries.map(({ key, data }) => ({
         key,
         data
@@ -775,7 +869,7 @@ async function ssrRenderProgressive(module, url, options) {
       const app = createApp();
       const vnode = toVNode(app);
       const renderStream = renderToStream(vnode);
-      const css = collectCSS2(themeCss, module);
+      const css = collectCSS2(themeCss, module, "");
       const ssrData = discoveryResult.resolvedQueries.map(({ key, data }) => ({
         key,
         data
@@ -926,7 +1020,7 @@ async function renderWithPrefetchedData(module, normalizedUrl, prefetchedData, o
           matchedRoutePatterns: renderCtx.matchedRoutePatterns
         };
       }
-      const css = collectCSS2(themeCss, module);
+      const css = collectCSS2(themeCss, module, html);
       const ssrData = data.resolvedQueries.map(({ key, data: d }) => ({
         key,
         data: d
@@ -999,7 +1093,7 @@ function extractMethodFromKey(key) {
   const segments = cleanPath.split("/").filter(Boolean);
   return segments.length > 1 ? "get" : "list";
 }
-function collectCSS2(themeCss, module) {
+function collectCSS2(themeCss, module, renderedHtml) {
   const alreadyIncluded = new Set;
   if (themeCss)
     alreadyIncluded.add(themeCss);
@@ -1008,8 +1102,13 @@ function collectCSS2(themeCss, module) {
       alreadyIncluded.add(s);
   }
   const ssrCtx = ssrStorage.getStore();
-  const rawComponentCss = ssrCtx?.cssTracker?.size ? Array.from(ssrCtx.cssTracker) : module.getInjectedCSS?.() ?? [];
-  const componentCss = rawComponentCss.filter((s) => !alreadyIncluded.has(s));
+  const tracker = ssrCtx?.cssTracker;
+  const useTracker = tracker && tracker.size > 0;
+  const rawComponentCss = useTracker ? Array.from(tracker) : module.getInjectedCSS?.() ?? [];
+  let componentCss = rawComponentCss.filter((s) => !alreadyIncluded.has(s));
+  if (!useTracker && componentCss.length > 0 && renderedHtml) {
+    componentCss = filterCSSByHTML(renderedHtml, componentCss);
+  }
   const themeTag = themeCss ? `<style data-vertz-css>${themeCss}</style>` : "";
   const globalTag = module.styles && module.styles.length > 0 ? `<style data-vertz-css>${module.styles.join(`
 `)}</style>` : "";
@@ -1081,7 +1180,8 @@ async function ssrRenderAot(module, url, options) {
     return ssrRenderSinglePass(module, normalizedUrl, fallbackOptions);
   }
   const queryCache = new Map;
-  const resolvedQueryKeys = aotEntry.queryKeys ? resolveParamQueryKeys(aotEntry.queryKeys, match.params) : undefined;
+  const searchParams = extractSearchParams(normalizedUrl);
+  const resolvedQueryKeys = aotEntry.queryKeys ? resolveParamQueryKeys(aotEntry.queryKeys, match.params, searchParams) : undefined;
   if (resolvedQueryKeys && resolvedQueryKeys.length > 0 && manifest?.routeEntries) {
     const apiClient = module.api;
     if (apiClient) {
@@ -1092,7 +1192,7 @@ async function ssrRenderAot(module, url, options) {
     const unresolvedKeys = resolvedQueryKeys.filter((k) => !queryCache.has(k));
     if (unresolvedKeys.length > 0) {
       try {
-        const resolved = await options.aotDataResolver(match.pattern, match.params, unresolvedKeys);
+        const resolved = await options.aotDataResolver(match.pattern, match.params, unresolvedKeys, searchParams);
         for (const [key, value] of resolved) {
           queryCache.set(key, value);
         }
@@ -1114,7 +1214,8 @@ async function ssrRenderAot(module, url, options) {
       holes,
       getData: (key) => queryCache.get(key),
       session: options.prefetchSession,
-      params: match.params
+      params: match.params,
+      searchParams
     };
     const data = {};
     for (const [key, value] of queryCache) {
@@ -1127,6 +1228,23 @@ async function ssrRenderAot(module, url, options) {
       console.error("[SSR] AOT render failed for", match.pattern, "— falling back to single-pass:", renderErr instanceof Error ? renderErr.message : renderErr);
       return ssrRenderSinglePass(module, normalizedUrl, fallbackOptions);
     }
+    if (aotManifest.app) {
+      try {
+        const appHoleNames = aotManifest.app.holes.filter((h) => h !== "RouterView");
+        const appHoles = createHoles(appHoleNames, module, normalizedUrl, queryCache, options.ssrAuth);
+        appHoles.RouterView = () => html;
+        const appCtx = {
+          holes: appHoles,
+          getData: (key) => queryCache.get(key),
+          session: options.prefetchSession,
+          params: match.params,
+          searchParams
+        };
+        html = aotManifest.app.render(data, appCtx);
+      } catch (appErr) {
+        console.error("[SSR] AOT app shell render failed — serving page without layout:", appErr instanceof Error ? appErr.message : appErr);
+      }
+    }
     if (options.diagnostics && isAotDebugEnabled()) {
       try {
         const domResult = await ssrRenderSinglePass(module, normalizedUrl, fallbackOptions);
@@ -1135,7 +1253,8 @@ async function ssrRenderAot(module, url, options) {
         }
       } catch {}
     }
-    const css = collectCSSFromModule(module, options.fallbackMetrics);
+    const routeCss = mergeRouteCss(aotEntry.css, aotManifest.app?.css);
+    const css = collectCSSFromModule(module, html, options.fallbackMetrics, routeCss, match.pattern);
     const ssrData = [];
     for (const [key, data2] of queryCache) {
       ssrData.push({ key, data: data2 });
@@ -1192,8 +1311,20 @@ function unwrapResult2(result) {
   }
   return result;
 }
-function resolveParamQueryKeys(queryKeys, params) {
-  return queryKeys.map((key) => key.replace(/\$\{(\w+)\}/g, (_, paramName) => params[paramName] ?? ""));
+function resolveParamQueryKeys(queryKeys, params, searchParams) {
+  return queryKeys.map((key) => key.replace(/\$\{sp:(\w+)(?:\|([^}]*))?\}/g, (_, spName, defaultVal) => {
+    const value = searchParams?.get(spName);
+    if (defaultVal !== undefined) {
+      return value || defaultVal;
+    }
+    return value ?? "";
+  }).replace(/\$\{(\w+)\}/g, (_, paramName) => params[paramName] ?? ""));
+}
+function extractSearchParams(url) {
+  const qIdx = url.indexOf("?");
+  if (qIdx === -1)
+    return;
+  return new URLSearchParams(url.slice(qIdx));
 }
 function isAotDebugEnabled() {
   const env = process.env.VERTZ_DEBUG;
@@ -1208,7 +1339,32 @@ function ensureDomShim3() {
   domShimInstalled3 = true;
   installDomShim();
 }
-function collectCSSFromModule(module, fallbackMetrics) {
+function mergeRouteCss(routeCss, appCss) {
+  if (!routeCss && !appCss)
+    return;
+  if (!appCss)
+    return routeCss;
+  if (!routeCss)
+    return appCss;
+  const seen = new Set(appCss);
+  const merged = [...appCss];
+  for (const rule of routeCss) {
+    if (!seen.has(rule))
+      merged.push(rule);
+  }
+  return merged;
+}
+var routeCssCache = new Map;
+function clearRouteCssCache() {
+  routeCssCache.clear();
+}
+function collectCSSFromModule(module, renderedHtml, fallbackMetrics, routeCss, routePattern) {
+  if (routePattern && routeCss) {
+    const cached = routeCssCache.get(routePattern);
+    if (cached) {
+      return cached;
+    }
+  }
   let themeCss = "";
   let preloadTags = "";
   if (module.theme) {
@@ -1227,9 +1383,19 @@ function collectCSSFromModule(module, fallbackMetrics) {
     for (const s of module.styles)
       alreadyIncluded.add(s);
   }
-  const ssrCtx = ssrStorage.getStore();
-  const rawComponentCss = ssrCtx?.cssTracker?.size ? Array.from(ssrCtx.cssTracker) : module.getInjectedCSS?.() ?? [];
-  const componentCss = rawComponentCss.filter((s) => !alreadyIncluded.has(s));
+  let componentCss;
+  if (routeCss && routeCss.length > 0) {
+    componentCss = routeCss.filter((s) => !alreadyIncluded.has(s));
+  } else {
+    const ssrCtx = ssrStorage.getStore();
+    const tracker = ssrCtx?.cssTracker;
+    const useTracker = tracker && tracker.size > 0;
+    const rawComponentCss = useTracker ? Array.from(tracker) : module.getInjectedCSS?.() ?? [];
+    componentCss = rawComponentCss.filter((s) => !alreadyIncluded.has(s));
+    if (!useTracker && componentCss.length > 0 && renderedHtml) {
+      componentCss = filterCSSByHTML(renderedHtml, componentCss);
+    }
+  }
   const themeTag = themeCss ? `<style data-vertz-css>${themeCss}</style>` : "";
   const globalTag = module.styles && module.styles.length > 0 ? `<style data-vertz-css>${module.styles.join(`
 `)}</style>` : "";
@@ -1237,7 +1403,11 @@ function collectCSSFromModule(module, fallbackMetrics) {
 `)}</style>` : "";
   const cssString = [themeTag, globalTag, componentTag].filter(Boolean).join(`
 `);
-  return { cssString, preloadTags };
+  const result = { cssString, preloadTags };
+  if (routePattern && routeCss) {
+    routeCssCache.set(routePattern, result);
+  }
+  return result;
 }
 
 // src/ssr-access-set.ts
@@ -1513,4 +1683,4 @@ function replaceAppDivContent(template, appHtml) {
   return template.slice(0, contentStart) + appHtml + template.slice(i);
 }
 
-export { escapeHtml, escapeAttr, serializeToHtml, toPrefetchSession, evaluateAccessRule, reconstructDescriptors, resetSlotCounter, createSlotPlaceholder, encodeChunk, streamToString, collectStreamChunks, createTemplateChunk, renderToStream, safeSerialize, getStreamingRuntimeScript, createSSRDataChunk, compileThemeCached, createRequestContext, ssrRenderToString, ssrDiscoverQueries, ssrStreamNavQueries, matchUrlToPatterns, ssrRenderSinglePass, ssrRenderProgressive, createHoles, ssrRenderAot, isAotDebugEnabled, getAccessSetForSSR, createAccessSetScript, createSessionScript, resolveRouteModulepreload, precomputeHandlerState, resolveSession, injectIntoTemplate };
+export { escapeHtml, escapeAttr, serializeToHtml, toPrefetchSession, evaluateAccessRule, reconstructDescriptors, resetSlotCounter, createSlotPlaceholder, encodeChunk, streamToString, collectStreamChunks, createTemplateChunk, renderToStream, safeSerialize, getStreamingRuntimeScript, createSSRDataChunk, compileThemeCached, createRequestContext, ssrRenderToString, ssrDiscoverQueries, ssrStreamNavQueries, matchUrlToPatterns, ssrRenderSinglePass, ssrRenderProgressive, createHoles, ssrRenderAot, isAotDebugEnabled, clearRouteCssCache, getAccessSetForSSR, createAccessSetScript, createSessionScript, resolveRouteModulepreload, precomputeHandlerState, resolveSession, injectIntoTemplate };

package/dist/shared/{chunk-d1a3ygv6.js → chunk-gqvkycnj.js}

@@ -10,7 +10,7 @@ import {
   ssrRenderSinglePass,
   ssrStreamNavQueries,
   toPrefetchSession
-} from "./chunk-2ymwre0k.js";
+} from "./chunk-15kac8x8.js";
 
 // src/node-handler.ts
 function createNodeHandler(options) {
@@ -24,7 +24,8 @@ function createNodeHandler(options) {
     sessionResolver,
     manifest,
     progressiveHTML,
-    aotManifest
+    aotManifest,
+    aotDataResolver
   } = options;
   const { template, linkHeader, modulepreloadTags, splitResult } = precomputeHandlerState(options);
   const useProgressive = progressiveHTML && splitResult && !(manifest?.routeEntries && Object.keys(manifest.routeEntries).length > 0);
@@ -60,7 +61,8 @@ function createNodeHandler(options) {
           ssrTimeout,
           fallbackMetrics,
           ssrAuth,
-          prefetchSession
+          prefetchSession,
+          aotDataResolver
         }) : await ssrRenderSinglePass(module, url, {
           ssrTimeout,
           fallbackMetrics,

package/dist/shared/{chunk-595trxsn.js → chunk-j18fewkf.js}

@@ -11,14 +11,16 @@ import {
   ssrRenderSinglePass,
   ssrStreamNavQueries,
   toPrefetchSession
-} from "./chunk-2ymwre0k.js";
+} from "./chunk-15kac8x8.js";
 
 // src/aot-manifest-loader.ts
 import { existsSync, readFileSync } from "node:fs";
 import { join } from "node:path";
 async function loadAotManifest(serverDir) {
   const manifestPath = join(serverDir, "aot-manifest.json");
-  const routesModulePath = join(serverDir, "aot-routes.js");
+  const routesModuleTs = join(serverDir, "aot-routes.ts");
+  const routesModuleJs = join(serverDir, "aot-routes.js");
+  const routesModulePath = existsSync(routesModuleTs) ? routesModuleTs : routesModuleJs;
   if (!existsSync(manifestPath) || !existsSync(routesModulePath)) {
     return null;
   }
@@ -46,13 +48,26 @@ async function loadAotManifest(serverDir) {
     routes[pattern] = {
       render: renderFn,
       holes: entry.holes,
-      queryKeys: entry.queryKeys
+      queryKeys: entry.queryKeys,
+      css: entry.css
     };
   }
   if (Object.keys(routes).length === 0) {
     return null;
   }
-  return { routes };
+  let app;
+  if (manifestJson.app) {
+    const appRenderFn = routesModule[manifestJson.app.renderFn];
+    if (typeof appRenderFn === "function") {
+      app = {
+        render: appRenderFn,
+        holes: manifestJson.app.holes,
+        queryKeys: manifestJson.app.queryKeys,
+        css: manifestJson.app.css
+      };
+    }
+  }
+  return { routes, app };
 }
 
 // src/ssr-progressive-response.ts

package/dist/ssr/index.d.ts

@@ -140,6 +140,8 @@ interface SSRAotContext {
 	session: PrefetchSession | undefined;
 	/** Route params for the current request. */
 	params: Record<string, string>;
+	/** URL search params for the current request (used by AOT functions with ${sp:name} keys). */
+	searchParams: URLSearchParams | undefined;
 }
 /** An AOT render function: takes props/data and context, returns HTML string. */
 type AotRenderFn = (data: Record<string, unknown>, ctx: SSRAotContext) => string;
@@ -151,6 +153,8 @@ interface AotRouteEntry {
 	holes: string[];
 	/** Query cache keys this route reads via ctx.getData(). */
 	queryKeys?: string[];
+	/** Pre-filtered CSS rules for this route, determined at build time (#1988). */
+	css?: string[];
 }
 /**
 * AOT manifest — maps route patterns to pre-compiled render functions.
@@ -160,6 +164,8 @@ interface AotRouteEntry {
 interface AotManifest {
 	/** Route pattern → AOT entry. */
 	routes: Record<string, AotRouteEntry>;
+	/** Root layout (App) entry — wraps page content via its RouterView hole. */
+	app?: AotRouteEntry;
 }
 /**
 * Resolves custom data for AOT-rendered routes.
@@ -172,7 +178,7 @@ interface AotManifest {
 * @param unresolvedKeys - Query keys not yet populated by entity prefetch
 * @returns Map of cache key → data, or empty Map to skip
 */
-type AotDataResolver = (pattern: string, params: Record<string, string>, unresolvedKeys: string[]) => Promise<Map<string, unknown>> | Map<string, unknown>;
+type AotDataResolver = (pattern: string, params: Record<string, string>, unresolvedKeys: string[], searchParams?: URLSearchParams) => Promise<Map<string, unknown>> | Map<string, unknown>;
 /**
 * Load AOT manifest and routes module from a server build directory.
 *

package/dist/ssr/index.js

@@ -1,12 +1,12 @@
 import {
   createSSRHandler,
   loadAotManifest
-} from "../shared/chunk-595trxsn.js";
+} from "../shared/chunk-j18fewkf.js";
 import {
   injectIntoTemplate,
   ssrDiscoverQueries,
   ssrRenderToString
-} from "../shared/chunk-2ymwre0k.js";
+} from "../shared/chunk-15kac8x8.js";
 import"../shared/chunk-ybftdw1r.js";
 // src/prerender.ts
 async function discoverRoutes(module) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/ui-server",
-  "version": "0.2.38",
+  "version": "0.2.41",
   "description": "Vertz UI server-side rendering runtime",
   "license": "MIT",
   "repository": {
@@ -58,7 +58,7 @@
   },
   "scripts": {
     "build": "bunup",
-    "test": "bun test src/",
+    "test": "bun test --timeout 60000 src/",
     "test:integration": "bun test src/__tests__/bun-dev-server.integration.local.ts",
     "test:e2e": "bunx playwright test",
     "typecheck": "tsc --noEmit"
@@ -67,9 +67,9 @@
     "@ampproject/remapping": "^2.3.0",
     "@capsizecss/unpack": "^4.0.0",
     "@jridgewell/trace-mapping": "^0.3.31",
-    "@vertz/core": "^0.2.35",
-    "@vertz/ui": "^0.2.35",
-    "@vertz/ui-compiler": "^0.2.35",
+    "@vertz/core": "^0.2.39",
+    "@vertz/ui": "^0.2.39",
+    "@vertz/ui-compiler": "^0.2.39",
     "magic-string": "^0.30.0",
     "sharp": "^0.34.5",
     "ts-morph": "^27.0.2"
@@ -77,7 +77,7 @@
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.3",
     "@playwright/test": "^1.58.2",
-    "@vertz/codegen": "^0.2.35",
+    "@vertz/codegen": "^0.2.39",
     "@vertz/ui-auth": "^0.2.19",
     "bun-types": "^1.3.10",
     "bunup": "^0.16.31",