@plaudit/webpack-extensions 2.11.2 → 2.12.0

package/build/wordpress-scripts-wrapper/AdditionalDependencyInjectorPlugin.js

@@ -44,9 +44,14 @@ class AdditionalDependencyInjectorPlugin {
                             const seen = new Set();
                             const additionalDeps = additionalDependencies.filter(dep => !seen.has(dep) && seen.add(dep)).sort().map(v => `'${v}'`).join(', ');
                             if (additionalDeps.length > 0) {
-                                compilation.updateAsset(name, new webpack_1.sources.RawSource(asset.source().toString().replace(/('dependencies'\s+=>\s+(?:array\(|\[))(.*)([)\]], 'version')/g, (match, g1, g2, g3) => `${g1}${g2.length > 0 ? `${g2}, ${additionalDeps}` : additionalDeps}${g3}`)));
+                                compilation.updateAsset(name, new webpack_1.sources.RawSource(asset.source().toString()
+                                    .replaceAll(/(?:, )?'wp-[^']+\/[^']+'/gi, '')
+                                    .replace(/('dependencies'\s+=>\s+(?:array\(|\[))(.*)([)\]], 'version')/g, (match, g1, g2, g3) => `${g1}${g2.length > 0 ? `${g2}, ${additionalDeps}` : additionalDeps}${g3}`)));
+                                continue;
                             }
                         }
+                        compilation.updateAsset(name, new webpack_1.sources.RawSource(asset.source().toString()
+                            .replaceAll(/(?:, )?'wp-[^']+\/[^']+'/gi, '')));
                     }
                 }
             });

package/build/wordpress-scripts-wrapper/BrowserSyncPlugin.d.ts

@@ -0,0 +1,19 @@
+import browserSync, { type BrowserSyncInstance } from "browser-sync";
+import type { Compiler, WebpackPluginInstance } from "webpack";
+export type PluginOptions = {
+    reload: boolean;
+    name: string;
+    callback?: (err: Error, bs: BrowserSyncInstance) => any;
+    injectCss: boolean;
+};
+export declare class BrowserSyncPlugin implements WebpackPluginInstance {
+    private static isBrowserSyncRunning;
+    private readonly browserSyncOptions;
+    private readonly pluginOptions;
+    private readonly browserSyncInstance;
+    private isWebpackWatching;
+    private mostRecentChunkHashes;
+    constructor(browserSyncOptions: browserSync.Options, pluginOptions?: Partial<PluginOptions>);
+    apply(compiler: Compiler): void;
+    private getCssOnlyEmittedAssetsNames;
+}

package/build/wordpress-scripts-wrapper/BrowserSyncPlugin.js

@@ -0,0 +1,85 @@
+"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 browser_sync_1 = __importDefault(require("browser-sync"));
+class BrowserSyncPlugin {
+    static isBrowserSyncRunning = false;
+    browserSyncOptions;
+    pluginOptions;
+    browserSyncInstance;
+    isWebpackWatching = false;
+    mostRecentChunkHashes = {};
+    constructor(browserSyncOptions, pluginOptions) {
+        this.browserSyncOptions = { ...browserSyncOptions };
+        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);
+    }
+    apply(compiler) {
+        compiler.hooks.watchRun.tap(BrowserSyncPlugin.name, () => {
+            this.isWebpackWatching = true;
+        });
+        compiler.hooks.compilation.tap(BrowserSyncPlugin.name, () => {
+            if (BrowserSyncPlugin.isBrowserSyncRunning && this.browserSyncOptions.notify) {
+                this.browserSyncInstance.notify('Rebuilding...');
+            }
+        });
+        compiler.hooks.done.tap(BrowserSyncPlugin.name, stats => {
+            if (!this.isWebpackWatching) {
+                return;
+            }
+            if (!BrowserSyncPlugin.isBrowserSyncRunning) {
+                this.browserSyncInstance.init(this.browserSyncOptions, this.pluginOptions.callback);
+                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;
+    }
+}
+exports.BrowserSyncPlugin = BrowserSyncPlugin;

package/build/wordpress-scripts-wrapper.js

@@ -8,8 +8,8 @@ const AdditionalDependencyInjectorPlugin_1 = __importDefault(require("./wordpres
 const BlockJSONStyleRemappingPlugin_1 = __importDefault(require("./wordpress-scripts-wrapper/BlockJSONStyleRemappingPlugin"));
 const ExtensionsConfigFileGeneratorPlugin_1 = __importDefault(require("./wordpress-scripts-wrapper/ExtensionsConfigFileGeneratorPlugin"));
 const VariablesJSMonitorPlugin_1 = __importDefault(require("./wordpress-scripts-wrapper/VariablesJSMonitorPlugin"));
+const BrowserSyncPlugin_1 = require("./wordpress-scripts-wrapper/BrowserSyncPlugin");
 const static_configs_1 = require("./wordpress-scripts-wrapper/static-configs");
-const browser_sync_webpack_plugin_1 = __importDefault(require("browser-sync-webpack-plugin"));
 const copy_webpack_plugin_1 = __importDefault(require("copy-webpack-plugin"));
 const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
 const webpack_remove_empty_scripts_1 = __importDefault(require("webpack-remove-empty-scripts"));
@@ -25,6 +25,18 @@ function mapToRealEntrypoints(entrypoint, dir, mapper = (entrypoint) => entrypoi
         return [joinPossiblyAbsolutePaths(node_path_1.default.basename(parsedEntrypoint.dir), parsedEntrypoint.name), { import: ep }];
     });
 }
+let envFileContents = undefined;
+function loadEnvFile() {
+    if (envFileContents !== undefined) {
+        return envFileContents;
+    }
+    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 envFileContents = node_fs_1.default.readFileSync(node_path_1.default.join(envFileHolderPath, ".env"), { encoding: 'utf8' });
+        }
+    }
+    return "";
+}
 function isTruthy(value) {
     return !!value;
 }
@@ -47,7 +59,7 @@ function resolveLegacyBlockScriptsInFolder(folder) {
         const fullBlockDir = node_path_1.default.join(folder, blockDir);
         const packageJSON = node_path_1.default.join(fullBlockDir, 'package.json');
         if (node_fs_1.default.existsSync(packageJSON)) {
-            const main = JSON.parse(node_fs_1.default.readFileSync(packageJSON, 'utf-8'))['main'];
+            const main = JSON.parse(node_fs_1.default.readFileSync(packageJSON, 'utf8'))['main'];
             if (main && node_fs_1.default.existsSync(node_path_1.default.join(fullBlockDir, main))) {
                 blockScriptEntrypoints.push(node_path_1.default.join(fullBlockDir, main));
             }
@@ -201,7 +213,6 @@ module.exports = function (config, webpackConfig = require("@wordpress/scripts/c
     }
     disableDefaultURLProcessing(webpackConfig);
     injectPostcssConfigOverrides(webpackConfig, name => currentVariables[name], verbose);
-    let first = true;
     const sources = Array.isArray(config.src) ? config.src.map(s => [s, s]) : Object.entries(config.src);
     return sources.map(([src, dest]) => {
         const srcRoots = typeof dest !== 'string' && dest.withLegacyBlocksIn
@@ -213,15 +224,26 @@ module.exports = function (config, webpackConfig = require("@wordpress/scripts/c
         const copyFiles = srcIsDirectory && src !== dest;
         const plugins = webpackConfig.plugins?.filter(isTruthy) ?? [];
         if (process.env["NO_TS_CHECKER"] !== "true") {
-            plugins.push(new fork_ts_checker_webpack_plugin_1.default({
-                async: true,
-                typescript: {
-                    diagnosticOptions: {
-                        semantic: true,
-                        syntactic: true,
+            const include = (Array.isArray(srcRoot) ? srcRoot : [srcRoot])
+                .filter(sr => node_path_1.default.extname(sr).length === 0 || scriptOrStyleTest(sr) === "script")
+                .map(sr => node_path_1.default.extname(sr).length > 0 ? sr : node_path_1.default.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
+                            }
+                        }
                     }
-                }
-            }));
+                }));
+            }
         }
         plugins.push(new webpack_remove_empty_scripts_1.default({
             stage: webpack_remove_empty_scripts_1.default.STAGE_AFTER_PROCESS_PLUGINS,
@@ -237,16 +259,14 @@ module.exports = function (config, webpackConfig = require("@wordpress/scripts/c
         if (srcIsDirectory && (typeof dest !== 'string' && dest.directoryLayout === 'extensions')) {
             plugins.push(new ExtensionsConfigFileGeneratorPlugin_1.default(srcRoot));
         }
-        if (first) {
-            first = false;
-            if (process.argv.includes('--browser-sync') || process.env['BROWSER_SYNC'] === 'true') {
-                plugins.push(new browser_sync_webpack_plugin_1.default({
-                    host: 'localhost',
-                    port: 3000,
-                    https: true,
-                    proxy: 'https://localhost:8443'
-                }));
-            }
+        if (process.argv.includes('--browser-sync') || process.env['BROWSER_SYNC'] === 'true') {
+            const port = loadEnvFile().match(/WEB_PORT_SSL=(\d+)/i)?.[1] ?? "8443";
+            plugins.push(new BrowserSyncPlugin_1.BrowserSyncPlugin({
+                host: 'localhost',
+                port: 3000,
+                https: true,
+                proxy: port === "443" ? "https://localhost" : `https://localhost:${port}`
+            }));
         }
         let entry;
         if (srcIsDirectory) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "2.11.2",
+  "version": "2.12.0",
   "scripts": {
     "prepublishOnly": "rm -rf build && mkdir build && tsc",
     "build": "tsc",
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@types/browser-sync-webpack-plugin": "^2.2.3",
-    "@types/node": "^20.10.6",
+    "@types/node": "^20.11.17",
     "@types/tapable": "^2.2.7",
     "@types/webpack": "^5.28.5",
     "@types/webpack-sources": "^3.2.3",
@@ -35,14 +35,13 @@
     "@plaudit/postcss-variables": "^1.0.0",
     "@wordpress/scripts": "^27.1.0",
     "autoprefixer": "^10.4.17",
-    "browser-sync": "^2.29.3",
-    "browser-sync-webpack-plugin": "^2.3.0",
+    "browser-sync": "^3.0.2",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "cssnano": "^6.0.3",
     "eslint": "^8.56.0",
     "eslint-plugin-jsdoc": "^48.0.4",
-    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
     "postcss": "^8.4.33",
     "postcss-calc": "^9.0.1",
     "postcss-discard-comments": "^6.0.1",
@@ -63,7 +62,7 @@
     "postcss-url": "^10.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "webpack": "^5.90.0",
+    "webpack": "^5.90.1",
     "webpack-remove-empty-scripts": "^1.0.4"
   }
 }