@plaudit/webpack-extensions 2.16.0 → 2.18.0

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

@@ -9,12 +9,16 @@ export type PluginOptions = {
 };
 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,37 +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) {
-                const middleware = this.pluginOptions.middlewareBuilder?.(this.browserSyncOptions);
+                const [browserSyncOptions, pluginOptions] = await BrowserSyncPlugin.getBrowserSyncPluginOptions();
+                const actualPluginOptions = { ...this.pluginOptions, ...pluginOptions };
+                const middleware = actualPluginOptions.middlewareBuilder?.(browserSyncOptions);
                 this.browserSyncInstance.init(middleware
-                    ? { ...this.browserSyncOptions, server: { middleware: Array.isArray(middleware) ? middleware : [middleware] } }
-                    : this.browserSyncOptions, this.pluginOptions.callback);
+                    ? { ...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

@@ -12,8 +12,6 @@ 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), '') || '.';
@@ -27,17 +25,9 @@ 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 "";
+let isInThemeCache = undefined;
+function isInTheme() {
+    return isInThemeCache ?? (isInThemeCache = node_fs_1.default.existsSync(node_path_1.default.join(process.cwd(), "theme.json")));
 }
 function isTruthy(value) {
     return !!value;
@@ -262,53 +252,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 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 });
-                    }
-                }));
-            }
+            plugins.push(new BrowserSyncPlugin_1.BrowserSyncPlugin());
         }
         let entry;
         if (srcIsDirectory) {
@@ -377,14 +321,27 @@ module.exports = function (config, webpackConfig = require("@wordpress/scripts/c
                 [baseDest.includes('.') ? node_path_1.default.basename(baseDest, node_path_1.default.extname(baseDest)) : baseDest]: srcRoot
             });
         }
+        const outPath = joinPossiblyAbsolutePaths(process.cwd(), srcIsDirectory ? destPath : node_path_1.default.dirname(destPath));
+        let publicPath = webpackConfig.output?.publicPath;
+        if (isInTheme()) {
+            let prefix = process.cwd();
+            while (prefix.length > 5 && node_path_1.default.basename(prefix) !== "wp-content") {
+                prefix = node_path_1.default.dirname(prefix);
+            }
+            if (prefix.length > 5) {
+                prefix = node_path_1.default.dirname(prefix);
+                publicPath = `/${node_path_1.default.relative(prefix, outPath)}/`;
+            }
+        }
         return {
             ...webpackConfig,
             devtool: 'source-map',
             mode: "production",
             output: {
                 ...webpackConfig.output,
-                path: joinPossiblyAbsolutePaths(process.cwd(), srcIsDirectory ? destPath : node_path_1.default.dirname(destPath)),
+                path: outPath,
                 chunkFilename: 'webpack-chunks/[id].js',
+                publicPath: publicPath
             },
             stats: config.stats ?? 'errors-warnings',
             plugins: copyFiles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "2.16.0",
+  "version": "2.18.0",
   "scripts": {
     "prepublishOnly": "rm -rf build && mkdir build && tsc",
     "build": "tsc",