@gtkx/cli 2.0.0-beta.1 → 2.0.0-beta.10

package/src/vite-plugins/font.ts

@@ -0,0 +1,180 @@
+import type { Plugin, Rollup } from "vite";
+import { readFileSync } from "node:fs";
+import { parseSync } from "vite";
+import type { AssetEmitter } from "./asset-emitter.js";
+import { prependBanner } from "../internal/banner.js";
+import { fontFileName, FONTS_DIR } from "../internal/font-path.js";
+import { stagedFontStatus } from "../internal/font-staging.js";
+import { SOURCE_ID_RE, sourceLanguage } from "../internal/source-imports.js";
+import { xdgDataDirsBanner } from "../internal/xdg-banner.js";
+import { parseFontSpecifier } from "./asset-specifier.js";
+import { fontFamilyNames } from "./font-name.js";
+import { stripQuery } from "./strip-query.js";
+import { createVirtualNamespace } from "./virtual-module.js";
+
+type PluginState = {
+    isBuild: boolean;
+    root: string;
+    emitted: Set<string>;
+    importers: Map<string, string>;
+};
+
+type ResolveContext = Parameters<typeof resolveToVirtual>[0];
+type ResolveRequest = Parameters<typeof resolveToVirtual>[1];
+
+type RetainedFontModuleId = {
+    id: string;
+    moduleSideEffects: true;
+};
+
+type LoadContext = AssetEmitter & {
+    addWatchFile: (file: string) => void;
+    error: (message: string) => never;
+};
+
+const FONT_QUERY = "?font";
+const FONT_ID_RE = /\?font$/;
+const VIRTUAL_PREFIX = "\0gtkx-font:";
+const VIRTUAL_ID_RE = new RegExp(`^${VIRTUAL_PREFIX}`);
+const { isVirtual, fromVirtualId, resolveToVirtual } = createVirtualNamespace(VIRTUAL_PREFIX);
+
+const unreadableFontError = (filePath: string): string =>
+    `Cannot read a font family name from ${filePath}; ?font expects a TrueType, OpenType, ` +
+    "TrueType Collection, WOFF, or WOFF2 font";
+
+const unstagedFontError = (filePath: string, importer: string): string =>
+    `${filePath} was not staged before the toolkit started, so ${importer} would resolve its family to a ` +
+    "fallback font. Fonts are staged from ?font imports found in source files under the project root; move " +
+    "the import there, or restart to pick it up.";
+
+const resolveFontId = async (
+    ctx: ResolveContext,
+    state: PluginState,
+    request: ResolveRequest,
+): Promise<RetainedFontModuleId | undefined> => {
+    if (parseFontSpecifier(request.source) === null) {
+        return undefined;
+    }
+
+    const virtualId = await resolveToVirtual(ctx, request);
+
+    if (virtualId === undefined) {
+        return undefined;
+    }
+
+    state.importers.set(virtualId, request.importer ?? state.root);
+
+    return { id: virtualId, moduleSideEffects: true };
+};
+
+const emitFont = (ctx: LoadContext, state: PluginState, filePath: string, content: Buffer): void => {
+    const fileName = `${FONTS_DIR}/${fontFileName(filePath, content)}`;
+
+    if (state.emitted.has(fileName)) {
+        return;
+    }
+
+    state.emitted.add(fileName);
+    ctx.emitFile({ type: "asset", fileName, source: content });
+};
+
+const loadFontModule = (ctx: LoadContext, state: PluginState, id: string): string | undefined => {
+    if (!isVirtual(id)) {
+        return undefined;
+    }
+
+    const filePath = stripQuery(fromVirtualId(id));
+    const content = readFileSync(filePath);
+    const [family] = fontFamilyNames(content);
+
+    if (family === undefined) {
+        return ctx.error(unreadableFontError(filePath));
+    }
+
+    ctx.addWatchFile(filePath);
+
+    if (state.isBuild) {
+        emitFont(ctx, state, filePath, content);
+    } else if (stagedFontStatus(filePath, content) === "absent") {
+        return ctx.error(unstagedFontError(filePath, state.importers.get(id) ?? state.root));
+    }
+
+    return `export default ${JSON.stringify(family)};`;
+};
+
+const hasSideEffectFontImport = (code: string, id: string): boolean => {
+    const lang = sourceLanguage(stripQuery(id));
+
+    if (lang === undefined || !code.includes(FONT_QUERY)) {
+        return false;
+    }
+
+    const parsed = parseSync(id, code, { lang });
+
+    if (parsed.errors.length > 0) {
+        return false;
+    }
+
+    return parsed.module.staticImports.some(
+        (statement) => statement.entries.length === 0 && parseFontSpecifier(statement.moduleRequest.value) !== null,
+    );
+};
+
+const retainSideEffectFontImport = (
+    code: string,
+    id: string,
+): { code: string; moduleSideEffects: true } | null =>
+    hasSideEffectFontImport(code, id)
+        ? { code, moduleSideEffects: true }
+        : null;
+
+const fontBanner = (state: PluginState) => (chunk: Rollup.RenderedChunk): string =>
+    state.emitted.size === 0 ? "" : xdgDataDirsBanner(chunk);
+
+function gtkxFont(): Plugin {
+    const state: PluginState = { isBuild: false, root: "", emitted: new Set(), importers: new Map() };
+
+    return {
+        name: "gtkx:font",
+        enforce: "pre",
+
+        configResolved(config) {
+            state.isBuild = config.command === "build";
+            state.root = config.root;
+        },
+
+        resolveId: {
+            filter: { id: FONT_ID_RE },
+
+            handler(source, importer, options) {
+                return resolveFontId(this, state, { source, importer, options });
+            },
+        },
+
+        load: {
+            filter: { id: VIRTUAL_ID_RE },
+
+            handler(id) {
+                return loadFontModule(this, state, id);
+            },
+        },
+
+        transform: {
+            filter: { id: SOURCE_ID_RE, code: FONT_QUERY },
+
+            handler(code, id) {
+                return retainSideEffectFontImport(code, id);
+            },
+        },
+
+        outputOptions(options) {
+            if (!state.isBuild) {
+                return;
+            }
+
+            return prependBanner(options, fontBanner(state));
+        },
+    };
+}
+
+export { gtkxFont };

package/src/vite-plugins/i18n.ts

@@ -1,7 +1,7 @@
 import type { ConfigLoader } from "@gtkx/config";
 import type { Plugin, ResolvedConfig } from "vite";
 import { createConfigLoader } from "@gtkx/config/internal";
-import { toPosixPath } from "@gtkx/utils";
+import { isPathWithin, logger, toPosixPath } from "@gtkx/utils";
 import { existsSync, mkdirSync } from "node:fs";
 import { createRequire } from "node:module";
 import { dirname, join, posix, relative, resolve } from "node:path";
@@ -11,16 +11,31 @@ import {
     LOCALE_DIRNAME,
     resolveCatalogProject,
     synchronizeCatalogs,
+    type WrittenCatalog,
 } from "../i18n/catalogs.js";
-import { extractSourceCatalog } from "../i18n/source-messages.js";
-import { discoverSourceFiles } from "../internal/source-imports.js";
+import { extractSourceCatalog, SourceExtractionError } from "../i18n/source-messages.js";
+import { emitI18nTypes } from "../i18n/types.js";
+import { discoverSourceFiles, sourceLanguage } from "../internal/source-imports.js";
 import { stripQuery } from "./strip-query.js";
 
+type CatalogWriteListener = (catalogs: WrittenCatalog[]) => void;
+
+type I18nPluginOptions = {
+    entryPath: string;
+    loadConfig?: ConfigLoader | undefined;
+    onCatalogsWritten?: CatalogWriteListener | undefined;
+    shouldPreserveMetadataMessages?: boolean | undefined;
+    shouldRecoverExtractionErrors?: boolean | undefined;
+};
+
 type I18nState = {
     entryPath: string;
     i18nRoot: string;
     outDir: string;
     project: CatalogProject | null;
+    extraction: Promise<void>;
+    hotUpdateTimestamp: number | null;
+    onCatalogsWritten: CatalogWriteListener;
 };
 
 const BOOTSTRAP_SPECIFIER = "@gtkx/i18n/bootstrap";
@@ -94,6 +109,7 @@ const buildCatalogs = (state: I18nState): void => {
 const extractProjectMessages = async (
     state: I18nState,
     shouldPreserveMetadataMessages: boolean,
+    shouldSynchronizeCatalogs: boolean,
 ): Promise<void> => {
     const project = state.project;
 
@@ -104,15 +120,98 @@ const extractProjectMessages = async (
     const srcDir = join(project.root, "src");
     const sourceFiles = discoverSourceFiles(existsSync(srcDir) ? srcDir : project.root);
     await extractSourceCatalog(project, sourceFiles, shouldPreserveMetadataMessages);
-    synchronizeCatalogs(project);
+
+    if (shouldSynchronizeCatalogs) {
+        state.onCatalogsWritten(synchronizeCatalogs(project));
+    }
+
+    await emitI18nTypes(project.root);
+};
+
+const settleExtraction = async (pending: Promise<void>): Promise<void> => {
+    try {
+        await pending;
+    } catch {
+        return;
+    }
+};
+
+const queueExtraction = (
+    state: I18nState,
+    shouldPreserveMetadataMessages: boolean,
+    shouldSynchronizeCatalogs: boolean,
+): Promise<void> => {
+    const prior = state.extraction;
+    const pending = (async (): Promise<void> => {
+        await settleExtraction(prior);
+        await extractProjectMessages(
+            state,
+            shouldPreserveMetadataMessages,
+            shouldSynchronizeCatalogs,
+        );
+    })();
+
+    state.extraction = pending;
+
+    return pending;
 };
 
-const gtkxI18n = (
-    entryPath: string,
-    loadConfig: ConfigLoader = createConfigLoader(),
+const isProjectSource = (state: I18nState, path: string): boolean => {
+    const project = state.project;
+
+    if (project === null || sourceLanguage(path) === undefined) {
+        return false;
+    }
+
+    const srcDir = join(project.root, "src");
+    const sourceRoot = existsSync(srcDir) ? srcDir : project.root;
+
+    return isPathWithin(sourceRoot, path);
+};
+
+const refreshProjectMessages = async (
+    state: I18nState,
+    shouldPreserveMetadataMessages: boolean,
+    shouldSynchronizeCatalogs = false,
+): Promise<void> => {
+    try {
+        await queueExtraction(state, shouldPreserveMetadataMessages, shouldSynchronizeCatalogs);
+    } catch (error) {
+        logger.error(error instanceof Error ? error.message : String(error));
+    }
+};
+
+const recoverInitialSourceExtraction = async (
+    state: I18nState,
+    shouldPreserveMetadataMessages: boolean,
+): Promise<void> => {
+    try {
+        await queueExtraction(state, shouldPreserveMetadataMessages, true);
+    } catch (error) {
+        if (!(error instanceof SourceExtractionError)) {
+            throw error;
+        }
+
+        logger.error(error.message);
+    }
+};
+
+const gtkxI18n = ({
+    entryPath,
+    loadConfig = createConfigLoader(),
+    onCatalogsWritten = (): void => undefined,
     shouldPreserveMetadataMessages = true,
-): Plugin => {
-    const state: I18nState = { entryPath, i18nRoot: "", outDir: "", project: null };
+    shouldRecoverExtractionErrors = false,
+}: I18nPluginOptions): Plugin => {
+    const state: I18nState = {
+        entryPath,
+        extraction: Promise.resolve(),
+        hotUpdateTimestamp: null,
+        i18nRoot: "",
+        outDir: "",
+        project: null,
+        onCatalogsWritten,
+    };
 
     return {
         name: "gtkx:i18n",
@@ -120,7 +219,19 @@ const gtkxI18n = (
 
         configResolved: (config) => applyResolvedConfig(state, config, loadConfig),
 
-        buildStart: () => extractProjectMessages(state, shouldPreserveMetadataMessages),
+        buildStart: () => shouldRecoverExtractionErrors
+            ? recoverInitialSourceExtraction(state, shouldPreserveMetadataMessages)
+            : queueExtraction(state, shouldPreserveMetadataMessages, true),
+
+        hotUpdate(options) {
+            if (!isProjectSource(state, options.file) || state.hotUpdateTimestamp === options.timestamp) {
+                return;
+            }
+
+            state.hotUpdateTimestamp = options.timestamp;
+
+            return refreshProjectMessages(state, shouldPreserveMetadataMessages);
+        },
 
         transform(code, id) {
             if (isI18nLocaleModule(state, id)) {
@@ -144,4 +255,4 @@ const gtkxI18n = (
     };
 };
 
-export { gtkxI18n };
+export { type CatalogWriteListener, gtkxI18n };

package/src/vite-plugins/icon-worker-env.ts

@@ -0,0 +1,36 @@
+import type { UserConfig } from "vite";
+import type { Plugin } from "vitest/config";
+import { createConfigLoader, viteProjectRoot } from "@gtkx/config/internal";
+import { stageProjectIcons } from "../internal/icon-staging.js";
+import { prependXdgDataDir } from "../internal/xdg-data-dirs.js";
+
+function gtkxIconWorkerEnv(configFile?: string): Plugin {
+    const loadConfig = createConfigLoader({ configFile });
+
+    return {
+        name: "gtkx:icon-worker-env",
+        enforce: "pre",
+
+        async config(config: UserConfig) {
+            const loaded = await loadConfig.load(viteProjectRoot(config));
+
+            const shareDir = stageProjectIcons(
+                loaded.root,
+                loaded.config.applicationId,
+                loaded.config.applicationIcon,
+            );
+
+            if (shareDir === null) {
+                return;
+            }
+
+            const existing = config.test?.env?.XDG_DATA_DIRS ?? process.env.XDG_DATA_DIRS;
+
+            return {
+                test: { env: { XDG_DATA_DIRS: prependXdgDataDir(shareDir, existing) } },
+            };
+        },
+    };
+}
+
+export { gtkxIconWorkerEnv };

package/src/vite-plugins/icons.ts

@@ -1,6 +1,6 @@
 import type { ConfigLoader } from "@gtkx/config";
 import type { Plugin, UserConfig } from "vite";
-import { createConfigLoader } from "@gtkx/config/internal";
+import { createConfigLoader, viteProjectRoot } from "@gtkx/config/internal";
 import { info } from "@gtkx/utils";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
@@ -12,6 +12,7 @@ import {
     type ResolvedApplicationIcon,
 } from "../internal/icon-path.js";
 import { type ListedFile, listFilesRecursive } from "../internal/list-files.js";
+import { xdgDataDirsBanner } from "../internal/xdg-banner.js";
 
 type PluginState = {
     applicationId: string;
@@ -20,13 +21,6 @@ type PluginState = {
 
 const ICONS_DIR = "icons";
 
-const XDG_ENV_BANNER = [
-    "process.env.XDG_DATA_DIRS = [",
-    "    decodeURIComponent(new URL(\".\", import.meta.url).pathname),",
-    "    process.env.XDG_DATA_DIRS || \"/usr/local/share:/usr/share\",",
-    "].join(\":\");",
-].join("\n");
-
 const findIconFiles = (state: PluginState): ListedFile[] => {
     if (state.source.kind === "theme") {
         return listFilesRecursive(state.source.path);
@@ -43,7 +37,7 @@ const findIconFiles = (state: PluginState): ListedFile[] => {
 };
 
 const applyUserConfig = async (state: PluginState, config: UserConfig, loadConfig: ConfigLoader): Promise<void> => {
-    const { config: gtkxConfig, root } = await loadConfig.load(config.root ?? process.cwd());
+    const { config: gtkxConfig, root } = await loadConfig.load(viteProjectRoot(config));
     state.applicationId = gtkxConfig.applicationId;
     state.source = resolveApplicationIcon(root, gtkxConfig.applicationId, gtkxConfig.applicationIcon);
 };
@@ -78,7 +72,7 @@ function gtkxIcons(loadConfig: ConfigLoader = createConfigLoader()): Plugin {
                 return;
             }
 
-            return prependBanner(options, XDG_ENV_BANNER);
+            return prependBanner(options, xdgDataDirsBanner);
         },
 
         buildEnd() {

package/src/vite-plugins/index.ts

@@ -5,7 +5,8 @@ import type { BuildManifestCollector } from "../internal/build-manifest.js";
 import { gtkxAssetImports } from "./asset-imports.js";
 import { gtkxBuiltUrl } from "./built-url.js";
 import { gtkxCss } from "./css.js";
-import { gtkxI18n } from "./i18n.js";
+import { gtkxFont } from "./font.js";
+import { type CatalogWriteListener, gtkxI18n } from "./i18n.js";
 import { gtkxIcons } from "./icons.js";
 import { gtkxReactCompiler } from "./react-compiler.js";
 import { gtkxResources } from "./resources.js";
@@ -13,23 +14,47 @@ import { gtkxSettings } from "./settings.js";
 import { gtkxStoreLinks } from "./store-links.js";
 import { gtkxUndeclaredLibrary } from "./undeclared-library.js";
 
-const gtkxVitePlugins = (
-    mode?: string,
-    entryPath?: string,
-    buildManifest?: BuildManifestCollector,
-    shouldPreserveI18nMetadata = true,
-): Plugin[] => {
-    const loadConfig = createConfigLoader(mode === undefined ? {} : { mode });
+type GtkxVitePluginOptions = {
+    buildManifest?: BuildManifestCollector | undefined;
+    configFile?: string | undefined;
+    entryPath?: string | undefined;
+    mode?: string | undefined;
+    onCatalogsWritten?: CatalogWriteListener | undefined;
+    shouldPreserveI18nMetadata?: boolean | undefined;
+};
+
+const gtkxVitePlugins = (options: GtkxVitePluginOptions = {}): Plugin[] => {
+    const {
+        buildManifest,
+        configFile,
+        entryPath,
+        mode,
+        onCatalogsWritten,
+        shouldPreserveI18nMetadata = true,
+    } = options;
+    const loadConfig = createConfigLoader({
+        ...(mode !== undefined && { mode }),
+        ...(configFile !== undefined && { configFile }),
+    });
 
     return [
         createConfigPlugin({ name: "gtkx:config", loadConfig }),
-        ...(entryPath === undefined ? [] : [gtkxI18n(entryPath, loadConfig, shouldPreserveI18nMetadata)]),
+        ...(entryPath === undefined
+            ? []
+            : [gtkxI18n({
+                    entryPath,
+                    loadConfig,
+                    onCatalogsWritten,
+                    shouldPreserveMetadataMessages: shouldPreserveI18nMetadata,
+                    shouldRecoverExtractionErrors: mode === "development",
+                })]),
         gtkxStoreLinks(),
         gtkxUndeclaredLibrary(loadConfig),
         gtkxSettings(buildManifest),
         gtkxIcons(loadConfig),
         gtkxAssetImports(),
         gtkxBuiltUrl(),
+        gtkxFont(),
         gtkxResources(loadConfig, entryPath),
         gtkxCss(),
         gtkxReactCompiler(loadConfig),

package/src/vite-plugins/native.ts

@@ -5,7 +5,6 @@ import { arch, platform } from "node:os";
 import { dirname, join } from "node:path";
 import { stripQuery } from "./strip-query.js";
 
-const EMITTED_BINDING_SPECIFIER = "./gtkx.node";
 const BINDING_FILENAME = "gtkx.node";
 
 function resolveBinaryPath(projectRequire: ReturnType<typeof createRequire>, currentArch: string): string {
@@ -97,10 +96,6 @@ function gtkxNative(root: string): Plugin {
             });
         },
 
-        resolveId(id) {
-            return id === EMITTED_BINDING_SPECIFIER ? { id, external: true } : null;
-        },
-
         transform(code, id) {
             return transformLoader(code, id, loaderPath(), bindingReferenceId);
         },

package/src/vite-plugins/react-compiler.ts

@@ -1,21 +1,45 @@
 import type { ConfigLoader } from "@gtkx/config";
 import type { ResolvedReactCompilerOptions } from "@gtkx/config/internal";
 import type { Plugin, ResolvedConfig, UserConfig } from "vite";
-import { transformAsync } from "@babel/core";
-import babelPresetTypescriptNs from "@babel/preset-typescript";
-import { createConfigLoader } from "@gtkx/config/internal";
-import babelPluginReactCompilerNs from "babel-plugin-react-compiler";
+import { createConfigLoader, viteProjectRoot } from "@gtkx/config/internal";
+import {
+    type CompilerOutput,
+    createReactCompilerCache,
+    type ReactCompilerCache,
+} from "../internal/react-compiler-cache.js";
 
 type ReactCompilerState = {
-    root: string;
+    cache: ReactCompilerCache | null;
     options: ResolvedReactCompilerOptions | null;
+    root: string;
 };
 
-const babelPresetTypescript = babelPresetTypescriptNs.default ?? babelPresetTypescriptNs;
-const babelPluginReactCompiler = babelPluginReactCompilerNs.default ?? babelPluginReactCompilerNs;
+type BabelToolchain = Awaited<ReturnType<typeof loadBabelToolchain>>;
+
 const SOURCE_EXTENSION = /\.[jt]sx?$/;
 const TYPESCRIPT_EXTENSION = /\.tsx?$/;
 const NODE_MODULES = /(?:^|\/)node_modules\//;
+const MEMOIZABLE_SOURCE = /use[A-Z0-9]|use memo|use forget/;
+const JSX_MARK = "<";
+const PLAIN_TYPESCRIPT = ".ts";
+const ALL_FUNCTIONS = "all";
+const babel: { toolchain: Promise<BabelToolchain> | undefined } = { toolchain: undefined };
+
+const loadBabelToolchain = async () => {
+    const [core, preset, plugin] = await Promise.all([
+        import("@babel/core"),
+        import("@babel/preset-typescript"),
+        import("babel-plugin-react-compiler"),
+    ]);
+
+    return {
+        presetTypescript: preset.default.default ?? preset.default,
+        reactCompiler: plugin.default.default ?? plugin.default,
+        transformAsync: core.transformAsync,
+    };
+};
+
+const babelToolchain = (): Promise<BabelToolchain> => (babel.toolchain ??= loadBabelToolchain());
 
 const isProjectSource = (root: string, id: string): boolean => {
     if (!SOURCE_EXTENSION.test(id)) {
@@ -33,15 +57,25 @@ const isProjectSource = (root: string, id: string): boolean => {
     return true;
 };
 
+const isMemoizable = (code: string, id: string, options: ResolvedReactCompilerOptions): boolean => {
+    if (options.compilationMode === ALL_FUNCTIONS || MEMOIZABLE_SOURCE.test(code)) {
+        return true;
+    }
+
+    return !id.endsWith(PLAIN_TYPESCRIPT) && code.includes(JSX_MARK);
+};
+
 const compileSource = async (code: string, id: string, options: ResolvedReactCompilerOptions) => {
-    const result = await transformAsync(code, {
+    const toolchain = await babelToolchain();
+
+    const result = await toolchain.transformAsync(code, {
         filename: id,
         babelrc: false,
         configFile: false,
         sourceMaps: true,
-        parserOpts: { plugins: id.endsWith(".ts") ? [] : ["jsx"] },
-        presets: TYPESCRIPT_EXTENSION.test(id) ? [babelPresetTypescript] : [],
-        plugins: [[babelPluginReactCompiler, options]],
+        parserOpts: { plugins: id.endsWith(PLAIN_TYPESCRIPT) ? [] : ["jsx"] },
+        presets: TYPESCRIPT_EXTENSION.test(id) ? [toolchain.presetTypescript] : [],
+        plugins: [[toolchain.reactCompiler, options]],
     });
 
     if (!result?.code) {
@@ -51,10 +85,33 @@ const compileSource = async (code: string, id: string, options: ResolvedReactCom
     return result.map == null ? { code: result.code } : { code: result.code, map: JSON.stringify(result.map) };
 };
 
+const cachedSource = async (
+    cache: ReactCompilerCache,
+    code: string,
+    id: string,
+    options: ResolvedReactCompilerOptions,
+): Promise<CompilerOutput | undefined> => {
+    const key = cache.keyFor(code, id);
+    const cached = cache.read(key);
+
+    if (cached !== undefined) {
+        return cached;
+    }
+
+    const compiled = await compileSource(code, id, options);
+
+    if (compiled !== undefined) {
+        cache.write(key, compiled);
+    }
+
+    return compiled;
+};
+
 function gtkxReactCompiler(loadConfig: ConfigLoader = createConfigLoader()): Plugin {
     const state: ReactCompilerState = {
-        root: "",
+        cache: null,
         options: null,
+        root: "",
     };
 
     return {
@@ -62,22 +119,29 @@ function gtkxReactCompiler(loadConfig: ConfigLoader = createConfigLoader()): Plu
         enforce: "pre",
 
         async config(config: UserConfig) {
-            const resolved = await loadConfig.resolve(config.root ?? process.cwd());
+            const resolved = await loadConfig.resolve(viteProjectRoot(config));
             state.options = resolved.reactCompiler;
         },
 
         configResolved(config: ResolvedConfig) {
             state.root = config.root;
+            state.cache = state.options === null ? null : createReactCompilerCache(config.cacheDir, state.options);
         },
 
-        async transform(code, id) {
-            const options = state.options;
+        transform: {
+            filter: { id: { include: SOURCE_EXTENSION, exclude: NODE_MODULES } },
+
+            async handler(code, id) {
+                const options = state.options;
+
+                if (options === null || !isProjectSource(state.root, id) || !isMemoizable(code, id, options)) {
+                    return;
+                }
 
-            if (options === null || !isProjectSource(state.root, id)) {
-                return;
-            }
+                const cache = state.cache;
 
-            return compileSource(code, id, options);
+                return cache === null ? compileSource(code, id, options) : cachedSource(cache, code, id, options);
+            },
         },
     };
 }