@plaudit/webpack-extensions 2.61.1 → 2.62.0

package/build/plugins/ExtensionsConfigFileGeneratorPlugin.d.ts

@@ -1,4 +1,4 @@
-import { VerifiedPlauditWordpressWebpackConfig } from "../utils/common-config-helpers";
+import type { VerifiedPlauditWordpressWebpackConfig } from "../utils/common-config-helpers";
 import { type Compiler, type WebpackPluginInstance } from "webpack";
 export declare class ExtensionsConfigFileGeneratorPlugin implements WebpackPluginInstance {
     private readonly config;

package/build/plugins/ExtensionsConfigFileGeneratorPlugin.js

@@ -72,7 +72,6 @@ class ExtensionsConfigFileGeneratorPlugin {
                     try {
                         //TODO: It should be possible to use EntryPoints to determine the "original" file
                         //TODO: There is no reason to not use basically the exact same logic to implement support for this in plain file contexts
-                        //TODO: BlockJSONManagingPlugin should be rewritten from scratch to use this method instead of its 15 layers of tracking + syncing
                         const myCacheData = { assets: [], setupFiles: [] };
                         for (const asset of Object.keys(compilation.assets).map(asset => this.stripExtensionsDest(asset))) {
                             const blockSlug = /^(.+?)-setup.php$/i.exec(asset)?.[1];
@@ -144,7 +143,9 @@ class ExtensionsConfigFileGeneratorPlugin {
     }
     generateVersionTwoConfigFile(compilation, combinedExtensionData) {
         const regex = /^(.+?)-((?:editor-|view-|)(?:style|script|script-module))\.(?:css|m?js)$/i;
-        const blockExtensionsConfig = { metadata: { version: this.config.extensionsVersion }, scriptHandles: {}, styleHandles: {}, blocks: {}, setupFiles: {} };
+        const blockExtensionsConfig = {
+            metadata: { version: this.config.extensionsVersion }, scriptHandles: {}, scriptModuleHandles: {}, styleHandles: {}, blocks: {}, setupFiles: {}
+        };
         for (const assetDataSource of combinedExtensionData.assets) {
             const normalizedAssetData = Object.entries(assetDataSource)
                 .map(entry => {
@@ -161,8 +162,10 @@ class ExtensionsConfigFileGeneratorPlugin {
                 if (blockSlug && assetType) {
                     const key = assetType.replace(/-[sm]/gi, chars => chars.substring(1).toUpperCase());
                     const handle = `plaudit_block-extension_${blockSlug}-${assetType}`;
-                    const isCss = assetType.endsWith("tyle");
-                    blockExtensionsConfig[isCss ? 'styleHandles' : 'scriptHandles'][handle] = {
+                    const isCss = (0, shared_1.isStyleField)(assetType);
+                    const handleGroup = isCss ? 'styleHandles'
+                        : ((0, shared_1.isScriptModuleField)(assetType) ? 'scriptModuleHandles' : 'scriptHandles');
+                    blockExtensionsConfig[handleGroup][handle] = {
                         src: isCss ? assetPath.replace(/\.js$/, ".css") : assetPath,
                         rest: isCss || key.startsWith("editor")
                             ? [assetData.dependencies, assetData.version]
@@ -177,6 +180,8 @@ class ExtensionsConfigFileGeneratorPlugin {
         }
         blockExtensionsConfig.scriptHandles = Object.fromEntries(Object.entries(blockExtensionsConfig.scriptHandles)
             .toSorted(([a], [b]) => a.localeCompare(b)));
+        blockExtensionsConfig.scriptModuleHandles = Object.fromEntries(Object.entries(blockExtensionsConfig.scriptModuleHandles)
+            .toSorted(([a], [b]) => a.localeCompare(b)));
         blockExtensionsConfig.styleHandles = Object.fromEntries(Object.entries(blockExtensionsConfig.styleHandles)
             .toSorted(([a], [b]) => a.localeCompare(b)));
         blockExtensionsConfig.setupFiles = Object.fromEntries(Object.entries(blockExtensionsConfig.setupFiles)
@@ -186,7 +191,7 @@ class ExtensionsConfigFileGeneratorPlugin {
             return [block[0], Object.fromEntries(Object.entries(block[1]).toSorted(([a], [b]) => a.localeCompare(b)))];
         })
             .toSorted(([a], [b]) => a.localeCompare(b)));
-        compilation.emitAsset(node_path_1.default.join(this.extensionsDest, "mapping.config.php"), new webpack_1.sources.RawSource((0, shared_1.makeEmittableConfigPHP)(blockExtensionsConfig)));
+        compilation.emitAsset(node_path_1.default.join(this.extensionsDest, "mapping.config.php"), new webpack_1.sources.RawSource((0, shared_1.makeEmittableConfigPHP)(blockExtensionsConfig, true)));
     }
     makeVersionOneAfterProcessAssets(compilation) {
         return compilationAssets => {

package/build/plugins/PlainEntrypointsConfigFileGeneratorPlugin.d.ts

@@ -1,5 +1,4 @@
 import { UsageLocations } from "../shared";
-import { PHPWriter } from "../utils/php-writer";
 import { type Compiler, type WebpackPluginInstance } from "webpack";
 export declare class PlainEntrypointsConfigFileGeneratorPlugin implements WebpackPluginInstance {
     private readonly buildRoot;
@@ -16,8 +15,4 @@ export declare class PlainEntrypointsConfigFileGeneratorPlugin implements Webpac
     private static addHandlesToHandleLists;
     private static appendEnqueuingHandleLists;
     private static separateHandleListByPriority;
-    /**
-     * The primary benefit of emitting a function instead of baking its contents into each function that uses it is that it allows us to avoid recomputing the base uri multiple times
-     */
-    static emitResolveBaseUriFunction(writer: PHPWriter): void;
 }

package/build/plugins/PlainEntrypointsConfigFileGeneratorPlugin.js

@@ -82,17 +82,17 @@ class PlainEntrypointsConfigFileGeneratorPlugin {
                             chunkFiles[0][1] = true;
                         }
                         for (const [file, useHandleName] of chunkFiles) {
-                            const isScript = file.toLowerCase().endsWith(".js");
+                            const extension = node_path_1.default.extname(file).toLowerCase();
+                            const type = extension === ".js" ? 'script' : (extension === ".mjs" ? 'script_module' : 'style');
+                            const isScript = type !== 'style';
                             const dependencies = isScript === entrypointChunkIsScript ? assetData.dependencies : [];
                             const rest = isScript && this.usageLocations.registerScriptArgs !== undefined
                                 ? [dependencies, assetData.version, this.usageLocations.registerScriptArgs] : [dependencies, assetData.version];
                             const destPath = node_path_1.default.join(compilation.outputOptions.path, file);
                             handles.push({
-                                src: destPath,
-                                rest,
+                                src: destPath, rest, type,
                                 locations: this.usageLocations,
-                                isScript,
-                                handleName: useHandleName ? this.usageLocations.handle : undefined
+                                handleName: useHandleName ? this.usageLocations.handle : undefined,
                             });
                         }
                         myAssetHandles.push({
@@ -130,15 +130,13 @@ class PlainEntrypointsConfigFileGeneratorPlugin {
             .flatMap(({ handles }) => handles)
             .filter((handle) => !!handle.handleName)
             .sort((a, b) => a.src.localeCompare(b.src));
-        const usedScriptHandleNames = Object.fromEntries(allNamedHandles
-            .filter(handle => handle.isScript)
-            .map(handle => [handle.handleName, handle.src]));
-        const usedStyleHandleNames = Object.fromEntries(allNamedHandles
-            .filter(handle => !handle.isScript)
-            .map(handle => [handle.handleName, handle.src]));
-        const plainEntrypointsConfig = { scriptHandles: {}, styleHandles: {} };
+        const usedHandleNames = Object.fromEntries(['script', 'script_module', 'style']
+            .map(type => [type, Object.fromEntries(allNamedHandles
+                .filter(handle => handle.type === 'script')
+                .map(handle => [handle.handleName, handle.src]))]));
+        const plainEntrypointsConfig = { scriptHandles: {}, script_moduleHandles: {}, styleHandles: {} };
         for (const { handles, handlePrefix } of assets) {
-            for (const { src, rest, locations, isScript, handleName } of handles) {
+            for (const { src, rest, locations, type, handleName } of handles) {
                 let finalHandleName;
                 if (handleName) {
                     finalHandleName = handleName;
@@ -146,46 +144,47 @@ class PlainEntrypointsConfigFileGeneratorPlugin {
                 else {
                     const basename = node_path_1.default.basename(src).replace(/_(?:script(?:-\d+)?\.js|style(?:-\d+)?\.css)$|(?<!_(script|style))\.(js|css)$/, "");
                     const baseFinalHandleName = `${handlePrefix}.${(0, shared_1.kebabCase)(basename)}`;
-                    const handleNameMap = (isScript ? usedScriptHandleNames : usedStyleHandleNames);
+                    const handleNameMap = usedHandleNames[type];
                     finalHandleName = baseFinalHandleName;
                     for (let count = 0; finalHandleName in handleNameMap && handleNameMap[finalHandleName] !== src;) {
                         finalHandleName = `${baseFinalHandleName}-${++count}`;
                     }
                     handleNameMap[finalHandleName] = src;
                 }
-                plainEntrypointsConfig[isScript ? 'scriptHandles' : 'styleHandles'][finalHandleName] = {
+                plainEntrypointsConfig[`${type}Handles`][finalHandleName] = {
                     src,
                     rest,
                     locations,
-                    isScript
+                    type
                 };
             }
         }
         PlainEntrypointsConfigFileGeneratorPlugin.addHandlesToHandleLists('script', Object.entries(plainEntrypointsConfig.scriptHandles)
             .toSorted(([a], [b]) => a.localeCompare(b)), handleLists);
+        PlainEntrypointsConfigFileGeneratorPlugin.addHandlesToHandleLists('script_module', Object.entries(plainEntrypointsConfig.script_moduleHandles)
+            .toSorted(([a], [b]) => a.localeCompare(b)), handleLists);
         const sortedStyleHandles = Object.entries(plainEntrypointsConfig.styleHandles)
             .toSorted(([a], [b]) => a.localeCompare(b));
         PlainEntrypointsConfigFileGeneratorPlugin.addHandlesToHandleLists('style', sortedStyleHandles, handleLists);
-        //TODO: Do we want to sort by type first? Pro: all calls of the same type are together; Con: not all calls for the same block will be together
-        const callItemSorter = (a, b) => /*a.type.localeCompare(b.type) || */ a.handle.localeCompare(b.handle);
+        const callItemSorter = (a, b) => a.handle.localeCompare(b.handle);
         for (const list of Object.values(handleLists)) {
             list.sort(callItemSorter);
         }
         const writer = new php_writer_1.PHPWriter();
         if (handleLists.register.length > 0) {
             if (!this.useUnifiedLoader) {
-                PlainEntrypointsConfigFileGeneratorPlugin.emitResolveBaseUriFunction(writer);
+                (0, shared_1.emitResolveBaseUriFunction)(writer);
             }
             for (const [priority, prioritizedHandleList] of PlainEntrypointsConfigFileGeneratorPlugin.separateHandleListByPriority(handleLists.register)) {
                 writer.action("init", writer => {
-                    writer.call("plaudit_webpack_extensions__resolve_base_uri", [new php_writer_1.Expr('__DIR__')], { assignTo: "$base_uri" });
+                    writer.call("plaudit_webpack_extensions__resolve_base_uri", [php_writer_1.Expr.__DIR__], { assignTo: "$base_uri" });
                     for (const { handle, type, data } of prioritizedHandleList) {
                         writer.call(`wp_register_${type}`, [handle, new php_writer_1.Expr(`$base_uri.${php_writer_1.Expr.jsonToPHPConverter(node_path_1.default.relative(emitDir, data.src))}`), ...data.rest]);
                     }
                 }, { priority, accountForAlreadyDoing: true });
             }
             const sortedEditorStyleHandles = sortedStyleHandles
-                .filter(([_, { locations: { clientEditor }, isScript }]) => !isScript && (clientEditor || typeof clientEditor === 'number'))
+                .filter(([_, { locations: { clientEditor }, type }]) => type === 'style' && (clientEditor || typeof clientEditor === 'number'))
                 .map(info => info[1]);
             if (sortedEditorStyleHandles.length > 0) {
                 writer.linebreak();
@@ -249,25 +248,5 @@ class PlainEntrypointsConfigFileGeneratorPlugin {
         }
         return lists.entries().toArray().sort((a, b) => a[0] - b[0]);
     }
-    /**
-     * The primary benefit of emitting a function instead of baking its contents into each function that uses it is that it allows us to avoid recomputing the base uri multiple times
-     */
-    static emitResolveBaseUriFunction(writer) {
-        writer.function("plaudit_webpack_extensions__resolve_base_uri", ["$dir"], writer => {
-            writer
-                .static("$base_uris", { initializer: [] })
-                .if("isset($base_uris[$dir])")
-                .return(new php_writer_1.Expr("$base_uris[$dir]"))
-                .elseIf("str_starts_with($dir, ABSPATH)")
-                .append("$path = ltrim(substr($dir, strlen(ABSPATH)), '/');")
-                .elseIf("str_starts_with($dir, '/workspace/website')")
-                .append("$path = ltrim(substr($dir, 18), '/');")
-                .else()
-                .call("error_log", ["UNABLE TO FIGURE OUT WHAT THE RELATIVE PATH TO THE BUILT FILES DIRECTORY SHOULD BE"])
-                .append("$path = '';")
-                .endIf()
-                .call("trailingslashit", [new php_writer_1.Expr("home_url($path)")], { return: true, assignTo: "$base_uris[$dir]" });
-        }, { returnType: "string", includeExistenceCheck: true });
-    }
 }
 exports.PlainEntrypointsConfigFileGeneratorPlugin = PlainEntrypointsConfigFileGeneratorPlugin;

package/build/plugins/PlainEntrypointsStyleBlockJSONPlugin.d.ts

@@ -0,0 +1,26 @@
+import type { VerifiedPlauditWordpressWebpackConfig } from "../utils/common-config-helpers";
+import { type Compiler, type WebpackPluginInstance } from "webpack";
+import type WebpackRemoveEmptyScriptsPlugin from "webpack-remove-empty-scripts";
+export declare class PlainEntrypointsStyleBlockJSONPlugin implements WebpackPluginInstance {
+    private readonly config;
+    private readonly blocksDest;
+    private readonly webpackRemoveEmptyScriptsPlugin;
+    private static readonly semaphore;
+    private static readonly phaseTwoAttached;
+    private readonly id;
+    private readonly libraryType;
+    constructor(config: VerifiedPlauditWordpressWebpackConfig, blocksDest: string, webpackRemoveEmptyScriptsPlugin: WebpackRemoveEmptyScriptsPlugin);
+    apply(compiler: Compiler): void;
+    private emitBlockLoaderFile;
+    private transformBlocks;
+    private static extractAssetSource;
+    private static convertToScriptHandles;
+    private static doFileOrHandleReplacements;
+    private stripOffBlocksDestPrefix;
+    private static hashThingForAsset;
+    private static stripFilePrefix;
+    static findCommonAncestor(...paths: string[]): string[];
+    static findRelativeRouteBetween(path1: string, path2: string): string;
+    private static remapReferencedPHPFilesOnKey;
+    private static normalizeRenderTemplate;
+}