@plaudit/webpack-extensions 2.47.0 → 2.49.0

package/build/shared.d.ts

@@ -0,0 +1,11 @@
+export type SharedCache = {
+    specialAssets?: {
+        files: {
+            [k: string]: {
+                preload?: true;
+                fetchpriority?: string | null;
+                crossorigin?: string | null;
+            };
+        };
+    };
+};

package/build/shared.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,7 @@
+import { Compiler, WebpackPluginInstance } from "webpack";
+import { SharedCache } from "../shared";
+export default class SpecialAssetHandlingPlugin implements WebpackPluginInstance {
+    private readonly cache;
+    constructor(cache: SharedCache);
+    apply(compiler: Compiler): void;
+}

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

@@ -0,0 +1,106 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_path_1 = __importDefault(require("node:path"));
+const webpack_1 = require("webpack");
+class SpecialAssetHandlingPlugin {
+    cache;
+    constructor(cache) {
+        this.cache = cache;
+    }
+    apply(compiler) {
+        compiler.hooks.compilation.tap(this.constructor.name, compilation => {
+            this.cache.specialAssets = undefined;
+            compilation.hooks.processAssets.tap(this.constructor.name, assets => {
+                for (const pathname of Object.keys(assets)) {
+                    const assetInfo = compilation.assetsInfo.get(pathname);
+                    if (!assetInfo?.sourceFilename) {
+                        continue;
+                    }
+                    const queryStart = assetInfo.sourceFilename.indexOf('?');
+                    if (queryStart < 0) {
+                        continue;
+                    }
+                    const params = new URLSearchParams(assetInfo.sourceFilename.substring(queryStart + 1)
+                        .replace(/(?:fetchPriority|crossOrigin)=/gi, str => str.toLowerCase()) //This ensures consistent capitalization of the fetchPriority parameter
+                    );
+                    if (this.cache.specialAssets === undefined) {
+                        this.cache.specialAssets = { files: {} };
+                        const outputFile = node_path_1.default.join(node_path_1.default.dirname(node_path_1.default.dirname(pathname)), "special-assets.php");
+                        compilation.hooks.afterProcessAssets.tap(`${this.constructor.name}_GeneratePreloadingFile`, () => {
+                            if (!this.cache.specialAssets?.files) {
+                                return;
+                            }
+                            const hookTextLines = [
+                                "<?php",
+                                "add_action('wp_head', function() {",
+                                "\tif (str_starts_with(__DIR__, ABSPATH)) {",
+                                "\t\t$path = ltrim(substr(__DIR__, strlen(ABSPATH)), '/');",
+                                "\t} else if (str_starts_with(__DIR__, '/workspace/website')) {",
+                                "\t\t$path = ltrim(substr(__DIR__, 18), '/');",
+                                "\t} else {",
+                                "\t\terror_log('UNABLE TO FIGURE OUT WHAT THE RELATIVE PATH TO THE FONT DIRECTORY SHOULD BE');",
+                                "\t\treturn;",
+                                "\t}",
+                                "\t$base_uri = trailingslashit(home_url($path));",
+                                "\t?>"
+                            ];
+                            const preloadedFonts = Object.entries(this.cache.specialAssets.files)
+                                .filter(([_, { preload }]) => preload)
+                                .sort(([a], [b]) => a.localeCompare(b));
+                            for (let [filename, { preload, fetchpriority, crossorigin }] of preloadedFonts) {
+                                if (!preload) {
+                                    continue;
+                                }
+                                let fileExtension = node_path_1.default.extname(filename);
+                                if (fileExtension.startsWith(".")) {
+                                    fileExtension = fileExtension.substring(1).toLowerCase();
+                                }
+                                else {
+                                    fileExtension = fileExtension.toLowerCase();
+                                }
+                                const attributes = [];
+                                if (["woff", "woff2", "ttf", "otf", "eot"].includes(fileExtension)) {
+                                    if (!crossorigin) {
+                                        crossorigin = "anonymous";
+                                    }
+                                    attributes.push(["as", "font"], ["type", `font/${fileExtension}`]);
+                                }
+                                else if (fileExtension === "svg") {
+                                    attributes.push(["as", "image"], ["type", `image/svg+xml`]);
+                                }
+                                else if (fileExtension === "jpeg" || fileExtension === "jpg") {
+                                    attributes.push(["as", "image"], ["type", `image/jpeg`]);
+                                }
+                                else if (["png", "webp", "avif", "gif", "bmp"].includes(fileExtension)) {
+                                    attributes.push(["as", "image"], ["type", `image/${fileExtension}`]);
+                                }
+                                else {
+                                    compilation.errors.push(new Error(`Encountered preloading markup on an unsupported file extension (${fileExtension}). Full resource path: ${assetInfo.sourceFilename}`));
+                                    continue;
+                                }
+                                if (fetchpriority && fetchpriority !== 'auto') {
+                                    attributes.push(["fetchpriority", fetchpriority]);
+                                }
+                                if (crossorigin || crossorigin === "") {
+                                    attributes.push(["crossorigin", crossorigin]);
+                                }
+                                const dynamicAttrs = attributes.map(([k, v]) => v ? `${k}="${v}"` : k).join(" ");
+                                hookTextLines.push(`\t<link rel="preload" href="<?= esc_url($base_uri.'${filename}') ?>" ${dynamicAttrs}>`);
+                            }
+                            hookTextLines.push("\t<?php", "});\n");
+                            compilation.emitAsset(outputFile, new webpack_1.sources.RawSource(hookTextLines.join("\n")));
+                        });
+                    }
+                    const filename = node_path_1.default.join(node_path_1.default.basename(node_path_1.default.dirname(pathname)), node_path_1.default.basename(pathname));
+                    if (params.has("preload")) {
+                        this.cache.specialAssets.files[filename] = { preload: true, fetchpriority: params.get("fetchpriority"), crossorigin: params.get("crossorigin") };
+                    }
+                }
+            });
+        });
+    }
+}
+exports.default = SpecialAssetHandlingPlugin;

package/build/wordpress-scripts-wrapper/dependency-extraction-webpack-plugin-config-builder.js

@@ -89,7 +89,7 @@ function firstLayersEqual(first, second) {
     return true;
 }
 const PLAUDIT_NAMESPACE = '@plaudit/';
-const EXTERNALIZABLE_PLAUDIT_LIBRARIES = ['@plaudit/frontend-apis', '@plaudit/library-extensions'];
+const EXTERNALIZABLE_PLAUDIT_LIBRARIES = ['@plaudit/frontend-apis', '@plaudit/library-extensions', '@plaudit/block-supports'];
 function plauditRequestToExternal(ext) {
     return function (request) {
         if (EXTERNALIZABLE_PLAUDIT_LIBRARIES.includes(request)) {

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

@@ -22,6 +22,7 @@ type PlauditWordpressWebpackConfig = {
     assumeGlobalizedPlauditLibraries?: boolean;
     processTranslationConfigs?: boolean;
     combineAssetMetadata?: boolean;
+    useWebpackResourceFiltering?: boolean;
 };
 declare const _default: (config: PlauditWordpressWebpackConfig, webpackConfig?: Configuration[] | Configuration) => Configuration[];
 export = _default;

package/build/wordpress-scripts-wrapper.js

@@ -9,6 +9,7 @@ const AdditionalDependencyInjectorPlugin_1 = __importDefault(require("./wordpres
 const BlockJSONManagingPlugin_1 = __importDefault(require("./wordpress-scripts-wrapper/BlockJSONManagingPlugin"));
 const dependency_extraction_webpack_plugin_config_builder_1 = require("./wordpress-scripts-wrapper/dependency-extraction-webpack-plugin-config-builder");
 const ExtensionsConfigFileGeneratorPlugin_1 = __importDefault(require("./wordpress-scripts-wrapper/ExtensionsConfigFileGeneratorPlugin"));
+const SpecialAssetHandlingPlugin_1 = __importDefault(require("./wordpress-scripts-wrapper/SpecialAssetHandlingPlugin"));
 const MiniCSSExtractPluginErrorCleaner_1 = __importDefault(require("./wordpress-scripts-wrapper/MiniCSSExtractPluginErrorCleaner"));
 const VariablesJSMonitorPlugin_1 = __importDefault(require("./wordpress-scripts-wrapper/VariablesJSMonitorPlugin"));
 const BrowserSyncPlugin_1 = require("./wordpress-scripts-wrapper/BrowserSyncPlugin");
@@ -130,35 +131,38 @@ function testForDuplicatedEntryPaths(config) {
         process.exit(1);
     }
 }
-function replaceDefaultURLProcessing(rules) {
-    const cssLoader = require.resolve('css-loader');
-    if (cssLoader) {
-        return rules.map(rule => {
-            if (rule && typeof rule === 'object' && "use" in rule && Array.isArray(rule.use)) {
-                return {
-                    ...rule,
-                    use: rule.use.map(useElement => {
-                        if (useElement && typeof useElement === 'object' && useElement.loader === cssLoader && typeof useElement.options === 'object') {
-                            return {
-                                ...useElement,
-                                options: {
-                                    ...useElement.options,
-                                    url: {
-                                        filter(url) {
-                                            return !url.startsWith("/") && !!url.match(/\.(woff|woff2|eot|ttf|otf|png|jpe?g|svg|webp|avif|gif)[^.]*?(\?.*)?/i);
+function replaceDefaultURLProcessing(useWebpackResourceFiltering) {
+    return (rules) => {
+        const cssLoader = require.resolve('css-loader');
+        if (cssLoader) {
+            return rules.map(rule => {
+                if (rule && typeof rule === 'object' && "use" in rule && Array.isArray(rule.use)) {
+                    return {
+                        ...rule,
+                        use: rule.use.map(useElement => {
+                            if (useElement && typeof useElement === 'object' && useElement.loader === cssLoader && typeof useElement.options === 'object') {
+                                return {
+                                    ...useElement,
+                                    options: {
+                                        ...useElement.options,
+                                        url: {
+                                            filter(url) {
+                                                return (useWebpackResourceFiltering || !url.startsWith("/"))
+                                                    && !!url.match(/\.(woff2?|eot|ttf|otf|png|jpe?g|svg|webp|avif|gif|bmp)[^.]*?(\?.*)?/i);
+                                            }
                                         }
                                     }
-                                }
-                            };
-                        }
-                        return useElement;
-                    })
-                };
-            }
-            return rule;
-        });
-    }
-    return rules;
+                                };
+                            }
+                            return useElement;
+                        })
+                    };
+                }
+                return rule;
+            });
+        }
+        return rules;
+    };
 }
 function injectPostcssConfigOverrides(rules, variables, postcssFunctionsConfig, verbose) {
     const postcssConfig = (0, static_configs_1.postcssConfigBuilder)(verbose, name => variables(name) ?? (name === 'ENV' ? '' : undefined), postcssFunctionsConfig);
@@ -236,7 +240,7 @@ function parseEntrypointsJSON(dir) {
         });
     }
 }
-function processIndividualWebpackConfig(config, webpackConfig, sources) {
+function processIndividualWebpackConfig(config, webpackConfig, sources, sharedCache) {
     let scriptExtension; // This is only used in non-block contexts. It might not actually be necessary, but it is good to have
     let entrypointFields;
     const processingModules = webpackConfig.output?.module ?? false;
@@ -251,7 +255,7 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
     const { standaloneBlocks, variablesFilePath, verbose, externals, assumeGlobalizedPlauditLibraries, combineAssetMetadata } = config;
     let currentVariables = config.currentVariables;
     const fixedRules = [
-        replaceDefaultURLProcessing,
+        replaceDefaultURLProcessing(config.useWebpackResourceFiltering),
         (rules) => {
             return injectPostcssConfigOverrides(rules, name => currentVariables[name], config.postcss.functions ?? (() => ({})), verbose);
         },
@@ -323,6 +327,9 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
             stage: webpack_remove_empty_scripts_1.default.STAGE_AFTER_PROCESS_PLUGINS,
             extensions: ['css', 'scss', 'sass', 'less', 'styl', 'pcss']
         }), new MiniCSSExtractPluginErrorCleaner_1.default());
+        if (config.useWebpackResourceFiltering) {
+            plugins.push(new SpecialAssetHandlingPlugin_1.default(sharedCache));
+        }
         if (variablesFilePath) {
             plugins.push(new VariablesJSMonitorPlugin_1.default(variablesFilePath));
         }
@@ -577,21 +584,25 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
 }
 module.exports = function (config, webpackConfig = require("@wordpress/scripts/config/webpack.config")) {
     testForDuplicatedEntryPaths(config);
-    const { standaloneBlocks = false, stats = 'errors-warnings', variables: rawVariables, verbose = process.argv.includes('--verbose') || process.env['VERBOSE'] === 'true', postcss = {}, externals, assumeGlobalizedPlauditLibraries = true, processTranslationConfigs = true, combineAssetMetadata = true } = config;
+    const { standaloneBlocks = false, stats = 'errors-warnings', variables: rawVariables, verbose = process.argv.includes('--verbose') || process.env['VERBOSE'] === 'true', postcss = {}, externals, assumeGlobalizedPlauditLibraries = true, processTranslationConfigs = true, combineAssetMetadata = true, useWebpackResourceFiltering = true } = config;
     let variablesFilePath = undefined;
     const currentVariables = rawVariables ?? {};
     if (!rawVariables) {
         variablesFilePath = ["variables.js", "src/site/variables.js"].map(p => node_path_1.default.join(process.cwd(), p)).filter(p => node_fs_1.default.existsSync(p))[0];
     }
-    const cfg = { currentVariables, postcss, standaloneBlocks, stats, variablesFilePath, verbose, externals, assumeGlobalizedPlauditLibraries, processTranslationConfigs, combineAssetMetadata };
+    const cfg = {
+        currentVariables, postcss, standaloneBlocks, stats, variablesFilePath, verbose, externals, assumeGlobalizedPlauditLibraries, processTranslationConfigs, combineAssetMetadata,
+        useWebpackResourceFiltering
+    };
     const sources = Array.isArray(config.src) ? config.src.map(s => [s, s]) : Object.entries(config.src);
+    const sharedCache = {};
     if (Array.isArray(webpackConfig)) {
         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));
+        }).flatMap(wpCfg => processIndividualWebpackConfig(cfg, wpCfg, sources, sharedCache));
     }
-    return processIndividualWebpackConfig(cfg, webpackConfig, sources);
+    return processIndividualWebpackConfig(cfg, webpackConfig, sources, sharedCache);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "2.47.0",
+  "version": "2.49.0",
   "license": "UNLICENSED",
   "files": [
     "/build"
@@ -16,9 +16,9 @@
     }
   },
   "devDependencies": {
-    "@plaudit/gutenberg-api-extensions": "^2.68.1",
+    "@plaudit/gutenberg-api-extensions": "^2.69.0",
     "@types/browser-sync-webpack-plugin": "^2.2.5",
-    "@types/node": "^22.15.18",
+    "@types/node": "^22.15.19",
     "@types/postcss-functions": "^4.0.4",
     "@types/tapable": "^2.2.7",
     "@types/webpack": "^5.28.5",
@@ -71,6 +71,8 @@
   },
   "scripts": {
     "build": "tsc",
+    "clean": "rm -rf build && mkdir build",
+    "build:clean": "pnpm run clean && pnpm run build",
     "watch": "tsc -w"
   }
 }