@plaudit/webpack-extensions 2.30.1 → 2.31.0

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

@@ -2,12 +2,13 @@ import { type Compilation, type Compiler, type WebpackPluginInstance } from "web
 export default class BlockJSONManagingPlugin implements WebpackPluginInstance {
     private readonly standaloneBlocks;
     private readonly processingModules;
-    private static readonly sourceToOutputMapping;
+    private static readonly sourceToOutputMappingCache;
     private static readonly blockJsonToEntrypointsMap;
     private static readonly blockJsonRawDependenciesMap;
-    private static readonly blockJSONAssetSources;
+    private static readonly blockJSONAssetSourceDirs;
     constructor(standaloneBlocks: boolean, processingModules: boolean);
     static recordRawDependency(entrypoint: string, dependency: string): void;
+    static recordBlockJSONAssetSourceDir(entrypoint: string, source: string): void;
     apply(compiler: Compiler): void;
     static resolveDestinationBySourceExtension(srcPath: string, entrypoint: Compilation['asyncEntrypoints'][number]): string | undefined;
     static findCommonAncestor(...paths: string[]): string[];

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

@@ -11,10 +11,10 @@ const php_serializer_1 = __importDefault(require("./php-serializer"));
 class BlockJSONManagingPlugin {
     standaloneBlocks;
     processingModules;
-    static sourceToOutputMapping = new Map();
+    static sourceToOutputMappingCache = new Map();
     static blockJsonToEntrypointsMap = new Map();
     static blockJsonRawDependenciesMap = new Map();
-    static blockJSONAssetSources = new Map();
+    static blockJSONAssetSourceDirs = new Map();
     constructor(standaloneBlocks, processingModules) {
         this.standaloneBlocks = standaloneBlocks;
         this.processingModules = processingModules;
@@ -26,56 +26,45 @@ class BlockJSONManagingPlugin {
         }
         deps.add(dependency);
     }
+    static recordBlockJSONAssetSourceDir(entrypoint, source) {
+        BlockJSONManagingPlugin.blockJSONAssetSourceDirs.set(entrypoint, source);
+    }
     apply(compiler) {
         compiler.hooks.compilation.tap(this.constructor.name, compilation => {
-            compilation.hooks.processAssets.tap({ name: this.constructor.name, stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ANALYSE }, () => {
-                for (const blockEntrypoint of compilation.entrypoints.values()) {
-                    if (blockEntrypoint.name?.endsWith("/block.json")) {
-                        const source = blockEntrypoint.origins.map(origin => origin.request)[0];
-                        const name = blockEntrypoint.getEntrypointChunk().name;
-                        if (!source || !name) {
-                            continue;
-                        }
-                        BlockJSONManagingPlugin.blockJSONAssetSources.set(name, source);
-                        const dependencies = BlockJSONManagingPlugin.blockJsonRawDependenciesMap.get(blockEntrypoint.name);
-                        if (dependencies) {
-                            for (const dependency of dependencies) {
-                                const entrypoint = compilation.entrypoints.get(dependency);
-                                if (!entrypoint) {
-                                    continue;
-                                }
-                                const srcPath = entrypoint.origins.map(origin => origin.request)[0];
-                                if (!srcPath) {
-                                    continue;
-                                }
-                                const destPath = BlockJSONManagingPlugin.resolveDestinationBySourceExtension(srcPath, entrypoint);
-                                if (!destPath) {
-                                    continue;
-                                }
-                                const entryMeta = { hash: entrypoint.getEntrypointChunk().hash ?? destPath, path: destPath };
-                                const currentEntrypoints = BlockJSONManagingPlugin.blockJsonToEntrypointsMap.get(name);
-                                if (currentEntrypoints) {
-                                    currentEntrypoints.set(srcPath, entryMeta);
-                                }
-                                else {
-                                    BlockJSONManagingPlugin.blockJsonToEntrypointsMap.set(name, new Map([[srcPath, entryMeta]]));
-                                }
+            compilation.hooks.afterProcessAssets.tap(`${this.constructor.name}_ProcessBlockJSONFiles`, compilationAssets => {
+                const currentBlockJSONAssets = BlockJSONManagingPlugin.blockJSONAssetSourceDirs.entries()
+                    .filter(([name]) => name in compilationAssets)
+                    .toArray();
+                for (const [name] of currentBlockJSONAssets) {
+                    const dependencies = BlockJSONManagingPlugin.blockJsonRawDependenciesMap.get(name);
+                    if (dependencies) {
+                        for (const dependency of dependencies) {
+                            const entrypoint = compilation.entrypoints.get(dependency);
+                            if (!entrypoint) {
+                                continue;
+                            }
+                            const srcPath = entrypoint.origins.map(origin => origin.request)[0];
+                            if (!srcPath) {
+                                continue;
+                            }
+                            const destPath = BlockJSONManagingPlugin.resolveDestinationBySourceExtension(srcPath, entrypoint);
+                            if (!destPath) {
+                                continue;
+                            }
+                            const entryMeta = { hash: entrypoint.getEntrypointChunk().hash ?? destPath, path: destPath };
+                            const currentEntrypoints = BlockJSONManagingPlugin.blockJsonToEntrypointsMap.get(name);
+                            if (currentEntrypoints) {
+                                currentEntrypoints.set(srcPath, entryMeta);
+                            }
+                            else {
+                                BlockJSONManagingPlugin.blockJsonToEntrypointsMap.set(name, new Map([[srcPath, entryMeta]]));
                             }
                         }
                     }
                 }
-            });
-            compilation.hooks.afterProcessAssets.tap(`${this.constructor.name}_ProcessBlockJSONFiles`, compilationAssets => {
-                // We start by trimming away the unused metadata files that WebPack creates.
-                for (const name of Object.keys(compilationAssets)) {
-                    if (name.endsWith("block.json.asset.php")) {
-                        compilation.deleteAsset(name);
-                        compilation.deleteAsset(name.substring(0, name.length - 10) + ".js"); // This removes the block.json.js and block.json.js.map files
-                    }
-                }
                 if (this.processingModules) {
                     // We perform the processing in the non-modules half ONLY because we don't necessarily have all the information we need during the modules half.
-                    for (const name of BlockJSONManagingPlugin.blockJSONAssetSources.keys()) {
+                    for (const [name] of currentBlockJSONAssets) {
                         compilation.deleteAsset(name); // While the method is called, "deleteAsset", it doesn't actually delete it - just halts emission.
                     }
                     return;
@@ -84,31 +73,30 @@ class BlockJSONManagingPlugin {
                 const mappableKeys = ["editorStyle", "style", "viewStyle", "viewScript", "script", "editorScript", "viewScriptModule", "scriptModule"];
                 const remapValue = (value, name) => {
                     if (value.startsWith("file:")) {
-                        let res = BlockJSONManagingPlugin.sourceToOutputMapping.get(`${name};${value}`);
+                        let res = BlockJSONManagingPlugin.sourceToOutputMappingCache.get(`${name};${value}`);
                         if (res !== undefined) {
                             return res;
                         }
-                        const sourceDir = node_path_1.default.dirname(BlockJSONManagingPlugin.blockJSONAssetSources.get(name) ?? name);
+                        const sourceDir = BlockJSONManagingPlugin.blockJSONAssetSourceDirs.get(name) ?? node_path_1.default.dirname(name);
                         const inputPath = node_path_1.default.normalize(node_path_1.default.join(sourceDir, value.substring(5)));
                         const output = BlockJSONManagingPlugin.blockJsonToEntrypointsMap.get(name)?.get(inputPath);
                         if (output !== undefined) {
                             const prefix = value.startsWith("./", 5) ? "./" : "";
                             const relativePath = node_path_1.default.relative(node_path_1.default.dirname(name), output.path);
                             const res = [`file:${prefix}${relativePath}`, output.hash];
-                            BlockJSONManagingPlugin.sourceToOutputMapping.set(`${name};${value}`, res);
+                            BlockJSONManagingPlugin.sourceToOutputMappingCache.set(`${name};${value}`, res);
                             return res;
                         }
                     }
                     return [value, ""];
                 };
-                for (const [name, source] of BlockJSONManagingPlugin.blockJSONAssetSources.entries()) {
-                    const sourceDir = node_path_1.default.dirname(source);
-                    const asset = compilation.assets[name]?.buffer().toString();
-                    if (!asset) {
+                for (const [name, sourceDir] of currentBlockJSONAssets) {
+                    const assetContents = compilation.assets[name]?.buffer().toString();
+                    if (!assetContents) {
                         continue;
                     }
                     blockDirConfigData[name] = true;
-                    const json = JSON.parse(asset);
+                    const json = JSON.parse(assetContents);
                     let compositeHash = "";
                     for (const mappableKey of mappableKeys) {
                         if (mappableKey in json) {

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

@@ -6,6 +6,13 @@ interface AdvancedOutputConfig {
     additionalDependencies?: string[];
     directoryLayout?: 'blocks' | 'extensions';
 }
+type IndividualExternalDepConfig = string | {
+    import: string;
+    handle: string;
+};
+type Externals = {
+    [dep: string]: IndividualExternalDepConfig;
+};
 type PlauditWordpressWebpackConfig = {
     standaloneBlocks?: boolean;
     variables?: Record<string, any>;
@@ -15,12 +22,7 @@ type PlauditWordpressWebpackConfig = {
     postcss?: {
         functions?: (variables: (name: string) => unknown) => PostcssFunctionsOptions['functions'];
     };
-    externals?: {
-        [dep: string]: string | {
-            import: string;
-            handle: string;
-        };
-    };
+    externals?: Externals;
 };
 declare const _default: (config: PlauditWordpressWebpackConfig, webpackConfig?: Configuration[] | Configuration) => Configuration[];
 export = _default;

package/build/wordpress-scripts-wrapper.js

@@ -232,6 +232,52 @@ function parseEntrypointsJSON(dir) {
         });
     }
 }
+function makeDependencyExtractionPlugin(externals) {
+    const exactExternals = {};
+    const suffixExternals = [];
+    for (const [key, value] of Object.entries(externals)) {
+        if (key.startsWith("*/")) {
+            suffixExternals.push([key.substring(1), typeof value === 'string' ? { import: value, handle: key.substring(2) } : value]);
+        }
+        else {
+            exactExternals[key] = value;
+        }
+    }
+    const resolvePossibleExternal = (request) => {
+        if (request in exactExternals) {
+            return exactExternals[request];
+        }
+        for (const [key, value] of suffixExternals) {
+            if (request.endsWith(key)) {
+                return value;
+            }
+        }
+        return undefined;
+    };
+    return new dependency_extraction_webpack_plugin_1.default({
+        requestToExternal(request) {
+            const possibleExternal = resolvePossibleExternal(request);
+            if (typeof possibleExternal === 'string') {
+                return possibleExternal;
+            }
+            else if (possibleExternal !== undefined) {
+                return possibleExternal['import'];
+            }
+            else {
+                return undefined;
+            }
+        },
+        requestToHandle(request) {
+            const possibleExternal = resolvePossibleExternal(request);
+            if (possibleExternal !== undefined && typeof possibleExternal !== 'string') {
+                return possibleExternal.handle;
+            }
+            else {
+                return request;
+            }
+        }
+    });
+}
 function processIndividualWebpackConfig(config, webpackConfig, sources) {
     let scriptExtension; // This is only used in non-block contexts. It might not actually be necessary, but it is good to have
     let entrypointFields;
@@ -313,29 +359,7 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
                 console.error("Cannot apply externals when they have been disabled via CLI flag.");
             }
             else {
-                plugins[pluginIndex] = new dependency_extraction_webpack_plugin_1.default({
-                    requestToExternal(request) {
-                        const possibleExternal = externals[request];
-                        if (typeof possibleExternal === 'string') {
-                            return possibleExternal;
-                        }
-                        else if (possibleExternal !== undefined) {
-                            return possibleExternal['import'];
-                        }
-                        else {
-                            return undefined;
-                        }
-                    },
-                    requestToHandle(request) {
-                        const possibleExternal = externals[request];
-                        if (possibleExternal !== undefined && typeof possibleExternal !== 'string') {
-                            return typeof possibleExternal.handle;
-                        }
-                        else {
-                            return request;
-                        }
-                    }
-                });
+                plugins[pluginIndex] = makeDependencyExtractionPlugin(externals);
             }
         }
         if (process.argv.includes('--browser-sync') || process.env['BROWSER_SYNC'] === 'true') {
@@ -367,7 +391,7 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
                                     res.push(...mapToRealEntrypoints(blockJSON[key], dir, ep => ep.startsWith("file:") ? ep.substring(5) : ep, blockJSONChunkName));
                                 }
                             }
-                            res.push([blockJSONChunkName, { import: node_path_1.default.join(dir, 'block.json') }]);
+                            BlockJSONManagingPlugin_1.default.recordBlockJSONAssetSourceDir(blockJSONChunkName, dir);
                             return res;
                         }
                         catch (e) {
@@ -460,16 +484,7 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
             },
             module: {
                 ...webpackConfig.module,
-                rules: [...fixedRules, {
-                        test: /block\.json/i,
-                        type: 'asset/resource',
-                        generator: {
-                            filename(pathData) {
-                                // This mess of a name-generator accounts for WebPack's calculated name changing when block.json has dependents.
-                                return node_path_1.default.join(node_path_1.default.basename(node_path_1.default.dirname(pathData.filename ?? pathData.runtime?.toString() ?? "[name]")), "[name][ext]");
-                            }
-                        }
-                    }]
+                rules: fixedRules
             },
             resolve: {
                 ...webpackConfig.resolve,
@@ -479,7 +494,7 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
             stats: config.stats,
             plugins: copyFiles
                 ? plugins.map(plugin => plugin.constructor.name === 'CopyPlugin'
-                    ? new copy_webpack_plugin_1.default({ patterns: [{ from: standaloneBlocks ? '**/(*.(php|twig|svg))' : '**/(*.(asset\.php|svg))',
+                    ? new copy_webpack_plugin_1.default({ patterns: [{ from: standaloneBlocks ? '**/(block.json|*.(php|twig|svg))' : '**/(block.json|*.(asset\.php|svg))',
                                 context: srcRoot, noErrorOnMissing: true }] })
                     : plugin)
                 : (srcIsDirectory

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "2.30.1",
+  "version": "2.31.0",
   "scripts": {
     "prepublishOnly": "rm -rf build && mkdir build && tsc",
     "build": "tsc",
@@ -36,6 +36,7 @@
     "@plaudit/postcss-silent-extend": "^3.0.0",
     "@plaudit/postcss-strip-units": "^3.0.0",
     "@plaudit/postcss-variables": "^1.0.0",
+	"@wordpress/dependency-extraction-webpack-plugin": "^6.7.0",
     "@wordpress/scripts": "^28.3.0",
     "autoprefixer": "^10.4.19",
     "browser-sync": "^3.0.2",