From f0a541ef65fbc329a40b745823dcf834c78d8efc Mon Sep 17 00:00:00 2001
From: Joshua Amaju <joshsemail4work@gmail.com>
Date: Mon, 11 Nov 2024 21:08:22 +0100
Subject: [PATCH] preprocess view before running integrations

---
 .changeset/fluffy-adults-share.md      |  5 +++++
 packages/core/src/core/build/facade.ts | 13 +++----------
 packages/core/src/core/build/view.ts   | 21 ++++++++++++++++-----
 3 files changed, 24 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/fluffy-adults-share.md

diff --git a/.changeset/fluffy-adults-share.md b/.changeset/fluffy-adults-share.md
new file mode 100644
index 0000000..0be3fe6
--- /dev/null
+++ b/.changeset/fluffy-adults-share.md
@@ -0,0 +1,5 @@
+---
+"stack54": patch
+---
+
+Preprocess views before passing on to integrations to improve performance during build
diff --git a/packages/core/src/core/build/facade.ts b/packages/core/src/core/build/facade.ts
index 37bc6aa..e589d1d 100644
--- a/packages/core/src/core/build/facade.ts
+++ b/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
diff --git a/packages/core/src/core/build/view.ts b/packages/core/src/core/build/view.ts
index 8984eff..1746073 100644
--- a/packages/core/src/core/build/view.ts
+++ b/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,6 +62,8 @@ 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));
 
@@ -67,18 +71,25 @@ export function buildViews({
 
     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
@@ -86,7 +97,7 @@ export function buildViews({
             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 });