@yak/react 0.0.0-stage → 10.0.0-rc.1

package/loaders/lib/resolveCrossFileSelectors.ts

@@ -0,0 +1,161 @@
+import type { Compilation, LoaderContext } from "webpack";
+import {
+  ParseContext,
+  ParsedModule,
+  parseModule,
+} from "yak-internals/cross-file-resolver/parse-module";
+import {
+  ResolveContext,
+  resolveCrossFileConstant as genericResolveCrossFileConstant,
+} from "yak-internals/cross-file-resolver/resolve";
+import { parseExports } from "yak-internals/parse-exports";
+import { YakConfigOptions } from "yak-internals/config";
+
+export { parseExports };
+
+const compilationCache = new WeakMap<
+  Compilation,
+  {
+    parsedFiles: Map<string, ParsedModule>;
+  }
+>();
+
+export async function resolveCrossFileConstant(
+  loader: LoaderContext<{}>,
+  pathContext: string,
+  css: string,
+): Promise<string> {
+  const { resolved } = await genericResolveCrossFileConstant(
+    getResolveContext(loader),
+    loader.resourcePath,
+    css,
+  );
+  return resolved;
+}
+
+function getCompilationCache(loader: LoaderContext<YakConfigOptions>) {
+  const compilation = loader._compilation;
+  if (!compilation) {
+    throw new Error("Webpack compilation object not available");
+  }
+  let cache = compilationCache.get(compilation);
+  if (!cache) {
+    cache = {
+      parsedFiles: new Map(),
+    };
+    compilationCache.set(compilation, cache);
+  }
+  return cache;
+}
+
+function getParseContext(loader: LoaderContext<YakConfigOptions>): ParseContext {
+  return {
+    cache: { parse: getCompilationCache(loader).parsedFiles },
+    async extractExports(modulePath) {
+      const sourceContents = new Promise<string>((resolve, reject) =>
+        loader.fs.readFile(modulePath, "utf-8", (err, result) => {
+          if (err) return reject(err);
+          resolve(result || "");
+        }),
+      );
+      return parseExports(await sourceContents);
+    },
+    async getTransformed(modulePath) {
+      const transformedSource = new Promise<string>((resolve, reject) => {
+        loader.loadModule(modulePath, (err, source) => {
+          if (err) {
+            // When webpack reports "The loaded module contains errors",
+            // the actual errors are stored on the module in the compilation.
+            // Extract and report the real errors for better debugging.
+            const compilation = loader._compilation;
+            if (compilation) {
+              try {
+                for (const mod of compilation.modules) {
+                  if ("resource" in mod && mod.resource === modulePath) {
+                    const errors = mod.getErrors();
+                    if (errors) {
+                      const messages = Array.from(errors)
+                        .map((e) => e.message)
+                        .filter(Boolean);
+                      if (messages.length > 0) {
+                        return reject(new Error(messages.join("\n")));
+                      }
+                    }
+                  }
+                }
+              } catch {
+                // Ignore errors while trying to extract module errors
+              }
+            }
+            return reject(err);
+          }
+          let sourceString: string;
+          if (typeof source === "string") {
+            sourceString = source;
+          } else if (source instanceof Buffer) {
+            sourceString = source.toString("utf-8");
+          } else if (source instanceof ArrayBuffer) {
+            sourceString = new TextDecoder("utf-8").decode(source);
+          } else {
+            throw new Error("Invalid input type: code must be string, Buffer, or ArrayBuffer");
+          }
+          resolve(sourceString || "");
+        });
+      });
+      return { code: await transformedSource };
+    },
+    async evaluateYakModule(modulePath) {
+      return loader.importModule(modulePath);
+    },
+  };
+}
+
+function getResolveContext(loader: LoaderContext<YakConfigOptions>): ResolveContext {
+  const parseContext = getParseContext(loader);
+  return {
+    parse: (modulePath) => parseModule(parseContext, modulePath),
+    resolve: async (specifier, importer) => {
+      return resolveModule(loader, specifier, dirname(importer));
+    },
+  };
+}
+
+/**
+ * Resolves a module by wrapping loader.resolve in a promise
+ */
+export async function resolveModule(
+  loader: LoaderContext<{}>,
+  moduleSpecifier: string,
+  context: string,
+): Promise<string> {
+  return new Promise<string>((resolve, reject) => {
+    loader.resolve(context, moduleSpecifier, (err, result) => {
+      if (err) return reject(err);
+      if (!result) return reject(new Error(`Could not resolve ${moduleSpecifier}`));
+      resolve(result);
+    });
+  });
+}
+
+const DIRNAME_POSIX_REGEX =
+  /^((?:\.(?![^/]))|(?:(?:\/?|)(?:[\s\S]*?)))(?:\/+?|)(?:(?:\.{1,2}|[^/]+?|)(?:\.[^./]*|))(?:[/]*)$/;
+const DIRNAME_WIN32_REGEX =
+  /^((?:\.(?![^\\]))|(?:(?:\\?|)(?:[\s\S]*?)))(?:\\+?|)(?:(?:\.{1,2}|[^\\]+?|)(?:\.[^.\\]*|))(?:[\\]*)$/;
+
+/**
+ * Polyfill for `node:path` method dirname.
+ * Keeps yak independent from node api (therefore executable in browser)
+ */
+function dirname(path: string) {
+  let dirname = DIRNAME_POSIX_REGEX.exec(path)?.[1];
+
+  if (!dirname) {
+    dirname = DIRNAME_WIN32_REGEX.exec(path)?.[1];
+  }
+
+  if (!dirname) {
+    throw new Error(`Can't extract dirname from ${path}`);
+  }
+
+  return dirname;
+}

package/loaders/turbo-evaluator.ts

@@ -0,0 +1,134 @@
+/**
+ * Turbopack evaluator adapter.
+ *
+ * Bridges the low-level `Evaluator` (worker-thread module evaluator) and
+ * turbopack's loader lifecycle. A single `Evaluator` instance is kept as a
+ * singleton on `globalThis` because turbopack may create multiple loader
+ * instances that share the same process — `Symbol.for` keys guarantee all
+ * instances converge on the same evaluator and modification time map.
+ *
+ * Invalidation uses synchronous modification time polling rather than `fs.watch` because
+ * turbopack can re-run a loader before a filesystem watcher event fires,
+ * which would cause the evaluator to return stale cached results.
+ */
+import { statSync } from "node:fs";
+import type { Evaluator } from "../isolated-source-eval/index.js";
+
+const EVALUATOR_KEY = Symbol.for("@yak/react-evaluator");
+const MTIMES_KEY = Symbol.for("@yak/react-mtimes");
+
+/**
+ * A shared `Map` of file paths to their last known modification times, used to detect changes on disk
+ *
+ * e.g. bar.ts -> 1680000000000 (Sat Mar 28 2024 12:00:00 GMT+0000)
+ *
+ * fs.fileWatch is not used as it might be out of sync with turbopacks own file watching also turbopack
+ * spawns a loader pool which could cause a lot of file watchers to be created which can cause performance issues and hitting OS limits
+ */
+const getFileModificationTimes = () =>
+  ((globalThis as typeof globalThis & { [MTIMES_KEY]?: Map<string, number> })[MTIMES_KEY] ??=
+    new Map<string, number>());
+
+/**
+ * Returns the shared evaluator, creating it on first call.
+ *
+ * Uses `Symbol.for` keys on `globalThis` so every turbopack loader instance
+ * in the process converges on the same evaluator and modification time map. A
+ * `beforeExit` handler terminates the worker threads when the process winds
+ * down.
+ */
+export const getEvaluatorSingleton = async (): Promise<Evaluator> => {
+  const processGlobal = globalThis as typeof globalThis & {
+    [EVALUATOR_KEY]?: Promise<Evaluator>;
+  };
+  if (!processGlobal[EVALUATOR_KEY]) {
+    processGlobal[EVALUATOR_KEY] = import("../isolated-source-eval/index.js").then(
+      ({ createEvaluator }) => createEvaluator(),
+    );
+    // Kill the worker threads when the process exits
+    process.on("beforeExit", async () => {
+      const evaluator = await processGlobal[EVALUATOR_KEY]!;
+      await evaluator.dispose();
+    });
+  }
+  return processGlobal[EVALUATOR_KEY]!;
+};
+
+/**
+ * Turbopack runs the loader for the same compilation file-by-file, but multiple files can share the
+ * same dependency. This function detects which dependencies actually changed
+ * on disk and invalidates them once — this prevents re-evaluating the same module multiple times in the same compilation
+ */
+function invalidateDependenciesWithDiskModifications(evaluator: Evaluator): void {
+  const modificationTimes = getFileModificationTimes();
+  const modifiedDependencies: string[] = [];
+  for (const [dep, lastModificationTime] of modificationTimes) {
+    try {
+      const currentModificationTime = statSync(dep).mtimeMs;
+      if (currentModificationTime !== lastModificationTime) {
+        modifiedDependencies.push(dep);
+        modificationTimes.set(dep, currentModificationTime);
+      }
+    } catch {
+      modifiedDependencies.push(dep);
+      modificationTimes.delete(dep);
+    }
+  }
+  if (modifiedDependencies.length > 0) {
+    evaluator.invalidate(...modifiedDependencies);
+  }
+}
+
+/** Snapshots the current modification times of `deps` so the next evaluation can detect changes. */
+function recordModificationTimes(deps: string[]): void {
+  const modificationTimes = getFileModificationTimes();
+  for (const dep of deps) {
+    try {
+      modificationTimes.set(dep, statSync(dep).mtimeMs);
+    } catch {
+      /* file may not exist */
+    }
+  }
+}
+
+/**
+ * Creates an evaluator function scoped to a single loader invocation.
+ *
+ * Before evaluation, checks whether any previously recorded dependency has
+ * changed on disk and invalidates the evaluator cache if so. After a
+ * successful evaluation, records fresh modification times and notifies the caller of
+ * every transitive dependency via `onDependency`.
+ *
+ * @returns A function that evaluates a yak module and returns its exports.
+ *   The returned function accepts:
+ *   - `modulePath` — absolute path to the module to evaluate.
+ *   - `onDependency` — called once per transitive dependency so the loader
+ *     can register file watchers with turbopack.
+ * @throws If the evaluated module throws at runtime — the original stack
+ *   trace from the worker thread is preserved.
+ */
+export async function createCompilationEvaluator(): Promise<
+  (modulePath: string, onDependency?: (dep: string) => void) => Promise<Record<string, unknown>>
+> {
+  const evaluator = await getEvaluatorSingleton();
+  invalidateDependenciesWithDiskModifications(evaluator);
+
+  return async (modulePath, onDependency?) => {
+    const result = await evaluator.evaluate(modulePath);
+    if (!result.ok) {
+      const error = new Error(result.error.message);
+      if (result.error.stack) {
+        error.stack = result.error.stack;
+      }
+      throw error;
+    }
+    // Store times of newly discovered dependencies for next compilation
+    recordModificationTimes(result.dependencies);
+    if (onDependency) {
+      for (const dep of result.dependencies) {
+        onDependency(dep);
+      }
+    }
+    return result.value;
+  };
+}

package/loaders/turbo-loader.ts

@@ -0,0 +1,184 @@
+import { transform as swcTransform } from "@swc/core";
+import { createRequire } from "node:module";
+import { dirname } from "node:path";
+import type { LoaderContext } from "webpack";
+import { parseModule } from "yak-internals/cross-file-resolver/parse-module";
+import { resolveCrossFileConstant } from "yak-internals/cross-file-resolver/resolve";
+import type { YakConfigOptions } from "../withYak/index.js";
+import { createDebugLogger } from "yak-internals/debug-logger";
+import { extractCss } from "yak-internals/extract-css";
+import { parseExports } from "yak-internals/parse-exports";
+import { getSwcParserOptions } from "yak-internals/swc-parser-options";
+
+const require = createRequire(import.meta.url);
+const yakSwcPluginPath = require.resolve("@yak/swc");
+const dataUrlImportPrefix = 'import "data:text/css;base64,';
+
+/**
+ * This loader transforms styled-components styles to a static data-url import
+ * The compile-time nexy-yak transformation takes javascript/typescript as input,
+ * strips all inline css code and adds the css as static css urls
+ * e.g.: `import "data:text/css;base64,"`
+ */
+export default async function cssExtractLoader(
+  this: LoaderContext<{ yakOptions: YakConfigOptions; yakPluginOptions: any }>,
+  code: string,
+  sourceMap: string | undefined,
+): Promise<string | void> {
+  const callback = this.async();
+
+  // process only files which include @yak/react for maximal compile performance
+  if (!code.includes("@yak/react")) {
+    return callback(null, code, sourceMap);
+  }
+
+  const {
+    yakPluginOptions,
+    yakOptions: { debug },
+  } = this.getOptions();
+  const debugLog = createDebugLogger(debug, this.rootContext);
+  const resolveTurbopack = this.getResolve({});
+  const transform = createTransform(yakPluginOptions, yakSwcPluginPath);
+
+  const resolveFn = (specifier: string, importer: string) => {
+    return new Promise<string>((resolve, reject) => {
+      resolveTurbopack(dirname(importer), specifier, (err, result) => {
+        if (err) return reject(err);
+        if (!result) return reject(new Error(`Could not resolve ${specifier}`));
+        resolve(result);
+      });
+    });
+  };
+
+  const crossFileDeps = new Set<string>();
+  let evaluate:
+    | Awaited<ReturnType<typeof import("./turbo-evaluator.js").createCompilationEvaluator>>
+    | undefined;
+  const fsReadFile = (filePath: string) => {
+    crossFileDeps.add(filePath);
+    return new Promise<string>((resolve, reject) =>
+      this.fs.readFile(filePath, "utf-8", (err, result) => {
+        if (err) return reject(err);
+        if (!result) return reject(new Error(`File not found: ${filePath}`));
+        resolve(result);
+      }),
+    );
+  };
+
+  try {
+    const result = await transform(code, this.resourcePath, this.rootContext, sourceMap);
+    debugLog("ts", result.code, this.resourcePath);
+
+    let css = extractCss(result.code);
+    debugLog("css", css, this.resourcePath);
+
+    const { resolved } = await resolveCrossFileConstant(
+      {
+        parse: (modulePath) => {
+          return parseModule(
+            {
+              extractExports: async (modulePath) => {
+                const sourceContents = await fsReadFile(modulePath);
+                return parseExports(sourceContents);
+              },
+              getTransformed: async (modulePath) => {
+                const sourceContent = await fsReadFile(modulePath);
+                return transform(sourceContent, modulePath, this.rootContext);
+              },
+              evaluateYakModule: async (modulePath: string) => {
+                crossFileDeps.add(modulePath);
+                /*
+                 * Turbopack doesn't let us know when a compilation start so by using a singleton evaluator we
+                 * we can at least ensture that we scan for file modifications only once per loader call
+                 */
+                evaluate ??= await (
+                  await import("./turbo-evaluator.js")
+                ).createCompilationEvaluator();
+                return evaluate(modulePath, (dep) => crossFileDeps.add(dep));
+              },
+            },
+            modulePath,
+          );
+        },
+        resolve: resolveFn,
+      },
+      this.resourcePath,
+      css,
+    );
+
+    // Register cross-file dependencies so turbopack re-runs this loader
+    // when any dependency changes (analogous to webpack's this.addDependency)
+    for (const dep of crossFileDeps) {
+      this.addDependency(dep);
+    }
+
+    const codeWithCrossFileResolved = replaceDataUrlImport(result.code, resolved);
+
+    debugLog("css-resolved", resolved, this.resourcePath);
+    // swc returns a JSON string, which babel-loader rejects as inputSourceMap
+    return callback(
+      null,
+      codeWithCrossFileResolved,
+      result.map ? JSON.parse(result.map) : undefined,
+    );
+  } catch (error) {
+    // Register cross-file dependencies even on error so turbopack re-runs
+    // this loader when a broken dependency is fixed.
+    for (const dep of crossFileDeps) {
+      this.addDependency(dep);
+    }
+    return callback(error instanceof Error ? error : new Error(String(error)));
+  }
+}
+
+/**
+ * Swap the data-url import the SWC plugin emitted for one carrying the resolved css.
+ *
+ * Modules which import @yak/react without declaring styles get no such import and are
+ * returned unchanged. The import is matched from the start of the line so that source
+ * code merely mentioning a data url cannot be mistaken for it.
+ */
+function replaceDataUrlImport(code: string, resolvedCss: string): string {
+  const lines = code.split("\n");
+  const lineIndex = lines.findIndex((line) => line.trimStart().startsWith(dataUrlImportPrefix));
+  if (lineIndex === -1) {
+    return code;
+  }
+  lines[lineIndex] = `${dataUrlImportPrefix}${Buffer.from(resolvedCss).toString("base64")}";`;
+  return lines.join("\n");
+}
+
+function createTransform(yakPluginOptions: any, yakSwcPluginPath: string) {
+  return (data: string, modulePath: string, rootPath: string, sourceMap?: any) =>
+    // https://github.com/vercel/next.js/blob/canary/packages/next/src/build/webpack/loaders/next-swc-loader.ts#L143
+    swcTransform(data, {
+      filename: modulePath,
+      inputSourceMap: sourceMap,
+      sourceMaps: true,
+      sourceFileName: modulePath,
+      sourceRoot: rootPath,
+      jsc: {
+        // Derive the parser from the file name the same way Next.js does
+        parser: getSwcParserOptions(modulePath),
+        experimental: {
+          // Keep `import data from "./data.json" with { type: "json" }` intact
+          keepImportAttributes: true,
+          plugins: [[yakSwcPluginPath, yakPluginOptions]],
+        },
+        transform: {
+          react: {
+            runtime: "preserve",
+          },
+        },
+        target: "es2022",
+        loose: false,
+        minify: {
+          compress: false,
+          mangle: false,
+        },
+        preserveAllComments: true,
+      },
+      minify: false,
+      isModule: true,
+    });
+}

package/loaders/vite-plugin.ts

@@ -0,0 +1,28 @@
+import { createViteYakPlugin } from "yak-internals/vite-plugin-core";
+
+export type { ViteYakPluginOptions } from "yak-internals/vite-plugin-core";
+
+/**
+ * Vite plugin for @yak/react: compiles the css``, styled`` and css prop
+ * styles in your source code to plain CSS at build time.
+ *
+ * Add it before the framework's plugin so it sees your original source code.
+ *
+ * @usage
+ * ```ts
+ * // vite.config.ts
+ * import { defineConfig } from "vite";
+ * import react from "@vitejs/plugin-react-swc";
+ * import { viteYak } from "@yak/react/vite";
+ *
+ * export default defineConfig({
+ *   plugins: [viteYak(), react()],
+ * });
+ * ```
+ */
+export const viteYak = createViteYakPlugin({
+  name: "@yak/react",
+  reactRefreshReg: true,
+  excludePattern: /packages\/yak-react/,
+  foldStatic: true,
+});

package/loaders/webpack-loader.ts

@@ -0,0 +1,41 @@
+import type { LoaderContext } from "webpack";
+import type { YakConfigOptions } from "../withYak/index.js";
+import { createDebugLogger } from "yak-internals/debug-logger";
+import { extractCss } from "yak-internals/extract-css";
+import { resolveCrossFileConstant } from "./lib/resolveCrossFileSelectors.js";
+
+/**
+ * Transform typescript to css
+ *
+ * This loader takes the cached result from the yak tsloader
+ * and extracts the css from the generated comments
+ */
+export default async function cssExtractLoader(
+  this: LoaderContext<YakConfigOptions>,
+  // Instead of the source code, we receive the extracted css
+  // from the yak-swc transformation
+  _code: string,
+  sourceMap: string | undefined,
+): Promise<string | void> {
+  const callback = this.async();
+  // Load the module from the original typescript request (without !=! and the query)
+  return this.loadModule(this.resourcePath, (err, source) => {
+    if (err) {
+      return callback(err);
+    }
+    if (!source) {
+      return callback(new Error(`Source code for ${this.resourcePath} is empty`));
+    }
+    const { debug } = this.getOptions();
+    const debugLog = createDebugLogger(debug, this._compiler?.context ?? process.cwd());
+
+    debugLog("ts", source, this.resourcePath);
+    const css = extractCss(source);
+    debugLog("css", css, this.resourcePath);
+
+    return resolveCrossFileConstant(this, this.context, css).then((result) => {
+      debugLog("css-resolved", result, this.resourcePath);
+      return callback(null, result, sourceMap);
+    }, callback);
+  });
+}