@plaudit/webpack-extensions 3.17.0 → 3.18.0

package/CHANGELOG.md

@@ -5,6 +5,21 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.18.0] - 2026-08-18
+### Added
+- David's improvements to build pipeline efficiency (Credit: David)
+  - This comes from version `2.97.0`
+- Support for David's `@plaudit/dev-webpack-plugin` (Credit: David)
+  - This comes from version `2.97.0`
+
+### Changed
+- To Webpack's standard plugin interface (`WebpackPluginInstance`)
+  - This comes from version `2.97.0`
+
+### Removed
+- Browsersync and its tests (Credit: David)
+  - This comes from version `2.97.0`
+
 ## [3.17.0] - 2026-08-18
 ### Added
 - A port of WordPress's Dependency Extraction Webpack Plugin because they keep breaking it
@@ -260,6 +275,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Legacy PostCSS features that have been integrated into modern CSS
 - `@extends` support
 
+## [2.97.0] - 2026-08-18
+### Added
+- David's improvements to build pipeline efficiency
+- Support for David's `@plaudit/dev-webpack-plugin`
+
+### Changed
+- To Webpack's standard plugin interface (`WebpackPluginInstance`)
+
+### Removed
+- Browsersync tests
+
 ## [2.96.3] - 2026-08-11
 ### Added
 - A few more validation checks

package/README.md

@@ -1,5 +1,5 @@
 # Plaudit Webpack Extensions
-A webpack configuration and plugin suite designed specifically for WordPress development workflows. This package extends `@wordpress/scripts` with custom webpack plugins, PostCSS configurations, and build optimizations tailored for Plaudit's WordPress projects. It includes specialized handling for Gutenberg blocks, asset management, internationalization (WPML), and development tooling like BrowserSync integration.
+A webpack configuration and plugin suite designed specifically for WordPress development workflows. This package extends `@wordpress/scripts` with custom webpack plugins, PostCSS configurations, and build optimizations tailored for Plaudit's WordPress projects. It includes specialized handling for Gutenberg blocks, asset management, internationalization (WPML), and a same-origin CSS-inject / live-reload client for `wp-scripts start`.
 
 # Requirements
 - All block- and extension-related capabilities require that the `plaudit/plaudit-common` composer library be installed.
@@ -23,7 +23,27 @@ This suite generates loader code that uses the most efficient mechanisms availab
 The same file structure (both in the webpack.config.js file and the actual directory tree) can be used in plugins and themes.
 
 # Usage
-Check out the [User Guide](USER-GUIDE.md) file.
+Config, entry types, and handles: [User Guide](USER-GUIDE.md).
+
+## `dist` vs `dist-dev`
+
+With the unified loader (site `standard`), `outputDir` is `dist`. When `SERVER_MODE` is `development` (the default if unset on the host) and `omitDistDev` is off, webpack writes **`dist-dev`**. WordPress in development loads that folder via `dist/unified-loader.php` when `dist-dev/unified-loader.php` exists. Production WordPress always uses **`dist`**.
+
+`SERVER_MODE` chooses the folder. The compiler (`mode`, minify, webpack cache) is always production for `dist`. For `dist-dev` it follows `NODE_ENV`: `wp-scripts start` is development (no minify, cache on); `wp-scripts build` is production (minify, cache off) still written to `dist-dev`.
+
+`dev-reload.js` / overlay run only for `pnpm run dev` (`BROWSER_SYNC` + watch) and only under `dist-dev`. Pass `--no-dev-reload` after `--` (or `DEV_RELOAD=0`) to skip the overlay and live reload: `pnpm run dev -- --no-dev-reload`. Docker still starts and the browser still opens. The `--` is required so webpack-cli does not treat the flag as an unknown option.
+
+| Command                                 | Folder     | Compiler                                                         | Overlay |
+|-----------------------------------------|------------|------------------------------------------------------------------|---------|
+| `pnpm run dev`                          | `dist-dev` | development (no minify, cache on)                                | yes     |
+| `pnpm run dev -- --no-dev-reload`       | `dist-dev` | development (no minify, cache on)                                | no      |
+| `pnpm run watch`                        | `dist-dev` | development (no minify, cache on)                                | no      |
+| `pnpm run build`                        | `dist-dev` | production (minify, cache off)                                   | no      |
+| `SERVER_MODE=production pnpm run build` | `dist`     | same production compiler as `pnpm run build` (minify, cache off) | no      |
+
+The last row is the same compile as a local `build`; only the folder changes. That is what ships: `@plaudit/toolbox` (`toolbox init`) installs a **pre-commit** hook that runs `pnpm … build` with `SERVER_MODE=production` and stages `wp-content/**/dist/**`. A plain `pnpm run build` on your machine does **not** update `dist` unless you set `SERVER_MODE` yourself. `SKIP_BUILD=1` skips the hook build.
+
+See [Plaudit - Dev Webpack Plugin](https://github.com/plaudit/dev-webpack-plugin#readme) for more details
 
 # Development
 

package/USER-GUIDE.md

@@ -190,11 +190,13 @@ This file automatically:
 - Sets up blocks and extensions
 
 ### 4. Run Build Commands
-While you *can* manually run these commands, using `theapp pack dev/watch/build` is preferred
+While you *can* manually run these commands, using `theapp pack dev/watch/build` is preferred.
+
+Typical theme/plugin scripts are `watch`, `dev`, and `build`. Which folder they write (`dist` vs `dist-dev`) and whether the compiler minifies is in the package [README](README.md#dist-vs-dist-dev) — a local `pnpm run build` is a production compile into `dist-dev`, not into `dist`.
 
 ```bash
-pnpm run watch   # Development mode (watches for changes)
-pnpm run build   # Production build
+pnpm run watch   # Watch; writes dist-dev
+pnpm run build   # One-shot production compile into dist-dev
 ```
 
 ---

package/dist/plugins/AbstractBiPhasicGroupPlugin.d.ts

@@ -1,7 +1,7 @@
-import { Compilation, Compiler } from "webpack";
+import { Compilation, Compiler, type WebpackPluginInstance } from "webpack";
 import { PseudoSemaphore } from "../utils/pseduo-semaphore";
 import type { VerifiedPlauditWordpressWebpackConfig } from "../utils/common-config-helpers";
-import { type ParsedAssetJsonProvider, WebpackPlugin } from "../shared";
+import { type ParsedAssetJsonProvider } from "../shared";
 type TapWithAssetsJsonOptions = {
     name?: string;
     stage?: (typeof Compilation.PROCESS_ASSETS_STAGE_REPORT) | (typeof Compilation.PROCESS_ASSETS_STAGE_ANALYSE);
@@ -9,7 +9,7 @@ type TapWithAssetsJsonOptions = {
 };
 type TapWithAssetsJsonFn = Parameters<Compilation['hooks']['processAssets']['tapPromise']>[1];
 type TapWithParsedAssetsJsonFn = (parsedAssetJsonProvider: ParsedAssetJsonProvider, assets: Parameters<TapWithAssetsJsonFn>[0]) => Promise<void> | void;
-export declare abstract class AbstractBiPhasicGroupPlugin implements WebpackPlugin {
+export declare abstract class AbstractBiPhasicGroupPlugin implements WebpackPluginInstance {
     protected readonly config: VerifiedPlauditWordpressWebpackConfig;
     readonly group: string;
     private readonly semaphores;

package/dist/plugins/MiniCSSExtractPluginErrorCleaner.d.ts

@@ -1,5 +1,4 @@
-import type { Compiler } from "webpack";
-import type { WebpackPlugin } from "../shared";
-export declare class MiniCSSExtractPluginErrorCleaner implements WebpackPlugin {
+import type { Compiler, WebpackPluginInstance } from "webpack";
+export declare class MiniCSSExtractPluginErrorCleaner implements WebpackPluginInstance {
     apply(compiler: Compiler): void;
 }

package/dist/plugins/PackageConfigSanityChecker.d.ts

@@ -1,5 +1,4 @@
-import type { Compiler } from "webpack";
-import type { WebpackPlugin } from "../shared";
-export declare class PackageConfigSanityChecker implements WebpackPlugin {
+import type { Compiler, WebpackPluginInstance } from "webpack";
+export declare class PackageConfigSanityChecker implements WebpackPluginInstance {
     apply(compiler: Compiler): void;
 }

package/dist/plugins/VariablesJSMonitorPlugin.d.ts

@@ -1,7 +1,6 @@
 import type { VerifiedPlauditWordpressWebpackConfig } from "../utils/common-config-helpers";
-import type { Compiler } from "webpack";
-import type { WebpackPlugin } from "../shared";
-export declare class VariablesJSMonitorPlugin implements WebpackPlugin {
+import type { Compiler, WebpackPluginInstance } from "webpack";
+export declare class VariablesJSMonitorPlugin implements WebpackPluginInstance {
     private readonly config;
     constructor(config: VerifiedPlauditWordpressWebpackConfig);
     apply(compiler: Compiler): void;

package/dist/plugins/WPMLConfigBuilder.d.ts

@@ -1,7 +1,6 @@
-import { type WebpackPlugin } from "../shared";
 import { AbstractBiPhasicGroupAndEntryPlugin } from "./AbstractBiPhasicGroupAndEntryPlugin";
-import { type Compiler } from "webpack";
-export declare class WPMLConfigBuilderPlugin implements WebpackPlugin {
+import { type Compiler, type WebpackPluginInstance } from "webpack";
+export declare class WPMLConfigBuilderPlugin implements WebpackPluginInstance {
     private readonly destDir;
     private readonly referencePlugin;
     private static jsdomInstance?;

package/dist/shared.d.ts

@@ -1,7 +1,7 @@
 import { PHPFile, PHPWriter } from "@plaudit/php-writer";
 import { HereOrNowDoc } from "@plaudit/php-writer/expressions";
 import type { Options as PostcssFunctionsOptions } from "postcss-functions";
-import { type AssetInfo, type Compilation, type Configuration, type Entrypoint, WebpackError, type Compiler } from "webpack";
+import { type AssetInfo, type Compilation, type Configuration, type Entrypoint, WebpackError } from "webpack";
 import { SourceType } from "./utils/entrypoint-resolution-logic";
 import type { NormalizedEnqueuingControlFlags } from "./utils/path-query-and-related-helpers";
 export * from "./utils/entrypoint-resolution-logic";
@@ -105,9 +105,6 @@ export declare function constantEntries<K extends string, V>(object: {
     [k in K]: V;
 }): [K, V][];
 export declare function determineCurrentSourceType(dest: string | AdvancedOutputConfig, srcIsDirectory: boolean): SourceType;
-export interface WebpackPlugin {
-    apply(compiler: Compiler): void;
-}
 export type ObjectIndividualExternalDepConfig = {
     import?: string | [string, ...string[]];
     handle: string;
@@ -161,6 +158,13 @@ export type PlauditWordpressWebpackConfig = {
     targetNamespace?: string;
     useBlockSupportsAsThemeJsonDefaults?: boolean;
 };
+/** Unified-loader watch output: `dist` → `dist-dev` when SERVER_MODE is development. */
+export declare function shouldWriteDistDev(config: Pick<PlauditWordpressWebpackConfig, 'outputDir' | 'useUnifiedLoader' | 'omitDistDev'>): boolean;
+/**
+ * This MUST be kept in sync with the copy in @plaudit/dev-webpack-plugin
+ * @returns true for `dist-dev` (or any `*-dev` output folder produced by {@link shouldWriteDistDev}).
+ */
+export declare function isDistDevOutputPath(outputPath: string): boolean;
 export declare function applyStandards(config: PlauditWordpressWebpackConfig): {
     readonly standard?: "2026-03-13";
     readonly standaloneBlocks?: boolean;
@@ -240,8 +244,6 @@ type _TupleOf<T, N extends number, R extends unknown[]> = R['length'] extends N
 export declare function arrayIsLength<T, N extends number>(arr: T[] | null | undefined, length: N): arr is TupleOf<T, N>;
 export declare function kebabCase(value: string): string;
 export declare function camelCaseForPHPLabels(value: string): string;
-export declare function loadEnvFile(filePath: string): Promise<Record<string, string>>;
-export declare function parseEnvFile(contents: string): Record<string, string>;
 export declare function newCleanWebpackError(error: string | ConstructorParameters<typeof WebpackError>): WebpackError;
 export declare function newWebpackErrorForFile(error: string | ConstructorParameters<typeof WebpackError>, file: string): WebpackError;
 /**

package/dist/shared.js

@@ -25,6 +25,8 @@ exports.isNormalizedUsageLocations = isNormalizedUsageLocations;
 exports.constantKeys = constantKeys;
 exports.constantEntries = constantEntries;
 exports.determineCurrentSourceType = determineCurrentSourceType;
+exports.shouldWriteDistDev = shouldWriteDistDev;
+exports.isDistDevOutputPath = isDistDevOutputPath;
 exports.applyStandards = applyStandards;
 exports.resolveStandard = resolveStandard;
 exports.convertUsageLocationsHandleToEmittableHandle = convertUsageLocationsHandleToEmittableHandle;
@@ -40,8 +42,6 @@ exports.hasAtLeastOneItem = hasAtLeastOneItem;
 exports.arrayIsLength = arrayIsLength;
 exports.kebabCase = kebabCase;
 exports.camelCaseForPHPLabels = camelCaseForPHPLabels;
-exports.loadEnvFile = loadEnvFile;
-exports.parseEnvFile = parseEnvFile;
 exports.newCleanWebpackError = newCleanWebpackError;
 exports.newWebpackErrorForFile = newWebpackErrorForFile;
 exports.emitResolveBaseUriFunction = emitResolveBaseUriFunction;
@@ -57,7 +57,6 @@ exports.instanceOfNodeError = instanceOfNodeError;
 exports.shouldBeSkipped = shouldBeSkipped;
 const node_crypto_1 = require("node:crypto");
 const node_fs_1 = require("node:fs");
-const promises_1 = require("node:fs/promises");
 const node_path_1 = __importDefault(require("node:path"));
 const php_writer_1 = require("@plaudit/php-writer");
 const expressions_1 = require("@plaudit/php-writer/expressions");
@@ -116,6 +115,17 @@ function determineCurrentSourceType(dest, srcIsDirectory) {
         return dest.directoryLayout;
     }
 }
+/** Unified-loader watch output: `dist` → `dist-dev` when SERVER_MODE is development. */
+function shouldWriteDistDev(config) {
+    return !!(config.outputDir && config.useUnifiedLoader && !config.omitDistDev && (process.env['SERVER_MODE'] ?? 'development') === 'development');
+}
+/**
+ * This MUST be kept in sync with the copy in @plaudit/dev-webpack-plugin
+ * @returns true for `dist-dev` (or any `*-dev` output folder produced by {@link shouldWriteDistDev}).
+ */
+function isDistDevOutputPath(outputPath) {
+    return node_path_1.default.basename(outputPath.replace(/[/\\]+$/, '')).endsWith('-dev');
+}
 function applyStandards(config) {
     switch (config.standard) {
         case '2026-03-13':
@@ -251,17 +261,6 @@ function camelCaseForPHPLabels(value) {
     })
         .join("\\");
 }
-async function loadEnvFile(filePath) {
-    return (0, promises_1.readFile)(filePath, 'utf-8').then(parseEnvFile, () => ({}));
-}
-function parseEnvFile(contents) {
-    return Object.fromEntries(contents.split(/(\r?\n)+/).map(line => line.trim())
-        .filter(line => line.length > 0 && !line.startsWith("#") && !line.startsWith("//"))
-        .map(line => {
-        const equalsPos = line.indexOf('=');
-        return equalsPos === -1 ? [line, ""] : [line.substring(0, equalsPos), line.substring(equalsPos + 1)];
-    }));
-}
 function newCleanWebpackError(error) {
     const res = typeof error === 'string' ? new webpack_1.WebpackError(error) : new webpack_1.WebpackError(...error);
     res.hideStack = true;

package/dist/utils/common-config-helpers.d.ts

@@ -1,6 +1,6 @@
 import type { AbstractBiPhasicGroupAndEntryPlugin, EntryProvider } from "../plugins/AbstractBiPhasicGroupAndEntryPlugin";
 import type { AdditionalDependencyInjectorPlugin } from "../plugins/AdditionalDependencyInjectorPlugin";
-import { EntrypointFields, PlauditWordpressWebpackConfig, BlockEntrypointInfo, VerifiedAdvancedOutputConfig, MinimumViableMetadata, WebpackPlugin } from "../shared";
+import { EntrypointFields, PlauditWordpressWebpackConfig, BlockEntrypointInfo, VerifiedAdvancedOutputConfig, MinimumViableMetadata } from "../shared";
 import type { Compiler, Configuration, DynamicEntryPlugin, WebpackPluginInstance } from "webpack";
 import type WebpackRemoveEmptyScriptsPlugin from "webpack-remove-empty-scripts";
 export type VerifiedPlauditWordpressWebpackConfig = Required<Omit<PlauditWordpressWebpackConfig, 'variables' | 'src' | 'externals' | 'standard'>> & {
@@ -8,7 +8,7 @@ export type VerifiedPlauditWordpressWebpackConfig = Required<Omit<PlauditWordpre
     currentVariables: Record<string, any>;
 } & Pick<PlauditWordpressWebpackConfig, 'externals'>;
 export type CommonPluginConfig = {
-    plugins: (WebpackPluginInstance | WebpackPlugin | ((this: Compiler, compiler: Compiler) => void))[];
+    plugins: (WebpackPluginInstance | ((this: Compiler, compiler: Compiler) => void))[];
     removeEmptyScriptsPlugin: WebpackRemoveEmptyScriptsPlugin;
     makeAdditionalDependencyInjectorPlugin(referencePlugin: AbstractBiPhasicGroupAndEntryPlugin<any>): AdditionalDependencyInjectorPlugin;
 };

package/dist/utils/common-config-helpers.js

@@ -417,10 +417,12 @@ function commonMakeWebpackConfig(config, commonConfig, webpackConfig, externaliz
         outputLibrary = webpackConfig.output?.library;
     }
     const extensions = processingModules ? ['.mjsx', '.mjs', '.mtsx', '.mts', '...'] : ['.jsx', '.tsx', '.ts', '...'];
+    // `dist` (SERVER_MODE=production, or omitDistDev) is always minified production. `dist-dev` follows NODE_ENV so `wp-scripts start` stays fast.
+    const isProductionBuild = !(0, shared_1.isDistDevOutputPath)(config.outputDir) || process.env['NODE_ENV'] === 'production';
     return {
         ...webpackConfig,
-        devtool: 'source-map',
-        mode: "production",
+        devtool: isProductionBuild ? 'source-map' : (webpackConfig.devtool ?? 'eval-cheap-module-source-map'),
+        mode: isProductionBuild ? 'production' : 'development',
         output: {
             ...webpackConfig.output,
             path: outPath,
@@ -431,6 +433,7 @@ function commonMakeWebpackConfig(config, commonConfig, webpackConfig, externaliz
         },
         optimization: {
             ...webpackConfig.optimization,
+            minimize: isProductionBuild,
             splitChunks: {
                 ...(webpackConfig.optimization?.splitChunks || {}),
                 cacheGroups: {
@@ -450,10 +453,12 @@ function commonMakeWebpackConfig(config, commonConfig, webpackConfig, externaliz
                     default: false
                 }
             },
-            minimizer: [
-                ...(webpackConfig.optimization?.minimizer || []),
-                new css_minimizer_webpack_plugin_1.default()
-            ]
+            minimizer: isProductionBuild
+                ? [
+                    ...(webpackConfig.optimization?.minimizer || []),
+                    new css_minimizer_webpack_plugin_1.default()
+                ]
+                : webpackConfig.optimization?.minimizer
         },
         module: {
             ...webpackConfig.module,

package/dist/wordpress-scripts-wrapper.js

@@ -10,7 +10,6 @@ const entrypoint_resolution_logic_1 = require("./utils/entrypoint-resolution-log
 const common_config_helpers_1 = require("./utils/common-config-helpers");
 const path_query_and_related_helpers_1 = require("./utils/path-query-and-related-helpers");
 const AdditionalDependencyInjectorPlugin_1 = require("./plugins/AdditionalDependencyInjectorPlugin");
-const BrowserSyncPlugin_1 = require("./plugins/BrowserSyncPlugin");
 const dependency_extraction_webpack_plugin_config_builder_1 = require("./plugins/dependency-extraction-webpack-plugin-config-builder");
 const EnhancedDynamicEntryPlugin_1 = require("./plugins/EnhancedDynamicEntryPlugin");
 const ExtensionsConfigFileGeneratorPlugin_1 = require("./plugins/ExtensionsConfigFileGeneratorPlugin");
@@ -149,7 +148,7 @@ function buildVerifiedConfig(config) {
     config = (0, shared_1.applyStandards)(config);
     const { standaloneBlocks = false, stats = 'errors-warnings', variables: rawVariables, verbose = process.argv.includes('--verbose') || process.env['VERBOSE'] === 'true', postcss = {}, externals, assumeGlobalizedPlauditLibraries = true, useWebpackResourceFiltering = true, plainEntrypointsVersion = 1, srcDir = "", useUnifiedLoader = false, includePostInitFallback = false, omitDistDev = false, onlyRunPostCSSOnPCSS = false, useBlockSupportsAsThemeJsonDefaults = true, } = config;
     let outputDir = config.outputDir ?? "";
-    if (outputDir && useUnifiedLoader && !omitDistDev && (process.env['SERVER_MODE'] ?? 'development') === 'development') {
+    if ((0, shared_1.shouldWriteDistDev)({ outputDir, useUnifiedLoader, omitDistDev })) {
         outputDir += "-dev";
     }
     let srcPrefixes;
@@ -348,34 +347,73 @@ function withDerivedOutputDir(cfg, sources) {
         })
     };
 }
+let forkTsCheckerInstalled = false;
+function isTypeScriptSourceFile(file) {
+    return /\.[cm]?tsx?$/i.test(file.split('?')[0] ?? '');
+}
+const prefixes = ['c', 'm', ''];
+const suffixes = ['x', ''];
+const tsExtensions = prefixes.map(prefix => prefix + "ts").flatMap(name => suffixes.map(suffix => name + suffix));
 function handleDisablingTSCheckerIfNecessary(srcRoot, scriptExtension, plugins) {
-    if (process.env["NO_TS_CHECKER"] !== "true") {
-        const include = (Array.isArray(srcRoot) ? srcRoot : [srcRoot])
-            .filter(sr => (0, node_path_1.extname)(sr).length === 0 || (0, shared_1.scriptOrStyleTest)(sr, scriptExtension) === "script")
-            .map(sr => (0, node_path_1.extname)(sr).length > 0 ? sr : (0, node_path_1.join)(sr, "**", "*"));
-        if (include.length > 0) {
-            plugins.push(new fork_ts_checker_webpack_plugin_1.default({
-                async: true,
-                typescript: {
-                    diagnosticOptions: {
-                        semantic: true,
-                        syntactic: true,
-                    },
-                    configOverwrite: {
-                        include,
-                        compilerOptions: {
-                            skipLibCheck: true
-                        }
-                    }
-                },
-                issue: {
-                    exclude(issue) {
-                        return issue.code === 'TS18003'; // This hides the "no TypeScript files found" error while still monitoring the directory
-                    }
-                }
-            }));
+    if (process.env["NO_TS_CHECKER"] === "true" || forkTsCheckerInstalled) {
+        return;
+    }
+    const include = [];
+    for (const sr of (Array.isArray(srcRoot) ? srcRoot : [srcRoot])) {
+        if ((0, node_path_1.extname)(sr).length === 0) {
+            include.push(...tsExtensions.map(tsExt => (0, node_path_1.join)(sr, "**", `*.${tsExt}`)));
+        }
+        else if ((0, shared_1.scriptOrStyleTest)(sr, scriptExtension) === "script") {
+            include.push(sr);
         }
     }
+    if (include.length === 0) {
+        return;
+    }
+    forkTsCheckerInstalled = true;
+    let logTsStatus = true;
+    plugins.push({
+        apply(compiler) {
+            compiler.hooks.watchRun.tap('PlauditForkTsCheckerCssQuiet', watchingCompiler => {
+                const changed = [
+                    ...(watchingCompiler.modifiedFiles ?? []),
+                    ...(watchingCompiler.removedFiles ?? [])
+                ];
+                logTsStatus = changed.length === 0 || changed.some(isTypeScriptSourceFile);
+            });
+        }
+    });
+    plugins.push(new fork_ts_checker_webpack_plugin_1.default({
+        async: true,
+        logger: {
+            log(message) {
+                if (!logTsStatus) {
+                    return;
+                }
+                console.log(message);
+            },
+            error(message) {
+                console.error(message);
+            }
+        },
+        typescript: {
+            diagnosticOptions: {
+                semantic: true,
+                syntactic: true,
+            },
+            configOverwrite: {
+                include,
+                compilerOptions: {
+                    skipLibCheck: true
+                }
+            }
+        },
+        issue: {
+            exclude(issue) {
+                return issue.code === 'TS18003';
+            }
+        }
+    }));
 }
 function buildCommonPluginConfig(webpackConfig, config, bundleAnalyzer, assumeGlobalizedPlauditLibraries, externalize) {
     const plugins = webpackConfig.plugins?.filter(v => !!v)
@@ -420,7 +458,13 @@ function buildCommonPluginConfig(webpackConfig, config, bundleAnalyzer, assumeGl
     }
     const builtDependencyExtractionWebpackPlugin = (0, dependency_extraction_webpack_plugin_config_builder_1.makeDependencyExtractionPlugin)(config.externals, assumeGlobalizedPlauditLibraries, externalize);
     plugins[dependencyExtractionPluginIndex] = builtDependencyExtractionWebpackPlugin;
-    plugins.push(new BrowserSyncPlugin_1.BrowserSyncPlugin());
+    if ((0, shared_1.isDistDevOutputPath)(config.outputDir)) {
+        try {
+            const { PlauditDevPlugin } = require("@plaudit/dev-webpack-plugin");
+            plugins.push(new PlauditDevPlugin());
+        }
+        catch { }
+    }
     return {
         plugins, removeEmptyScriptsPlugin,
         makeAdditionalDependencyInjectorPlugin(referencePlugin) {
@@ -467,7 +511,7 @@ function destToKey(dest) {
         : dest.externalize?.toString() ?? "undefined";
     return [dest.assumeGlobalizedPlauditLibraries, dest.bundleAnalyzer, externalize].join("~");
 }
-function processIndividualWebpackConfig(config, webpackConfig, sources, canClean) {
+function processIndividualWebpackConfig(config, webpackConfig, sources, canClean, preferNonModuleTsChecker) {
     if (webpackConfig.output?.module) {
         // This ensures that module files are emitted as module files
         webpackConfig = {
@@ -501,7 +545,9 @@ function processIndividualWebpackConfig(config, webpackConfig, sources, canClean
     return batches.map(currentBatch => {
         const { bundleAnalyzer, assumeGlobalizedPlauditLibraries, externalize } = currentBatch[0].dest;
         const { plugins, removeEmptyScriptsPlugin, makeAdditionalDependencyInjectorPlugin } = buildCommonPluginConfig(webpackConfig, config, bundleAnalyzer, assumeGlobalizedPlauditLibraries, externalize);
-        handleDisablingTSCheckerIfNecessary(currentBatch.flatMap(a => a.srcRoots), scriptExtension, plugins);
+        if (!processingModules || !preferNonModuleTsChecker) {
+            handleDisablingTSCheckerIfNecessary(currentBatch.flatMap(a => a.srcRoots), scriptExtension, plugins);
+        }
         const applicableExtensionTest = (name) => {
             return commonConfig.scriptExtension.test(name) || (!processingModules && shared_1.styleExtension.test(name));
         };
@@ -642,12 +688,13 @@ module.exports = function (config, webpackConfig = require("@wordpress/scripts/c
         webpackConfig = webpackConfig[0];
     }
     if (Array.isArray(webpackConfig)) {
+        const hasNonModuleCompiler = webpackConfig.some(cfg => !cfg.output?.module);
         return webpackConfig.toSorted((a, b) => {
             if (a.output?.module) {
                 return b.output?.module ? 0 : -1;
             }
             return b.output?.module ? 1 : 0;
-        }).flatMap(wpCfg => processIndividualWebpackConfig(cfg, wpCfg, sources, false));
+        }).flatMap(wpCfg => processIndividualWebpackConfig(cfg, wpCfg, sources, false, hasNonModuleCompiler));
     }
-    return processIndividualWebpackConfig(cfg, webpackConfig, sources, true);
+    return processIndividualWebpackConfig(cfg, webpackConfig, sources, true, false);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "license": "SEE LICENSE IN LICENSE.md",
   "repository": {
     "type": "git",
@@ -32,8 +32,8 @@
     }
   },
   "devDependencies": {
+    "@plaudit/dev-webpack-plugin": "^1.0.1",
     "@plaudit/gutenberg-api-extensions": "^2.98.2",
-    "@types/browser-sync-webpack-plugin": "^2.2.5",
     "@types/jsdom": "^28.0.3",
     "@types/node": "^25.9.5",
     "@types/postcss-functions": "^4.0.4",
@@ -61,7 +61,6 @@
     "@wordpress/dependency-extraction-webpack-plugin": "^6.53.0",
     "@wordpress/scripts": "^32.6.0",
     "autoprefixer": "^10.5.4",
-    "browser-sync": "^3.0.4",
     "copy-webpack-plugin": "10.2.4",
     "css-minimizer-webpack-plugin": "^8.0.0",
     "cssnano": "^7.1.9",
@@ -83,6 +82,14 @@
     "webpack-remove-empty-scripts": "^1.1.1",
     "xml-formatter": "^3.7.0"
   },
+  "peerDependencies": {
+    "@plaudit/dev-webpack-plugin": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@plaudit/dev-webpack-plugin": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=20"
   },

package/dist/plugins/BrowserSyncPlugin.d.ts

@@ -1,25 +0,0 @@
-import { type WebpackPlugin } from "../shared";
-import browserSync, { type BrowserSyncInstance } from "browser-sync";
-import type { Compiler } from "webpack";
-export type PluginOptions = {
-    reload: boolean;
-    name: string;
-    callback?: (err: Error, bs: BrowserSyncInstance) => any;
-    injectCss: boolean;
-    middlewareBuilder?: (options: browserSync.Options) => browserSync.Options['middleware'];
-};
-export declare class BrowserSyncPlugin implements WebpackPlugin {
-    private static isBrowserSyncRunning;
-    private static browserSyncPluginOptions?;
-    private readonly pluginOptions;
-    private readonly browserSyncInstance;
-    private isWebpackWatching;
-    private mostRecentChunkHashes;
-    private shouldNotify;
-    constructor(pluginOptions?: Partial<PluginOptions>);
-    private static getBrowserSyncPluginOptions;
-    private static findEnvFile;
-    apply(compiler: Compiler): void;
-    private getCssOnlyEmittedAssetsNames;
-    private static getSiteUrls;
-}

package/dist/plugins/BrowserSyncPlugin.js

@@ -1,212 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BrowserSyncPlugin = void 0;
-const node_child_process_1 = __importDefault(require("node:child_process"));
-const node_fs_1 = __importDefault(require("node:fs"));
-const node_path_1 = __importDefault(require("node:path"));
-const shared_1 = require("../shared");
-const browser_sync_1 = __importDefault(require("browser-sync"));
-const http_proxy_middleware_1 = require("http-proxy-middleware");
-class BrowserSyncPlugin {
-    static isBrowserSyncRunning = false;
-    static browserSyncPluginOptions;
-    pluginOptions;
-    browserSyncInstance;
-    isWebpackWatching = false;
-    mostRecentChunkHashes = {};
-    shouldNotify = false;
-    constructor(pluginOptions) {
-        this.pluginOptions = { reload: true, name: "plaudit-bs-plugin", injectCss: true, ...pluginOptions };
-        this.browserSyncInstance = browser_sync_1.default.has(this.pluginOptions.name) ? browser_sync_1.default.get(this.pluginOptions.name) : browser_sync_1.default.create(this.pluginOptions.name);
-    }
-    static getBrowserSyncPluginOptions() {
-        return BrowserSyncPlugin.browserSyncPluginOptions ?? (BrowserSyncPlugin.browserSyncPluginOptions = new Promise(async (resolve) => {
-            const envFilePath = BrowserSyncPlugin.findEnvFile();
-            const envFile = envFilePath ? await (0, shared_1.loadEnvFile)(envFilePath) : {};
-            const prefixes = BrowserSyncPlugin.getSiteUrls();
-            const targetPort = envFile["WEB_PORT_SSL"]?.match(/^\d+$/) ? envFile["WEB_PORT_SSL"] : "8443";
-            const targetHost = targetPort === "443" ? "localhost" : `localhost:${targetPort}`;
-            if (prefixes.length === 0 || prefixes.every(prefix => prefix.startsWith("localhost"))) {
-                resolve([{
-                        host: 'localhost',
-                        port: 3000,
-                        https: true,
-                        proxy: `https://${targetHost}`
-                    }, {}]);
-            }
-            else {
-                resolve([{
-                        port: 3000,
-                        listen: "0.0.0.0",
-                        https: true,
-                        open: false,
-                        callbacks: {
-                            ready(err, bsi) {
-                                // This ensures that the opened URL is actually a valid one
-                                import("open").then(open => open.default(`https://${prefixes[0]?.replace(/:\d{2,4}/, "")}:${bsi.getOption("port") ?? 3000}`));
-                            }
-                        }
-                    }, {
-                        middlewareBuilder: (options) => {
-                            const proxyPort = options.port?.toString() ?? "3000";
-                            const router = prefixes.reduce((router, prefix) => {
-                                router[`${prefix}:${proxyPort}`] = {
-                                    protocol: 'https:',
-                                    slashes: true,
-                                    auth: null,
-                                    host: prefix,
-                                    port: targetPort,
-                                    hostname: targetHost,
-                                    hash: null,
-                                    search: null,
-                                    query: null,
-                                    pathname: '/',
-                                    path: '/',
-                                    href: `https://${targetHost}/`
-                                };
-                                return router;
-                            }, {});
-                            const portInjectionPattern = new RegExp(`(${prefixes.join('|')})(?!:3000)`, "gi");
-                            return (0, http_proxy_middleware_1.createProxyMiddleware)({
-                                changeOrigin: true, router, secure: false, xfwd: true, selfHandleResponse: true, target: `https://${targetHost}`,
-                                on: {
-                                    proxyRes: (0, http_proxy_middleware_1.responseInterceptor)(async (responseBuffer, proxyRes) => {
-                                        const contentType = proxyRes.headers["content-type"];
-                                        if (contentType && (contentType.startsWith("text/") || contentType === "application/x-javascript")) {
-                                            return responseBuffer.toString('utf-8').replaceAll(portInjectionPattern, "$1:3000");
-                                        }
-                                        return responseBuffer;
-                                    })
-                                }
-                            });
-                        }
-                    }]);
-            }
-        }));
-    }
-    static findEnvFile() {
-        for (let envFileHolderPath = process.cwd(); envFileHolderPath.length > 5; envFileHolderPath = node_path_1.default.dirname(envFileHolderPath)) {
-            if (node_fs_1.default.existsSync(node_path_1.default.join(envFileHolderPath, ".env"))) {
-                return node_path_1.default.join(envFileHolderPath, ".env");
-            }
-        }
-        return undefined;
-    }
-    apply(compiler) {
-        if (!process.argv.includes('--browser-sync') && process.env['BROWSER_SYNC'] !== 'true') {
-            return;
-        }
-        let devTarget = process.env['DEV_TARGET'] ?? process.argv.find(a => a.startsWith("--dev-target="))?.substring(13);
-        if (devTarget === undefined) {
-            const flagIndex = process.argv.findIndex(a => a === "--dev-target");
-            if (flagIndex > -1) {
-                devTarget = process.argv[flagIndex + 1];
-            }
-        }
-        if (devTarget !== undefined && devTarget !== node_path_1.default.basename(process.cwd()) && !(devTarget === "theme" && node_fs_1.default.existsSync(node_path_1.default.join(process.cwd(), "style.css")))) {
-            return;
-        }
-        compiler.hooks.watchRun.tap(BrowserSyncPlugin.name, () => {
-            this.isWebpackWatching = true;
-        });
-        compiler.hooks.compilation.tap(BrowserSyncPlugin.name, () => {
-            if (BrowserSyncPlugin.isBrowserSyncRunning && this.shouldNotify) {
-                this.browserSyncInstance.notify('Rebuilding...');
-            }
-        });
-        compiler.hooks.done.tapPromise(BrowserSyncPlugin.name, async (stats) => {
-            if (!this.isWebpackWatching) {
-                return;
-            }
-            if (!BrowserSyncPlugin.isBrowserSyncRunning) {
-                const [browserSyncOptions, pluginOptions] = await BrowserSyncPlugin.getBrowserSyncPluginOptions();
-                const actualPluginOptions = { ...this.pluginOptions, ...pluginOptions };
-                const middleware = actualPluginOptions.middlewareBuilder?.(browserSyncOptions);
-                this.browserSyncInstance.init(middleware
-                    ? { ...browserSyncOptions, server: { middleware: Array.isArray(middleware) ? middleware : [middleware] } }
-                    : browserSyncOptions, this.pluginOptions.callback);
-                if (browserSyncOptions.notify) {
-                    this.shouldNotify = true;
-                }
-                BrowserSyncPlugin.isBrowserSyncRunning = true;
-            }
-            if (this.pluginOptions.reload) {
-                if (this.pluginOptions.injectCss) {
-                    const cssOnlyEmittedAssets = this.getCssOnlyEmittedAssetsNames(stats);
-                    if (cssOnlyEmittedAssets !== undefined) {
-                        this.browserSyncInstance.reload(cssOnlyEmittedAssets);
-                        return;
-                    }
-                }
-                this.browserSyncInstance.reload();
-            }
-        });
-    }
-    getCssOnlyEmittedAssetsNames(stats) {
-        const compiledStats = stats.compilation.getStats().toJson({
-            hash: true,
-            publicPath: true,
-            assets: true,
-            chunks: true,
-            modules: false,
-            source: false,
-            errorDetails: false,
-            timings: false
-        });
-        const chunks = compiledStats.chunks
-            ?.filter((chunk) => chunk.names !== undefined && chunk.files !== undefined);
-        if (!chunks) {
-            return undefined;
-        }
-        const mostRecentChunkHashes = this.mostRecentChunkHashes;
-        this.mostRecentChunkHashes = Object.fromEntries(chunks.flatMap(chunk => chunk.names.map(cn => [cn, chunk.hash])));
-        if (Object.keys(mostRecentChunkHashes).length !== chunks.length) {
-            return undefined;
-        }
-        const changedFilenames = chunks
-            .filter(chunk => chunk.names.some(name => mostRecentChunkHashes[name] !== chunk.hash))
-            .flatMap(chunk => [...chunk.files, ...(chunk.auxiliaryFiles ?? [])])
-            .filter(filename => !filename.endsWith(".asset.php"));
-        if (changedFilenames.length === 0) {
-            return undefined;
-        }
-        for (const filename of changedFilenames) {
-            if (!filename.includes(".css")) {
-                return undefined;
-            }
-        }
-        return changedFilenames;
-    }
-    static getSiteUrls() {
-        //docker container inspect "$(docker compose ps --format=json | jq '. | select(. | contains({"Service": "wordpress"})) | .ID' -r)" | jq '.[].Config.Env'
-        const serviceId = node_child_process_1.default.spawnSync("docker", ["compose", "ps", "--format=json"], { encoding: "utf-8", stdio: ["ignore", "pipe", "inherit"] })
-            .stdout.trim().split("\n").map(item => JSON.parse(item.trim())).find(item => item.Service === "wordpress")?.ID;
-        if (serviceId === undefined) {
-            return ["localhost"]; // This will only happen for Tomcat or misconfigured containers, both of which should use localhost
-        }
-        const inspectionResult = node_child_process_1.default.spawnSync("docker", ["container", "inspect", "--format=json", serviceId], { encoding: "utf-8", stdio: ["ignore", "pipe", "inherit"] })
-            .stdout.trim();
-        const containerEnv = Object.fromEntries(JSON.parse(inspectionResult)[0]?.Config.Env.map((envEntry) => {
-            const equalSignIndex = envEntry.indexOf('=');
-            return [envEntry.substring(0, equalSignIndex), envEntry.substring(equalSignIndex + 1)];
-        }));
-        if (containerEnv['WORDPRESS_MAPPED_DOMAINS'] !== '1') {
-            return ["localhost:8443"]; //This will only happen for legacy WordPress sites
-        }
-        let siteUrls;
-        const multisiteUrlsProcess = node_child_process_1.default.spawnSync("docker", ["compose", "exec", "--user=www-data", "wordpress", "wp", "site", "list", "--field=url", "--quiet"], { encoding: "utf-8", stdio: ["ignore", "pipe", "ignore"] }); // We're forced to mute stderr here because it is otherwise almost guaranteed to print
-        if (!multisiteUrlsProcess.error && !multisiteUrlsProcess.status && !multisiteUrlsProcess.signal) {
-            siteUrls = multisiteUrlsProcess.stdout.split("\n").map(line => line.trim()).filter(line => line.length > 0);
-        }
-        else {
-            siteUrls = [node_child_process_1.default.spawnSync("docker", ["compose", "exec", "--user=www-data", "wordpress", "wp", "option", "get", "siteurl"], { encoding: "utf-8", stdio: ["ignore", "pipe", "inherit"] }).stdout.trim()];
-        }
-        // Because mapped domain sites that are using my mapping scheme hyphenate instances of "www.", this is an effective test for whether it is in use.
-        // If the URL still has the "www.", then it is using David's mapping scheme and should be accessed via localhost
-        return siteUrls.map(siteUrl => siteUrl.includes("www.") ? "localhost" : siteUrl).map(siteUrl => siteUrl.replace(/^https?:\/\//i, ""));
-    }
-}
-exports.BrowserSyncPlugin = BrowserSyncPlugin;