preprocess view before running integrations

.changeset/fluffy-adults-share.md

@@ -0,0 +1,5 @@
+---
+"stack54": patch
+---
+
+Preprocess views before passing on to integrations to improve performance during build

packages/core/src/core/build/facade.ts

@@ -6,8 +6,6 @@ import * as html from "node-html-parser";
 import * as compiler from "svelte/compiler";
 import type { BaseNode, Element } from "svelte/types/compiler/interfaces";
 
-import type { ResolvedConfig } from "../config/index.js";
-
 export type PreparedFacade = {
   code: string;
   extension: string;
@@ -30,8 +28,7 @@ const make_marker = () => `<build-marker>${make_id()}</build-marker>`;
 
 export async function prepare(
   code: string,
-  filename: string,
-  config: ResolvedConfig["svelte"]
+  filename: string
 ): Promise<PreparedFacade> {
   function walk(
     node: BaseNode,
@@ -50,13 +47,9 @@ export async function prepare(
   // tags that we need to remove temporarily because they break the build
   const replacements: Array<[string, string]> = [];
 
-  const processed = await compiler.preprocess(code, config.preprocess ?? [], {
-    filename,
-  });
-
-  const ast = compiler.parse(processed.code, { filename });
+  const ast = compiler.parse(code, { filename });
 
-  const s = new MagicString(processed.code);
+  const s = new MagicString(code);
 
   const wrap = [ast.module, ast.instance, ast.css].filter(
     (_) => _ !== undefined

packages/core/src/core/build/view.ts

@@ -3,6 +3,8 @@ import * as path from "node:path";
 
 import fse from "fs-extra";
 
+import type { Processed } from "svelte/compiler";
+import * as compiler from "svelte/compiler";
 import type { Plugin } from "vite";
 import * as vite from "vite";
 
@@ -60,33 +62,42 @@ export function buildViews({
   const build_dir = path.join(cwd, build);
   const generated_dir = path.join(cwd, generated);
 
+  const preprocessors = config.svelte.preprocess ?? [];
+
   const program = Effect.gen(function* () {
     yield* Effect.tryPromise(() => fse.remove(root_dir));
 
     yield* Effect.tryPromise(() => fs.mkdir(root_dir));
 
     const facade_keypairs = yield* Effect.forEach(
       config.views,
-      (view) => {
+      (filename) => {
         return Effect.gen(function* () {
           const code = yield* Effect.tryPromise(() => {
-            return fs.readFile(view, "utf-8");
+            return fs.readFile(filename, "utf-8");
+          });
+
+          const processed: Processed = yield* Effect.tryPromise(() => {
+            return compiler.preprocess(code, preprocessors, { filename });
           });
 
           const transformed = yield* Effect.tryPromise(() => {
-            return runHtmlPreTransform(config, { code, filename: view });
+            return runHtmlPreTransform(config, {
+              code: processed.code,
+              filename,
+            });
           });
 
           const prepared = yield* Effect.tryPromise(() => {
-            return Facade.prepare(transformed, view, config.svelte);
+            return Facade.prepare(transformed, filename);
           });
 
           // skip views with no client assets to process
           if (prepared.moves.length <= 0) {
             return;
           }
 
-          const facade = Facade.make(view, generated_dir);
+          const facade = Facade.make(filename, generated_dir);
 
           yield* Effect.tryPromise(() => {
             return fs.mkdir(path.dirname(facade), { recursive: true });