@plaudit/webpack-extensions 2.15.1 → 2.17.0

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

@@ -5,15 +5,20 @@ 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;
-    private readonly browserSyncOptions;
+    private static browserSyncPluginOptions;
+    private static envFileContents;
     private readonly pluginOptions;
     private readonly browserSyncInstance;
     private isWebpackWatching;
     private mostRecentChunkHashes;
-    constructor(browserSyncOptions: browserSync.Options, pluginOptions?: Partial<PluginOptions>);
+    private shouldNotify;
+    constructor(pluginOptions?: Partial<PluginOptions>);
+    private static getBrowserSyncPluginOptions;
+    private static loadEnvFile;
     apply(compiler: Compiler): void;
     private getCssOnlyEmittedAssetsNames;
 }

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

@@ -4,34 +4,125 @@ var __importDefault = (this && this.__importDefault) || function (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 browser_sync_1 = __importDefault(require("browser-sync"));
+const http_proxy_middleware_1 = require("http-proxy-middleware");
+const open_1 = __importDefault(require("open"));
 class BrowserSyncPlugin {
     static isBrowserSyncRunning = false;
-    browserSyncOptions;
+    static browserSyncPluginOptions = undefined;
+    static envFileContents = undefined;
     pluginOptions;
     browserSyncInstance;
     isWebpackWatching = false;
     mostRecentChunkHashes = {};
-    constructor(browserSyncOptions, pluginOptions) {
-        this.browserSyncOptions = { ...browserSyncOptions };
+    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(resolve => {
+            const envFile = BrowserSyncPlugin.loadEnvFile();
+            const prefixes = node_child_process_1.default.spawnSync("theapp", ["info", "--for-browsersync"], {
+                encoding: "utf-8",
+                stdio: ["ignore", "pipe", "inherit"]
+            }).stdout.split(/\r?\n/g).map(url => url.trim()).filter(url => url.length > 0).map(url => url.substring(url.indexOf("://") + 3));
+            const targetPort = envFile.match(/WEB_PORT_SSL=(\d+)/i)?.[1] ?? "8443";
+            const targetHost = targetPort === "443" ? "localhost" : `localhost:${targetPort}`;
+            if (prefixes.length === 0) {
+                resolve([{
+                        host: 'localhost',
+                        port: 3000,
+                        https: true,
+                        proxy: `https://${targetHost}`
+                    }, {}]);
+            }
+            else {
+                resolve([{
+                        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]}:${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,
+                                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 loadEnvFile() {
+        if (BrowserSyncPlugin.envFileContents !== undefined) {
+            return BrowserSyncPlugin.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 BrowserSyncPlugin.envFileContents = node_fs_1.default.readFileSync(node_path_1.default.join(envFileHolderPath, ".env"), { encoding: 'utf8' });
+            }
+        }
+        return "";
+    }
     apply(compiler) {
         compiler.hooks.watchRun.tap(BrowserSyncPlugin.name, () => {
             this.isWebpackWatching = true;
         });
         compiler.hooks.compilation.tap(BrowserSyncPlugin.name, () => {
-            if (BrowserSyncPlugin.isBrowserSyncRunning && this.browserSyncOptions.notify) {
+            if (BrowserSyncPlugin.isBrowserSyncRunning && this.shouldNotify) {
                 this.browserSyncInstance.notify('Rebuilding...');
             }
         });
-        compiler.hooks.done.tap(BrowserSyncPlugin.name, stats => {
+        compiler.hooks.done.tapPromise(BrowserSyncPlugin.name, async (stats) => {
             if (!this.isWebpackWatching) {
                 return;
             }
             if (!BrowserSyncPlugin.isBrowserSyncRunning) {
-                this.browserSyncInstance.init(this.browserSyncOptions, this.pluginOptions.callback);
+                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) {

package/build/wordpress-scripts-wrapper.js

@@ -25,18 +25,6 @@ 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;
 }
@@ -260,13 +248,7 @@ 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}`
-            }));
+            plugins.push(new BrowserSyncPlugin_1.BrowserSyncPlugin());
         }
         let entry;
         if (srcIsDirectory) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "2.15.1",
+  "version": "2.17.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"
   }
 }