auklet 0.0.3 → 0.0.5

package/dist/css/production/format/sourceWriter.js

@@ -0,0 +1,16 @@
+import fs from 'node:fs';
+import path from 'node:path';
+export class SourceStyleFileWriter {
+  sourceRoot;
+  constructor(options) {
+    this.sourceRoot = options.packageContext.sourceRoot;
+  }
+  copy(files, outRoot) {
+    for (const sourceFile of files) {
+      const relative = path.relative(this.sourceRoot, sourceFile);
+      const target = path.join(outRoot, relative);
+      fs.mkdirSync(path.dirname(target), { recursive: true });
+      fs.copyFileSync(sourceFile, target);
+    }
+  }
+}

package/dist/css/production/format/themeWriter.d.ts

@@ -0,0 +1,16 @@
+import {
+  type FormatWriterOptions,
+  type ThemeStyleOutput,
+} from '#auklet/css/production/format/shared';
+export declare class ThemeStyleWriter {
+  private readonly config;
+  private readonly packageContext;
+  private readonly styleProcessor;
+  constructor(options: FormatWriterOptions);
+  clean(outRoot: string): void;
+  writeThemeStyles(outRoot: string): ThemeStyleOutput[];
+  writeThemeEntries(
+    themeStyles: Map<string, string>,
+    outRoot: string,
+  ): string[];
+}

package/dist/css/production/format/themeWriter.js

@@ -0,0 +1,80 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { THEMES_DIR } from '#auklet/css/constants';
+import { createThemeEntryParts } from '#auklet/css/core/style/plan';
+import { toRelativeImportSpecifier } from '#auklet/css/production/format/shared';
+export class ThemeStyleWriter {
+  config;
+  packageContext;
+  styleProcessor;
+  constructor(options) {
+    this.config = options.config;
+    this.packageContext = options.packageContext;
+    this.styleProcessor = options.packageContext.styleProcessor;
+  }
+  clean(outRoot) {
+    fs.rmSync(path.join(outRoot, THEMES_DIR), {
+      recursive: true,
+      force: true,
+    });
+    fs.rmSync(path.join(outRoot, this.config.output.styleDir, THEMES_DIR), {
+      recursive: true,
+      force: true,
+    });
+  }
+  writeThemeStyles(outRoot) {
+    const outputs = [];
+    const themesDir = path.join(
+      outRoot,
+      this.config.output.styleDir,
+      THEMES_DIR,
+    );
+    for (const [themeName, stylePath] of this.packageContext.themeFiles) {
+      const root = this.styleProcessor.createRoot();
+      const content = this.styleProcessor.readStyleFile(stylePath);
+      if (content.trim()) {
+        this.styleProcessor.appendStyleContent(root, content, stylePath);
+      }
+      const target = path.join(themesDir, `${themeName}.css`);
+      fs.mkdirSync(path.dirname(target), { recursive: true });
+      fs.writeFileSync(
+        target,
+        root.nodes?.length ? this.styleProcessor.stringify(root) : '',
+      );
+      outputs.push({ themeName, file: target });
+    }
+    return outputs;
+  }
+  writeThemeEntries(themeStyles, outRoot) {
+    const outputs = [];
+    const themesDir = path.join(outRoot, THEMES_DIR);
+    for (const themeName of this.packageContext.themeNames) {
+      const target = path.join(themesDir, `${themeName}.css`);
+      const root = this.styleProcessor.createRoot();
+      const targetDir = path.dirname(target);
+      const themeStyle = themeStyles.get(themeName);
+      for (const part of createThemeEntryParts(
+        this.packageContext.normalizedConfig,
+        themeName,
+      )) {
+        if (part.type === 'dependencies') {
+          for (const specifier of part.specifiers) {
+            this.styleProcessor.appendImportRule(root, specifier);
+          }
+          continue;
+        }
+        if (themeStyle) {
+          this.styleProcessor.appendImportRule(
+            root,
+            toRelativeImportSpecifier(targetDir, themeStyle),
+          );
+        }
+      }
+      if (!root.nodes?.length) continue;
+      fs.mkdirSync(targetDir, { recursive: true });
+      fs.writeFileSync(target, this.styleProcessor.stringify(root));
+      outputs.push(target);
+    }
+    return outputs;
+  }
+}

package/dist/css/production/moduleOutputWriter.d.ts

@@ -0,0 +1,26 @@
+import type { StylePackageContext } from '#auklet/css/core/stylePackageContext';
+import type {
+  ModuleStyleBuildConfig,
+  ResolvedModuleStyleBuildContext,
+} from '#auklet/types';
+export type ModuleStyleOutputWriterOptions = {
+  config: ModuleStyleBuildConfig;
+  context: ResolvedModuleStyleBuildContext;
+  packageContext: StylePackageContext;
+};
+export declare class ModuleStyleOutputWriter {
+  private readonly config;
+  private readonly context;
+  private readonly packageContext;
+  private readonly sourceWriter;
+  private readonly themeWriter;
+  private readonly externalWriter;
+  private readonly moduleWriter;
+  private readonly entryWriter;
+  private readonly componentWriter;
+  constructor(options: ModuleStyleOutputWriterOptions);
+  write(): string[];
+  private get outputRoot();
+  private createComponentEntries;
+  private writeFormat;
+}

package/dist/css/production/moduleOutputWriter.js

@@ -0,0 +1,83 @@
+import path from 'node:path';
+import { StyleModuleEntryPlanner } from '#auklet/css/core/styleModuleEntryPlanner';
+import { ComponentStyleEntryWriter } from '#auklet/css/production/format/componentWriter';
+import { StyleEntryWriter } from '#auklet/css/production/format/entryWriter';
+import { ExternalStyleWriter } from '#auklet/css/production/format/externalWriter';
+import { ModuleStyleWriter } from '#auklet/css/production/format/moduleWriter';
+import { SourceStyleFileWriter } from '#auklet/css/production/format/sourceWriter';
+import { ThemeStyleWriter } from '#auklet/css/production/format/themeWriter';
+// Coordinates all module-mode style output under format directories such as `dist/es` and `dist/lib`.
+export class ModuleStyleOutputWriter {
+  config;
+  context;
+  packageContext;
+  sourceWriter;
+  themeWriter;
+  externalWriter;
+  moduleWriter;
+  entryWriter;
+  componentWriter;
+  constructor(options) {
+    this.config = options.config;
+    this.context = options.context;
+    this.packageContext = options.packageContext;
+    this.sourceWriter = new SourceStyleFileWriter(options);
+    this.themeWriter = new ThemeStyleWriter(options);
+    this.externalWriter = new ExternalStyleWriter(options);
+    this.moduleWriter = new ModuleStyleWriter(options);
+    this.entryWriter = new StyleEntryWriter(options);
+    this.componentWriter = new ComponentStyleEntryWriter(options);
+  }
+  write() {
+    const componentEntries = this.createComponentEntries();
+    const outputs = [];
+    for (const format of this.config.output.outputFormats) {
+      outputs.push(...this.writeFormat(format, componentEntries));
+    }
+    return outputs;
+  }
+  get outputRoot() {
+    return path.join(this.context.packageRoot, this.context.outputDir);
+  }
+  createComponentEntries() {
+    const moduleStyleImports = this.packageContext.importCollector.collect(
+      this.packageContext.sourceFiles,
+      this.packageContext.normalizedConfig,
+    );
+    return new StyleModuleEntryPlanner(this.packageContext).createEntries(
+      moduleStyleImports,
+    );
+  }
+  writeFormat(format, componentEntries) {
+    const outRoot = path.join(this.outputRoot, format);
+    const outputs = [];
+    this.themeWriter.clean(outRoot);
+    this.sourceWriter.copy(this.packageContext.styleFiles, outRoot);
+    const themeStyles = this.themeWriter.writeThemeStyles(outRoot);
+    const themeStyleMap = new Map(
+      themeStyles.map((themeStyle) => [themeStyle.themeName, themeStyle.file]),
+    );
+    const themeEntries = this.themeWriter.writeThemeEntries(
+      themeStyleMap,
+      outRoot,
+    );
+    const externalStyle = this.externalWriter.write(outRoot);
+    const moduleStyle = this.moduleWriter.write(outRoot);
+    const entryStyle = this.entryWriter.write(
+      outRoot,
+      themeStyleMap,
+      moduleStyle,
+    );
+    const componentStyles = this.componentWriter.write(
+      outRoot,
+      componentEntries,
+    );
+    outputs.push(...themeStyles.map((themeStyle) => themeStyle.file));
+    outputs.push(...themeEntries);
+    if (externalStyle) outputs.push(externalStyle);
+    if (moduleStyle) outputs.push(moduleStyle);
+    if (entryStyle) outputs.push(entryStyle);
+    outputs.push(...componentStyles);
+    return outputs;
+  }
+}

package/dist/css/production/packageEntryWriter.d.ts

@@ -0,0 +1,20 @@
+import type { StylePackageContext } from '#auklet/css/core/stylePackageContext';
+import type {
+  ModuleStyleBuildConfig,
+  ResolvedModuleStyleBuildContext,
+} from '#auklet/types';
+export type PackageStyleEntryWriterOptions = {
+  config: ModuleStyleBuildConfig;
+  context: ResolvedModuleStyleBuildContext;
+  packageContext: StylePackageContext;
+};
+export declare class PackageStyleEntryWriter {
+  private readonly config;
+  private readonly context;
+  private readonly packageContext;
+  private readonly resolver;
+  private readonly styleProcessor;
+  constructor(options: PackageStyleEntryWriterOptions);
+  write(): string | null;
+  private get outputRoot();
+}

package/dist/css/production/packageEntryWriter.js

@@ -0,0 +1,55 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { getGlobalStyleDependencies } from '#auklet/css/core/style/dependencies';
+// Builds the package-level style entry at `dist/index.css` by aggregating local themes, dependencies, and source styles.
+export class PackageStyleEntryWriter {
+  config;
+  context;
+  packageContext;
+  resolver;
+  styleProcessor;
+  constructor(options) {
+    this.config = options.config;
+    this.context = options.context;
+    this.packageContext = options.packageContext;
+    this.resolver = options.packageContext.resolver;
+    this.styleProcessor = options.packageContext.styleProcessor;
+  }
+  write() {
+    const seen = new Set();
+    const root = this.styleProcessor.createRoot();
+    for (const stylePath of this.packageContext.themeFiles.values()) {
+      const content = this.styleProcessor.readStyleFile(stylePath, seen);
+      if (content.trim()) {
+        this.styleProcessor.appendStyleContent(root, content, stylePath);
+      }
+    }
+    for (const specifier of getGlobalStyleDependencies(
+      this.packageContext.normalizedConfig,
+    )) {
+      const stylePath = this.resolver.resolveStyleDependency(specifier);
+      if (!stylePath) continue;
+      const content = this.styleProcessor.readStyleFile(stylePath, seen);
+      if (content.trim()) {
+        this.styleProcessor.appendStyleContent(root, content, stylePath);
+      }
+    }
+    for (const styleFile of this.packageContext.styleFiles) {
+      const content = this.styleProcessor.readStyleFile(styleFile, seen);
+      if (content.trim()) {
+        this.styleProcessor.appendStyleContent(root, content, styleFile);
+      }
+    }
+    if (!root.nodes?.length) return null;
+    fs.mkdirSync(this.outputRoot, { recursive: true });
+    const target = path.join(
+      this.outputRoot,
+      this.config.output.indexStyleFile,
+    );
+    fs.writeFileSync(target, this.styleProcessor.stringify(root));
+    return target;
+  }
+  get outputRoot() {
+    return path.join(this.context.packageRoot, this.context.outputDir);
+  }
+}

package/dist/css/vite/hmr.d.ts

@@ -1,12 +1,12 @@
 import type { HotUpdateOptions, ViteDevServer } from 'vite';
-import type { ModuleCssGraph } from '#auklet/css/core/moduleCssGraph';
-export declare class AukletCssHmr {
+import type { ModuleStyleGraph } from '#auklet/css/core/moduleGraph';
+export declare class AukletStyleHmr {
   private readonly graph;
   private readonly lastUpdateTimes;
   private suppressFullReloadUntil;
   private readonly virtualIdsByDependency;
-  constructor(graph: () => ModuleCssGraph);
-  trackVirtualCssDependency(file: string, virtualId: string): void;
+  constructor(graph: () => ModuleStyleGraph);
+  trackVirtualStyleDependency(file: string, virtualId: string): void;
   installFullReloadGuard(server: Pick<ViteDevServer, 'ws'>): void;
   handleStyleHotUpdate(context: HotUpdateOptions): never[] | undefined;
   private suppressFullReload;

package/dist/css/vite/hmr.js

@@ -1,5 +1,5 @@
 import path from 'node:path';
-import { normalizeCssFileKey } from '#auklet/css/core/path';
+import { normalizeFileKey } from '#auklet/utils';
 // package CSS 的 HMR 不能直接走 Vite 原生 CSS 文件链路：
 // - 浏览器 import 的是 auklet-css:* 虚拟 CSS 模块，不是真实的
 //   packages/*/src/**/*.css 文件，所以真实 CSS 变化时 Vite 的 modules 可能为空。
@@ -30,24 +30,14 @@ const invalidateVirtualModules = (server, graph) => {
   }
   return modules;
 };
-const addVirtualCssDependency = (virtualIdsByDependency, file, virtualId) => {
-  var _a;
-  const normalizedFile = normalizeCssFileKey(file);
-  const values =
-    (_a = virtualIdsByDependency.get(normalizedFile)) !== null && _a !== void 0
-      ? _a
-      : new Set();
+const addVirtualStyleDependency = (virtualIdsByDependency, file, virtualId) => {
+  const normalizedFile = normalizeFileKey(file);
+  const values = virtualIdsByDependency.get(normalizedFile) ?? new Set();
   values.add(virtualId);
   virtualIdsByDependency.set(normalizedFile, values);
 };
 const getDependencyVirtualIds = (virtualIdsByDependency, file) => {
-  var _a;
-  return Array.from(
-    (_a = virtualIdsByDependency.get(normalizeCssFileKey(file))) !== null &&
-      _a !== void 0
-      ? _a
-      : [],
-  );
+  return Array.from(virtualIdsByDependency.get(normalizeFileKey(file)) ?? []);
 };
 const getDependencyVirtualModules = (virtualIdsByDependency, server, file) => {
   return getDependencyVirtualIds(virtualIdsByDependency, file).flatMap((id) => {
@@ -55,15 +45,16 @@ const getDependencyVirtualModules = (virtualIdsByDependency, server, file) => {
     return module ? [module] : [];
   });
 };
-export class AukletCssHmr {
+export class AukletStyleHmr {
+  graph;
+  lastUpdateTimes = new Map();
+  suppressFullReloadUntil = 0;
+  virtualIdsByDependency = new Map();
   constructor(graph) {
     this.graph = graph;
-    this.lastUpdateTimes = new Map();
-    this.suppressFullReloadUntil = 0;
-    this.virtualIdsByDependency = new Map();
   }
-  trackVirtualCssDependency(file, virtualId) {
-    addVirtualCssDependency(this.virtualIdsByDependency, file, virtualId);
+  trackVirtualStyleDependency(file, virtualId) {
+    addVirtualStyleDependency(this.virtualIdsByDependency, file, virtualId);
   }
   installFullReloadGuard(server) {
     const send = server.ws.send.bind(server.ws);
@@ -139,13 +130,9 @@ export class AukletCssHmr {
     return Date.now() <= this.suppressFullReloadUntil;
   }
   isDuplicateUpdate(file) {
-    var _a;
     const now = Date.now();
-    const normalizedFile = normalizeCssFileKey(file);
-    const lastUpdateTime =
-      (_a = this.lastUpdateTimes.get(normalizedFile)) !== null && _a !== void 0
-        ? _a
-        : 0;
+    const normalizedFile = normalizeFileKey(file);
+    const lastUpdateTime = this.lastUpdateTimes.get(normalizedFile) ?? 0;
     const isDuplicate = now - lastUpdateTime < DUPLICATE_UPDATE_IGNORE_MS;
     this.lastUpdateTimes.set(normalizedFile, now);
     return isDuplicate;

package/dist/css/vite/vitePlugin.d.ts

@@ -1,10 +1,10 @@
 import type { HotUpdateOptions, ViteDevServer } from 'vite';
-import { type ModuleCssGraphOptions } from '#auklet/css/core/moduleCssGraph';
-export type AukletCssPluginOptions = Partial<
-  Pick<ModuleCssGraphOptions, 'workspaceRoot'>
+import { type ModuleStyleGraphOptions } from '#auklet/css/core/moduleGraph';
+export type AukletStylePluginOptions = Partial<
+  Pick<ModuleStyleGraphOptions, 'workspaceRoot'>
 > &
-  Omit<ModuleCssGraphOptions, 'workspaceRoot'>;
-export declare function aukletCssPlugin(options?: AukletCssPluginOptions): {
+  Omit<ModuleStyleGraphOptions, 'workspaceRoot'>;
+export declare function aukletStylePlugin(options?: AukletStylePluginOptions): {
   name: string;
   apply: 'serve';
   enforce: 'pre';

package/dist/css/vite/vitePlugin.js

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { ModuleCssGraph } from '#auklet/css/core/moduleCssGraph';
-import { AukletCssHmr } from '#auklet/css/vite/hmr';
+import { ModuleStyleGraph } from '#auklet/css/core/moduleGraph';
+import { AukletStyleHmr } from '#auklet/css/vite/hmr';
 const WORKSPACE_FILE = 'pnpm-workspace.yaml';
 const VIRTUAL_ID_PREFIX = 'virtual:auklet-css:';
 const RESOLVED_VIRTUAL_ID_PREFIX = '\0auklet-css:';
@@ -29,16 +29,10 @@ const findWorkspaceRoot = (startDir) => {
     current = parent;
   }
 };
-const createModuleCssGraph = (options, viteRoot) => {
-  var _a, _b;
+const createModuleStyleGraph = (options, viteRoot) => {
   const workspaceRoot =
-    (_b =
-      (_a = options.workspaceRoot) !== null && _a !== void 0
-        ? _a
-        : findWorkspaceRoot(viteRoot)) !== null && _b !== void 0
-      ? _b
-      : process.cwd();
-  return new ModuleCssGraph({
+    options.workspaceRoot ?? findWorkspaceRoot(viteRoot) ?? process.cwd();
+  return new ModuleStyleGraph({
     ...options,
     workspaceRoot,
   });
@@ -57,21 +51,21 @@ const invalidateVirtualModules = (server, graph) => {
   }
   return modules;
 };
-export function aukletCssPlugin(options = {}) {
+export function aukletStylePlugin(options = {}) {
   let graph = null;
   const getGraph = () => {
     if (!graph) {
-      graph = createModuleCssGraph(options, process.cwd());
+      graph = createModuleStyleGraph(options, process.cwd());
     }
     return graph;
   };
-  const hmr = new AukletCssHmr(getGraph);
+  const hmr = new AukletStyleHmr(getGraph);
   return {
     name: 'auklet-css',
     apply: 'serve',
     enforce: 'pre',
     configResolved(config) {
-      graph = createModuleCssGraph(options, config.root);
+      graph = createModuleStyleGraph(options, config.root);
     },
     resolveId(id) {
       const graph = getGraph();
@@ -83,22 +77,19 @@ export function aukletCssPlugin(options = {}) {
           VIRTUAL_ID_PREFIX.length,
         )}`;
       }
-      if (!graph.parsePackageCssId(cleanId)) return null;
+      if (!graph.parsePackageStyleId(cleanId)) return null;
       return `${RESOLVED_VIRTUAL_ID_PREFIX}${cleanId}`;
     },
     async load(id) {
-      var _a;
       if (!id.startsWith(RESOLVED_VIRTUAL_ID_PREFIX)) return null;
       const originalId = id.slice(RESOLVED_VIRTUAL_ID_PREFIX.length);
       const graph = getGraph();
-      const parsed = graph.parsePackageCssId(originalId);
+      const parsed = graph.parsePackageStyleId(originalId);
       if (!parsed) return null;
-      const result = await graph.createPackageCssCode(parsed);
+      const result = await graph.createPackageStyleCode(parsed);
       for (const file of result.watchFiles) {
-        hmr.trackVirtualCssDependency(file, id);
-        (_a = this.addWatchFile) === null || _a === void 0
-          ? void 0
-          : _a.call(this, file);
+        hmr.trackVirtualStyleDependency(file, id);
+        this.addWatchFile?.(file);
       }
       return result.code;
     },
@@ -106,27 +97,27 @@ export function aukletCssPlugin(options = {}) {
       const graph = getGraph();
       hmr.installFullReloadGuard(server);
       server.watcher.add(graph.getWatchRoots());
-      const invalidateCssGraph = (file) => {
+      const invalidateStyleGraph = (file) => {
         if (!graph.isWorkspaceSourceGraphFile(file)) return false;
         invalidateVirtualModules(server, graph);
         return true;
       };
-      const reloadCssGraph = (file) => {
-        if (!invalidateCssGraph(file)) return;
+      const reloadStyleGraph = (file) => {
+        if (!invalidateStyleGraph(file)) return;
         server.ws.send({ type: 'full-reload' });
       };
       const handleSourceAddOrUnlink = (file) => {
         if (graph.isStyleFile(file)) {
-          invalidateCssGraph(file);
+          invalidateStyleGraph(file);
           return;
         }
-        reloadCssGraph(file);
+        reloadStyleGraph(file);
       };
       server.watcher.on('add', handleSourceAddOrUnlink);
       server.watcher.on('unlink', handleSourceAddOrUnlink);
       server.watcher.on('change', (file) => {
-        if (graph.isCssConfigFile(file)) {
-          reloadCssGraph(file);
+        if (graph.isStyleConfigFile(file)) {
+          reloadStyleGraph(file);
         }
       });
     },

package/dist/css/watch/{moduleCssWatcher.d.ts → watcher.d.ts}

@@ -1,8 +1,8 @@
 import type {
-  ModuleCssBuildConfig,
-  ModuleCssBuildContext,
+  ModuleStyleBuildConfig,
+  ModuleStyleBuildContext,
 } from '#auklet/types';
-export declare class ModuleCssWatcher {
+export declare class ModuleStyleWatcher {
   private readonly config;
   private readonly context;
   private readonly logger?;
@@ -10,10 +10,14 @@ export declare class ModuleCssWatcher {
   private isBuilding;
   private shouldRebuild;
   private watcher;
-  constructor(context?: ModuleCssBuildContext, config?: ModuleCssBuildConfig);
+  constructor(
+    context?: ModuleStyleBuildContext,
+    config?: ModuleStyleBuildConfig,
+  );
   watch(): Promise<void>;
   private rebuild;
   private refreshWatcher;
   private scheduleBuild;
+  private shouldRebuildForFile;
   close(): Promise<void>;
 }

package/dist/css/watch/watcher.js

@@ -0,0 +1,91 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import chokidar from 'chokidar';
+import { aukletConfigFile, aukletDefaultOptions } from '#auklet/config';
+import { moduleStyleBuildConfig } from '#auklet/css/config';
+import { SOURCE_COMPONENT_MODULE_RE } from '#auklet/css/constants';
+import { ModuleStyleBuilder } from '#auklet/css/production/builder';
+export class ModuleStyleWatcher {
+  config;
+  context;
+  logger;
+  timer = null;
+  isBuilding = false;
+  shouldRebuild = false;
+  watcher = null;
+  constructor(context = {}, config = moduleStyleBuildConfig) {
+    this.config = config;
+    this.context = {
+      packageRoot: process.cwd(),
+      ...context,
+    };
+    this.logger = context.logger;
+  }
+  async watch() {
+    await this.rebuild();
+    this.logger?.log?.('[auklet:css] watch mode ready');
+  }
+  async rebuild() {
+    if (this.isBuilding) {
+      this.shouldRebuild = true;
+      return;
+    }
+    this.isBuilding = true;
+    try {
+      const builder = new ModuleStyleBuilder(this.context, this.config);
+      await builder.build();
+      await this.refreshWatcher();
+    } catch (error) {
+      this.logger?.error?.(error);
+    } finally {
+      this.isBuilding = false;
+      if (this.shouldRebuild) {
+        this.shouldRebuild = false;
+        this.scheduleBuild();
+      }
+    }
+  }
+  async refreshWatcher() {
+    const aukletConfig = this.context.aukletConfig ?? {};
+    const sourceDir =
+      this.context.source ?? aukletConfig.source ?? aukletDefaultOptions.source;
+    const sourceRoot = path.join(this.context.packageRoot, sourceDir);
+    const configPath = path.join(this.context.packageRoot, aukletConfigFile);
+    const watchPaths = [sourceRoot, configPath].filter((file) =>
+      fs.existsSync(file),
+    );
+    await this.watcher?.close();
+    this.watcher = chokidar.watch(watchPaths, {
+      ignoreInitial: true,
+      interval: 300,
+      usePolling: true,
+    });
+    this.watcher.on('all', (_event, file) => {
+      if (typeof file === 'string' && !this.shouldRebuildForFile(file)) {
+        return;
+      }
+      this.scheduleBuild();
+    });
+    this.watcher.on('error', (error) => {
+      this.logger?.error?.(error);
+    });
+  }
+  scheduleBuild() {
+    if (this.timer) clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      this.timer = null;
+      this.rebuild().catch((error) => {
+        this.logger?.error?.(error);
+      });
+    }, 80);
+  }
+  shouldRebuildForFile(file) {
+    if (path.basename(file) === aukletConfigFile) return true;
+    if (SOURCE_COMPONENT_MODULE_RE.test(file)) return true;
+    return this.config.styleExtensions.includes(path.extname(file));
+  }
+  async close() {
+    if (this.timer) clearTimeout(this.timer);
+    await this.watcher?.close();
+  }
+}