@plaudit/webpack-extensions 2.36.0 → 2.38.0

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

@@ -73,6 +73,7 @@ class BlockJSONManagingPlugin {
                         }
                     }
                 }
+                //TODO: Fix modules support when running in non-dev mode
                 const blockDirConfigData = {};
                 for (const [name, sourceDir] of currentBlockJSONAssets) {
                     const assetContents = this.processingModules ? node_fs_1.default.readFileSync(testableCompilationAssets[name], 'utf8') : compilation.assets[name]?.buffer().toString();
@@ -194,8 +195,8 @@ class BlockJSONManagingPlugin {
                     compilation[name in compilation.assets ? 'updateAsset' : 'emitAsset'](name, new webpack_1.sources.RawSource(JSON.stringify(json, undefined, "  ")));
                     blockDirConfigData[node_path_1.default.dirname(name)] = json;
                 }
-                const sortedBlockDirConfigData = Object.fromEntries(Object.entries(blockDirConfigData)
-                    .sort(([a], [b]) => a.localeCompare(b)));
+                const sortedBlockDirConfigData = Object.fromEntries([["__metadata", { version: 1 }], ...Object.entries(blockDirConfigData)
+                        .sort(([a], [b]) => a.localeCompare(b))]);
                 compilation.emitAsset("blockdir.config", new webpack_1.sources.RawSource((0, php_serializer_1.default)(sortedBlockDirConfigData, { excludedKeys: ["$schema"] })));
             });
         });

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

@@ -0,0 +1,4 @@
+import type { Compiler, WebpackPluginInstance } from "webpack";
+export default class MiniCSSExtractPluginErrorCleaner implements WebpackPluginInstance {
+    apply(compiler: Compiler): void;
+}

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class MiniCSSExtractPluginErrorCleaner {
+    apply(compiler) {
+        compiler.hooks.done.tap("CleanupMiniCssExtractPlugin", stats => {
+            if (stats.hasErrors()) {
+                if (!stats.compilation.errors.every(error => error.message.includes("mini-css-extract-plugin")) && stats.compilation.errors.length % 2 === 0) {
+                    stats.compilation.errors = stats.compilation.errors.filter(error => !error.message.includes("mini-css-extract-plugin"));
+                }
+            }
+        });
+    }
+}
+exports.default = MiniCSSExtractPluginErrorCleaner;

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

@@ -0,0 +1,9 @@
+import DependencyExtractionWebpackPlugin from "@wordpress/dependency-extraction-webpack-plugin";
+export type IndividualExternalDepConfig = string | {
+    import?: string | [string, ...string[]];
+    handle: string;
+};
+export type Externals = {
+    [dep: string]: IndividualExternalDepConfig;
+};
+export declare function makeDependencyExtractionPlugin(externals: Externals | undefined, assumeGlobalizedPlauditLibraries: boolean): false | DependencyExtractionWebpackPlugin;

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

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeDependencyExtractionPlugin = makeDependencyExtractionPlugin;
+const dependency_extraction_webpack_plugin_1 = __importDefault(require("@wordpress/dependency-extraction-webpack-plugin"));
+function makeDependencyExtractionPlugin(externals, assumeGlobalizedPlauditLibraries) {
+    if (!externals) {
+        if (assumeGlobalizedPlauditLibraries) {
+            return new dependency_extraction_webpack_plugin_1.default({
+                requestToExternal: plauditRequestToExternal,
+                requestToHandle: plauditRequestToHandle
+            });
+        }
+        return false;
+    }
+    const exactExternals = {};
+    const suffixExternals = [];
+    for (const [key, value] of Object.entries(externals)) {
+        const normalizedValue = typeof value !== 'string' && value.import === undefined ? { ...value, import: key } : value;
+        if (key.startsWith("*/")) {
+            suffixExternals.push([key.substring(1), typeof normalizedValue === 'string' ? { import: normalizedValue, handle: key.substring(2) } : normalizedValue]);
+        }
+        else {
+            exactExternals[key] = normalizedValue;
+        }
+    }
+    const resolvePossibleExternal = (request) => {
+        if (request in exactExternals) {
+            return exactExternals[request];
+        }
+        for (const [key, value] of suffixExternals) {
+            if (request.endsWith(key)) {
+                return value;
+            }
+        }
+        return undefined;
+    };
+    const baselineRequestToExternal = request => {
+        const possibleExternal = resolvePossibleExternal(request);
+        if (typeof possibleExternal === 'string') {
+            return possibleExternal;
+        }
+        else if (possibleExternal !== undefined) {
+            return possibleExternal['import'];
+        }
+        return undefined;
+    };
+    const baselineRequestToHandle = request => {
+        const possibleExternal = resolvePossibleExternal(request);
+        if (possibleExternal !== undefined && typeof possibleExternal !== 'string') {
+            return possibleExternal.handle;
+        }
+        return undefined;
+    };
+    return assumeGlobalizedPlauditLibraries
+        ? new dependency_extraction_webpack_plugin_1.default({
+            requestToExternal: curryRequestHandlers(baselineRequestToExternal, plauditRequestToExternal),
+            requestToHandle: curryRequestHandlers(baselineRequestToHandle, plauditRequestToHandle),
+        })
+        : new dependency_extraction_webpack_plugin_1.default({
+            requestToExternal: baselineRequestToExternal,
+            requestToHandle: baselineRequestToHandle,
+        });
+}
+const PLAUDIT_NAMESPACE = '@plaudit/';
+const EXTERNALIZABLE_PLAUDIT_LIBRARIES = ['@plaudit/library-extensions'];
+function plauditRequestToExternal(request) {
+    if (EXTERNALIZABLE_PLAUDIT_LIBRARIES.includes(request)) {
+        return ['plaudit', camelCaseDash(request.substring(PLAUDIT_NAMESPACE.length))];
+    }
+    else if (request.startsWith('@plaudit/gutenberg-api-extensions')) {
+        return ['plaudit', 'gutenbergApiExtensions'];
+    }
+    return undefined;
+}
+function plauditRequestToHandle(request) {
+    if (EXTERNALIZABLE_PLAUDIT_LIBRARIES.includes(request)) {
+        return 'plaudit-' + request.substring(PLAUDIT_NAMESPACE.length);
+    }
+    else if (request.startsWith('@plaudit/gutenberg-api-extensions')) {
+        return 'plaudit-gutenberg-api-extensions';
+    }
+    return undefined;
+}
+function curryRequestHandlers(primary, secondary) {
+    return (...args) => primary(...args) ?? secondary(...args);
+}
+/**
+ * Copied from @wordpress/dependency-extraction-webpack-plugin for consistency
+ */
+function camelCaseDash(string) {
+    return string.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}

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

@@ -1,3 +1,4 @@
+import { type Externals } from "./wordpress-scripts-wrapper/dependency-extraction-webpack-plugin-config-builder";
 import type { Options as PostcssFunctionsOptions } from "postcss-functions";
 import type { Configuration } from "webpack";
 interface AdvancedOutputConfig {
@@ -5,14 +6,8 @@ interface AdvancedOutputConfig {
     withLegacyBlocksIn?: string | undefined;
     additionalDependencies?: string[];
     directoryLayout?: 'blocks' | 'extensions';
+    assumeGlobalizedPlauditLibraries?: boolean;
 }
-type IndividualExternalDepConfig = string | {
-    import?: string | [string, ...string[]];
-    handle: string;
-};
-type Externals = {
-    [dep: string]: IndividualExternalDepConfig;
-};
 type PlauditWordpressWebpackConfig = {
     standaloneBlocks?: boolean;
     variables?: Record<string, any>;
@@ -23,6 +18,7 @@ type PlauditWordpressWebpackConfig = {
         functions?: (variables: (name: string) => unknown) => PostcssFunctionsOptions['functions'];
     };
     externals?: Externals;
+    assumeGlobalizedPlauditLibraries?: boolean;
 };
 declare const _default: (config: PlauditWordpressWebpackConfig, webpackConfig?: Configuration[] | Configuration) => Configuration[];
 export = _default;

package/build/wordpress-scripts-wrapper.js

@@ -6,7 +6,9 @@ const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
 const AdditionalDependencyInjectorPlugin_1 = __importDefault(require("./wordpress-scripts-wrapper/AdditionalDependencyInjectorPlugin"));
 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 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");
 const static_configs_1 = require("./wordpress-scripts-wrapper/static-configs");
@@ -17,9 +19,6 @@ const webpack_remove_empty_scripts_1 = __importDefault(require("webpack-remove-e
 function joinPossiblyAbsolutePaths(...paths) {
     return paths.reduce((res, p) => !res || node_path_1.default.isAbsolute(p) ? p : node_path_1.default.join(res, p), '') || '.';
 }
-function test(content, map, meta) {
-    this.resourcePath;
-}
 function mapToRealEntrypoints(entrypoint, dir, mapper = (entrypoint) => entrypoint, lazyDependent) {
     return (Array.isArray(entrypoint) ? entrypoint : [entrypoint])
         .map(ep => joinPossiblyAbsolutePaths(dir, mapper(ep)))
@@ -235,49 +234,6 @@ function parseEntrypointsJSON(dir) {
         });
     }
 }
-function makeDependencyExtractionPlugin(externals) {
-    const exactExternals = {};
-    const suffixExternals = [];
-    for (const [key, value] of Object.entries(externals)) {
-        const normalizedValue = typeof value !== 'string' && value.import === undefined ? { ...value, import: key } : value;
-        if (key.startsWith("*/")) {
-            suffixExternals.push([key.substring(1), typeof normalizedValue === 'string' ? { import: normalizedValue, handle: key.substring(2) } : normalizedValue]);
-        }
-        else {
-            exactExternals[key] = normalizedValue;
-        }
-    }
-    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'];
-            }
-            return undefined;
-        },
-        requestToHandle(request) {
-            const possibleExternal = resolvePossibleExternal(request);
-            if (possibleExternal !== undefined && typeof possibleExternal !== 'string') {
-                return possibleExternal.handle;
-            }
-            return undefined;
-        }
-    });
-}
 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;
@@ -290,7 +246,7 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
         scriptExtension = scriptWithoutModuleExtension;
         entrypointFields = ["editorStyle", "viewStyle", "style", "editorScript", "viewScript", "script"];
     }
-    const { standaloneBlocks, variablesFilePath, verbose, externals } = config;
+    const { standaloneBlocks, variablesFilePath, verbose, externals, assumeGlobalizedPlauditLibraries } = config;
     let currentVariables = config.currentVariables;
     const fixedRules = [
         replaceDefaultURLProcessing,
@@ -342,7 +298,7 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
         plugins.push(new webpack_remove_empty_scripts_1.default({
             stage: webpack_remove_empty_scripts_1.default.STAGE_AFTER_PROCESS_PLUGINS,
             extensions: ['css', 'scss', 'sass', 'less', 'styl', 'pcss']
-        }));
+        }), new MiniCSSExtractPluginErrorCleaner_1.default());
         if (variablesFilePath) {
             plugins.push(new VariablesJSMonitorPlugin_1.default(variablesFilePath));
         }
@@ -353,13 +309,14 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
         if (srcIsDirectory && (typeof dest !== 'string' && dest.directoryLayout === 'extensions')) {
             plugins.push(new ExtensionsConfigFileGeneratorPlugin_1.default(srcRoot));
         }
-        if (externals) {
-            const pluginIndex = plugins.findIndex(plugin => plugin instanceof dependency_extraction_webpack_plugin_1.default);
-            if (pluginIndex === -1) {
-                console.error("Cannot apply externals when they have been disabled via CLI flag.");
-            }
-            else {
-                plugins[pluginIndex] = makeDependencyExtractionPlugin(externals);
+        const pluginIndex = plugins.findIndex(plugin => plugin instanceof dependency_extraction_webpack_plugin_1.default);
+        if (pluginIndex === -1) {
+            console.error("Cannot apply externals when they have been disabled via CLI flag. This will greatly increase bundle size and will likely cause the build to file");
+        }
+        else {
+            const builtDependencyExtractionWebpackPlugin = (0, dependency_extraction_webpack_plugin_config_builder_1.makeDependencyExtractionPlugin)(externals, (typeof dest !== 'string' ? dest.assumeGlobalizedPlauditLibraries : undefined) ?? assumeGlobalizedPlauditLibraries);
+            if (builtDependencyExtractionWebpackPlugin) {
+                plugins[pluginIndex] = builtDependencyExtractionWebpackPlugin;
             }
         }
         if (process.argv.includes('--browser-sync') || process.env['BROWSER_SYNC'] === 'true') {
@@ -512,13 +469,13 @@ 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 } = config;
+    const { standaloneBlocks = false, stats = 'errors-warnings', variables: rawVariables, verbose = process.argv.includes('--verbose') || process.env['VERBOSE'] === 'true', postcss = {}, externals, assumeGlobalizedPlauditLibraries = 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 };
+    const cfg = { currentVariables, postcss, standaloneBlocks, stats, variablesFilePath, verbose, externals, assumeGlobalizedPlauditLibraries };
     const sources = Array.isArray(config.src) ? config.src.map(s => [s, s]) : Object.entries(config.src);
     if (Array.isArray(webpackConfig)) {
         return webpackConfig.toSorted((a, b) => {

package/package.json

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