@plaudit/webpack-extensions 3.20.2 → 3.21.0

package/CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.21.0] - 2026-09-03
+### Added
+- Logic to associate inline scripts with non-inlined scripts that have the same handle for Plain entrypoints
+  - This is intended to make using the "inlined script that does early prep for a deferred script" pattern easier
+
 ## [3.20.2] - 2026-09-01
 ### Removed
 - The duplicated `isDistDevOutputPath` logic around the initialization of the `@plaudit/dev-webpack-plugin`

package/dist/plugins/PlainEntrypointsConfigFileGeneratorPlugin.d.ts

@@ -10,6 +10,8 @@ export declare class PlainEntrypointsConfigFileGeneratorPlugin extends AbstractB
     private static readonly semaphore;
     constructor(config: VerifiedPlauditWordpressWebpackConfig, buildRoot: string, outputDir: string, dest: VerifiedAdvancedOutputConfig, useUnifiedLoader: boolean, context: string, entry: EntryProvider<BlockEntrypointInfo>);
     private generatePlainEntrypointsLoader;
+    private static writeHandleItem;
+    private static collatePotentiallyMergeableAssets;
     private static addHandlesToHandleLists;
     private static appendEnqueuingHandleLists;
     private static separateHandleListByPriority;

package/dist/plugins/PlainEntrypointsConfigFileGeneratorPlugin.js

@@ -32,29 +32,12 @@ class PlainEntrypointsConfigFileGeneratorPlugin extends AbstractBiPhasicGroupAnd
             inline: [],
             ...Object.fromEntries((0, shared_1.constantKeys)(shared_1.standardLocationNamesMeta).map(sln => [sln, []]))
         };
-        const usedHandleNames = { script: {}, script_module: {}, style: {} };
-        const plainEntrypointsConfig = { scriptHandles: {}, script_moduleHandles: {}, styleHandles: {} };
-        for (const { handles, handlePrefix } of assets) {
-            for (const { src, rest, locations, type, handleName, lazyLoader, ...otherProps } of handles) {
-                const cleanBasename = (0, node_path_1.basename)(src).replace(/_(?:script(?:-\d+)?\.js|style(?:-\d+)?\.css)$|(?<!_(script|style))\.(js|css)$/, "");
-                let finalHandleName;
-                const handleNameMap = usedHandleNames[type];
-                const baseFinalHandleName = finalHandleName = (0, shared_1.convertUsageLocationsHandleToEmittableHandle)({ niceName: (0, shared_1.kebabCase)(cleanBasename) }, handlePrefix, cleanBasename);
-                for (let count = 0; finalHandleName in handleNameMap && handleNameMap[finalHandleName] !== src;) {
-                    finalHandleName = `${baseFinalHandleName}-${++count}`;
-                }
-                if (handleName !== undefined) {
-                    finalHandleName = (0, shared_1.convertUsageLocationsHandleToEmittableHandle)(handleName, handlePrefix, finalHandleName.substring(handlePrefix.length + 1));
-                }
-                handleNameMap[finalHandleName] = src;
-                plainEntrypointsConfig[`${type}Handles`][finalHandleName] = { src, rest, locations, type, lazyLoader, ...otherProps };
-            }
-        }
-        PlainEntrypointsConfigFileGeneratorPlugin.addHandlesToHandleLists(compilation, 'script', Object.entries(plainEntrypointsConfig.scriptHandles)
+        const plainEntrypointsConfig = PlainEntrypointsConfigFileGeneratorPlugin.collatePotentiallyMergeableAssets(assets);
+        PlainEntrypointsConfigFileGeneratorPlugin.addHandlesToHandleLists(compilation, 'script', plainEntrypointsConfig.scriptHandles
             .toSorted(([a], [b]) => a.localeCompare(b)), handleLists);
-        PlainEntrypointsConfigFileGeneratorPlugin.addHandlesToHandleLists(compilation, 'script_module', Object.entries(plainEntrypointsConfig.script_moduleHandles)
+        PlainEntrypointsConfigFileGeneratorPlugin.addHandlesToHandleLists(compilation, 'script_module', plainEntrypointsConfig.script_moduleHandles
             .toSorted(([a], [b]) => a.localeCompare(b)), handleLists);
-        const sortedStyleHandles = Object.entries(plainEntrypointsConfig.styleHandles)
+        const sortedStyleHandles = plainEntrypointsConfig.styleHandles
             .toSorted(([a], [b]) => a.localeCompare(b));
         PlainEntrypointsConfigFileGeneratorPlugin.addHandlesToHandleLists(compilation, 'style', sortedStyleHandles, handleLists);
         const callItemSorter = (a, b) => a.handle.localeCompare(b.handle);
@@ -71,13 +54,12 @@ class PlainEntrypointsConfigFileGeneratorPlugin extends AbstractBiPhasicGroupAnd
             for (const [priority, prioritizedHandleList] of PlainEntrypointsConfigFileGeneratorPlugin.separateHandleListByPriority(handleLists.register)) {
                 writer.action("init", writer => {
                     writer.call("plaudit_webpack_extensions__resolve_base_uri", [expressions_1.Constants.__DIR__], { assignTo: baseUriVar });
-                    for (const { handle, type, data } of prioritizedHandleList) {
-                        if (data.inlinedAsset !== undefined) {
-                            writer.call(`wp_register_${type}`, [handle, false, ...data.rest]);
-                            (0, shared_1.appendAddInlineAssetCall)(compilation, writer, handle, type, data);
-                        }
-                        else {
-                            writer.call(`wp_register_${type}`, [handle, expressions_1.Op.concat(baseUriVar, (0, node_path_1.relative)(emitDir, data.src)), ...data.rest]);
+                    for (const handleItem of prioritizedHandleList) {
+                        PlainEntrypointsConfigFileGeneratorPlugin.writeHandleItem(compilation, handleItem, { baseUriVar, emitDir, writer });
+                        if (handleItem.data.associatedInlinedHandles !== undefined) {
+                            for (const associatedHandle of handleItem.data.associatedInlinedHandles) {
+                                PlainEntrypointsConfigFileGeneratorPlugin.writeHandleItem(compilation, { data: associatedHandle, handle: handleItem.handle, type: associatedHandle.type }, { baseUriVar, emitDir, writer });
+                            }
                         }
                     }
                 }, { priority, accountForAlreadyDoing: this.config.includePostInitFallback });
@@ -138,6 +120,79 @@ class PlainEntrypointsConfigFileGeneratorPlugin extends AbstractBiPhasicGroupAnd
         }
         (0, shared_1.emitPHPWriterAsAsset)(file, compilation, "plain-entrypoints-loader.php");
     }
+    static writeHandleItem(compilation, { data, handle, type }, { baseUriVar, emitDir, writer }) {
+        if (data.inlinedAsset !== undefined) {
+            if (!data.inlinedAsset.omitRegistration) {
+                writer.call(`wp_register_${type}`, [handle, false, ...data.rest]);
+            }
+            (0, shared_1.appendAddInlineAssetCall)(compilation, writer, handle, type, data);
+        }
+        else {
+            writer.call(`wp_register_${type}`, [handle, expressions_1.Op.concat(baseUriVar, (0, node_path_1.relative)(emitDir, data.src)), ...data.rest]);
+        }
+    }
+    static collatePotentiallyMergeableAssets(assets) {
+        const collatedHandles = { scriptHandles: {}, script_moduleHandles: {}, styleHandles: {} };
+        for (const { handles, handlePrefix } of assets) {
+            for (const { src, rest, locations, type, handleName, lazyLoader, ...otherProps } of handles) {
+                const cleanBasename = (0, node_path_1.basename)(src).replace(/_(?:script(?:-\d+)?\.js|style(?:-\d+)?\.css)$|(?<!_(script|style))\.(js|css)$/, "");
+                let finalHandleName = (0, shared_1.convertUsageLocationsHandleToEmittableHandle)({ niceName: (0, shared_1.kebabCase)(cleanBasename) }, handlePrefix, cleanBasename);
+                if (handleName !== undefined) {
+                    finalHandleName = (0, shared_1.convertUsageLocationsHandleToEmittableHandle)(handleName, handlePrefix, finalHandleName.substring(handlePrefix.length + 1));
+                }
+                (collatedHandles[`${type}Handles`][finalHandleName] ??= []).push({ src, rest, locations, type, lazyLoader, ...otherProps });
+            }
+        }
+        const plainEntrypointsConfig = { scriptHandles: [], script_moduleHandles: [], styleHandles: [] };
+        for (const key of ['scriptHandles', 'script_moduleHandles', 'styleHandles']) {
+            for (const [baseFinalHandleName, handles] of Object.entries(collatedHandles[key])) {
+                if ((0, shared_1.arrayIsLength)(handles, 1)) {
+                    plainEntrypointsConfig[key].push([baseFinalHandleName, handles[0]]);
+                }
+                else if ((0, shared_1.hasAtLeastOneItem)(handles)) {
+                    const inlinedHandles = handles.filter(item => item.inlinedAsset !== undefined);
+                    if (inlinedHandles.length === 0) {
+                        plainEntrypointsConfig[key].push([baseFinalHandleName, handles[0]]);
+                        let count = 1;
+                        for (const handle of handles.slice(1)) {
+                            plainEntrypointsConfig[key].push([`${baseFinalHandleName}-${count++}`, handle]);
+                        }
+                    }
+                    else {
+                        const emittedHandles = handles.filter(item => item.inlinedAsset === undefined);
+                        inlinedHandlesLoop: for (const inlinedHandle of inlinedHandles) {
+                            for (const emittedHandle of emittedHandles) {
+                                const canMerge = (0, shared_1.canMergeHandles)(emittedHandle, inlinedHandle);
+                                if (!canMerge) {
+                                    continue;
+                                }
+                                if ((0, shared_1.hasDeferringStrategy)(emittedHandle)) {
+                                    inlinedHandle.inlinedAsset.position = 'before';
+                                }
+                                if (canMerge === 'dependent') {
+                                    emittedHandle.rest[0].push(`${baseFinalHandleName}-${emittedHandles.length}`);
+                                    emittedHandles.push(inlinedHandle);
+                                }
+                                else {
+                                    (emittedHandle.associatedInlinedHandles ??= []).push(inlinedHandle);
+                                }
+                                continue inlinedHandlesLoop;
+                            }
+                            emittedHandles.push(inlinedHandle);
+                        }
+                        if ((0, shared_1.hasAtLeastOneItem)(emittedHandles)) {
+                            plainEntrypointsConfig[key].push([baseFinalHandleName, emittedHandles[0]]);
+                            let count = 1;
+                            for (const handle of emittedHandles.slice(1)) {
+                                plainEntrypointsConfig[key].push([`${baseFinalHandleName}-${count++}`, handle]);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return plainEntrypointsConfig;
+    }
     static addHandlesToHandleLists(compilation, type, handles, handleLists) {
         const defaultPriority = 10;
         for (const [handle, data] of handles) {

package/dist/shared.d.ts

@@ -35,6 +35,7 @@ export type ScriptArgsObject = {
 };
 export type InlinedAsset = {
     position?: 'before' | 'after';
+    omitRegistration?: boolean;
 };
 export type IAHandleData = BaseHandleData & AssetMetaSegment;
 export type HandleData = BaseHandleData & (AssetMetaSegment | {
@@ -98,6 +99,20 @@ export type NormalizedUsageLocations = Omit<UsageLocations, 'registerScriptArgs'
     registerScriptArgs?: InputRegisterScriptArgs;
 };
 export declare function isNormalizedUsageLocations(usageLocations: UsageLocations): usageLocations is NormalizedUsageLocations;
+export type EnqueuedAssetType = 'script' | 'script_module' | 'style';
+export type ExtendedHandleData = HandleData & {
+    locations: UsageLocations;
+    handleName?: UsageLocations['handle'];
+    lazyLoader: string | undefined;
+    type: EnqueuedAssetType;
+    associatedInlinedHandles?: ExtendedHandleData[];
+};
+export declare function convertHookLocationToNamesAndPriority(hookLocation: NonNullable<Exclude<UsageLocations[keyof typeof standardLocationNamesMeta], false>>): [string[], number];
+export declare function hasDeferringStrategy(handle: HandleData): boolean;
+/**
+ * @return {@code true} -> "can share the same handle", {@code false} -> "cannot be merged", {@code 'dependent'} -> "one handle can be listed as a dependency of the other"
+ */
+export declare function canMergeHandles(handleA: ExtendedHandleData, handleB: ExtendedHandleData): boolean | 'dependent';
 export declare function constantKeys<K extends string, V>(object: {
     [k in K]?: V;
 }): K[];
@@ -273,7 +288,7 @@ export declare function resolveLegacyBlockScriptsInFolder(folder: string): strin
  * @param type 'script_module' is NOT supported at this time; however, it is *handled* in this function
  * @param handleData
  */
-export declare function appendAddInlineAssetCall(compilation: Compilation, writer: PHPWriter, handle: string, type: 'script' | 'style' | 'script_module', handleData: IAHandleData): void;
+export declare function appendAddInlineAssetCall(compilation: Compilation, writer: PHPWriter, handle: string, type: EnqueuedAssetType, handleData: IAHandleData): void;
 export declare function wrapInlineAssetContents(compilation: Compilation, wrapperIdPrefix: string, handle: string, contents: string): HereOrNowDoc;
 export declare function synchronousDirIterator(dirPath: string): Generator<import("node:fs").Dirent<string>, void, unknown>;
 /**

package/dist/shared.js

@@ -22,6 +22,9 @@ exports.isParsedAssetsJson = isParsedAssetsJson;
 exports.isStandardLocationName = isStandardLocationName;
 exports.isRegisterScriptArgsShorthandName = isRegisterScriptArgsShorthandName;
 exports.isNormalizedUsageLocations = isNormalizedUsageLocations;
+exports.convertHookLocationToNamesAndPriority = convertHookLocationToNamesAndPriority;
+exports.hasDeferringStrategy = hasDeferringStrategy;
+exports.canMergeHandles = canMergeHandles;
 exports.constantKeys = constantKeys;
 exports.constantEntries = constantEntries;
 exports.determineCurrentSourceType = determineCurrentSourceType;
@@ -93,6 +96,95 @@ function isRegisterScriptArgsShorthandName(name) {
 function isNormalizedUsageLocations(usageLocations) {
     return typeof usageLocations.registerScriptArgs !== 'string';
 }
+function convertHookLocationToNamesAndPriority(hookLocation) {
+    if (typeof hookLocation === 'string') {
+        return [[hookLocation], 10];
+    }
+    if (typeof hookLocation === 'number') {
+        return [[], hookLocation];
+    }
+    if (typeof hookLocation === 'boolean') {
+        return [[], 10];
+    }
+    if (Array.isArray(hookLocation)) {
+        return [hookLocation, 10];
+    }
+    // if it's in object-form
+    return [typeof hookLocation.hook_name === 'string' ? [hookLocation.hook_name] : hookLocation.hook_name ?? [], hookLocation.priority ?? 10];
+}
+function hasDeferringStrategy(handle) {
+    return handle.rest[2]?.strategy === 'async' || handle.rest[2]?.strategy === 'defer';
+}
+/**
+ * @return {@code true} -> "can share the same handle", {@code false} -> "cannot be merged", {@code 'dependent'} -> "one handle can be listed as a dependency of the other"
+ */
+function canMergeHandles(handleA, handleB) {
+    if (handleA.inlinedAsset === undefined && handleB.inlinedAsset === undefined) {
+        return false; // We cannot merge handles for two non-inlined assets
+    }
+    if (handleA.lazyLoader !== handleB.lazyLoader) {
+        return false; // We cannot merge handles for assets that will be loaded under separate conditions
+    }
+    if (node_path_1.default.dirname(handleA.src) !== node_path_1.default.dirname(handleB.src)) {
+        return false; // We don't want assets from different locations to be able to have their handles overlap
+    }
+    const additionalArgsA = handleA.rest.length === 3 ? handleA.rest[2] : {};
+    const additionalArgsB = handleB.rest.length === 3 ? handleB.rest[2] : {};
+    if (additionalArgsA.module_dependencies !== additionalArgsB.module_dependencies) {
+        if (additionalArgsA.module_dependencies === undefined) {
+            return false;
+        }
+        if (additionalArgsB.module_dependencies === undefined) {
+            return false;
+        }
+        if (additionalArgsA.module_dependencies.length !== additionalArgsB.module_dependencies.length) {
+            return false;
+        }
+        for (const modDep of additionalArgsA.module_dependencies) {
+            if (!additionalArgsB.module_dependencies.includes(modDep)) {
+                return false;
+            }
+        }
+    }
+    if (additionalArgsA.in_footer !== additionalArgsB.in_footer) {
+        return 'dependent';
+    }
+    if (hasDeferringStrategy(handleA) && handleB.inlinedAsset?.position === 'after') {
+        return false;
+    }
+    if (hasDeferringStrategy(handleB) && handleA.inlinedAsset?.position === 'after') {
+        return false;
+    }
+    if (handleA.locations.register !== handleB.locations.register) {
+        return false; //TODO: Maybe make this more granular?
+    }
+    for (const standardLocation of constantKeys(exports.standardLocationNamesMeta)) {
+        const locA = handleA.locations[standardLocation];
+        const locB = handleB.locations[standardLocation];
+        if (locA === locB) {
+            continue;
+        }
+        if (locA === undefined || locA === false || locB === undefined || locB === false) {
+            return false;
+        }
+        const [locAHookNames, locAPriority] = convertHookLocationToNamesAndPriority(locA);
+        const [locBHookNames, locBPriority] = convertHookLocationToNamesAndPriority(locB);
+        if (locAHookNames.length !== locBHookNames.length) {
+            return false;
+        }
+        if (locAHookNames.length > 0) {
+            for (const hookName of locAHookNames) {
+                if (!locBHookNames.includes(hookName)) {
+                    return false;
+                }
+            }
+        }
+        if (locAPriority !== locBPriority) {
+            return 'dependent'; // We cannot merge hooks across priority boundaries, but we can have one require the other
+        }
+    }
+    return true;
+}
 function constantKeys(object) {
     return Object.keys(object);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "3.20.2",
+  "version": "3.21.0",
   "license": "SEE LICENSE IN LICENSE.md",
   "repository": {
     "type": "git",