@plaudit/webpack-extensions 2.15.1 → 2.16.0

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

@@ -5,6 +5,7 @@ export type PluginOptions = {
     name: string;
     callback?: (err: Error, bs: BrowserSyncInstance) => any;
     injectCss: boolean;
+    middlewareBuilder?: (options: browserSync.Options) => browserSync.Options['middleware'];
 };
 export declare class BrowserSyncPlugin implements WebpackPluginInstance {
     private static isBrowserSyncRunning;

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

@@ -31,7 +31,10 @@ class BrowserSyncPlugin {
                 return;
             }
             if (!BrowserSyncPlugin.isBrowserSyncRunning) {
-                this.browserSyncInstance.init(this.browserSyncOptions, this.pluginOptions.callback);
+                const middleware = this.pluginOptions.middlewareBuilder?.(this.browserSyncOptions);
+                this.browserSyncInstance.init(middleware
+                    ? { ...this.browserSyncOptions, server: { middleware: Array.isArray(middleware) ? middleware : [middleware] } }
+                    : this.browserSyncOptions, this.pluginOptions.callback);
                 BrowserSyncPlugin.isBrowserSyncRunning = true;
             }
             if (this.pluginOptions.reload) {

package/build/wordpress-scripts-wrapper.js

@@ -12,6 +12,8 @@ const BrowserSyncPlugin_1 = require("./wordpress-scripts-wrapper/BrowserSyncPlug
 const static_configs_1 = require("./wordpress-scripts-wrapper/static-configs");
 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 http_proxy_middleware_1 = require("http-proxy-middleware");
+const open_1 = __importDefault(require("open"));
 const webpack_remove_empty_scripts_1 = __importDefault(require("webpack-remove-empty-scripts"));
 function joinPossiblyAbsolutePaths(...paths) {
     return paths.reduce((res, p) => !res || node_path_1.default.isAbsolute(p) ? p : node_path_1.default.join(res, p), '') || '.';
@@ -260,13 +262,53 @@ module.exports = function (config, webpackConfig = require("@wordpress/scripts/c
             plugins.push(new ExtensionsConfigFileGeneratorPlugin_1.default(srcRoot));
         }
         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}`
-            }));
+            const envFile = loadEnvFile();
+            const prefixes = envFile.match(/WORDPRESS_SITES=([^\r\n]+)/i)?.[1]?.split(/\s*,\s*/gi).map(domain => domain + ".");
+            const targetPort = envFile.match(/WEB_PORT_SSL=(\d+)/i)?.[1] ?? "8443";
+            const targetHost = targetPort === "443" ? "localhost" : `localhost:${targetPort}`;
+            if (prefixes === undefined) {
+                plugins.push(new BrowserSyncPlugin_1.BrowserSyncPlugin({
+                    host: 'localhost',
+                    port: 3000,
+                    https: true,
+                    proxy: `https://${targetHost}`
+                }));
+            }
+            else {
+                plugins.push(new BrowserSyncPlugin_1.BrowserSyncPlugin({
+                    port: 3000,
+                    https: true,
+                    open: false,
+                    callbacks: {
+                        ready(err, bsi) {
+                            // This ensures that the opened URL is actually a valid one
+                            (0, open_1.default)(`https://${prefixes[0]}localhost:${bsi.getOption("port") ?? 3000}`);
+                        }
+                    }
+                }, {
+                    middlewareBuilder: (options) => {
+                        const proxyPort = options.port?.toString() ?? "3000";
+                        const router = prefixes.reduce((router, prefix) => {
+                            router[`${prefix}localhost:${proxyPort}`] = {
+                                protocol: 'https:',
+                                slashes: true,
+                                auth: null,
+                                host: `${prefix}localhost`,
+                                port: targetPort,
+                                hostname: targetHost,
+                                hash: null,
+                                search: null,
+                                query: null,
+                                pathname: '/',
+                                path: '/',
+                                href: `https://${targetHost}/`
+                            };
+                            return router;
+                        }, {});
+                        return (0, http_proxy_middleware_1.createProxyMiddleware)({ changeOrigin: true, router, secure: false, xfwd: true });
+                    }
+                }));
+            }
         }
         let entry;
         if (srcIsDirectory) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "2.15.1",
+  "version": "2.16.0",
   "scripts": {
     "prepublishOnly": "rm -rf build && mkdir build && tsc",
     "build": "tsc",
@@ -18,36 +18,37 @@
     }
   },
   "devDependencies": {
-    "@types/browser-sync-webpack-plugin": "^2.2.3",
-    "@types/node": "^20.11.20",
+    "@types/browser-sync-webpack-plugin": "^2.2.5",
+    "@types/node": "^20.11.30",
     "@types/tapable": "^2.2.7",
     "@types/webpack": "^5.28.5",
     "@types/webpack-sources": "^3.2.3",
     "postcss-load-config": "^4.0.2",
     "postcss-loader": "^7.3.4",
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.3"
   },
   "dependencies": {
     "@plaudit/postcss-color-function": "^5.0.0",
     "@plaudit/postcss-silent-extend": "^3.0.0",
     "@plaudit/postcss-strip-units": "^3.0.0",
     "@plaudit/postcss-variables": "^1.0.0",
-    "@wordpress/scripts": "^27.3.0",
-    "autoprefixer": "^10.4.17",
+    "@wordpress/scripts": "^27.5.0",
+    "autoprefixer": "^10.4.18",
     "browser-sync": "^3.0.2",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^12.0.2",
-    "cssnano": "^6.0.5",
+    "cssnano": "^6.1.1",
     "eslint": "^8.57.0",
-    "eslint-plugin-jsdoc": "^48.2.0",
+    "eslint-plugin-jsdoc": "^48.2.1",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
-    "postcss": "^8.4.35",
+	"http-proxy-middleware": "^3.0.0-beta.1",
+    "postcss": "^8.4.38",
     "postcss-calc": "^9.0.1",
-    "postcss-discard-comments": "^6.0.1",
+    "postcss-discard-comments": "^6.0.2",
     "postcss-fallback": "^0.1.0",
     "postcss-functions": "^4.0.2",
-    "postcss-import": "^16.0.1",
+    "postcss-import": "^16.1.0",
     "postcss-inline-svg": "^6.0.0",
     "postcss-media-minmax": "^5.0.0",
     "postcss-mixins": "6.2.3",
@@ -62,7 +63,7 @@
     "postcss-url": "^10.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "webpack": "^5.90.3",
+    "webpack": "^5.91.0",
     "webpack-remove-empty-scripts": "^1.0.4"
   }
 }