@plaudit/webpack-extensions 3.3.0 → 3.4.0

package/CHANGELOG.md

@@ -5,6 +5,12 @@ 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.4.0] - 2026-03-16
+### Added
+- Support for a directory-based `extensions` layout
+  - This only applies to sites using extensions v2 and higher
+  - This comes from version `2.87.0`
+
 ## [3.3.0] - 2026-03-16
 ### Added
 - A few helper methods for tools that reference this package and care about the entrypoint resolution logic
@@ -60,6 +66,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Legacy PostCSS features that have been integrated into modern CSS
 - `@extends` support
 
+## [2.87.0] - 2026-03-16
+### Added
+- Support for a directory-based `extensions` layout
+  - This only applies to sites using extensions v2 and higher
+
+### Internals
+- Backported the features from `3.2.x` and `3.3.0`
+
 ## [2.86.0] - 2026-03-16
 ### Added
 - Support for `Location-Encoding Filenames`

package/USER-GUIDE.md

@@ -501,8 +501,10 @@ This is used to associate additional assets with blocks that are not in control
 [Specially named files](#file-naming) in a single subdirectory of `src`
 ```
 src/extensions/
-├── core-paragraph-view-script.ts
-└── core-paragraph-editor-style.pcss
+├─ core/paragraph/
+│  ├─ view.ts
+│  └─ editor.pcss
+└─ plaudit/block-library/accordion/style.pcss
 ```
 
 #### File Naming
@@ -513,6 +515,9 @@ Filenames **must** follow the pattern: `{kebab-case-block-name}-{type}.{ext}`
   - `script-module`, `view-script-module`
   - `setup` (this allows for PHP code to be loaded only when certain blocks are enabled and is intended for use in plugins, not themes)
 - `ext` **must** be for a [supported file type](#supported-file-types) and **should** correspond with the extension type (basically, don't enqueue a `.css` file as a script)
+- For convenience, everything before the `{type}` can be split into directories on the hyphens
+  - When using this format, the filenames must be [Location-Encoding Filenames](#location-encoding-filenames) or `setup.php`
+  - This is only available in extensions v2 and up
 
 #### Notes
 - In order to have a directory be treated as `extensions`, the config **must** include `directoryLayout: 'extensions'`

package/build/plugins/ExtensionsConfigFileGeneratorPlugin.d.ts

@@ -1,15 +1,19 @@
 import { AbstractBiPhasicGroupAndEntryPlugin, EntryProvider } from "./AbstractBiPhasicGroupAndEntryPlugin";
-import { ParsedAssetJsonProvider, VerifiedAdvancedOutputConfig } from "../shared";
+import { MinimumViableMetadata, ParsedAssetJsonProvider, VerifiedAdvancedOutputConfig } from "../shared";
 import type { VerifiedPlauditWordpressWebpackConfig } from "../utils/common-config-helpers";
 import { Compilation, type Compiler } from "webpack";
-export declare class ExtensionsConfigFileGeneratorPlugin extends AbstractBiPhasicGroupAndEntryPlugin {
+export type ExtensionConfigFileGeneratorMetadata = MinimumViableMetadata & {
+    extensionId: string;
+};
+export declare class ExtensionsConfigFileGeneratorPlugin extends AbstractBiPhasicGroupAndEntryPlugin<ExtensionConfigFileGeneratorMetadata> {
     private readonly extensionsSrcPath;
     private readonly dest;
     private static readonly semaphore;
     private setupFiles;
-    constructor(config: VerifiedPlauditWordpressWebpackConfig, extensionsSrcPath: string, dest: VerifiedAdvancedOutputConfig, context: string, entry: EntryProvider);
+    constructor(config: VerifiedPlauditWordpressWebpackConfig, extensionsSrcPath: string, dest: VerifiedAdvancedOutputConfig, context: string, entry: EntryProvider<ExtensionConfigFileGeneratorMetadata>);
     get extensionsDestPath(): string;
     apply(compiler: Compiler): void;
+    private walkSubtreeForMetaInfo;
     private generateVersionThreeConfigFile;
     protected attachUniquePhase(compilation: Compilation): void;
     protected processAssets(compilation: Compilation, parsedAssetJsonProvider: ParsedAssetJsonProvider): void;

package/build/plugins/ExtensionsConfigFileGeneratorPlugin.js

@@ -1,11 +1,41 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExtensionsConfigFileGeneratorPlugin = void 0;
-const promises_1 = __importDefault(require("node:fs/promises"));
-const node_path_1 = __importDefault(require("node:path"));
+const promises_1 = require("node:fs/promises");
+const node_path_1 = __importStar(require("node:path"));
 const php_writer_1 = require("@plaudit/php-writer");
 const expressions_1 = require("@plaudit/php-writer/expressions");
 const AbstractBiPhasicGroupAndEntryPlugin_1 = require("./AbstractBiPhasicGroupAndEntryPlugin");
@@ -34,24 +64,49 @@ class ExtensionsConfigFileGeneratorPlugin extends AbstractBiPhasicGroupAndEntryP
                 compilation.contextDependencies.add(this.extensionsSrcPath);
             }
             const emissionPromises = [];
-            for await (const { name: setupFilePath } of await promises_1.default.opendir(this.extensionsSrcPath, { encoding: 'utf-8' })) {
+            for await (const { name: setupFilePath } of await (0, promises_1.opendir)(this.extensionsSrcPath, { encoding: 'utf-8' })) {
                 if (setupFilePath.endsWith("-setup.php")) {
                     const setupFileSourcePath = node_path_1.default.join(this.extensionsSrcPath, setupFilePath);
                     compilation.fileDependencies.add(setupFileSourcePath);
-                    emissionPromises.push(promises_1.default.readFile(setupFileSourcePath).then(contents => {
+                    emissionPromises.push((0, promises_1.readFile)(setupFileSourcePath).then(contents => {
                         compilation.emitAsset(node_path_1.default.join(this.dest.destination, setupFilePath), new webpack_1.sources.RawSource(contents), { size: Buffer.byteLength(contents) });
                         const blockSlug = /^(.+?)-setup.php$/i.exec(setupFilePath)?.[1];
                         return [blockSlug, setupFilePath];
                     }));
                 }
             }
+            await this.walkSubtreeForMetaInfo(compilation, this.extensionsSrcPath, this.dest, [], emissionPromises);
             this.setupFiles = (await Promise.all(emissionPromises))
                 .filter((item) => item[0] !== undefined).sort((a, b) => a[0].localeCompare(b[0]));
         });
     }
+    async walkSubtreeForMetaInfo(compilation, srcRoot, dest, parents, emissionPromises) {
+        if (!compilation.contextDependencies.has(srcRoot)) {
+            compilation.contextDependencies.add(srcRoot);
+        }
+        for await (const dirent of await (0, promises_1.opendir)(srcRoot)) {
+            if (dirent.name.startsWith("~")) {
+                continue;
+            }
+            if (dirent.isFile()) {
+                if (dirent.name === "setup.php") {
+                    const setupFilePath = (0, node_path_1.join)(...parents, dirent.name);
+                    const setupFileSourcePath = node_path_1.default.join(this.extensionsSrcPath, setupFilePath);
+                    compilation.fileDependencies.add(setupFileSourcePath);
+                    emissionPromises.push((0, promises_1.readFile)(setupFileSourcePath).then(contents => {
+                        compilation.emitAsset(node_path_1.default.join(this.dest.destination, setupFilePath), new webpack_1.sources.RawSource(contents), { size: Buffer.byteLength(contents) });
+                        return [parents.join("-") /* blockSlug */, setupFilePath];
+                    }));
+                }
+            }
+            else if (dirent.isDirectory()) {
+                await this.walkSubtreeForMetaInfo(compilation, (0, node_path_1.join)(srcRoot, dirent.name), dest, [...parents, dirent.name], emissionPromises);
+            }
+        }
+    }
     generateVersionThreeConfigFile(compilation, relevantAssetData, setupFilePaths) {
         const handlePrefix = `${this.config.targetHandlePrefix}_block-extensions`;
-        const regex = /^(.+?)-((?:editor-|view-|)(?:style|script|script-module))\.(?:css|m?js)$/i;
+        const regex = /^(.+?)-((?:editor-|view-|)(?:style|script|script-module))$/i;
         const blockExtensionsConfig = {
             metadata: { version: this.config.extensionsVersion }, scriptHandles: {}, scriptModuleHandles: {}, styleHandles: {}, blocks: {}, setupFiles: {}
         };
@@ -62,7 +117,7 @@ class ExtensionsConfigFileGeneratorPlugin extends AbstractBiPhasicGroupAndEntryP
             return [assetPath, entry[1]];
         });
         for (const [assetPath, assetData] of normalizedAssetData) {
-            const match = regex.exec(assetPath);
+            const match = regex.exec(assetData.extensionId);
             if (!match) {
                 continue;
             }
@@ -127,7 +182,16 @@ class ExtensionsConfigFileGeneratorPlugin extends AbstractBiPhasicGroupAndEntryP
         });
     }
     processAssets(compilation, parsedAssetJsonProvider) {
-        const relevantAssetData = this.extractRelevantAssetData(compilation, parsedAssetJsonProvider);
+        const relevantAssetData = Object.fromEntries(this.getRelevantEntrypoints(compilation)
+            .map(({ entrypoint, metadata, srcPath }) => {
+            const providedData = parsedAssetJsonProvider(entrypoint, metadata);
+            if (providedData === undefined) {
+                compilation.errors.push((0, shared_1.newWebpackErrorForFile)(`assets.json did not contain information for ${srcPath}`, srcPath));
+                return undefined;
+            }
+            return [providedData.assetName, { ...providedData.assetData, extensionId: metadata.extensionId }];
+        })
+            .filter(item => item !== undefined));
         const staticallyLoadedEntrypoints = Object.keys(relevantAssetData);
         const generateLoader = (writer) => {
             writer.require(this.extensionsDestPath + "extensions-loader.php", { dirRelative: true, once: true });

package/build/utils/location-encoding-filename-parser.d.ts

@@ -6,6 +6,7 @@ export type ParsedLocationEncodingFilename = {
         register?: boolean | number;
     };
     flags: NormalizedEnqueuingControlFlags;
+    niceName?: string;
 };
 export declare function parseLocationEncodingFilename(filename: string): ParsedLocationEncodingFilename | undefined;
 export declare function parseLocationEncodingFilenameForBlock(filename: string, errorBuilder?: (message: string, filename: string) => unknown): Omit<ParsedLocationEncodingFilename, 'locations'> & {

package/build/utils/location-encoding-filename-parser.js

@@ -19,13 +19,14 @@ function parseLocationEncodingFilename(filename) {
     const nameSegments = name.split("."); //Split always returns at least one string
     const typeOverrideMatch = /^(?<enqueuePosition>.+)-(?<typeOverride>script|style|script-module)$|^(?<typeOverride>script|style|script-module)$/.exec(nameSegments[0]);
     if (typeOverrideMatch) {
-        nameSegments[0] = typeOverrideMatch.groups?.["enqueuePosition"] ?? "both"; // We override the first segment with the version without
+        nameSegments[0] = typeOverrideMatch.groups?.["enqueuePosition"] ?? "both"; // We override the first segment with the version without the type override
         type = typeOverrideMatch.groups?.["typeOverride"];
     }
     const inlinePattern = /^(?<inline>inline)(?:[-=](?<position>before|after))?$|^strategy[-=](?<inline>inline)(?:-(?<position>before|after))?$/;
     const strategyPattern = /^strategy[-=](?<strategy>eager|lazy|defer|async)$|^(?<strategy>lazy|eager)$/;
     const fetchpriorityPattern = /^fetchpriority[-=](auto|low|high)$/;
     const bothViewAndEditorLocationPattern = /^(?:client-)?(?<both>both)(?:[-=](?<priority>-?\d+))?$/;
+    let niceName = undefined;
     for (const segment of nameSegments) {
         const { locationName, priority } = extractLocationFromPropertyEncodingFilenameSegment(segment);
         if (locationName) {
@@ -67,6 +68,9 @@ function parseLocationEncodingFilename(filename) {
                 flags.in_footer = false;
                 break;
             default:
+                if (niceName === undefined) {
+                    niceName = segment;
+                }
                 break;
         }
     }
@@ -74,7 +78,7 @@ function parseLocationEncodingFilename(filename) {
     if (Object.values(locations).length === 0) {
         return undefined;
     }
-    return { type, locations, flags };
+    return { type, locations, flags, niceName };
 }
 function parseLocationEncodingFilenameForBlock(filename, errorBuilder = shared_1.newWebpackErrorForFile) {
     const parsedFilename = parseLocationEncodingFilename(filename);

package/build/wordpress-scripts-wrapper.js

@@ -27,6 +27,7 @@ const UnifiedLoaderGenerator_1 = require("./plugins/UnifiedLoaderGenerator");
 const copy_webpack_plugin_1 = __importDefault(require("copy-webpack-plugin"));
 const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
 const webpack_remove_empty_scripts_1 = __importDefault(require("webpack-remove-empty-scripts"));
+const location_encoding_filename_parser_1 = require("./utils/location-encoding-filename-parser");
 function testForDuplicatedEntryPaths(sources) {
     const seenPaths = (0, common_config_helpers_1.groupEntrypointsByAssetFile)(Array.isArray(sources)
         ? sources.map(s => typeof s === 'string' ? s : s[1].destination)
@@ -506,12 +507,22 @@ function processIndividualWebpackConfig(config, webpackConfig, sources, canClean
                 const entry = async () => {
                     const rawEntrypoints = [];
                     for await (const dirent of await (0, promises_1.opendir)(srcRoot)) {
-                        if (dirent.isFile() && !dirent.name.startsWith("~")) {
-                            if (commonConfig.scriptExtension.test(dirent.name) || shared_1.styleExtension.test(dirent.name)) {
+                        if (dirent.name.startsWith("~")) {
+                            continue;
+                        }
+                        if (dirent.isFile()) {
+                            if ((commonConfig.scriptExtension.test(dirent.name) || shared_1.styleExtension.test(dirent.name))) {
                                 const absoluteSrc = (0, common_config_helpers_1.joinPossiblyAbsolutePaths)(srcRoot, dirent.name);
-                                rawEntrypoints.push([(0, node_path_1.join)(dest.destination, (0, node_path_1.basename)(absoluteSrc, (0, node_path_1.extname)(absoluteSrc))), { import: [absoluteSrc], plauditMetadata: { dest, absoluteSrc } }]);
+                                const extensionId = (0, node_path_1.parse)(dirent.name).name;
+                                rawEntrypoints.push([(0, node_path_1.join)(dest.destination, (0, node_path_1.basename)(absoluteSrc, (0, node_path_1.extname)(absoluteSrc))), {
+                                        import: [absoluteSrc],
+                                        plauditMetadata: { dest, absoluteSrc, extensionId }
+                                    }]);
                             }
                         }
+                        else if (dirent.isDirectory()) {
+                            rawEntrypoints.push(...await walkExtensionsTree((0, node_path_1.join)(srcRoot, dirent.name), dest, [dirent.name]));
+                        }
                     }
                     return Object.fromEntries(rawEntrypoints);
                 };
@@ -552,7 +563,7 @@ function processIndividualWebpackConfig(config, webpackConfig, sources, canClean
             if (canCopyFiles) {
                 plugins.push(new copy_webpack_plugin_1.default({
                     patterns: [{
-                            from: config.standaloneBlocks ? '**/*.(php|twig|svg)' : '**/*.(asset\.php|svg)',
+                            from: config.standaloneBlocks ? '**/*.(php|twig|svg)' : '**/*.(asset\.php|svg)', //TODO: I'm pretty sure that the dots need proper escaping
                             to: dest.destination,
                             context: srcRoot /* canCopyFiles can only be true if srcRoot is a string, so this is safe  */, noErrorOnMissing: true
                         }]
@@ -563,6 +574,45 @@ function processIndividualWebpackConfig(config, webpackConfig, sources, canClean
         return (0, common_config_helpers_1.commonMakeWebpackConfig)(config, commonConfig, webpackConfig, externalize, plugins, canClean && batches.length < 2);
     }).filter(cfg => cfg !== undefined);
 }
+async function walkExtensionsTree(srcRoot, dest, parents) {
+    const res = [];
+    for await (const dirent of await (0, promises_1.opendir)(srcRoot)) {
+        if (dirent.name.startsWith("~")) {
+            continue;
+        }
+        if (dirent.isFile()) {
+            const parsedFilename = (0, location_encoding_filename_parser_1.parseLocationEncodingFilename)(dirent.name);
+            if (parsedFilename === undefined) {
+                continue;
+            }
+            const absoluteSrc = (0, common_config_helpers_1.joinPossiblyAbsolutePaths)(srcRoot, dirent.name);
+            let destFile;
+            if (Object.keys(parsedFilename.locations).length === 1) {
+                if (parsedFilename.locations.clientView) {
+                    destFile = `view-${parsedFilename.type}`;
+                }
+                else if (parsedFilename.locations.clientEditor) {
+                    destFile = `editor-${parsedFilename.type}`;
+                }
+                else {
+                    destFile = (0, node_path_1.basename)(absoluteSrc, (0, node_path_1.extname)(absoluteSrc));
+                }
+            }
+            else {
+                destFile = (0, node_path_1.basename)(absoluteSrc, (0, node_path_1.extname)(absoluteSrc));
+            }
+            const extensionId = parents.join("-") + "-" + destFile;
+            res.push([(0, node_path_1.join)(dest.destination, ...parents, destFile), {
+                    import: [absoluteSrc],
+                    plauditMetadata: { dest, absoluteSrc, extensionId }
+                }]);
+        }
+        else if (dirent.isDirectory()) {
+            res.push(...await walkExtensionsTree((0, node_path_1.join)(srcRoot, dirent.name), dest, [...parents, dirent.name]));
+        }
+    }
+    return res;
+}
 function stripExtension(filepath) {
     return (0, node_path_1.join)((0, node_path_1.dirname)(filepath), (0, node_path_1.basename)(filepath, (0, node_path_1.extname)(filepath)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "license": "SEE LICENSE IN LICENSE.md",
   "files": [
     "/build",