@plaudit/webpack-extensions 2.44.3 → 2.44.5

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

@@ -171,7 +171,7 @@ class BlockJSONManagingPlugin {
             const inputPath = node_path_1.default.normalize(node_path_1.default.join(sourceDir, value.substring(5)));
             const outputAndAdditionalFiles = BlockJSONManagingPlugin.blockJsonToEntrypointsMap.get(name)?.get(inputPath);
             if (outputAndAdditionalFiles !== undefined) {
-                const [output, additionalFiles] = outputAndAdditionalFiles;
+                const { output, additionalFiles } = outputAndAdditionalFiles;
                 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];
@@ -294,19 +294,30 @@ class BlockJSONManagingPlugin {
                         continue;
                     }
                     const entrypointChunk = entrypoint.getEntrypointChunk();
-                    const additionalFiles = [];
-                    for (const entrypointChunkFile of entrypointChunk.files) {
-                        if (!entrypointChunkFile.endsWith(".asset.php") && entrypointChunkFile !== destPath) {
-                            additionalFiles.push(entrypointChunkFile);
+                    const runtimeName = entrypointChunk.name;
+                    let additionalFiles;
+                    if (runtimeName) {
+                        additionalFiles = new Set([...compilation.chunks]
+                            .filter(chunk => typeof chunk.runtime === 'string' ? chunk.runtime === entrypointChunk.name : chunk.runtime?.has(runtimeName))
+                            .flatMap(chunk => [...chunk.files])
+                            .filter(file => !file.endsWith(".asset.php")));
+                        additionalFiles.delete(destPath);
+                    }
+                    else {
+                        additionalFiles = new Set();
+                        for (const entrypointChunkFile of entrypointChunk.files) {
+                            if (!entrypointChunkFile.endsWith(".asset.php") && entrypointChunkFile !== destPath) {
+                                additionalFiles.add(entrypointChunkFile);
+                            }
                         }
                     }
                     const entryMeta = { hash: entrypointChunk.hash ?? destPath, path: destPath };
                     const currentEntrypoints = BlockJSONManagingPlugin.blockJsonToEntrypointsMap.get(name);
                     if (currentEntrypoints) {
-                        currentEntrypoints.set(srcPath, [entryMeta, additionalFiles]);
+                        currentEntrypoints.set(srcPath, { output: entryMeta, additionalFiles: [...additionalFiles] });
                     }
                     else {
-                        BlockJSONManagingPlugin.blockJsonToEntrypointsMap.set(name, new Map([[srcPath, [entryMeta, additionalFiles]]]));
+                        BlockJSONManagingPlugin.blockJsonToEntrypointsMap.set(name, new Map([[srcPath, { output: entryMeta, additionalFiles: [...additionalFiles] }]]));
                     }
                 }
             }
@@ -381,7 +392,21 @@ class BlockJSONManagingPlugin {
             if (typeof rawAssetDataSource === 'string') {
                 const scriptHandles = {};
                 const styleHandles = {};
+                const additionalFilesMap = new Map([...BlockJSONManagingPlugin.blockJsonToEntrypointsMap.values()] // Extract the recorded block.json files into an array
+                    .flatMap(epMap => [...epMap.values()]) // Extract the recorded entrypoints for all block.json files into a single array
+                    .flatMap(epMapValue => {
+                    return epMapValue.additionalFiles.map(af => [af, epMapValue.output.path]); // Pair each additionalFile with its progenitor
+                }) // Flatten the per-entrypoint [additionalFile, progenitor] pairs into a single array
+                );
                 const rawAssetData = JSON.parse(rawAssetDataSource);
+                for (const chunk of compilation.chunks) {
+                    if (compilation.chunkGraph.getChunkModulesIterableBySourceType(chunk, 'css/mini-extract')) {
+                        const output = [...chunk.files].find(f => f.endsWith(".css"));
+                        if (output) {
+                            rawAssetData[output] = { dependencies: [], version: chunk.contentHash['css/mini-extract'] ?? chunk.hash ?? "" };
+                        }
+                    }
+                }
                 const usedHandles = {};
                 for (const [blockFolder, config] of blockDirConfigs) {
                     for (const mappableKey of BlockJSONManagingPlugin.mappableKeys) {
@@ -389,7 +414,7 @@ class BlockJSONManagingPlugin {
                         if (cfg) {
                             if (Array.isArray(cfg)) {
                                 for (let i = 0; i < cfg.length; i++) {
-                                    const assetDetails = getAssetDetails(blockFolder, cfg[i], rawAssetData, mappableKey, usedHandles);
+                                    const assetDetails = getAssetDetails(blockFolder, cfg[i], rawAssetData, additionalFilesMap, mappableKey, usedHandles);
                                     if (assetDetails) {
                                         (assetDetails[0] ? styleHandles : scriptHandles)[assetDetails[1]] = assetDetails[2];
                                         cfg[i] = assetDetails[1];
@@ -397,7 +422,7 @@ class BlockJSONManagingPlugin {
                                 }
                             }
                             else {
-                                const assetDetails = getAssetDetails(blockFolder, cfg, rawAssetData, mappableKey, usedHandles);
+                                const assetDetails = getAssetDetails(blockFolder, cfg, rawAssetData, additionalFilesMap, mappableKey, usedHandles);
                                 if (assetDetails) {
                                     (assetDetails[0] ? styleHandles : scriptHandles)[assetDetails[1]] = assetDetails[2];
                                     config[mappableKey] = assetDetails[1];
@@ -495,15 +520,26 @@ function makeSync() {
     });
     return res;
 }
-function getAssetDetails(blockFolder, asset, rawAssetData, mappableKey, usedHandles) {
+function getAssetDetails(blockFolder, asset, rawAssetData, additionalFilesMap, mappableKey, usedHandles) {
     if (!asset.startsWith("file:./")) {
         return undefined;
     }
     const src = `${blockFolder}/${asset.substring(7)}`;
     const isCss = src.endsWith(".css");
-    const assetData = isCss
-        ? rawAssetData[src.substring(0, src.length - 3) + "js"] ?? rawAssetData[src.substring(0, src.length - 3).replace("style-style", "style") + "js"]
-        : rawAssetData[src];
+    let assetData;
+    if (rawAssetData[src]) {
+        assetData = rawAssetData[src];
+    }
+    else {
+        const lookupSrc = additionalFilesMap.get(src);
+        if (lookupSrc) {
+            const tempAssetData = getAssetDataAccountingForCSS(lookupSrc, rawAssetData);
+            assetData = tempAssetData ? { ...tempAssetData, dependencies: [] } : undefined;
+        }
+        else {
+            assetData = getAssetDataAccountingForCSS(src, rawAssetData);
+        }
+    }
     if (!assetData) {
         return undefined;
     }
@@ -519,3 +555,13 @@ function getAssetDetails(blockFolder, asset, rawAssetData, mappableKey, usedHand
         { src, rest: isCss || mappableKey.startsWith("editor") ? [assetData.dependencies, assetData.version] : [assetData.dependencies, assetData.version, { strategy: 'defer' }] }
     ];
 }
+function getAssetDataAccountingForCSS(src, rawAssetData) {
+    if (rawAssetData[src]) {
+        return rawAssetData[src];
+    }
+    if (src.endsWith(".css")) {
+        return rawAssetData[src.substring(0, src.length - 3) + "js"] // A simple style dependency that isn't named "style"
+            ?? rawAssetData[src.substring(0, src.length - 3).replace("style-style", "style") + "js"]; // A simple style dependency that IS named style
+    }
+    return undefined;
+}

package/build/wordpress-scripts-wrapper.js

@@ -513,6 +513,24 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
                 publicPath: publicPath,
                 library: outputLibrary
             },
+            optimization: {
+                ...webpackConfig.optimization,
+                splitChunks: {
+                    cacheGroups: {
+                        style: {
+                            // This is a flagrant abuse of cache groups, but it fixes a persistent problem wherein the dependencies and versions of scripts and styles were bleeding into each-other
+                            type: 'css/mini-extract',
+                            chunks: 'all',
+                            enforce: true,
+                            name(_, chunks, cacheGroupKey) {
+                                const chunkName = chunks.find(chunk => chunk.name)?.name;
+                                return chunkName.includes("script") ? `${node_path_1.default.dirname(chunkName)}/${cacheGroupKey}-${node_path_1.default.basename(chunkName)}` : chunkName;
+                            },
+                        },
+                        default: false,
+                    },
+                }
+            },
             module: {
                 ...webpackConfig.module,
                 rules: fixedRules

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@plaudit/webpack-extensions",
-	"version": "2.44.3",
+	"version": "2.44.5",
 	"license": "UNLICENSED",
 	"scripts": {
 		"prepublishOnly": "rm -rf build && mkdir build && tsc",