@plaudit/webpack-extensions 2.95.0 → 2.96.1

package/dist/wordpress-ports/dependency-extraction-webpack-plugin/util.js

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultRequestToExternal = defaultRequestToExternal;
+exports.defaultRequestToExternalModule = defaultRequestToExternalModule;
+exports.defaultRequestToHandle = defaultRequestToHandle;
+exports.camelCaseDash = camelCaseDash;
+exports.isConcatenatedModule = isConcatenatedModule;
+exports.isEntrypoint = isEntrypoint;
+const WORDPRESS_NAMESPACE = '@wordpress/';
+const BUNDLED_PACKAGES = [
+    '@wordpress/admin-ui',
+    '@wordpress/dataviews',
+    '@wordpress/dataviews/wp',
+    '@wordpress/fields',
+    '@wordpress/grid',
+    '@wordpress/icons',
+    '@wordpress/interface',
+    '@wordpress/style-runtime',
+    '@wordpress/ui',
+    '@wordpress/undo-manager',
+    '@wordpress/views',
+];
+/**
+ * Default request to global transformation
+ *
+ * Transform @wordpress dependencies:
+ * - request `@wordpress/api-fetch` becomes `[ 'wp', 'apiFetch' ]`
+ * - request `@wordpress/i18n` becomes `[ 'wp', 'i18n' ]`
+ *
+ * @param {string} request Module request (the module name in `import from`) to be transformed
+ * @return {string|string[]|undefined} The resulting external definition. Return `undefined`
+ *   to ignore the request. Return `string|string[]` to map the request to an external.
+ */
+function defaultRequestToExternal(request) {
+    switch (request) {
+        case 'moment':
+            return request;
+        case '@babel/runtime/regenerator':
+            return 'regeneratorRuntime';
+        case 'lodash':
+        case 'lodash-es':
+            return 'lodash';
+        case 'jquery':
+            return 'jQuery';
+        case 'react':
+            return 'React';
+        case 'react-dom':
+        case 'react-dom/client':
+            return 'ReactDOM';
+        case 'react/jsx-runtime':
+        case 'react/jsx-dev-runtime':
+            return 'ReactJSXRuntime';
+    }
+    if (request.includes('react-refresh/runtime')) {
+        return 'ReactRefreshRuntime';
+    }
+    if (BUNDLED_PACKAGES.includes(request)) {
+        return undefined;
+    }
+    if (request.startsWith(WORDPRESS_NAMESPACE)) {
+        return [
+            'wp',
+            camelCaseDash(request.substring(WORDPRESS_NAMESPACE.length)),
+        ];
+    }
+    return undefined;
+}
+/**
+ * Default request to external module transformation
+ *
+ * Currently only @wordpress/interactivity and `@wordpress/interactivity-router`
+ * are supported.
+ *
+ * Do not use the boolean shorthand here, it's only handled for the
+ * `requestToExternalModule` option.
+ *
+ * @param {string} request Module request (the module name in `import from`) to be transformed
+ * @return {string|undefined} The resulting external definition.
+ *   - Return `undefined` to ignore the request (do not externalize).
+ *   - Return `string` to map the request to an external.
+ *   - Return `Error` to emit an error.
+ */
+function defaultRequestToExternalModule(request) {
+    if (request === '@wordpress/interactivity') {
+        // This is a special case. Interactivity does not support dynamic imports at
+        // this time. We add the external "module" type to indicate that webpack
+        // should externalize this as a module (instead of our default `import()`
+        // external type) which forces @wordpress/interactivity imports to be
+        // hoisted to static imports.
+        return `module ${request}`;
+    }
+    switch (request) {
+        case '@wordpress/interactivity-router':
+        case '@wordpress/a11y':
+            return `import ${request}`;
+    }
+    const isWordPressScript = Boolean(defaultRequestToExternal(request));
+    if (isWordPressScript) {
+        throw new Error(`Attempted to use WordPress script in a module: ${request}, which is not supported yet.`);
+    }
+    return undefined;
+}
+/**
+ * Default request to WordPress script handle transformation
+ *
+ * Transform @wordpress dependencies:
+ * - request `@wordpress/i18n` becomes `wp-i18n`
+ * - request `@wordpress/escape-html` becomes `wp-escape-html`
+ *
+ * @param {string} request Module request (the module name in `import from`) to be transformed
+ * @return {string|undefined} WordPress script handle to map the request to. Return `undefined`
+ *   to use the same name as the module.
+ */
+function defaultRequestToHandle(request) {
+    switch (request) {
+        case '@babel/runtime/regenerator':
+            return 'regenerator-runtime';
+        case 'lodash-es':
+            return 'lodash';
+        case 'react-dom/client':
+            return 'react-dom';
+        case 'react/jsx-runtime':
+            return 'react-jsx-runtime';
+    }
+    if (request.includes('react-refresh/runtime')) {
+        return 'wp-react-refresh-runtime';
+    }
+    if (request.startsWith(WORDPRESS_NAMESPACE)) {
+        return 'wp-' + request.substring(WORDPRESS_NAMESPACE.length);
+    }
+    return undefined;
+}
+/**
+ * Given a string, returns a new string with dash separators converted to
+ * camelCase equivalent. This is not as aggressive as `_.camelCase` in
+ * converting to uppercase, where Lodash will also capitalize letters
+ * following numbers.
+ *
+ * @param {string} string Input dash-delimited string.
+ * @return {string} Camel-cased string.
+ */
+function camelCaseDash(string) {
+    return string.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+function isConcatenatedModule(module) {
+    return 'modules' in module && Array.isArray(module.modules);
+}
+function isEntrypoint(group) {
+    return !!group && group.constructor.name === 'Entrypoint';
+}

package/dist/wordpress-scripts-wrapper.js

@@ -90,7 +90,7 @@ function replaceDefaultURLProcessing(useWebpackResourceFiltering) {
 }
 function injectPostcssConfigOverrides(rules, config, variables, postcssFunctionsConfig, verbose) {
     const postcssConfig = (0, static_configs_1.postcssConfigBuilder)(verbose, name => variables(name) ?? (name === 'ENV' ? '' : undefined), postcssFunctionsConfig);
-    return recursivelyAddParentDirectoryStepToImagesAndFonts(rules.map(rule => {
+    return rules.map(rule => {
         if (rule && typeof rule === 'object') {
             if (Array.isArray(rule.use)) {
                 for (const useItem of rule.use) {
@@ -130,26 +130,6 @@ function injectPostcssConfigOverrides(rules, config, variables, postcssFunctions
             }
         }
         return rule;
-    }), config);
-}
-function recursivelyAddParentDirectoryStepToImagesAndFonts(rules, config) {
-    if (config.outputDir) {
-        return rules;
-    }
-    return rules.map(rule => {
-        if (rule && typeof rule === 'object') {
-            if (typeof rule.generator === 'object') {
-                const ruleGeneratorFilename = rule.generator["filename"];
-                if (typeof ruleGeneratorFilename === 'string' && (ruleGeneratorFilename.startsWith("images/") || ruleGeneratorFilename.startsWith("fonts/"))) {
-                    rule.generator["filename"] = `../${ruleGeneratorFilename}`;
-                    rule = { ...rule, generator: { ...rule.generator, filename: `../${ruleGeneratorFilename}` } };
-                }
-            }
-            if (rule.oneOf) {
-                rule = { ...rule, oneOf: recursivelyAddParentDirectoryStepToImagesAndFonts(rule.oneOf, config) };
-            }
-        }
-        return rule;
     });
 }
 function injectSupportForInliningSVGsAsStrings(rules) {
@@ -167,7 +147,7 @@ function injectSupportForInliningSVGsAsStrings(rules) {
 }
 function buildVerifiedConfig(config) {
     config = (0, shared_1.applyStandards)(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, plainEntrypointsVersion = 1, srcDir = "", useUnifiedLoader = false, includePostInitFallback = false, omitDistDev = false, onlyRunPostCSSOnPCSS = false, useBlockSupportsAsThemeJsonDefaults = 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, useWebpackResourceFiltering = true, plainEntrypointsVersion = 1, srcDir = "", useUnifiedLoader = false, includePostInitFallback = false, omitDistDev = false, onlyRunPostCSSOnPCSS = false, useBlockSupportsAsThemeJsonDefaults = true, } = config;
     let outputDir = config.outputDir ?? "";
     if (outputDir && useUnifiedLoader && !omitDistDev && (process.env['SERVER_MODE'] ?? 'development') === 'development') {
         outputDir += "-dev";
@@ -204,31 +184,54 @@ function buildVerifiedConfig(config) {
         extensionsVersion = 3; // Version 3 is a backwards-compatible upgrade of version 2, so we can automatically upgrade everything
     }
     const cfg = {
-        currentVariables, postcss, standaloneBlocks, stats, variablesFilePath, verbose, externals, assumeGlobalizedPlauditLibraries, processTranslationConfigs, combineAssetMetadata,
+        currentVariables, postcss, standaloneBlocks, stats, variablesFilePath, verbose, externals, assumeGlobalizedPlauditLibraries, processTranslationConfigs,
         useWebpackResourceFiltering, outputDir, extensionsVersion, plainEntrypointsVersion, srcDir, srcPrefixes, targetHandlePrefix, useUnifiedLoader, includePostInitFallback, omitDistDev,
         onlyRunPostCSSOnPCSS, useBlockSupportsAsThemeJsonDefaults
     };
     // Destination -> source map
     const allocatedDestinations = {};
-    const partiallyVerifiedSources = rawSources.map(rawSource => {
-        const { destination, additionalDependencies = [], assumeGlobalizedPlauditLibraries = cfg.assumeGlobalizedPlauditLibraries, bundleAnalyzer = false, directoryLayout, externalize, withLegacyBlocksIn = false, lazyLoader, pathQueryParameters: rawPathQueryParameters, enqueuingFlags: rawEnqueuingFlags } = rawSource[1];
-        const { flags: queryEnqueuingFlags, remainder: pathQueryParameters } = (0, path_query_and_related_helpers_1.unpackEnqueuingControlFlagsFromPathQueryParameters)(rawPathQueryParameters, rawSource[0], 'path query parameters');
-        const enqueuingFlags = (0, path_query_and_related_helpers_1.mergeTwoEnqueuingControlFlagSets)(rawSource[0], rawEnqueuingFlags, queryEnqueuingFlags);
+    const partiallyVerifiedSources = rawSources.map(([src, config]) => {
+        const { destination, additionalDependencies = [], assumeGlobalizedPlauditLibraries = cfg.assumeGlobalizedPlauditLibraries, bundleAnalyzer = false, directoryLayout, externalize, withLegacyBlocksIn = false, lazyLoader, pathQueryParameters: rawPathQueryParameters, enqueuingFlags: rawEnqueuingFlags, locations: rawSourceLocations, } = config;
+        const { flags: queryEnqueuingFlags, remainder: pathQueryParameters, handle: pathQueryHandle } = (0, path_query_and_related_helpers_1.unpackEnqueuingControlFlagsFromPathQueryParameters)(rawPathQueryParameters, src, 'path query parameters');
+        const enqueuingFlags = (0, path_query_and_related_helpers_1.mergeTwoEnqueuingControlFlagSets)(src, rawEnqueuingFlags, queryEnqueuingFlags);
         const normalizedParts = { additionalDependencies, assumeGlobalizedPlauditLibraries, bundleAnalyzer, directoryLayout, externalize, withLegacyBlocksIn, lazyLoader };
-        const locations = typeof rawSource[1].locations === 'string' || typeof rawSource[1].locations === 'function'
-            ? { handle: rawSource[1].locations } : rawSource[1].locations ?? {};
+        let locations;
+        if (pathQueryHandle === undefined) {
+            locations = typeof rawSourceLocations === 'string' || typeof rawSourceLocations === 'function'
+                ? { handle: rawSourceLocations } : rawSourceLocations ?? {};
+        }
+        else {
+            const rawSourceHandle = typeof rawSourceLocations === 'string' || typeof rawSourceLocations === 'function'
+                ? rawSourceLocations : rawSourceLocations?.handle;
+            if (rawSourceHandle === undefined) {
+                locations = { handle: pathQueryHandle };
+            }
+            else if (typeof rawSourceHandle === 'string') {
+                if (rawSourceHandle !== pathQueryHandle) {
+                    throw new ReferenceError(`Encountered mismatched handles "${rawSourceHandle}" and "${pathQueryHandle}" when preparing "${src}"`);
+                }
+                locations = { handle: pathQueryHandle };
+            }
+            else {
+                throw new ReferenceError(`Encountered a function handle and a path query handle when preparing "${src}"`);
+            }
+            // This is just a means of merging the new handle into the rawSourceLocations config without mutating the base config
+            if (rawSourceLocations !== undefined && typeof rawSourceLocations !== 'function' && typeof rawSourceLocations !== 'string') {
+                locations = { ...rawSourceLocations, ...locations };
+            }
+        }
         if (typeof locations.registerScriptArgs === 'string' && !['lazy', 'eager', 'inline'].includes(locations.registerScriptArgs)) {
             throw new ReferenceError("The only supported string values for registerScriptArgs are 'lazy', 'eager', and 'inline'");
         }
         if (destination !== undefined) {
             const effectiveDestination = toEffectiveWebpackDestination(destination);
-            allocatedDestinations[effectiveDestination] = rawSource[0]; // We need to pre-populate the allocatedDestinations map with statically declared destinations
-            return [rawSource[0], { ...normalizedParts, locations, destination, effectiveDestination, staticallyDeclaredDestination: true, pathQueryParameters, enqueuingFlags }];
+            allocatedDestinations[effectiveDestination] = src; // We need to pre-populate the allocatedDestinations map with statically declared destinations
+            return [src, { ...normalizedParts, locations, destination, effectiveDestination, staticallyDeclaredDestination: true, pathQueryParameters, enqueuingFlags }];
         }
         else {
-            const naiveDestination = deriveNaiveDestinationFromUnverifiedSourceEntry(rawSource, srcPrefixes);
+            const naiveDestination = deriveNaiveDestinationFromUnverifiedSourceEntry(src, destination, srcPrefixes);
             const effectiveDestination = toEffectiveWebpackDestination(naiveDestination);
-            return [rawSource[0], { ...normalizedParts, locations, destination: naiveDestination, effectiveDestination, staticallyDeclaredDestination: false, pathQueryParameters, enqueuingFlags }];
+            return [src, { ...normalizedParts, locations, destination: naiveDestination, effectiveDestination, staticallyDeclaredDestination: false, pathQueryParameters, enqueuingFlags }];
         }
     });
     const dynamicEffectiveDestinationsWithExpectedNaiveDuplicates = partiallyVerifiedSources
@@ -247,7 +250,7 @@ function toEffectiveWebpackDestination(destination) {
     const pathParts = (0, node_path_1.parse)(destination);
     return (0, node_path_1.join)(pathParts.dir, pathParts.name);
 }
-function deriveNaiveDestinationFromUnverifiedSourceEntry([src, { destination }], srcPrefixes) {
+function deriveNaiveDestinationFromUnverifiedSourceEntry(src, destination, srcPrefixes) {
     if (destination !== undefined) {
         return destination;
     }
@@ -377,7 +380,7 @@ function buildCommonPluginConfig(webpackConfig, config, bundleAnalyzer, assumeGl
         ?? [];
     plugins.splice(0, 0, new PackageConfigSanityChecker_1.PackageConfigSanityChecker());
     if (bundleAnalyzer) {
-        plugins.splice(0, 0, new (require("webpack-bundle-analyzer").BundleAnalyzerPlugin)({ analyzerMode: 'static' }));
+        plugins.splice(0, 0, new (require("webpack-bundle-analyzer").BundleAnalyzerPlugin)({ analyzerMode: 'static', openAnalyzer: bundleAnalyzer !== 'no-auto-open' }));
     }
     const removeEmptyScriptsPlugin = new webpack_remove_empty_scripts_1.default({
         stage: webpack_remove_empty_scripts_1.default.STAGE_AFTER_PROCESS_PLUGINS,
@@ -400,8 +403,8 @@ function buildCommonPluginConfig(webpackConfig, config, bundleAnalyzer, assumeGl
         console.error("Once those commands have finished, re-run whichever command had this error. If it still doesn't work, report the issue immediately.");
         throw new 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 fail");
     }
-    const builtDependencyExtractionWebpackPlugin = (0, dependency_extraction_webpack_plugin_config_builder_1.makeDependencyExtractionPlugin)(config.externals, assumeGlobalizedPlauditLibraries, true, externalize);
-    plugins[dependencyExtractionPluginIndex] = builtDependencyExtractionWebpackPlugin.instance;
+    const builtDependencyExtractionWebpackPlugin = (0, dependency_extraction_webpack_plugin_config_builder_1.makeDependencyExtractionPlugin)(config.externals, assumeGlobalizedPlauditLibraries, externalize);
+    plugins[dependencyExtractionPluginIndex] = builtDependencyExtractionWebpackPlugin;
     plugins.push(new BrowserSyncPlugin_1.BrowserSyncPlugin());
     return {
         plugins, removeEmptyScriptsPlugin,

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "2.95.0",
+  "version": "2.96.1",
   "license": "SEE LICENSE IN LICENSE.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/plaudit/plaudit-webpack-extensions.git"
+  },
   "files": [
     "/dist",
     "README.md",
@@ -35,6 +39,14 @@
     "@types/postcss-functions": "^4.0.4",
     "@types/tapable": "^2.3.0",
     "@types/webpack-sources": "^3.2.3",
+    "atob": "^2.1.2",
+    "css-loader": "^6.2.0",
+    "glob": "^7.1.2",
+    "jest": "^30.0.0",
+    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^2.9.2",
+    "mkdirp": "^3.0.1",
+    "rimraf": "^5.0.10",
     "typescript": "^6.0.3",
     "webpack-bundle-analyzer": "^4.10.2"
   },
@@ -82,6 +94,10 @@
     "clean": "rm -rf dist",
     "build:clean": "pnpm run clean && pnpm run build",
     "watch": "tsc -w",
+    "test": "pnpm run build && pnpm run test:no-build",
+    "test:no-build": "rm -rf tests/.tmp/coverage/jest && NODE_V8_COVERAGE=tests/.tmp/coverage/jest jest",
+    "test:paths": "pnpm run build && jest tests/integration-2x/paths",
+    "test:gaps": "node tests/tools/coverage-gaps.js",
     "update": "pnpm add --config '@plaudit/pnpm-plugin-plaudit-config@*' && pnpm up"
   }
 }