Breaking: Add webpack support via worker-based .yak.ts evaluation

.changeset/lovely-lizards-buy.md

@@ -0,0 +1,5 @@
+---
+"next-yak": major
+---
+
+Stop compiling .yak.ts files for faster builds and consistent bundler behaviour

packages/next-yak/loaders/lib/resolveCrossFileSelectors.ts

@@ -1,6 +1,7 @@
 import { parse } from "@babel/parser";
 import traverse from "@babel/traverse";
-import type { Compilation, LoaderContext } from "webpack";
+import type { Compilation, Compiler, LoaderContext } from "webpack";
+import type { Evaluator } from "../../isolated-source-eval/index.js";
 import {
   ModuleExport,
   ModuleExports,
@@ -110,7 +111,22 @@ function getParseContext(
       return { code: await transformedSource };
     },
     async evaluateYakModule(modulePath) {
-      return loader.importModule(modulePath);
+      const evaluator = (
+        loader._compiler as Compiler & { yakEvaluator?: Evaluator }
+      )?.yakEvaluator;
+      if (!evaluator) {
+        throw new Error(
+          "YakEvaluatorPlugin is not configured. Add `new YakEvaluatorPlugin()` to your webpack plugins.",
+        );
+      }
+      const result = await evaluator.evaluate(modulePath);
+      if (!result.ok) throw new Error(result.error.message);
+      // Register all transitive dependencies so webpack re-processes
+      // when any dependency of the .yak module changes
+      for (const dep of result.dependencies) {
+        loader.addDependency(dep);
+      }
+      return result.value;
     },
     transpilationMode: loader.getOptions().experiments?.transpilationMode,
   };

packages/next-yak/tsup.config.ts

@@ -89,6 +89,13 @@ export default defineConfig([
     sourcemap: true,
     clean: false,
     dts: true,
+    external: [
+      // all non relative imports must be load from node_modules
+      /^(?!\.)/,
+      // isolated-source-eval must not be bundled (worker path would break)
+      /\.\.\/isolated-source-eval\//,
+    ],
+    noExternal: [],
     target: "es2022",
     outDir: "dist/withYak",
   },

packages/next-yak/withYak/index.ts

@@ -4,6 +4,9 @@ import { existsSync } from "node:fs";
 import path, { dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 
+import { YakEvaluatorPlugin } from "./yakEvaluatorPlugin.js";
+export { YakEvaluatorPlugin };
+
 const currentDir =
   typeof __dirname !== "undefined"
     ? __dirname
@@ -174,6 +177,8 @@ function addYakWebpack(
       webpackConfig = previousConfig(webpackConfig, options);
     }
 
+    webpackConfig.plugins.push(new YakEvaluatorPlugin());
+
     webpackConfig.module.rules.push({
       test:
         yakOptions.experiments?.transpilationMode === "Css"

packages/next-yak/withYak/yakEvaluatorPlugin.ts

@@ -0,0 +1,26 @@
+import type { Compiler } from "webpack";
+import type { Evaluator } from "../isolated-source-eval/index.js";
+
+export class YakEvaluatorPlugin {
+  apply(compiler: Compiler & { yakEvaluator?: Evaluator }) {
+    const evaluatorPromise = import("../isolated-source-eval/index.js").then(
+      ({ createEvaluator }) => createEvaluator(),
+    );
+
+    compiler.hooks.beforeCompile.tapPromise("YakEvaluatorPlugin", async () => {
+      compiler.yakEvaluator = await evaluatorPromise;
+    });
+
+    compiler.hooks.watchRun.tapPromise("YakEvaluatorPlugin", async () => {
+      const evaluator = await evaluatorPromise;
+      if (compiler.modifiedFiles) {
+        evaluator.invalidate(...compiler.modifiedFiles);
+      }
+    });
+
+    compiler.hooks.shutdown.tapPromise("YakEvaluatorPlugin", async () => {
+      const evaluator = await evaluatorPromise;
+      await evaluator.dispose();
+    });
+  }
+}

packages/storybook-addon-yak/src/preset.ts

@@ -1,4 +1,4 @@
-import { resolveYakContext } from "next-yak/withYak";
+import { resolveYakContext, YakEvaluatorPlugin } from "next-yak/withYak";
 import { readFileSync } from "node:fs";
 import { createRequire } from "node:module";
 import path, { dirname } from "node:path";
@@ -203,6 +203,10 @@ export async function webpackFinal(config: any, options: StorybookOptions) {
     processRule(rule);
   }
 
+  // Add YakEvaluatorPlugin for cross-file constant resolution
+  config.plugins = config.plugins || [];
+  config.plugins.push(new YakEvaluatorPlugin());
+
   // Set up context alias for theming
   const yakContext = resolveYakContext(
     yakOptions.contextPath,