@plaudit/webpack-extensions 3.16.0 → 3.17.0

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

@@ -0,0 +1,522 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnhancedDependencyExtractionWebpackPlugin = void 0;
+const dependency_extraction_webpack_plugin_1 = __importDefault(require("@wordpress/dependency-extraction-webpack-plugin"));
+const webpack_1 = require("webpack");
+/**
+ * Internal dependencies
+ */
+const util_1 = require("./util");
+const defaultExternalizedReportFileName = 'externalized-dependencies.json';
+class EnhancedDependencyExtractionWebpackPlugin {
+    /**
+     * Track requests that are externalized.
+     *
+     * Because we don't have a closed set of dependencies, we need to track what has
+     * been externalized so we can recognize them in a later phase when the dependency
+     * lists are generated.
+     */
+    externalizedDeps = new Set();
+    options;
+    /**
+     * Track requests that a script build externalizes as script modules.
+     *
+     * These can only be reached through a runtime `import()`, which requires
+     * support for dynamic import in the output environment. The set is used
+     * to report an actionable error when that support is missing.
+     */
+    scriptModuleDepsInScript = new Set();
+    /**
+     * Whether we should use modules. This will be set later to match webpack's `output.module` option.
+     */
+    useModules = false;
+    constructor(options) {
+        if (options instanceof dependency_extraction_webpack_plugin_1.default) {
+            options = options.options;
+        }
+        if (options instanceof EnhancedDependencyExtractionWebpackPlugin) {
+            options = options.options;
+        }
+        this.options = {
+            externalizedReport: false,
+            injectPolyfill: false,
+            outputFilename: undefined,
+            useDefaults: true,
+            ...options
+        };
+    }
+    /**
+     * Convert a script module request to an external suitable for a script
+     * build.
+     *
+     * A classic script cannot contain a static `import`, so the `module`
+     * external type is not usable here: the script module has to be reached
+     * through a runtime `import()`, which is the `import` external type. The
+     * bare specifier is resolved by the import map that WordPress prints for
+     * enqueued script modules.
+     *
+     * @param {string}                request  Original module request.
+     * @param {string|boolean|Error=} external Result of a script module external resolution.
+     * @return {string|undefined} The resulting external definition.
+     */
+    static toScriptModuleExternalInScript(request, external) {
+        if (!external) {
+            return undefined;
+        }
+        if (external instanceof Error) {
+            throw external;
+        }
+        // The script module resolvers allow a boolean shorthand.
+        const target = external === true ? request : String(external);
+        return target.replace(/^module\s+/, 'import ');
+    }
+    externalizeWpDeps = ({ request }, callback) => {
+        let externalRequest;
+        let isScriptModule = false;
+        try {
+            // Handle via options.requestToExternal(Module)  first.
+            if (this.useModules) {
+                if (typeof this.options.requestToExternalModule === 'function') {
+                    const rawExternalRequest = this.options.requestToExternalModule(request);
+                    // requestToExternalModule allows a boolean shorthand
+                    if (rawExternalRequest === false) {
+                        externalRequest = undefined;
+                    }
+                    else if (rawExternalRequest === true) {
+                        externalRequest = request;
+                    }
+                    else {
+                        externalRequest = rawExternalRequest;
+                    }
+                }
+            }
+            else {
+                if (typeof this.options.requestToExternal === 'function') {
+                    externalRequest = this.options.requestToExternal(request);
+                }
+                /*
+                 * A script can depend on a script module, so fall back to
+                 * `requestToScriptModule`. An explicit `requestToExternal`
+                 * mapping wins: it describes a global that is known to exist.
+                 *
+                 * This deliberately does not consult `requestToExternalModule`:
+                 * that option describes a module build, and the same options
+                 * object is commonly shared by both builds.
+                 */
+                if (typeof externalRequest === 'undefined' &&
+                    typeof this.options.requestToScriptModule === 'function') {
+                    externalRequest =
+                        EnhancedDependencyExtractionWebpackPlugin.toScriptModuleExternalInScript(request, this.options.requestToScriptModule(request));
+                    isScriptModule = Boolean(externalRequest);
+                }
+            }
+            // Cascade to default if unhandled and enabled.
+            if (typeof externalRequest === 'undefined' &&
+                this.options.useDefaults) {
+                if (this.useModules) {
+                    externalRequest = (0, util_1.defaultRequestToExternalModule)(request);
+                }
+                else {
+                    /*
+                     * Prefer the script module: a request that is available as
+                     * a script module is used as one, even when it is also
+                     * registered as a script.
+                     */
+                    try {
+                        externalRequest =
+                            EnhancedDependencyExtractionWebpackPlugin.toScriptModuleExternalInScript(request, (0, util_1.defaultRequestToExternalModule)(request));
+                        isScriptModule = Boolean(externalRequest);
+                    }
+                    catch {
+                        /*
+                         * `defaultRequestToExternalModule` throws for WordPress
+                         * scripts, which is exactly what we want to fall back
+                         * to here.
+                         */
+                    }
+                    if (typeof externalRequest === 'undefined') {
+                        externalRequest = (0, util_1.defaultRequestToExternal)(request);
+                    }
+                }
+            }
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                return callback(err);
+            }
+            throw err;
+        }
+        if (externalRequest) {
+            this.externalizedDeps.add(request);
+            if (isScriptModule) {
+                this.scriptModuleDepsInScript.add(request);
+            }
+            return callback(null, externalRequest);
+        }
+        return callback();
+    };
+    /**
+     * @param {string} request
+     * @return {string} Mapped dependency name
+     */
+    mapRequestToDependency(request) {
+        // Handle via options.requestToHandle first.
+        if (typeof this.options.requestToHandle === 'function') {
+            const scriptDependency = this.options.requestToHandle(request);
+            if (scriptDependency) {
+                return scriptDependency;
+            }
+        }
+        // Cascade to default if enabled.
+        if (this.options.useDefaults) {
+            const scriptDependency = (0, util_1.defaultRequestToHandle)(request);
+            if (scriptDependency) {
+                return scriptDependency;
+            }
+        }
+        // Fall back to the request name.
+        return request;
+    }
+    // noinspection JSUnusedGlobalSymbols
+    apply(compiler) {
+        this.useModules = Boolean(compiler.options.output?.module);
+        /**
+         * Offload externalization work to the ExternalsPlugin.
+         */
+        new webpack_1.ExternalsPlugin(this.useModules ? 'import' : 'window', this.externalizeWpDeps).apply(compiler);
+        compiler.hooks.thisCompilation.tap(this.constructor.name, (compilation) => {
+            compilation.hooks.processAssets.tap({
+                name: this.constructor.name,
+                stage: compiler.webpack.Compilation
+                    .PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY,
+            }, () => this.checkForMagicComments(compilation));
+            compilation.hooks.processAssets.tap({
+                name: this.constructor.name,
+                stage: compiler.webpack.Compilation
+                    .PROCESS_ASSETS_STAGE_ANALYSE,
+            }, () => this.addAssets(compilation));
+        });
+    }
+    /**
+     * Check for magic comments before minification, so minification doesn't have to preserve them.
+     */
+    checkForMagicComments(compilation) {
+        // Accumulate all entrypoint chunks, some of them shared
+        const entrypointChunks = new Set();
+        for (const entrypoint of compilation.entrypoints.values()) {
+            for (const chunk of entrypoint.chunks) {
+                entrypointChunks.add(chunk);
+            }
+        }
+        // Process each entrypoint chunk independently
+        for (const chunk of entrypointChunks) {
+            const chunkFiles = Array.from(chunk.files);
+            const jsExtensionRegExp = this.useModules ? /\.m?js$/i : /\.js$/i;
+            const chunkJSFile = chunkFiles.find((f) => jsExtensionRegExp.test(f));
+            if (!chunkJSFile) {
+                // There's no JS file in this chunk, no work for us. This is typically a `style.css` from cache group.
+                continue;
+            }
+            // Prepare to look for magic comments, in order to decide whether
+            // `wp-polyfill` is needed.
+            const processContentsForMagicComments = (content) => {
+                const magicComments = [];
+                if (content.includes('/* wp:polyfill */')) {
+                    magicComments.push('wp-polyfill');
+                }
+                return magicComments;
+            };
+            // Go through the assets to process the sources.
+            // This allows us to look for magic comments.
+            for (const filename of chunkFiles.sort()) {
+                const asset = compilation.getAsset(filename);
+                const content = asset?.source.buffer();
+                const wpMagicComments = content ? processContentsForMagicComments(content) : [];
+                compilation.updateAsset(filename, (v) => v, {
+                    wpMagicComments,
+                });
+            }
+        }
+    }
+    addAssets(compilation) {
+        const { externalizedReport, injectPolyfill, } = this.options;
+        /*
+         * A script reaches a script module through a runtime `import()`, so the
+         * output environment has to support it. Report this directly: webpack's
+         * own error for the underlying external does not explain the cause.
+         */
+        if (!this.useModules &&
+            this.scriptModuleDepsInScript.size &&
+            compilation.outputOptions.environment?.dynamicImport === false) {
+            compilation.errors.push(new webpack_1.WebpackError(`${this.constructor.name}: ${Array.from(this.scriptModuleDepsInScript)
+                .sort()
+                .join(', ')} can only be loaded from a script through a dynamic \`import()\`, but the output environment does not support it. ` +
+                "Set `target: 'browserslist'` with a browserslist configuration whose browsers support dynamic import (as @wordpress/scripts does), or set `output.environment.dynamicImport: true`."));
+        }
+        // Dump actually externalized dependencies to a report file.
+        if (externalizedReport) {
+            const externalizedReportFile = typeof externalizedReport === 'string' ? externalizedReport : defaultExternalizedReportFileName;
+            compilation.emitAsset(externalizedReportFile, new webpack_1.sources.RawSource(JSON.stringify(Array.from(this.externalizedDeps).sort())));
+        }
+        const combinedAssetsData = {};
+        const jsExtensionRegExp = this.useModules ? /\.m?js$/i : /\.js$/i;
+        // Accumulate all entrypoint chunks, some of them shared
+        const entrypointChunks = new Set();
+        /**
+         * Track the files of each entrypoint's JS-less chunks, typically styles
+         * extracted by a `style.css` cache group. Those chunks don't get an
+         * asset file of their own, but their content must contribute to the
+         * version hash of the entrypoint's entry chunk so that style-only
+         * changes still produce a new version.
+         */
+        const styleFilesByEntryChunk = new Map();
+        for (const entrypoint of compilation.entrypoints.values()) {
+            const entryChunk = entrypoint.getEntrypointChunk();
+            for (const chunk of entrypoint.chunks) {
+                entrypointChunks.add(chunk);
+                if (chunk === entryChunk ||
+                    Array.from(chunk.files).some((f) => jsExtensionRegExp.test(f))) {
+                    continue;
+                }
+                const styleFiles = styleFilesByEntryChunk.get(entryChunk) ?? new Set();
+                for (const file of chunk.files) {
+                    styleFiles.add(file);
+                }
+                styleFilesByEntryChunk.set(entryChunk, styleFiles);
+            }
+        }
+        // Process each entrypoint chunk independently
+        for (const chunk of entrypointChunks) {
+            const chunkFiles = Array.from(chunk.files);
+            const chunkJSFile = chunkFiles.find((f) => jsExtensionRegExp.test(f));
+            if (!chunkJSFile) {
+                // There's no JS file in this chunk, no work for us. This is typically a `style.css` from cache group.
+                continue;
+            }
+            const chunkStaticDeps = new Set();
+            const chunkDynamicDeps = new Set();
+            const chunkScriptModuleStaticDeps = new Set();
+            const chunkScriptModuleDynamicDeps = new Set();
+            if (injectPolyfill) {
+                chunkStaticDeps.add('wp-polyfill');
+            }
+            /**
+             * @param {webpack.Module} m
+             * @param {boolean}        [fromAsyncChunk] Module was found in an async chunk of the entry.
+             */
+            const processModule = (m, fromAsyncChunk) => {
+                let viableRequest = typeof m.request === 'string' && m.request !== '__REMOVE_ME__' ? m.request : m.userRequest;
+                if (viableRequest !== undefined && !this.externalizedDeps.has(viableRequest) && viableRequest !== m.userRequest) {
+                    viableRequest = m.userRequest;
+                }
+                if (viableRequest !== undefined && this.externalizedDeps.has(viableRequest)) {
+                    if (this.useModules) {
+                        // A static occurrence (in the entry chunk) wins.
+                        if (fromAsyncChunk && chunkStaticDeps.has(viableRequest)) {
+                            return;
+                        }
+                        // Externals in an async chunk are reached via a dynamic
+                        // import by definition.
+                        const isStatic = !fromAsyncChunk &&
+                            EnhancedDependencyExtractionWebpackPlugin.hasStaticDependencyPathToRoot(compilation, m);
+                        (isStatic ? chunkStaticDeps : chunkDynamicDeps).add(viableRequest);
+                    }
+                    else if (m instanceof webpack_1.ExternalModule && (m.externalType === 'import' || m.externalType === 'module')) {
+                        // A static occurrence (in the entry chunk) wins.
+                        if (fromAsyncChunk && chunkScriptModuleStaticDeps.has(viableRequest)) {
+                            return;
+                        }
+                        // Externals in an async chunk are reached via a dynamic
+                        // import by definition.
+                        const isStatic = !fromAsyncChunk &&
+                            EnhancedDependencyExtractionWebpackPlugin.hasStaticDependencyPathToRoot(compilation, m);
+                        (isStatic ? chunkScriptModuleStaticDeps : chunkScriptModuleDynamicDeps).add(viableRequest);
+                    }
+                    else {
+                        chunkStaticDeps.add(this.mapRequestToDependency(viableRequest));
+                    }
+                }
+            };
+            const processChunkModules = (searchChunk, fromAsyncChunk) => {
+                for (const chunkModule of compilation.chunkGraph.getChunkModulesIterable(searchChunk)) {
+                    if (chunkModule instanceof webpack_1.NormalModule || chunkModule instanceof webpack_1.ExternalModule) {
+                        processModule(chunkModule, fromAsyncChunk);
+                    }
+                    if ((0, util_1.isConcatenatedModule)(chunkModule) && chunkModule.modules) {
+                        // Loop through submodules of ConcatenatedModule.
+                        for (const concatModule of chunkModule.modules) {
+                            if (concatModule instanceof webpack_1.NormalModule || concatModule instanceof webpack_1.ExternalModule) {
+                                processModule(concatModule, fromAsyncChunk);
+                            }
+                        }
+                    }
+                }
+            };
+            processChunkModules(chunk);
+            /*
+             * Also search the entry's async chunks: webpack can code-split a
+             * dynamically imported external into its own chunk.
+             */
+            for (const group of chunk.groupsIterable) {
+                if (!(0, util_1.isEntrypoint)(group) || group.getEntrypointChunk() !== chunk) {
+                    continue;
+                }
+                const seenGroups = new Set();
+                const groupQueue = [...group.getChildren()];
+                for (let childGroup = groupQueue.pop(); childGroup !== undefined; childGroup = groupQueue.pop()) {
+                    if (!seenGroups.has(childGroup)) {
+                        seenGroups.add(childGroup);
+                        for (const asyncChunk of childGroup.chunks) {
+                            processChunkModules(asyncChunk, true);
+                        }
+                        groupQueue.push(...childGroup.getChildren());
+                    }
+                }
+            }
+            // Prepare to hash the sources. We can't just use
+            // `chunk.contentHash` because that's not updated when
+            // assets are minified. In practice the hash is updated by
+            // `RealContentHashPlugin` after minification, but it only modifies
+            // already-produced asset filenames and the updated hash is not
+            // available to plugins.
+            const { hashFunction, hashDigest, hashDigestLength } = compilation.outputOptions;
+            const hashBuilder = webpack_1.util.createHash(hashFunction);
+            // Prepare to look for magic comments in order to decide whether `wp-polyfill` is needed.
+            const handleMagicComments = (info) => {
+                if (info && info.includes('wp-polyfill')) {
+                    chunkStaticDeps.add('wp-polyfill');
+                }
+            };
+            // Include the files of the entrypoint's JS-less sibling chunks,
+            // typically extracted styles, in the version hash so that
+            // style-only changes still produce a new version.
+            const filesToHash = [
+                ...new Set([
+                    ...chunkFiles,
+                    ...(styleFilesByEntryChunk.get(chunk) ?? []),
+                ]),
+            ];
+            // Go through the assets to process the sources.
+            // This allows us to generate hashes, as well as look for magic comments.
+            for (const filename of filesToHash.sort()) {
+                const asset = compilation.getAsset(filename);
+                if (asset) {
+                    const content = asset.source.buffer();
+                    hashBuilder.update(content);
+                    handleMagicComments(asset.info.wpMagicComments);
+                }
+            }
+            // Finalise hash.
+            const contentHash = hashBuilder
+                .digest(hashDigest)
+                .slice(0, hashDigestLength);
+            const assetData = {
+                dependencies: [
+                    // Sort these so we can produce a stable, stringified representation.
+                    ...Array.from(chunkStaticDeps).sort(),
+                    ...Array.from(chunkDynamicDeps)
+                        .sort()
+                        .map((id) => ({ id, import: 'dynamic' })),
+                ],
+            };
+            /*
+             * Merge the script module dependencies into a single list, keyed by
+             * script module ID, with an explicit import kind for each. This is
+             * the shape WordPress writes for its own assets.
+             */
+            const scriptModuleDeps = new Map();
+            for (const id of chunkScriptModuleDynamicDeps) {
+                scriptModuleDeps.set(id, 'dynamic');
+            }
+            // A static occurrence wins: the script cannot start without it.
+            for (const id of chunkScriptModuleStaticDeps) {
+                scriptModuleDeps.set(id, 'static');
+            }
+            if (scriptModuleDeps.size) {
+                assetData.module_dependencies = Array.from(scriptModuleDeps.keys())
+                    // Sort these so we can produce a stable, stringified representation.
+                    .sort()
+                    .map((id) => ({
+                    id,
+                    import: scriptModuleDeps.get(id),
+                }));
+            }
+            assetData.version = contentHash;
+            if (this.useModules) {
+                assetData.type = 'module';
+            }
+            if (compilation.options?.optimization?.runtimeChunk !== false) {
+                // Sets the script handle for the shared runtime file so WordPress registers it only once when using the asset file.
+                assetData.handle =
+                    compilation.name +
+                        '-' +
+                        chunkJSFile
+                            .replace(/\\/g, '/')
+                            .replace(jsExtensionRegExp, '');
+            }
+            combinedAssetsData[chunkJSFile] = assetData;
+        }
+        // Add source into compilation for webpack to trigger a phase re-run
+        compilation.emitAsset("assets.json", new webpack_1.sources.RawSource(JSON.stringify(combinedAssetsData, undefined, "  ")), { "parsed-assets-json": combinedAssetsData });
+    }
+    static staticDepsCurrent = new WeakSet();
+    static staticDepsCache = new WeakMap();
+    /**
+     * Can we trace a line of static dependencies from an entry to a module
+     *
+     * @return {boolean} True if there is a static import path to the root
+     */
+    static hasStaticDependencyPathToRoot(compilation, block) {
+        const existingDepsCacheValue = EnhancedDependencyExtractionWebpackPlugin.staticDepsCache.get(block);
+        if (existingDepsCacheValue !== undefined) {
+            return existingDepsCacheValue;
+        }
+        if (EnhancedDependencyExtractionWebpackPlugin.staticDepsCurrent.has(block)) {
+            return false;
+        }
+        EnhancedDependencyExtractionWebpackPlugin.staticDepsCurrent.add(block);
+        const incomingConnections = [
+            ...compilation.moduleGraph.getIncomingConnections(block),
+        ].filter((connection) => {
+            // Library connections don't have a dependency, this is a root
+            return connection.dependency &&
+                // Entry dependencies are another root
+                connection.dependency.constructor.name !== 'EntryDependency';
+        });
+        // If we don't have non-entry, non-library incoming connections,
+        // we've reached a root of
+        if (!incomingConnections.length) {
+            EnhancedDependencyExtractionWebpackPlugin.staticDepsCache.set(block, true);
+            EnhancedDependencyExtractionWebpackPlugin.staticDepsCurrent.delete(block);
+            return true;
+        }
+        const staticDependentModules = incomingConnections.flatMap((connection) => {
+            const { dependency } = connection;
+            if (!dependency) {
+                return [];
+            }
+            const parentBlock = compilation.moduleGraph.getParentBlock(dependency);
+            return parentBlock && parentBlock.constructor.name !== webpack_1.AsyncDependenciesBlock.name
+                ? [compilation.moduleGraph.getParentModule(dependency)]
+                : [];
+        });
+        // All the dependencies were Async, the module was reached via a dynamic import
+        if (!staticDependentModules.length) {
+            EnhancedDependencyExtractionWebpackPlugin.staticDepsCache.set(block, false);
+            EnhancedDependencyExtractionWebpackPlugin.staticDepsCurrent.delete(block);
+            return false;
+        }
+        // Continue to explore any static dependencies
+        const result = staticDependentModules.some((parentStaticDependentModule) => {
+            return !!parentStaticDependentModule && EnhancedDependencyExtractionWebpackPlugin.hasStaticDependencyPathToRoot(compilation, parentStaticDependentModule);
+        });
+        EnhancedDependencyExtractionWebpackPlugin.staticDepsCache.set(block, result);
+        EnhancedDependencyExtractionWebpackPlugin.staticDepsCurrent.delete(block);
+        return result;
+    }
+    addExternalizedDep = this.externalizedDeps.add.bind(this.externalizedDeps);
+}
+exports.EnhancedDependencyExtractionWebpackPlugin = EnhancedDependencyExtractionWebpackPlugin;

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

@@ -0,0 +1,56 @@
+import type { ChunkGroup, Entrypoint, Module } from "webpack";
+/**
+ * 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.
+ */
+export declare function defaultRequestToExternal(request: string): string | string[] | 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.
+ */
+export declare function defaultRequestToExternalModule(request: string): string | 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.
+ */
+export declare function defaultRequestToHandle(request: string): string | 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.
+ */
+export declare function camelCaseDash(string: string): string;
+export interface ConcatenatedModule extends Module {
+    get modules(): Module[];
+}
+export declare function isConcatenatedModule(module: Module): module is ConcatenatedModule;
+export declare function isEntrypoint(group: ChunkGroup | undefined | null): group is Entrypoint;