@angular-devkit/build-angular 17.1.0-next.0 → 17.1.0-next.2

package/src/tools/esbuild/angular/jit-plugin-callbacks.js

@@ -6,13 +6,11 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupJitPluginCallbacks = void 0;
 const promises_1 = require("node:fs/promises");
-const node_path_1 = __importDefault(require("node:path"));
+const node_path_1 = require("node:path");
+const load_result_cache_1 = require("../load-result-cache");
 const uri_1 = require("./uri");
 /**
  * Loads/extracts the contents from a load callback Angular JIT entry.
@@ -27,7 +25,7 @@ const uri_1 = require("./uri");
  */
 async function loadEntry(entry, root, skipRead) {
     if (entry.startsWith('file:')) {
-        const specifier = node_path_1.default.join(root, entry.slice(5));
+        const specifier = (0, node_path_1.join)(root, entry.slice(5));
         return {
             path: specifier,
             contents: skipRead ? undefined : await (0, promises_1.readFile)(specifier, 'utf-8'),
@@ -36,7 +34,7 @@ async function loadEntry(entry, root, skipRead) {
     else if (entry.startsWith('inline:')) {
         const [importer, data] = entry.slice(7).split(';', 2);
         return {
-            path: node_path_1.default.join(root, importer),
+            path: (0, node_path_1.join)(root, importer),
             contents: Buffer.from(data, 'base64').toString(),
         };
     }
@@ -53,7 +51,7 @@ async function loadEntry(entry, root, skipRead) {
  * @param styleOptions The options to use when bundling stylesheets.
  * @param additionalResultFiles A Map where stylesheet resources will be added.
  */
-function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles, inlineStyleLanguage) {
+function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles, inlineStyleLanguage, loadCache) {
     const root = build.initialOptions.absWorkingDir ?? '';
     // Add a resolve callback to capture and parse any JIT URIs that were added by the
     // JIT resource TypeScript transformer.
@@ -68,13 +66,13 @@ function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles
             return {
                 // Use a relative path to prevent fully resolved paths in the metafile (JSON stats file).
                 // This is only necessary for custom namespaces. esbuild will handle the file namespace.
-                path: 'file:' + node_path_1.default.relative(root, node_path_1.default.join(node_path_1.default.dirname(args.importer), specifier)),
+                path: 'file:' + (0, node_path_1.relative)(root, (0, node_path_1.join)((0, node_path_1.dirname)(args.importer), specifier)),
                 namespace,
             };
         }
         else {
             // Inline data may need the importer to resolve imports/references within the content
-            const importer = node_path_1.default.relative(root, args.importer);
+            const importer = (0, node_path_1.relative)(root, args.importer);
             return {
                 path: `inline:${importer};${specifier}`,
                 namespace,
@@ -82,7 +80,7 @@ function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles
         }
     });
     // Add a load callback to handle Component stylesheets (both inline and external)
-    build.onLoad({ filter: /./, namespace: uri_1.JIT_STYLE_NAMESPACE }, async (args) => {
+    build.onLoad({ filter: /./, namespace: uri_1.JIT_STYLE_NAMESPACE }, (0, load_result_cache_1.createCachedLoad)(loadCache, async (args) => {
         // skipRead is used here because the stylesheet bundling will read a file stylesheet
         // directly either via a preprocessor or esbuild itself.
         const entry = await loadEntry(args.path, root, true /* skipRead */);
@@ -94,24 +92,26 @@ function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles
         else {
             stylesheetResult = await stylesheetBundler.bundleInline(entry.contents, entry.path, inlineStyleLanguage);
         }
-        const { contents, resourceFiles, errors, warnings, metafile } = stylesheetResult;
+        const { contents, resourceFiles, errors, warnings, metafile, referencedFiles } = stylesheetResult;
         additionalResultFiles.set(entry.path, { outputFiles: resourceFiles, metafile });
         return {
             errors,
             warnings,
             contents,
             loader: 'text',
+            watchFiles: referencedFiles && [...referencedFiles],
         };
-    });
+    }));
     // Add a load callback to handle Component templates
     // NOTE: While this callback supports both inline and external templates, the transformer
     // currently only supports generating URIs for external templates.
-    build.onLoad({ filter: /./, namespace: uri_1.JIT_TEMPLATE_NAMESPACE }, async (args) => {
-        const { contents } = await loadEntry(args.path, root);
+    build.onLoad({ filter: /./, namespace: uri_1.JIT_TEMPLATE_NAMESPACE }, (0, load_result_cache_1.createCachedLoad)(loadCache, async (args) => {
+        const { contents, path } = await loadEntry(args.path, root);
         return {
             contents,
             loader: 'text',
+            watchFiles: [path],
         };
-    });
+    }));
 }
 exports.setupJitPluginCallbacks = setupJitPluginCallbacks;

package/src/tools/esbuild/angular/source-file-cache.js

@@ -52,7 +52,6 @@ class SourceFileCache extends Map {
         }
         for (let file of files) {
             file = path.normalize(file);
-            this.typeScriptFileCache.delete(file);
             this.loadResultCache.invalidate(file);
             // Normalize separators to allow matching TypeScript Host paths
             if (USING_WINDOWS) {

package/src/tools/esbuild/compiler-plugin-options.js

@@ -9,7 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompilerPluginOptions = void 0;
 function createCompilerPluginOptions(options, target, sourceFileCache) {
-    const { workspaceRoot, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, inlineStyleLanguage, jit, tailwindConfiguration, } = options;
+    const { workspaceRoot, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, inlineStyleLanguage, jit, cacheOptions, tailwindConfiguration, publicPath, } = options;
     return {
         // JS/TS options
         pluginOptions: {
@@ -26,6 +26,7 @@ function createCompilerPluginOptions(options, target, sourceFileCache) {
         // Component stylesheet options
         styleOptions: {
             workspaceRoot,
+            inlineFonts: !!optimizationOptions.fonts.inline,
             optimization: !!optimizationOptions.styles.minify,
             sourcemap: 
             // Hidden component stylesheet sourcemaps are inaccessible which is effectively
@@ -39,7 +40,8 @@ function createCompilerPluginOptions(options, target, sourceFileCache) {
             inlineStyleLanguage,
             preserveSymlinks,
             tailwindConfiguration,
-            publicPath: options.publicPath,
+            cacheOptions,
+            publicPath,
         },
     };
 }

package/src/tools/esbuild/global-styles.js

@@ -15,7 +15,7 @@ const node_assert_1 = __importDefault(require("node:assert"));
 const bundle_options_1 = require("./stylesheets/bundle-options");
 const virtual_module_plugin_1 = require("./virtual-module-plugin");
 function createGlobalStylesBundleOptions(options, target, initial) {
-    const { workspaceRoot, optimizationOptions, sourcemapOptions, outputNames, globalStyles, preserveSymlinks, externalDependencies, stylePreprocessorOptions, tailwindConfiguration, } = options;
+    const { workspaceRoot, optimizationOptions, sourcemapOptions, outputNames, globalStyles, preserveSymlinks, externalDependencies, stylePreprocessorOptions, tailwindConfiguration, cacheOptions, publicPath, } = options;
     const namespace = 'angular:styles/global';
     const entryPoints = {};
     let found = false;
@@ -33,6 +33,7 @@ function createGlobalStylesBundleOptions(options, target, initial) {
         const buildOptions = (0, bundle_options_1.createStylesheetBundleOptions)({
             workspaceRoot,
             optimization: !!optimizationOptions.styles.minify,
+            inlineFonts: !!optimizationOptions.fonts.inline,
             sourcemap: !!sourcemapOptions.styles,
             preserveSymlinks,
             target,
@@ -45,7 +46,8 @@ function createGlobalStylesBundleOptions(options, target, initial) {
                 },
             includePaths: stylePreprocessorOptions?.includePaths,
             tailwindConfiguration,
-            publicPath: options.publicPath,
+            cacheOptions,
+            publicPath,
         }, loadCache);
         // Keep special CSS comments `/*! comment */` in place when `removeSpecialComments` is disabled.
         // These comments are special for a number of CSS tools such as Critters and PurgeCSS.

package/src/tools/esbuild/i18n-locale-plugin.d.ts

@@ -6,6 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { Plugin } from 'esbuild';
+/**
+ * The internal namespace used by generated locale import statements and Angular locale data plugin.
+ */
+export declare const LOCALE_DATA_NAMESPACE = "angular:locale/data";
 /**
  * The base module location used to search for locale specific data.
  */

package/src/tools/esbuild/i18n-locale-plugin.js

@@ -7,7 +7,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createAngularLocaleDataPlugin = exports.LOCALE_DATA_BASE_MODULE = void 0;
+exports.createAngularLocaleDataPlugin = exports.LOCALE_DATA_BASE_MODULE = exports.LOCALE_DATA_NAMESPACE = void 0;
+/**
+ * The internal namespace used by generated locale import statements and Angular locale data plugin.
+ */
+exports.LOCALE_DATA_NAMESPACE = 'angular:locale/data';
 /**
  * The base module location used to search for locale specific data.
  */
@@ -33,12 +37,37 @@ function createAngularLocaleDataPlugin() {
             }
             build.onResolve({ filter: /^angular:locale\/data:/ }, async ({ path }) => {
                 // Extract the locale from the path
-                const originalLocale = path.split(':', 3)[2];
-                // Remove any private subtags since these will never match
-                let partialLocale = originalLocale.replace(/-x(-[a-zA-Z0-9]{1,8})+$/, '');
+                const rawLocaleTag = path.split(':', 3)[2];
+                // Extract and normalize the base name of the raw locale tag
+                let partialLocaleTag;
+                try {
+                    const locale = new Intl.Locale(rawLocaleTag);
+                    partialLocaleTag = locale.baseName;
+                }
+                catch {
+                    return {
+                        path: rawLocaleTag,
+                        namespace: exports.LOCALE_DATA_NAMESPACE,
+                        errors: [
+                            {
+                                text: `Invalid or unsupported locale provided in configuration: "${rawLocaleTag}"`,
+                            },
+                        ],
+                    };
+                }
                 let exact = true;
-                while (partialLocale) {
-                    const potentialPath = `${exports.LOCALE_DATA_BASE_MODULE}/${partialLocale}`;
+                while (partialLocaleTag) {
+                    // Angular embeds the `en`/`en-US` locale into the framework and it does not need to be included again here.
+                    // The onLoad hook below for the locale data namespace has an `empty` loader that will prevent inclusion.
+                    // Angular does not contain exact locale data for `en-US` but `en` is equivalent.
+                    if (partialLocaleTag === 'en' || partialLocaleTag === 'en-US') {
+                        return {
+                            path: rawLocaleTag,
+                            namespace: exports.LOCALE_DATA_NAMESPACE,
+                        };
+                    }
+                    // Attempt to resolve the locale tag data within the Angular base module location
+                    const potentialPath = `${exports.LOCALE_DATA_BASE_MODULE}/${partialLocaleTag}`;
                     const result = await build.resolve(potentialPath, {
                         kind: 'import-statement',
                         resolveDir: build.initialOptions.absWorkingDir,
@@ -54,36 +83,37 @@ function createAngularLocaleDataPlugin() {
                                     ...result.warnings,
                                     {
                                         location: null,
-                                        text: `Locale data for '${originalLocale}' cannot be found. Using locale data for '${partialLocale}'.`,
+                                        text: `Locale data for '${rawLocaleTag}' cannot be found. Using locale data for '${partialLocaleTag}'.`,
                                     },
                                 ],
                             };
                         }
                     }
-                    // Remove the last subtag and try again with a less specific locale
-                    const parts = partialLocale.split('-');
-                    partialLocale = parts.slice(0, -1).join('-');
+                    // Remove the last subtag and try again with a less specific locale.
+                    // Usually the match is exact so the string splitting here is not done until actually needed after the exact
+                    // match fails to resolve.
+                    const parts = partialLocaleTag.split('-');
+                    partialLocaleTag = parts.slice(0, -1).join('-');
                     exact = false;
-                    // The locales "en" and "en-US" are considered exact to retain existing behavior
-                    if (originalLocale === 'en-US' && partialLocale === 'en') {
-                        exact = true;
-                    }
                 }
                 // Not found so issue a warning and use an empty loader. Framework built-in `en-US` data will be used.
                 // This retains existing behavior as in the Webpack-based builder.
                 return {
-                    path: originalLocale,
-                    namespace: 'angular:locale/data',
+                    path: rawLocaleTag,
+                    namespace: exports.LOCALE_DATA_NAMESPACE,
                     warnings: [
                         {
                             location: null,
-                            text: `Locale data for '${originalLocale}' cannot be found. No locale data will be included for this locale.`,
+                            text: `Locale data for '${rawLocaleTag}' cannot be found. No locale data will be included for this locale.`,
                         },
                     ],
                 };
             });
             // Locales that cannot be found will be loaded as empty content with a warning from the resolve step
-            build.onLoad({ filter: /./, namespace: 'angular:locale/data' }, () => ({ loader: 'empty' }));
+            build.onLoad({ filter: /./, namespace: exports.LOCALE_DATA_NAMESPACE }, () => ({
+                contents: '',
+                loader: 'empty',
+            }));
         },
     };
 }

package/src/tools/esbuild/stylesheets/bundle-options.d.ts

@@ -6,10 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { BuildOptions } from 'esbuild';
+import { NormalizedCachedOptions } from '../../../utils/normalize-cache';
 import { LoadResultCache } from '../load-result-cache';
 export interface BundleStylesheetOptions {
     workspaceRoot: string;
     optimization: boolean;
+    inlineFonts: boolean;
     preserveSymlinks?: boolean;
     sourcemap: boolean | 'external' | 'inline';
     outputNames: {
@@ -24,6 +26,7 @@ export interface BundleStylesheetOptions {
         package: string;
     };
     publicPath?: string;
+    cacheOptions: NormalizedCachedOptions;
 }
 export declare function createStylesheetBundleOptions(options: BundleStylesheetOptions, cache?: LoadResultCache, inlineComponentData?: Record<string, string>): BuildOptions & {
     plugins: NonNullable<BuildOptions['plugins']>;

package/src/tools/esbuild/stylesheets/bundle-options.js

@@ -12,6 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createStylesheetBundleOptions = void 0;
 const node_path_1 = __importDefault(require("node:path"));
+const css_inline_fonts_plugin_1 = require("./css-inline-fonts-plugin");
 const css_language_1 = require("./css-language");
 const css_resource_plugin_1 = require("./css-resource-plugin");
 const less_language_1 = require("./less-language");
@@ -26,6 +27,15 @@ function createStylesheetBundleOptions(options, cache, inlineComponentData) {
         inlineComponentData,
         tailwindConfiguration: options.tailwindConfiguration,
     }, cache);
+    const plugins = [
+        pluginFactory.create(sass_language_1.SassStylesheetLanguage),
+        pluginFactory.create(less_language_1.LessStylesheetLanguage),
+        pluginFactory.create(css_language_1.CssStylesheetLanguage),
+        (0, css_resource_plugin_1.createCssResourcePlugin)(cache),
+    ];
+    if (options.inlineFonts) {
+        plugins.push((0, css_inline_fonts_plugin_1.createCssInlineFontsPlugin)({ cache, cacheOptions: options.cacheOptions }));
+    }
     return {
         absWorkingDir: options.workspaceRoot,
         bundle: true,
@@ -44,12 +54,7 @@ function createStylesheetBundleOptions(options, cache, inlineComponentData) {
         publicPath: options.publicPath,
         conditions: ['style', 'sass', 'less'],
         mainFields: ['style', 'sass'],
-        plugins: [
-            pluginFactory.create(sass_language_1.SassStylesheetLanguage),
-            pluginFactory.create(less_language_1.LessStylesheetLanguage),
-            pluginFactory.create(css_language_1.CssStylesheetLanguage),
-            (0, css_resource_plugin_1.createCssResourcePlugin)(cache),
-        ],
+        plugins,
     };
 }
 exports.createStylesheetBundleOptions = createStylesheetBundleOptions;

package/src/tools/esbuild/stylesheets/css-inline-fonts-plugin.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import type { Plugin } from 'esbuild';
+import { NormalizedCachedOptions } from '../../../utils/normalize-cache';
+import { LoadResultCache } from '../load-result-cache';
+/**
+ * Options for the createCssInlineFontsPlugin
+ * @see createCssInlineFontsPlugin
+ */
+export interface CssInlineFontsPluginOptions {
+    /** Disk cache normalized options */
+    cacheOptions?: NormalizedCachedOptions;
+    /** Load results cache. */
+    cache?: LoadResultCache;
+}
+/**
+ * Creates an esbuild {@link Plugin} that inlines fonts imported via import-rule.
+ * within the build configuration.
+ */
+export declare function createCssInlineFontsPlugin({ cache, cacheOptions, }: CssInlineFontsPluginOptions): Plugin;

package/src/tools/esbuild/stylesheets/css-inline-fonts-plugin.js

@@ -0,0 +1,57 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCssInlineFontsPlugin = void 0;
+const inline_fonts_1 = require("../../../utils/index-file/inline-fonts");
+const load_result_cache_1 = require("../load-result-cache");
+/**
+ * Creates an esbuild {@link Plugin} that inlines fonts imported via import-rule.
+ * within the build configuration.
+ */
+function createCssInlineFontsPlugin({ cache, cacheOptions, }) {
+    return {
+        name: 'angular-css-inline-fonts-plugin',
+        setup(build) {
+            const inlineFontsProcessor = new inline_fonts_1.InlineFontsProcessor({ cache: cacheOptions, minify: false });
+            build.onResolve({ filter: /fonts\.googleapis\.com|use\.typekit\.net/ }, (args) => {
+                // Only attempt to resolve import-rule tokens which only exist inside CSS.
+                if (args.kind !== 'import-rule') {
+                    return null;
+                }
+                if (!inlineFontsProcessor.canInlineRequest(args.path)) {
+                    return null;
+                }
+                return {
+                    path: args.path,
+                    namespace: 'css-inline-fonts',
+                };
+            });
+            build.onLoad({ filter: /./, namespace: 'css-inline-fonts' }, (0, load_result_cache_1.createCachedLoad)(cache, async (args) => {
+                try {
+                    return {
+                        contents: await inlineFontsProcessor.processURL(args.path),
+                        loader: 'css',
+                    };
+                }
+                catch (error) {
+                    return {
+                        loader: 'css',
+                        errors: [
+                            {
+                                text: `Failed to inline external stylesheet '${args.path}'.`,
+                                detail: error,
+                            },
+                        ],
+                    };
+                }
+            }));
+        },
+    };
+}
+exports.createCssInlineFontsPlugin = createCssInlineFontsPlugin;

package/src/tools/esbuild/watcher.d.ts

@@ -21,4 +21,5 @@ export declare function createWatcher(options?: {
     polling?: boolean;
     interval?: number;
     ignored?: string[];
+    followSymlinks?: boolean;
 }): BuildWatcher;

package/src/tools/esbuild/watcher.js

@@ -6,10 +6,12 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createWatcher = exports.ChangedFiles = void 0;
-const chokidar_1 = require("chokidar");
-const node_path_1 = require("node:path");
+const watchpack_1 = __importDefault(require("watchpack"));
 class ChangedFiles {
     added = new Set();
     modified = new Set();
@@ -28,105 +30,30 @@ class ChangedFiles {
 }
 exports.ChangedFiles = ChangedFiles;
 function createWatcher(options) {
-    const watcher = new chokidar_1.FSWatcher({
-        usePolling: options?.polling,
-        interval: options?.interval,
+    const watcher = new watchpack_1.default({
+        poll: options?.polling ? options?.interval ?? true : false,
         ignored: options?.ignored,
-        disableGlobbing: true,
-        ignoreInitial: true,
+        followSymlinks: options?.followSymlinks,
+        aggregateTimeout: 250,
     });
+    const watchedFiles = new Set();
     const nextQueue = [];
-    let currentChanges;
-    let nextWaitTimeout;
-    /**
-     * We group the current events in a map as on Windows with certain IDE a file contents change can trigger multiple events.
-     *
-     * Example:
-     * rename | 'C:/../src/app/app.component.css'
-     * rename | 'C:/../src/app/app.component.css'
-     * change | 'C:/../src/app/app.component.css'
-     *
-     */
-    let currentEvents;
-    /**
-     * Using `watcher.on('all')` does not capture some of events fired when using Visual studio and this does not happen all the time,
-     * but only after a file has been changed 3 or more times.
-     *
-     * Also, some IDEs such as Visual Studio (not VS Code) will fire a rename event instead of unlink when a file is renamed or changed.
-     *
-     * Example:
-     * ```
-     * watcher.on('raw')
-     * Change 1
-     * rename | 'C:/../src/app/app.component.css'
-     * rename | 'C:/../src/app/app.component.css'
-     * change | 'C:/../src/app/app.component.css'
-     *
-     * Change 2
-     * rename | 'C:/../src/app/app.component.css'
-     * rename | 'C:/../src/app/app.component.css'
-     * change | 'C:/../src/app/app.component.css'
-     *
-     * Change 3
-     * rename | 'C:/../src/app/app.component.css'
-     * rename | 'C:/../src/app/app.component.css'
-     * change | 'C:/../src/app/app.component.css'
-     *
-     * watcher.on('all')
-     * Change 1
-     * change | 'C:\\..\\src\\app\\app.component.css'
-     *
-     * Change 2
-     * unlink | 'C:\\..\\src\\app\\app.component.css'
-     *
-     * Change 3
-     * ... (Nothing)
-     * ```
-     */
-    watcher.on('raw', (event, path, { watchedPath }) => {
-        switch (event) {
-            case 'add':
-            case 'change':
-            // When using Visual Studio the rename event is fired before a change event when the contents of the file changed
-            // or instead of `unlink` when the file has been renamed.
-            case 'unlink':
-            case 'rename':
-                // When polling is enabled `watchedPath` can be undefined.
-                // `path` is always normalized unlike `watchedPath`.
-                const changedPath = watchedPath ? (0, node_path_1.normalize)(watchedPath) : path;
-                currentEvents ??= new Map();
-                currentEvents.set(changedPath, event);
-                break;
-            default:
-                return;
+    let currentChangedFiles;
+    watcher.on('aggregated', (changes, removals) => {
+        const changedFiles = currentChangedFiles ?? new ChangedFiles();
+        for (const file of changes) {
+            changedFiles.modified.add(file);
         }
-        // Wait 250ms from next change to better capture groups of file save operations.
-        if (!nextWaitTimeout) {
-            nextWaitTimeout = setTimeout(() => {
-                nextWaitTimeout = undefined;
-                const next = nextQueue.shift();
-                if (next && currentEvents) {
-                    const events = currentEvents;
-                    currentEvents = undefined;
-                    const currentChanges = new ChangedFiles();
-                    for (const [path, event] of events) {
-                        switch (event) {
-                            case 'add':
-                                currentChanges.added.add(path);
-                                break;
-                            case 'change':
-                                currentChanges.modified.add(path);
-                                break;
-                            case 'unlink':
-                            case 'rename':
-                                currentChanges.removed.add(path);
-                                break;
-                        }
-                    }
-                    next(currentChanges);
-                }
-            }, 250);
-            nextWaitTimeout?.unref();
+        for (const file of removals) {
+            changedFiles.removed.add(file);
+        }
+        const next = nextQueue.shift();
+        if (next) {
+            currentChangedFiles = undefined;
+            next(changedFiles);
+        }
+        else {
+            currentChangedFiles = changedFiles;
         }
     });
     return {
@@ -134,9 +61,9 @@ function createWatcher(options) {
             return this;
         },
         async next() {
-            if (currentChanges && nextQueue.length === 0) {
-                const result = { value: currentChanges };
-                currentChanges = undefined;
+            if (currentChangedFiles && nextQueue.length === 0) {
+                const result = { value: currentChangedFiles };
+                currentChangedFiles = undefined;
                 return result;
             }
             return new Promise((resolve) => {
@@ -144,17 +71,40 @@ function createWatcher(options) {
             });
         },
         add(paths) {
-            watcher.add(paths);
+            const previousSize = watchedFiles.size;
+            if (typeof paths === 'string') {
+                watchedFiles.add(paths);
+            }
+            else {
+                for (const file of paths) {
+                    watchedFiles.add(file);
+                }
+            }
+            if (previousSize !== watchedFiles.size) {
+                watcher.watch({
+                    files: watchedFiles,
+                });
+            }
         },
         remove(paths) {
-            watcher.unwatch(paths);
+            const previousSize = watchedFiles.size;
+            if (typeof paths === 'string') {
+                watchedFiles.delete(paths);
+            }
+            else {
+                for (const file of paths) {
+                    watchedFiles.delete(file);
+                }
+            }
+            if (previousSize !== watchedFiles.size) {
+                watcher.watch({
+                    files: watchedFiles,
+                });
+            }
         },
         async close() {
             try {
-                await watcher.close();
-                if (nextWaitTimeout) {
-                    clearTimeout(nextWaitTimeout);
-                }
+                watcher.close();
             }
             finally {
                 let next;