veryfront 0.1.26 → 0.1.28

package/src/src/rendering/orchestrator/pipeline.ts

@@ -46,6 +46,10 @@ import { withTimeout, withTimeoutThrow } from "../utils/stream-utils.js";
 import { generateTailwind4CSS } from "../../html/styles-builder/index.js";
 import { createEsmCache, createModuleCache, loadModule } from "./module-loader/index.js";
 import type { ModuleLoaderConfig } from "./module-loader/index.js";
+import {
+  getCSSImports,
+  runWithCSSCollector,
+} from "../../modules/react-loader/css-import-collector.js";
 
 // Extracted modules
 import { EMPTY_LAYOUT_RESULT, isDotPath } from "./path-helpers.js";
@@ -339,186 +343,200 @@ export class RenderPipeline {
 
     return withSpan(
       "render.page",
-      async () => {
-        const pageResolveStart = performance.now();
-        const pageInfo = await withSpan(
-          "render.resolve_page",
-          () => this.config.pageResolver.resolvePage(slug),
-          { "render.slug": slug },
-        );
-        timing.pageResolve = Math.round(performance.now() - pageResolveStart);
+      () =>
+        runWithCSSCollector(async () => {
+          const pageResolveStart = performance.now();
+          const pageInfo = await withSpan(
+            "render.resolve_page",
+            () => this.config.pageResolver.resolvePage(slug),
+            { "render.slug": slug },
+          );
+          timing.pageResolve = Math.round(performance.now() - pageResolveStart);
 
-        const skipLayouts = isDotPath(slug, pageInfo.entity.path);
+          const skipLayouts = isDotPath(slug, pageInfo.entity.path);
 
-        const layoutCollectStart = performance.now();
-        const layoutResult = skipLayouts ? EMPTY_LAYOUT_RESULT : await withSpan(
-          "render.collect_layouts",
-          () => this.config.layoutOrchestrator.collectLayouts(pageInfo),
-          { "render.slug": slug },
-        );
-        timing.layoutCollect = Math.round(performance.now() - layoutCollectStart);
-
-        const layoutPreloadPromise = !skipLayouts && layoutResult.nestedLayouts.length > 0
-          ? this.config.layoutOrchestrator.preloadLayoutModules(layoutResult.nestedLayouts)
-          : Promise.resolve();
-
-        let dataFetchingProps: Record<string, unknown> | undefined;
-        let resolvedParams: Record<string, string | string[]> = options?.params
-          ? { ...options.params }
-          : {};
-        let layoutDataMap = new Map<string, Record<string, unknown>>();
-
-        const dataFetchStart = performance.now();
-        if (options?.request && options?.url) {
-          await withSpan(
-            "render.data_fetching",
-            async () => {
-              try {
-                const dataResolution = await this.resolveDataFetching(
-                  slug,
-                  pageInfo.entity.path,
-                  layoutResult.nestedLayouts,
-                  options,
-                );
-                resolvedParams = dataResolution.params;
-                dataFetchingProps = Object.keys(dataResolution.pageProps).length > 0
-                  ? dataResolution.pageProps
-                  : undefined;
-                layoutDataMap = dataResolution.layoutProps;
-              } catch (error) {
-                if (error instanceof VeryfrontError) throw error;
-
-                renderPageLog.error("Data fetching error", {
-                  slug,
-                  error: error instanceof Error ? error.message : String(error),
-                });
-                throw error;
-              }
-            },
+          const layoutCollectStart = performance.now();
+          const layoutResult = skipLayouts ? EMPTY_LAYOUT_RESULT : await withSpan(
+            "render.collect_layouts",
+            () => this.config.layoutOrchestrator.collectLayouts(pageInfo),
             { "render.slug": slug },
           );
-        }
-        timing.dataFetch = Math.round(performance.now() - dataFetchStart);
-
-        const hasResolvedParams = Object.keys(resolvedParams).length > 0;
-        const mergedOptions = (dataFetchingProps || hasResolvedParams)
-          ? {
-            ...options,
-            ...(hasResolvedParams ? { params: resolvedParams } : {}),
-            ...(dataFetchingProps ? { props: { ...options?.props, ...dataFetchingProps } } : {}),
+          timing.layoutCollect = Math.round(performance.now() - layoutCollectStart);
+
+          const layoutPreloadPromise = !skipLayouts && layoutResult.nestedLayouts.length > 0
+            ? this.config.layoutOrchestrator.preloadLayoutModules(layoutResult.nestedLayouts)
+            : Promise.resolve();
+
+          let dataFetchingProps: Record<string, unknown> | undefined;
+          let resolvedParams: Record<string, string | string[]> = options?.params
+            ? { ...options.params }
+            : {};
+          let layoutDataMap = new Map<string, Record<string, unknown>>();
+
+          const dataFetchStart = performance.now();
+          if (options?.request && options?.url) {
+            await withSpan(
+              "render.data_fetching",
+              async () => {
+                try {
+                  const dataResolution = await this.resolveDataFetching(
+                    slug,
+                    pageInfo.entity.path,
+                    layoutResult.nestedLayouts,
+                    options,
+                  );
+                  resolvedParams = dataResolution.params;
+                  dataFetchingProps = Object.keys(dataResolution.pageProps).length > 0
+                    ? dataResolution.pageProps
+                    : undefined;
+                  layoutDataMap = dataResolution.layoutProps;
+                } catch (error) {
+                  if (error instanceof VeryfrontError) throw error;
+
+                  renderPageLog.error("Data fetching error", {
+                    slug,
+                    error: error instanceof Error ? error.message : String(error),
+                  });
+                  throw error;
+                }
+              },
+              { "render.slug": slug },
+            );
           }
-          : options;
-
-        const bundlePrepStart = performance.now();
-        const pageBundleResult = await withSpan(
-          "render.prepare_bundles",
-          () =>
-            this.config.pageRenderer.preparePageBundles(
-              pageInfo,
-              slug,
-              cacheResult?.cachedModule,
-              mergedOptions,
-            ),
-          { "render.slug": slug },
-        );
-        timing.bundlePrep = Math.round(performance.now() - bundlePrepStart);
+          timing.dataFetch = Math.round(performance.now() - dataFetchStart);
+
+          const hasResolvedParams = Object.keys(resolvedParams).length > 0;
+          const mergedOptions = (dataFetchingProps || hasResolvedParams)
+            ? {
+              ...options,
+              ...(hasResolvedParams ? { params: resolvedParams } : {}),
+              ...(dataFetchingProps ? { props: { ...options?.props, ...dataFetchingProps } } : {}),
+            }
+            : options;
+
+          const bundlePrepStart = performance.now();
+          const pageBundleResult = await withSpan(
+            "render.prepare_bundles",
+            () =>
+              this.config.pageRenderer.preparePageBundles(
+                pageInfo,
+                slug,
+                cacheResult?.cachedModule,
+                mergedOptions,
+              ),
+            { "render.slug": slug },
+          );
+          timing.bundlePrep = Math.round(performance.now() - bundlePrepStart);
 
-        if (pageBundleResult.scriptResult) return pageBundleResult.scriptResult;
+          if (pageBundleResult.scriptResult) return pageBundleResult.scriptResult;
 
-        if (!pageBundleResult.pageElement || !pageBundleResult.pageBundle) {
-          throw RENDER_ERROR.create({
-            detail: "Failed to prepare page bundle",
-            context: { slug },
-          });
-        }
+          if (!pageBundleResult.pageElement || !pageBundleResult.pageBundle) {
+            throw RENDER_ERROR.create({
+              detail: "Failed to prepare page bundle",
+              context: { slug },
+            });
+          }
 
-        const { pageElement, pageBundle } = pageBundleResult;
-
-        const mergedFrontmatter = {
-          ...pageInfo.entity.frontmatter,
-          ...(pageBundle as MdxBundle).frontmatter,
-        };
-
-        const headings = (pageBundle as PageBundle).headings || [];
-
-        await layoutPreloadPromise;
-
-        const layoutApplyStart = performance.now();
-        const wrappedElement = await withSpan(
-          "render.apply_layouts",
-          () =>
-            this.config.layoutOrchestrator.applyLayoutsAndWrappers(
-              pageElement,
-              pageInfo,
-              layoutResult.layoutBundle,
-              layoutResult.nestedLayouts,
-              layoutDataMap,
-              options?.url,
-              mergedFrontmatter,
-              headings,
-              options?.projectSlug,
-            ),
-          { "render.slug": slug, "render.layout_count": layoutResult.nestedLayouts.length },
-        );
-        timing.layoutApply = Math.round(performance.now() - layoutApplyStart);
-
-        const ssrStart = performance.now();
-        const ssrResult = await withSpan(
-          "render.ssr",
-          () =>
-            withTimeoutThrow(
-              this.config.ssrOrchestrator.performSSRRendering(
-                wrappedElement,
-                {
-                  pageInfo,
-                  pageBundle,
-                  layoutBundle: layoutResult.layoutBundle,
-                  nestedLayouts: layoutResult.nestedLayouts,
-                  collectedMetadata: pageBundleResult.collectedMetadata,
-                  slug,
-                },
-                mergedOptions,
+          const { pageElement, pageBundle } = pageBundleResult;
+
+          const mergedFrontmatter = {
+            ...pageInfo.entity.frontmatter,
+            ...(pageBundle as MdxBundle).frontmatter,
+          };
+
+          const headings = (pageBundle as PageBundle).headings || [];
+
+          await layoutPreloadPromise;
+
+          const layoutApplyStart = performance.now();
+          const wrappedElement = await withSpan(
+            "render.apply_layouts",
+            () =>
+              this.config.layoutOrchestrator.applyLayoutsAndWrappers(
+                pageElement,
+                pageInfo,
+                layoutResult.layoutBundle,
+                layoutResult.nestedLayouts,
+                layoutDataMap,
+                options?.url,
+                mergedFrontmatter,
+                headings,
+                options?.projectSlug,
               ),
-              SSR_RENDER_TIMEOUT_MS,
-              `SSR rendering for ${slug}`,
-            ),
-          { "render.slug": slug, "render.delivery": mergedOptions?.delivery || "full" },
-        );
-        timing.ssr = Math.round(performance.now() - ssrStart);
+            { "render.slug": slug, "render.layout_count": layoutResult.nestedLayouts.length },
+          );
+          timing.layoutApply = Math.round(performance.now() - layoutApplyStart);
+
+          // Snapshot CSS imports collected during module loading (before SSR rendering).
+          // These are passed to the HTML generator to be included in the output.
+          const collectedCSSImports = getCSSImports();
+
+          const ssrStart = performance.now();
+          const ssrResult = await withSpan(
+            "render.ssr",
+            () =>
+              withTimeoutThrow(
+                this.config.ssrOrchestrator.performSSRRendering(
+                  wrappedElement,
+                  {
+                    pageInfo,
+                    pageBundle,
+                    layoutBundle: layoutResult.layoutBundle,
+                    nestedLayouts: layoutResult.nestedLayouts,
+                    collectedMetadata: pageBundleResult.collectedMetadata,
+                    slug,
+                    cssImports: collectedCSSImports,
+                  },
+                  mergedOptions,
+                ),
+                SSR_RENDER_TIMEOUT_MS,
+                `SSR rendering for ${slug}`,
+              ),
+            { "render.slug": slug, "render.delivery": mergedOptions?.delivery || "full" },
+          );
+          timing.ssr = Math.round(performance.now() - ssrStart);
 
-        const pageModule = pageBundleResult.clientModuleCode && pageBundleResult.pageModuleType
-          ? {
-            slug,
-            code: pageBundleResult.clientModuleCode,
-            type: pageBundleResult.pageModuleType,
+          if (collectedCSSImports.length > 0) {
+            renderPipelineLog.debug("CSS imports collected for HTML generation", {
+              slug,
+              count: collectedCSSImports.length,
+              paths: collectedCSSImports.map((p) => p.split("/").pop()),
+            });
           }
-          : undefined;
-
-        const result: RenderResult = {
-          html: ssrResult.fullHtml,
-          frontmatter: (pageBundleResult.pageBundle as MdxBundle).frontmatter || {},
-          headings: pageBundleResult.pageBundle.headings || [],
-          nodeMap: pageBundleResult.pageBundle.nodeMap,
-          stream: ssrResult.finalStream,
-          ssrHash: ssrResult.ssrHash,
-          ...(pageModule ? { pageModule } : {}),
-        };
-
-        if (shouldCache && !options?.skipCachePersist) {
-          this.config.cacheCoordinator.persistResult(result, slug, cacheKey).catch((error) => {
-            renderPipelineLog.error("Cache persist failed", {
+
+          const pageModule = pageBundleResult.clientModuleCode && pageBundleResult.pageModuleType
+            ? {
               slug,
-              error: error instanceof Error ? error.message : String(error),
-              stack: error instanceof Error ? error.stack : undefined,
+              code: pageBundleResult.clientModuleCode,
+              type: pageBundleResult.pageModuleType,
+            }
+            : undefined;
+
+          const result: RenderResult = {
+            html: ssrResult.fullHtml,
+            frontmatter: (pageBundleResult.pageBundle as MdxBundle).frontmatter || {},
+            headings: pageBundleResult.pageBundle.headings || [],
+            nodeMap: pageBundleResult.pageBundle.nodeMap,
+            stream: ssrResult.finalStream,
+            ssrHash: ssrResult.ssrHash,
+            ...(pageModule ? { pageModule } : {}),
+          };
+
+          if (shouldCache && !options?.skipCachePersist) {
+            this.config.cacheCoordinator.persistResult(result, slug, cacheKey).catch((error) => {
+              renderPipelineLog.error("Cache persist failed", {
+                slug,
+                error: error instanceof Error ? error.message : String(error),
+                stack: error instanceof Error ? error.stack : undefined,
+              });
             });
-          });
-        }
+          }
 
-        timing.total = Math.round(performance.now() - pipelineStartTime);
-        renderPipelineLog.debug("Complete", { slug, timing });
+          timing.total = Math.round(performance.now() - pipelineStartTime);
+          renderPipelineLog.debug("Complete", { slug, timing });
 
-        return result;
-      },
+          return result;
+        }).then(({ result }) => result),
       {
         "render.slug": slug,
         "render.project_id": options?.projectId || this.config.projectDir,

package/src/src/server/bootstrap.ts

@@ -8,6 +8,7 @@ import {
 } from "../config/environment-config.js";
 import { getErrorMessage } from "../errors/veryfront-error.js";
 import { enhanceAdapterWithFS } from "../platform/adapters/fs/integration.js";
+import { isExtendedFSAdapter } from "../platform/adapters/fs/wrapper.js";
 import { getEnv } from "../platform/compat/process.js";
 import { initializeEsbuild } from "../platform/compat/esbuild.js";
 import { logger } from "../utils/index.js";
@@ -38,6 +39,9 @@ export interface BootstrapResult {
 
   /** FSAdapter type (if used) */
   fsAdapterType?: string;
+
+  /** Dispose FSAdapter resources (WebSocket connections, caches) */
+  dispose?: () => void;
 }
 
 let envLogged = false;
@@ -174,11 +178,23 @@ export async function bootstrap(
     fsAdapter: fsType,
   });
 
+  let dispose: (() => void) | undefined;
+  if (isExtendedFSAdapter(enhancedAdapter.fs)) {
+    const underlying = enhancedAdapter.fs.getUnderlyingAdapter();
+    if (
+      "dispose" in underlying &&
+      typeof (underlying as { dispose?: () => void }).dispose === "function"
+    ) {
+      dispose = () => (underlying as { dispose: () => void }).dispose();
+    }
+  }
+
   return {
     adapter: enhancedAdapter,
     config,
     usingFSAdapter: true,
     fsAdapterType: fsType,
+    dispose,
   };
 }
 

package/src/src/server/handlers/preview/markdown-html-generator.ts

@@ -54,17 +54,24 @@ function detectTheme(req: dntShim.Request, url: URL): "light" | "dark" | null {
 }
 
 /**
- * Generate the studio bridge `<script>` tag when embedded in Studio.
- * Returns an empty string when not in studio embed mode.
+ * Generate the studio bridge `<script>` tag.
+ * Injected when embedded in Studio (`studio_embed=true`) or for standalone
+ * markdown/MDX pages so the edit button and editor features are available.
  */
 function buildStudioScript(url: URL, projectId: string, filePath: string): string {
   const studioEmbed = url.searchParams.get("studio_embed") === "true";
-  if (!studioEmbed) return "";
+  const isMarkdown = /\.mdx?$/i.test(filePath);
+  if (!studioEmbed && !isMarkdown) return "";
+
+  const queryProjectId = url.searchParams.get("vf_project_id")?.trim() || "";
+  const queryFileId = url.searchParams.get("vf_file_id")?.trim() || "";
+  const canonicalProjectId = queryProjectId || projectId;
+  const canonicalPageId = queryFileId || filePath;
 
   return `<script>${
     generateStudioBridgeScript({
-      projectId,
-      pageId: filePath,
+      projectId: canonicalProjectId,
+      pageId: canonicalPageId,
       pagePath: filePath,
     })
   }</script>`;

package/src/src/server/production-server.ts

@@ -293,12 +293,15 @@ if (import.meta.main) {
     // Note: Don't use HOSTNAME - K8s sets it to pod name which resolves to pod IP
     const bindAddress = adapter.env.get("BIND_ADDRESS") ?? "0.0.0.0";
 
+    const bootstrap = await bootstrapProd(projectDir, adapter);
+
     const server = await startProductionServer({
       projectDir,
       port,
       bindAddress,
       debug: isDebugEnabled(adapter.env),
       adapter, // Pass adapter to avoid re-detection
+      bootstrapResult: bootstrap,
       signal: shutdownController.signal,
     });
 
@@ -338,6 +341,7 @@ if (import.meta.main) {
         // Phase 3: Stop accepting new connections and clean up
         stopMemoryMonitoring();
         requestTracker.shutdown();
+        bootstrap.dispose?.();
         shutdownController.abort();
         await server.stop();
         await shutdownOTLP();
@@ -348,8 +352,14 @@ if (import.meta.main) {
       }
     };
 
-    onSignal("SIGINT", () => void shutdown("SIGINT"));
-    onSignal("SIGTERM", () => void shutdown("SIGTERM"));
+    const handleSignal = (signal: "SIGINT" | "SIGTERM"): void => {
+      void shutdown(signal).catch((error) => {
+        logger.warn("Unhandled error while shutting down production server", { signal, error });
+      });
+    };
+
+    onSignal("SIGINT", () => handleSignal("SIGINT"));
+    onSignal("SIGTERM", () => handleSignal("SIGTERM"));
   } catch (e) {
     logger.error("Failed to start production server:", e);
   }