veryfront 0.1.89 → 0.1.91

package/src/src/server/handlers/dev/styles-css.handler.ts

@@ -13,18 +13,31 @@ import { HTTP_OK, PRIORITY_HIGH_DEV } from "../../../utils/constants/index.js";
 import { joinPath } from "../../../utils/path-utils.js";
 import {
   formatCSSError,
-  generateTailwindCSS,
+  getCSSByHashAsync,
   getProjectCSS,
+  regenerateCSSByHash,
 } from "../../../html/styles-builder/tailwind-compiler.js";
 import { DEFAULT_STYLESHEET } from "../../../html/styles-builder/css-hash-cache.js";
+import { resolveStyleContentVersion } from "../../../html/styles-builder/content-version.js";
+import {
+  createPreparedProjectCSSContext,
+  type PreparedProjectCSSRequestContext,
+  storePreparedProjectCSS,
+  tryGetPreparedProjectCSS,
+} from "../../../html/styles-builder/prepared-project-css-cache.js";
+import { createStyleScopeProfile } from "../../../html/styles-builder/style-scope-profile.js";
 import { serverLogger } from "../../../utils/index.js";
+import type { ResolvedContentContext } from "../../../platform/adapters/fs/veryfront/types.js";
+import type {
+  ResolveStyleArtifactInput,
+  VeryfrontApiClient,
+} from "../../../platform/adapters/veryfront-api-client/index.js";
 import { extractProjectCandidates } from "./styles-candidate-scanner.js";
 
 const logger = serverLogger.component("styles-css-handler");
 
-type GeneratedStylesResult =
-  | Awaited<ReturnType<typeof generateTailwindCSS>>
-  | Awaited<ReturnType<typeof getProjectCSS>>;
+type GeneratedStylesResult = Awaited<ReturnType<typeof getProjectCSS>>;
+type StyleArtifactSelectorContext = Omit<ResolveStyleArtifactInput, "styleProfileHash">;
 
 export class StylesCSSHandler extends BaseHandler {
   metadata: HandlerMetadata = {
@@ -40,6 +53,9 @@ export class StylesCSSHandler extends BaseHandler {
     try {
       return await this.withProxyContext(ctx, async () => {
         const responseBuilder = this.createResponseBuilder(ctx).withCache("no-cache");
+        const projectScope = ctx.projectSlug ?? ctx.projectDir;
+        const styleProfile = createStyleScopeProfile(ctx.config);
+        const contentContext = this.getContentContext(ctx);
         let rawCss: string;
         try {
           rawCss = await this.loadStylesheet(ctx);
@@ -49,6 +65,48 @@ export class StylesCSSHandler extends BaseHandler {
           });
           rawCss = DEFAULT_STYLESHEET;
         }
+        const preparedContext = this.createPreparedCSSContext(
+          projectScope,
+          rawCss,
+          styleProfile.hash,
+          contentContext,
+          ctx,
+        );
+
+        if (preparedContext) {
+          const prepared = await tryGetPreparedProjectCSS(preparedContext);
+          if (prepared) {
+            logger.debug("Prepared CSS cache hit", {
+              projectScope,
+              projectVersion: preparedContext.projectVersion,
+              styleProfileHash: styleProfile.hash,
+              cssHash: prepared.hash,
+            });
+
+            return this.respond(
+              responseBuilder.withContentType("text/css; charset=utf-8", prepared.css, HTTP_OK),
+            );
+          }
+        }
+
+        const remotePrepared = await this.tryResolveRemotePreparedCSS(
+          ctx,
+          projectScope,
+          styleProfile.hash,
+          contentContext,
+          preparedContext,
+        );
+        if (remotePrepared) {
+          logger.debug("Prepared CSS resolved via style artifact metadata", {
+            projectScope,
+            styleProfileHash: styleProfile.hash,
+            cssHash: remotePrepared.hash,
+          });
+
+          return this.respond(
+            responseBuilder.withContentType("text/css; charset=utf-8", remotePrepared.css, HTTP_OK),
+          );
+        }
 
         let candidates: Set<string>;
         try {
@@ -59,10 +117,11 @@ export class StylesCSSHandler extends BaseHandler {
           });
           candidates = new Set<string>();
         }
-        const result = await this.generateStylesheet(ctx, rawCss, candidates);
-
-        if ("error" in result && result.error) {
-          const formatted = formatCSSError(result.error);
+        let result: GeneratedStylesResult;
+        try {
+          result = await this.generateStylesheet(ctx, rawCss, candidates);
+        } catch (error) {
+          const formatted = formatCSSError(error instanceof Error ? error : String(error));
           logger.error("Tailwind error", {
             error: formatted.message,
             suggestion: formatted.suggestion,
@@ -105,12 +164,29 @@ body::before {
         }
 
         logger.debug("CSS generated", {
+          projectScope,
           candidates: candidates.size,
           cssLength: result.css.length,
           fromCache: "fromCache" in result ? result.fromCache : false,
           cssHash: "hash" in result ? result.hash : undefined,
         });
 
+        if (preparedContext && "hash" in result) {
+          await storePreparedProjectCSS(preparedContext, {
+            css: result.css,
+            hash: result.hash,
+          });
+        }
+
+        if ("hash" in result) {
+          await this.registerPreparedCSSArtifact(
+            ctx,
+            styleProfile.hash,
+            contentContext,
+            result.hash,
+          );
+        }
+
         return this.respond(
           responseBuilder.withContentType("text/css; charset=utf-8", result.css, HTTP_OK),
         );
@@ -155,14 +231,188 @@ body::before {
     rawCss: string,
     candidates: Set<string>,
   ): Promise<GeneratedStylesResult> {
-    if (!ctx.projectSlug) {
-      return generateTailwindCSS(rawCss, candidates);
-    }
+    const projectScope = ctx.projectSlug ?? ctx.projectDir;
 
-    return getProjectCSS(ctx.projectSlug, rawCss, candidates, {
+    return getProjectCSS(projectScope, rawCss, candidates, {
       minify: true,
       environment: "preview",
       buildMode: "production",
     });
   }
+
+  private getContentContext(ctx: HandlerContext): ResolvedContentContext | null {
+    const wrappedFs = ctx.adapter.fs as { getUnderlyingAdapter?: () => unknown };
+    if (typeof wrappedFs.getUnderlyingAdapter !== "function") return null;
+
+    const fsAdapter = wrappedFs.getUnderlyingAdapter() as {
+      getContentContext?: () => ResolvedContentContext | null;
+    };
+
+    return typeof fsAdapter.getContentContext === "function" ? fsAdapter.getContentContext() : null;
+  }
+
+  private getVeryfrontApiClient(ctx: HandlerContext): VeryfrontApiClient | null {
+    const wrappedFs = ctx.adapter.fs as { getUnderlyingAdapter?: () => unknown };
+    if (typeof wrappedFs.getUnderlyingAdapter !== "function") return null;
+
+    const fsAdapter = wrappedFs.getUnderlyingAdapter() as {
+      getClient?: () => VeryfrontApiClient;
+    };
+
+    return typeof fsAdapter.getClient === "function" ? fsAdapter.getClient() : null;
+  }
+
+  private createPreparedCSSContext(
+    projectScope: string | undefined,
+    rawCss: string,
+    styleProfileHash: string,
+    contentContext: ResolvedContentContext | null,
+    ctx: HandlerContext,
+  ) {
+    if (!projectScope) return undefined;
+
+    return createPreparedProjectCSSContext(
+      projectScope,
+      resolveStyleContentVersion(contentContext, {
+        releaseId: ctx.releaseId,
+        branch: ctx.parsedDomain?.branch,
+        environmentName: ctx.environmentName,
+      }),
+      rawCss,
+      styleProfileHash,
+      {
+        minify: true,
+        environment: "preview",
+        buildMode: "production",
+      },
+    );
+  }
+
+  private resolveStyleArtifactSelector(
+    contentContext: ResolvedContentContext | null,
+    ctx: HandlerContext,
+  ): StyleArtifactSelectorContext | null {
+    if (contentContext?.sourceType === "branch" && contentContext.branch) {
+      return {
+        branch: contentContext.branch,
+      };
+    }
+
+    if (contentContext?.sourceType === "environment" && contentContext.environmentName) {
+      return {
+        environmentName: contentContext.environmentName,
+      };
+    }
+
+    if (contentContext?.sourceType === "release" && contentContext.releaseId) {
+      return {
+        releaseId: contentContext.releaseId,
+      };
+    }
+
+    if (ctx.parsedDomain?.branch) {
+      return {
+        branch: ctx.parsedDomain.branch,
+      };
+    }
+
+    if (ctx.environmentName) {
+      return {
+        environmentName: ctx.environmentName,
+      };
+    }
+
+    if (ctx.releaseId) {
+      return {
+        releaseId: ctx.releaseId,
+      };
+    }
+
+    return null;
+  }
+
+  private async tryResolveRemotePreparedCSS(
+    ctx: HandlerContext,
+    projectScope: string | undefined,
+    styleProfileHash: string,
+    contentContext: ResolvedContentContext | null,
+    preparedContext?: PreparedProjectCSSRequestContext,
+  ): Promise<{ css: string; hash: string } | undefined> {
+    if (!projectScope) return undefined;
+
+    const selector = this.resolveStyleArtifactSelector(contentContext, ctx);
+    if (!selector) return undefined;
+
+    const client = this.getVeryfrontApiClient(ctx);
+    if (!client) return undefined;
+
+    try {
+      const resolved = await client.resolveStyleArtifact({
+        ...selector,
+        styleProfileHash,
+      });
+
+      if (resolved.status !== "ready" || !resolved.artifactHash) {
+        return undefined;
+      }
+
+      const css = await this.getPreparedCSSByHash(resolved.artifactHash, projectScope);
+      if (!css) return undefined;
+
+      if (preparedContext) {
+        await storePreparedProjectCSS(preparedContext, {
+          css,
+          hash: resolved.artifactHash,
+        });
+      }
+
+      return {
+        css,
+        hash: resolved.artifactHash,
+      };
+    } catch (error) {
+      logger.debug("Failed to resolve prepared CSS via style artifact metadata", {
+        projectScope,
+        styleProfileHash,
+        error: error instanceof Error ? error.message : String(error),
+      });
+      return undefined;
+    }
+  }
+
+  private async getPreparedCSSByHash(
+    cssHash: string,
+    projectScope: string,
+  ): Promise<string | undefined> {
+    const cached = await getCSSByHashAsync(cssHash);
+    if (cached) return cached;
+    return regenerateCSSByHash(cssHash, projectScope);
+  }
+
+  private async registerPreparedCSSArtifact(
+    ctx: HandlerContext,
+    styleProfileHash: string,
+    contentContext: ResolvedContentContext | null,
+    cssHash: string,
+  ): Promise<void> {
+    const selector = this.resolveStyleArtifactSelector(contentContext, ctx);
+    if (!selector) return;
+
+    const client = this.getVeryfrontApiClient(ctx);
+    if (!client) return;
+
+    try {
+      await client.upsertStyleArtifact({
+        ...selector,
+        styleProfileHash,
+        artifactHash: cssHash,
+      });
+    } catch (error) {
+      logger.debug("Failed to register prepared CSS artifact", {
+        cssHash,
+        styleProfileHash,
+        error: error instanceof Error ? error.message : String(error),
+      });
+    }
+  }
 }