@elementor/generate-wordpress-asset-file-webpack-plugin 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.3.0](https://github.com/elementor/elementor-packages/compare/@elementor/generate-wordpress-asset-file-webpack-plugin@0.2.1...@elementor/generate-wordpress-asset-file-webpack-plugin@0.3.0) (2023-07-11)
+
+
+### Features
+
+* **webpack-plugins:** simplify logic ([#78](https://github.com/elementor/elementor-packages/issues/78)) ([e4cadc0](https://github.com/elementor/elementor-packages/commit/e4cadc06be61450437274610e65b9d92eb245844))
+
+
+
+
+
 ## 0.2.1 (2023-07-02)
 
 **Note:** Version bump only for package @elementor/generate-wordpress-asset-file-webpack-plugin

package/dist/index.d.mts

@@ -1,47 +1,21 @@
 import { Compiler, Compilation, Chunk } from 'webpack';
 
-type HandlesMap = {
-    exact: Record<string, string>;
-    startsWith: Record<string, string>;
-};
+type RequestToHandleMap = Array<{
+    request: string | RegExp;
+    handle: string;
+}>;
+
 type Options = {
-    handlePrefix: string;
-    handlesMap?: Partial<HandlesMap>;
-    apps?: string[];
-    extensions?: string[];
-    i18n?: {
-        domain: string;
-        replaceRequestedFile?: boolean;
-    };
-};
-type NormalizedOptions = {
-    handlePrefix: string;
-    handlesMap: HandlesMap;
-    apps: string[];
-    extensions: string[];
-    i18n: {
-        domain: string | null;
-        replaceRequestedFile: boolean;
-    };
+    handle: (entryName: string) => string;
+    map: RequestToHandleMap;
 };
 declare class GenerateWordPressAssetFileWebpackPlugin {
-    options: NormalizedOptions;
+    options: Options;
     constructor(options: Options);
     apply(compiler: Compiler): void;
-    getDepsFromChunk(compilation: Compilation, chunk: Chunk): Set<string>;
-    createAssetsFileContent({ deps, i18n, entryName, }: {
-        deps: Set<string>;
-        i18n: NormalizedOptions['i18n'];
-        entryName: string;
-    }): string;
-    getLoaderFileContent(entriesData: Record<string, string>): string;
-    getEntryType(entryName: string): "extension" | "app" | "util";
+    addAssetFileToEntrypoint(compilation: Compilation, entryName: string, chunk: Chunk): void;
+    getDepsHandlesFromChunk(compilation: Compilation, chunk: Chunk): string[];
     getFileFromChunk(chunk: Chunk): string | undefined;
-    isExternalDep(request: string): boolean | "";
-    getHandleFromDep(dep: string): string;
-    generateHandleName(name: string): string;
-    generateAssetsFileName(filename: string): string;
-    normalizeOptions(options: Options): NormalizedOptions;
 }
 
 export { GenerateWordPressAssetFileWebpackPlugin };

package/dist/index.d.ts

@@ -1,47 +1,21 @@
 import { Compiler, Compilation, Chunk } from 'webpack';
 
-type HandlesMap = {
-    exact: Record<string, string>;
-    startsWith: Record<string, string>;
-};
+type RequestToHandleMap = Array<{
+    request: string | RegExp;
+    handle: string;
+}>;
+
 type Options = {
-    handlePrefix: string;
-    handlesMap?: Partial<HandlesMap>;
-    apps?: string[];
-    extensions?: string[];
-    i18n?: {
-        domain: string;
-        replaceRequestedFile?: boolean;
-    };
-};
-type NormalizedOptions = {
-    handlePrefix: string;
-    handlesMap: HandlesMap;
-    apps: string[];
-    extensions: string[];
-    i18n: {
-        domain: string | null;
-        replaceRequestedFile: boolean;
-    };
+    handle: (entryName: string) => string;
+    map: RequestToHandleMap;
 };
 declare class GenerateWordPressAssetFileWebpackPlugin {
-    options: NormalizedOptions;
+    options: Options;
     constructor(options: Options);
     apply(compiler: Compiler): void;
-    getDepsFromChunk(compilation: Compilation, chunk: Chunk): Set<string>;
-    createAssetsFileContent({ deps, i18n, entryName, }: {
-        deps: Set<string>;
-        i18n: NormalizedOptions['i18n'];
-        entryName: string;
-    }): string;
-    getLoaderFileContent(entriesData: Record<string, string>): string;
-    getEntryType(entryName: string): "extension" | "app" | "util";
+    addAssetFileToEntrypoint(compilation: Compilation, entryName: string, chunk: Chunk): void;
+    getDepsHandlesFromChunk(compilation: Compilation, chunk: Chunk): string[];
     getFileFromChunk(chunk: Chunk): string | undefined;
-    isExternalDep(request: string): boolean | "";
-    getHandleFromDep(dep: string): string;
-    generateHandleName(name: string): string;
-    generateAssetsFileName(filename: string): string;
-    normalizeOptions(options: Options): NormalizedOptions;
 }
 
 export { GenerateWordPressAssetFileWebpackPlugin };

package/dist/index.js

@@ -23,176 +23,98 @@ __export(src_exports, {
   GenerateWordPressAssetFileWebpackPlugin: () => GenerateWordPressAssetFileWebpackPlugin
 });
 module.exports = __toCommonJS(src_exports);
+
+// src/plugin.ts
 var import_webpack = require("webpack");
-var baseHandlesMap = {
-  exact: {
-    react: "react",
-    "react-dom": "react-dom"
-  },
-  startsWith: {
-    "@elementor/": "elementor-packages-",
-    "@wordpress/": "wp-"
+
+// src/utils.ts
+function getAssetFileContent(entryHandle, depsHandles) {
+  const depsAsString = depsHandles.filter((dep) => dep !== entryHandle).sort().map((dep) => `'${dep}',`).join("\n		");
+  return `<?php
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+/**
+ * This file is generated by Webpack, do not edit it directly.
+ */
+return [
+	'handle' => '${entryHandle}',
+	'deps' => [
+		${depsAsString}
+	],
+];
+`;
+}
+function transformRequestToHandle(request, map) {
+  if (!request) {
+    return request;
   }
-};
+  for (const item of map) {
+    let { request: requestRegex, handle } = item;
+    if (!(requestRegex instanceof RegExp)) {
+      requestRegex = new RegExp(`^${requestRegex}$`);
+    }
+    const matches = request.match(requestRegex);
+    if (matches) {
+      return request.replace(requestRegex, handle);
+    }
+  }
+}
+function createAssetFilePath(path, suffix = ".asset.php") {
+  return path.replace(/(\.min)?\.js$/i, suffix);
+}
+
+// src/plugin.ts
 var GenerateWordPressAssetFileWebpackPlugin = class {
   options;
   constructor(options) {
-    this.options = this.normalizeOptions(options);
+    this.options = options;
   }
   apply(compiler) {
     compiler.hooks.thisCompilation.tap(this.constructor.name, (compilation) => {
-      let handlesAssetsMap;
       compilation.hooks.processAssets.tap({ name: this.constructor.name }, () => {
-        handlesAssetsMap = [...compilation.entrypoints].reduce((map, [entryName, entrypoint]) => {
+        [...compilation.entrypoints].forEach(([entryName, entrypoint]) => {
           const chunk = entrypoint.chunks.find(({ name }) => name === entryName);
           if (!chunk) {
-            return map;
-          }
-          const chunkJSFile = this.getFileFromChunk(chunk);
-          if (!chunkJSFile) {
-            return map;
+            return;
           }
-          const deps = this.getDepsFromChunk(compilation, chunk);
-          const assetFilename = this.generateAssetsFileName(
-            compilation.getPath("[file]", { filename: chunkJSFile })
-          );
-          const handle = this.generateHandleName(entryName);
-          const content = this.createAssetsFileContent({
-            deps,
-            entryName,
-            i18n: this.options.i18n
-          });
-          compilation.assets[assetFilename] = new import_webpack.sources.RawSource(content);
-          chunk.files.add(assetFilename);
-          map[handle] = assetFilename;
-          return map;
-        }, {});
-      });
-      compilation.hooks.afterProcessAssets.tap({ name: this.constructor.name }, () => {
-        const loaderFileContent = this.getLoaderFileContent(handlesAssetsMap);
-        compilation.assets["loader.php"] = new import_webpack.sources.RawSource(loaderFileContent);
+          this.addAssetFileToEntrypoint(compilation, entryName, chunk);
+        });
       });
     });
   }
-  getDepsFromChunk(compilation, chunk) {
+  addAssetFileToEntrypoint(compilation, entryName, chunk) {
+    const chunkJSFile = this.getFileFromChunk(chunk);
+    if (!chunkJSFile) {
+      return;
+    }
+    const transformEntryNameToHandle = this.options.handle;
+    const entryHandle = transformEntryNameToHandle(entryName);
+    const depsHandles = this.getDepsHandlesFromChunk(compilation, chunk);
+    const assetFilePath = createAssetFilePath(
+      compilation.getPath("[file]", { filename: chunkJSFile })
+    );
+    compilation.assets[assetFilePath] = new import_webpack.sources.RawSource(
+      getAssetFileContent(entryHandle, depsHandles)
+    );
+    chunk.files.add(assetFilePath);
+  }
+  getDepsHandlesFromChunk(compilation, chunk) {
     const depsSet = /* @__PURE__ */ new Set();
     compilation.chunkGraph.getChunkModules(chunk).forEach((module2) => {
       const theModule = module2;
       [...theModule.modules || [], theModule].forEach((subModule) => {
-        if (subModule.userRequest && this.isExternalDep(subModule.userRequest)) {
-          depsSet.add(subModule.userRequest);
+        const depHandle = transformRequestToHandle(subModule.userRequest, this.options.map);
+        if (depHandle) {
+          depsSet.add(depHandle);
         }
       });
     });
-    return depsSet;
-  }
-  createAssetsFileContent({
-    deps,
-    i18n,
-    entryName
-  }) {
-    const handleName = this.generateHandleName(entryName);
-    const type = this.getEntryType(entryName);
-    const depsAsString = [...deps].map((dep) => this.getHandleFromDep(dep)).filter((dep) => dep !== handleName).sort().map((dep) => `'${dep}',`).join("\n		");
-    const i18nContent = i18n.domain ? `[
-		'domain' => '${i18n.domain}',
-		'replace_requested_file' => ${(i18n.replaceRequestedFile ?? false).toString()},
-	]` : "[]";
-    const content = `<?php
-if ( ! defined( 'ABSPATH' ) ) {
-	exit;
-}
-/**
- * This file is generated by Webpack, do not edit it directly.
- */
-return [
-	'handle' => '${handleName}',
-	'src' => plugins_url( '/', __FILE__ ) . '${entryName}{{MIN_SUFFIX}}.js',
-	'i18n' => ${i18nContent},
-	'type' => '${type}',
-	'deps' => [
-		${depsAsString}
-	],
-];
-`;
-    return content;
-  }
-  getLoaderFileContent(entriesData) {
-    const entriesContent = Object.entries(entriesData).map(([handle, assetFileName]) => {
-      return `
-	$data['${handle}'] = require __DIR__ . '/${assetFileName}';`;
-    });
-    return `<?php
-if ( ! defined( 'ABSPATH' ) ) {
-	exit;
-}
-/**
- * This file is generated by Webpack, do not edit it directly.
- */
-add_filter( 'elementor/editor-v2/packages/config', function( $data ) {
-${entriesContent.join("\n")}
-	return $data;
-} );
-`;
-  }
-  getEntryType(entryName) {
-    if (this.options.extensions.includes(entryName)) {
-      return "extension";
-    }
-    if (this.options.apps.includes(entryName)) {
-      return "app";
-    }
-    return "util";
+    return [...depsSet];
   }
   getFileFromChunk(chunk) {
     return [...chunk.files].find((f) => /\.js$/i.test(f));
   }
-  isExternalDep(request) {
-    const { startsWith, exact } = this.options.handlesMap;
-    return request && (Object.keys(exact).includes(request) || Object.keys(startsWith).some((dep) => request.startsWith(dep)));
-  }
-  getHandleFromDep(dep) {
-    const { startsWith, exact } = this.options.handlesMap;
-    if (Object.keys(exact).includes(dep)) {
-      return exact[dep];
-    }
-    for (const [key, value] of Object.entries(startsWith)) {
-      if (dep.startsWith(key)) {
-        return dep.replace(key, value);
-      }
-    }
-    return dep;
-  }
-  generateHandleName(name) {
-    if (this.options.handlePrefix) {
-      return `${this.options.handlePrefix}${name}`;
-    }
-    return name;
-  }
-  generateAssetsFileName(filename) {
-    return filename.replace(/(\.min)?\.js$/i, ".asset.php");
-  }
-  normalizeOptions(options) {
-    return {
-      ...options,
-      handlesMap: {
-        exact: {
-          ...baseHandlesMap.exact,
-          ...options?.handlesMap?.exact || {}
-        },
-        startsWith: {
-          ...baseHandlesMap.startsWith,
-          ...options?.handlesMap?.startsWith || {}
-        }
-      },
-      apps: options?.apps || [],
-      extensions: options?.extensions || [],
-      i18n: {
-        domain: options?.i18n?.domain || null,
-        replaceRequestedFile: options?.i18n?.replaceRequestedFile ?? false
-      }
-    };
-  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Inspired by \"Dependency Extraction Webpack Plugin\" by @wordpress team.\n// Link: https://github.com/WordPress/gutenberg/tree/trunk/packages/dependency-extraction-webpack-plugin\nimport { sources, Compilation, Compiler, Chunk } from 'webpack';\n\ntype HandlesMap = {\n\texact: Record<string, string>;\n\tstartsWith: Record<string, string>;\n}\n\ntype Options = {\n\thandlePrefix: string;\n\thandlesMap?: Partial<HandlesMap>\n\tapps?: string[];\n\textensions?: string[];\n\ti18n?: {\n\t\tdomain: string;\n\t\treplaceRequestedFile?: boolean;\n\t}\n}\n\ntype NormalizedOptions = {\n\thandlePrefix: string;\n\thandlesMap: HandlesMap;\n\tapps: string[];\n\textensions: string[];\n\ti18n: {\n\t\tdomain: string | null;\n\t\treplaceRequestedFile: boolean;\n\t}\n}\n\ntype Module = {\n\tuserRequest?: string;\n\tmodules?: Module[];\n}\n\nconst baseHandlesMap: HandlesMap = {\n\texact: {\n\t\treact: 'react',\n\t\t'react-dom': 'react-dom',\n\t},\n\tstartsWith: {\n\t\t'@elementor/': 'elementor-packages-',\n\t\t'@wordpress/': 'wp-',\n\t},\n};\n\nexport class GenerateWordPressAssetFileWebpackPlugin {\n\toptions: NormalizedOptions;\n\n\tconstructor( options: Options ) {\n\t\tthis.options = this.normalizeOptions( options );\n\t}\n\n\tapply( compiler: Compiler ) {\n\t\tcompiler.hooks.thisCompilation.tap( this.constructor.name, ( compilation ) => {\n\t\t\tlet handlesAssetsMap: Record<string, string>;\n\n\t\t\tcompilation.hooks.processAssets.tap( { name: this.constructor.name }, () => {\n\t\t\t\thandlesAssetsMap = [ ...compilation.entrypoints ].reduce<Record<string, string>>( ( map, [ entryName, entrypoint ] ) => {\n\t\t\t\t\tconst chunk = entrypoint.chunks.find( ( { name } ) => name === entryName );\n\n\t\t\t\t\tif ( ! chunk ) {\n\t\t\t\t\t\treturn map;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst chunkJSFile = this.getFileFromChunk( chunk );\n\n\t\t\t\t\tif ( ! chunkJSFile ) {\n\t\t\t\t\t\treturn map;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst deps = this.getDepsFromChunk( compilation, chunk );\n\n\t\t\t\t\tconst assetFilename = this.generateAssetsFileName(\n\t\t\t\t\t\tcompilation.getPath( '[file]', { filename: chunkJSFile } )\n\t\t\t\t\t);\n\n\t\t\t\t\tconst handle = this.generateHandleName( entryName );\n\n\t\t\t\t\tconst content = this.createAssetsFileContent( {\n\t\t\t\t\t\tdeps,\n\t\t\t\t\t\tentryName,\n\t\t\t\t\t\ti18n: this.options.i18n,\n\t\t\t\t\t} );\n\n\t\t\t\t\t// Add source and file into compilation for webpack to output.\n\t\t\t\t\tcompilation.assets[ assetFilename ] = new sources.RawSource( content );\n\n\t\t\t\t\tchunk.files.add( assetFilename );\n\n\t\t\t\t\tmap[ handle ] = assetFilename;\n\n\t\t\t\t\treturn map;\n\t\t\t\t}, {} );\n\t\t\t} );\n\n\t\t\tcompilation.hooks.afterProcessAssets.tap( { name: this.constructor.name }, () => {\n\t\t\t\tconst loaderFileContent = this.getLoaderFileContent( handlesAssetsMap );\n\n\t\t\t\tcompilation.assets[ 'loader.php' ] = new sources.RawSource( loaderFileContent );\n\t\t\t} );\n\t\t} );\n\t}\n\n\tgetDepsFromChunk( compilation: Compilation, chunk: Chunk ) {\n\t\tconst depsSet = new Set<string>();\n\n\t\tcompilation.chunkGraph.getChunkModules( chunk ).forEach( ( module ) => {\n\t\t\t// There are some issues with types in webpack, so we need to cast it.\n\t\t\tconst theModule = module as Module;\n\n\t\t\t[ ...( theModule.modules || [] ), theModule ].forEach( ( subModule ) => {\n\t\t\t\tif ( subModule.userRequest && this.isExternalDep( subModule.userRequest ) ) {\n\t\t\t\t\tdepsSet.add( subModule.userRequest );\n\t\t\t\t}\n\t\t\t} );\n\t\t} );\n\n\t\treturn depsSet;\n\t}\n\n\tcreateAssetsFileContent( {\n\t\tdeps,\n\t\ti18n,\n\t\tentryName,\n\t}: {\n\t\tdeps: Set<string>;\n\t\ti18n: NormalizedOptions[ 'i18n' ];\n\t\tentryName: string;\n\t} ) {\n\t\tconst handleName = this.generateHandleName( entryName );\n\t\tconst type = this.getEntryType( entryName );\n\n\t\tconst depsAsString = [ ...deps ]\n\t\t\t.map( ( dep ) => this.getHandleFromDep( dep ) )\n\t\t\t.filter( ( dep ) => dep !== handleName )\n\t\t\t.sort()\n\t\t\t.map( ( dep ) => `'${ dep }',` )\n\t\t\t.join( '\\n\\t\\t' );\n\n\t\tconst i18nContent = i18n.domain ? `[\n\t\t'domain' => '${ i18n.domain }',\n\t\t'replace_requested_file' => ${ ( i18n.replaceRequestedFile ?? false ).toString() },\n\t]` : '[]';\n\n\t\tconst content =\n\t\t\t`<?php\nif ( ! defined( 'ABSPATH' ) ) {\n\texit;\n}\n/**\n * This file is generated by Webpack, do not edit it directly.\n */\nreturn [\n\t'handle' => '${ handleName }',\n\t'src' => plugins_url( '/', __FILE__ ) . '${ entryName }{{MIN_SUFFIX}}.js',\n\t'i18n' => ${ i18nContent },\n\t'type' => '${ type }',\n\t'deps' => [\n\t\t${ depsAsString }\n\t],\n];\n`;\n\n\t\treturn content;\n\t}\n\n\tgetLoaderFileContent( entriesData: Record<string, string> ) {\n\t\tconst entriesContent = Object.entries( entriesData ).map( ( [ handle, assetFileName ] ) => {\n\t\t\treturn `\n\t$data['${ handle }'] = require __DIR__ . '/${ assetFileName }';`;\n\t\t} );\n\n\t\treturn `<?php\nif ( ! defined( 'ABSPATH' ) ) {\n\texit;\n}\n/**\n * This file is generated by Webpack, do not edit it directly.\n */\nadd_filter( 'elementor/editor-v2/packages/config', function( $data ) {\n${ entriesContent.join( '\\n' ) }\n\treturn $data;\n} );\n`;\n\t}\n\n\tgetEntryType( entryName: string ) {\n\t\tif ( this.options.extensions.includes( entryName ) ) {\n\t\t\treturn 'extension';\n\t\t}\n\n\t\tif ( this.options.apps.includes( entryName ) ) {\n\t\t\treturn 'app';\n\t\t}\n\n\t\treturn 'util';\n\t}\n\n\tgetFileFromChunk( chunk: Chunk ) {\n\t\treturn [ ...chunk.files ].find( ( f ) => /\\.js$/i.test( f ) );\n\t}\n\n\tisExternalDep( request: string ) {\n\t\tconst { startsWith, exact } = this.options.handlesMap;\n\n\t\treturn request && (\n\t\t\tObject.keys( exact ).includes( request ) ||\n\t\t\tObject.keys( startsWith ).some( ( dep ) => request.startsWith( dep ) )\n\t\t);\n\t}\n\n\tgetHandleFromDep( dep: string ) {\n\t\tconst { startsWith, exact } = this.options.handlesMap;\n\n\t\tif ( Object.keys( exact ).includes( dep ) ) {\n\t\t\treturn exact[ dep ];\n\t\t}\n\n\t\tfor ( const [ key, value ] of Object.entries( startsWith ) ) {\n\t\t\tif ( dep.startsWith( key ) ) {\n\t\t\t\treturn dep.replace( key, value );\n\t\t\t}\n\t\t}\n\n\t\treturn dep;\n\t}\n\n\tgenerateHandleName( name: string ) {\n\t\tif ( this.options.handlePrefix ) {\n\t\t\treturn `${ this.options.handlePrefix }${ name }`;\n\t\t}\n\n\t\treturn name;\n\t}\n\n\tgenerateAssetsFileName( filename: string ) {\n\t\treturn filename.replace( /(\\.min)?\\.js$/i, '.asset.php' );\n\t}\n\n\tnormalizeOptions( options: Options ): NormalizedOptions {\n\t\treturn {\n\t\t\t...options,\n\t\t\thandlesMap: {\n\t\t\t\texact: {\n\t\t\t\t\t...baseHandlesMap.exact,\n\t\t\t\t\t...( options?.handlesMap?.exact || {} ),\n\t\t\t\t},\n\t\t\t\tstartsWith: {\n\t\t\t\t\t...baseHandlesMap.startsWith,\n\t\t\t\t\t...( options?.handlesMap?.startsWith || {} ),\n\t\t\t\t},\n\t\t\t},\n\t\t\tapps: options?.apps || [],\n\t\t\textensions: options?.extensions || [],\n\t\t\ti18n: {\n\t\t\t\tdomain: options?.i18n?.domain || null,\n\t\t\t\treplaceRequestedFile: options?.i18n?.replaceRequestedFile ?? false,\n\t\t\t},\n\t\t};\n\t}\n}\n"],"mappings":"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","names":["module"]}
+{"version":3,"sources":["../src/index.ts","../src/plugin.ts","../src/utils.ts"],"sourcesContent":["export { default as GenerateWordPressAssetFileWebpackPlugin } from './plugin';\n","// Inspired by \"Dependency Extraction Webpack Plugin\" by @wordpress team.\n// Link: https://github.com/WordPress/gutenberg/tree/trunk/packages/dependency-extraction-webpack-plugin\nimport { sources, Compilation, Compiler, Chunk } from 'webpack';\nimport { createAssetFilePath, getAssetFileContent, transformRequestToHandle } from './utils';\nimport { RequestToHandleMap } from './types';\n\ntype Options = {\n\thandle: ( entryName: string ) => string;\n\tmap: RequestToHandleMap\n}\n\ntype Module = {\n\tuserRequest?: string;\n\tmodules?: Module[];\n}\n\nexport default class GenerateWordPressAssetFileWebpackPlugin {\n\toptions: Options;\n\n\tconstructor( options: Options ) {\n\t\tthis.options = options;\n\t}\n\n\tapply( compiler: Compiler ) {\n\t\tcompiler.hooks.thisCompilation.tap( this.constructor.name, ( compilation ) => {\n\t\t\tcompilation.hooks.processAssets.tap( { name: this.constructor.name }, () => {\n\t\t\t\t[ ...compilation.entrypoints ].forEach( ( [ entryName, entrypoint ] ) => {\n\t\t\t\t\tconst chunk = entrypoint.chunks.find( ( { name } ) => name === entryName );\n\n\t\t\t\t\tif ( ! chunk ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tthis.addAssetFileToEntrypoint( compilation, entryName, chunk );\n\t\t\t\t} );\n\t\t\t} );\n\t\t} );\n\t}\n\n\taddAssetFileToEntrypoint( compilation: Compilation, entryName: string, chunk: Chunk ) {\n\t\tconst chunkJSFile = this.getFileFromChunk( chunk );\n\n\t\tif ( ! chunkJSFile ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst transformEntryNameToHandle = this.options.handle;\n\n\t\tconst entryHandle = transformEntryNameToHandle( entryName );\n\t\tconst depsHandles = this.getDepsHandlesFromChunk( compilation, chunk );\n\n\t\tconst assetFilePath = createAssetFilePath(\n\t\t\tcompilation.getPath( '[file]', { filename: chunkJSFile } )\n\t\t);\n\n\t\t// Add source and file into compilation for webpack to output.\n\t\tcompilation.assets[ assetFilePath ] = new sources.RawSource(\n\t\t\tgetAssetFileContent( entryHandle, depsHandles )\n\t\t);\n\n\t\tchunk.files.add( assetFilePath );\n\t}\n\n\tgetDepsHandlesFromChunk( compilation: Compilation, chunk: Chunk ) {\n\t\tconst depsSet = new Set<string>();\n\n\t\tcompilation.chunkGraph.getChunkModules( chunk ).forEach( ( module ) => {\n\t\t\t// There are some issues with types in webpack, so we need to cast it.\n\t\t\tconst theModule = module as Module;\n\n\t\t\t[ ...( theModule.modules || [] ), theModule ].forEach( ( subModule ) => {\n\t\t\t\tconst depHandle = transformRequestToHandle( subModule.userRequest, this.options.map );\n\n\t\t\t\tif ( depHandle ) {\n\t\t\t\t\tdepsSet.add( depHandle );\n\t\t\t\t}\n\t\t\t} );\n\t\t} );\n\n\t\treturn [ ...depsSet ];\n\t}\n\n\tgetFileFromChunk( chunk: Chunk ) {\n\t\treturn [ ...chunk.files ].find( ( f ) => /\\.js$/i.test( f ) );\n\t}\n}\n","import { RequestToHandleMap } from './types';\n\nexport function getAssetFileContent( entryHandle: string, depsHandles: string[] ) {\n\tconst depsAsString = depsHandles\n\t\t.filter( ( dep ) => dep !== entryHandle )\n\t\t.sort()\n\t\t.map( ( dep ) => `'${ dep }',` )\n\t\t.join( '\\n\\t\\t' );\n\n\treturn `<?php\nif ( ! defined( 'ABSPATH' ) ) {\n\texit;\n}\n/**\n * This file is generated by Webpack, do not edit it directly.\n */\nreturn [\n\t'handle' => '${ entryHandle }',\n\t'deps' => [\n\t\t${ depsAsString }\n\t],\n];\n`;\n}\n\nexport function transformRequestToHandle( request: string | undefined, map: RequestToHandleMap ) {\n\tif ( ! request ) {\n\t\treturn request;\n\t}\n\n\tfor ( const item of map ) {\n\t\tlet { request: requestRegex, handle } = item;\n\n\t\tif ( ! ( requestRegex instanceof RegExp ) ) {\n\t\t\trequestRegex = new RegExp( `^${ requestRegex }$` );\n\t\t}\n\n\t\tconst matches = request.match( requestRegex );\n\n\t\tif ( matches ) {\n\t\t\treturn request.replace( requestRegex, handle );\n\t\t}\n\t}\n}\n\nexport function createAssetFilePath( path: string, suffix = '.asset.php' ) {\n\treturn path.replace( /(\\.min)?\\.js$/i, suffix );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,qBAAsD;;;ACA/C,SAAS,oBAAqB,aAAqB,aAAwB;AACjF,QAAM,eAAe,YACnB,OAAQ,CAAE,QAAS,QAAQ,WAAY,EACvC,KAAK,EACL,IAAK,CAAE,QAAS,IAAK,GAAI,IAAK,EAC9B,KAAM,MAAS;AAEjB,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAQS,WAAY;AAAA;AAAA,IAExB,YAAa;AAAA;AAAA;AAAA;AAIlB;AAEO,SAAS,yBAA0B,SAA6B,KAA0B;AAChG,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAEA,aAAY,QAAQ,KAAM;AACzB,QAAI,EAAE,SAAS,cAAc,OAAO,IAAI;AAExC,QAAK,EAAI,wBAAwB,SAAW;AAC3C,qBAAe,IAAI,OAAQ,IAAK,YAAa,GAAI;AAAA,IAClD;AAEA,UAAM,UAAU,QAAQ,MAAO,YAAa;AAE5C,QAAK,SAAU;AACd,aAAO,QAAQ,QAAS,cAAc,MAAO;AAAA,IAC9C;AAAA,EACD;AACD;AAEO,SAAS,oBAAqB,MAAc,SAAS,cAAe;AAC1E,SAAO,KAAK,QAAS,kBAAkB,MAAO;AAC/C;;;AD/BA,IAAqB,0CAArB,MAA6D;AAAA,EAC5D;AAAA,EAEA,YAAa,SAAmB;AAC/B,SAAK,UAAU;AAAA,EAChB;AAAA,EAEA,MAAO,UAAqB;AAC3B,aAAS,MAAM,gBAAgB,IAAK,KAAK,YAAY,MAAM,CAAE,gBAAiB;AAC7E,kBAAY,MAAM,cAAc,IAAK,EAAE,MAAM,KAAK,YAAY,KAAK,GAAG,MAAM;AAC3E,SAAE,GAAG,YAAY,WAAY,EAAE,QAAS,CAAE,CAAE,WAAW,UAAW,MAAO;AACxE,gBAAM,QAAQ,WAAW,OAAO,KAAM,CAAE,EAAE,KAAK,MAAO,SAAS,SAAU;AAEzE,cAAK,CAAE,OAAQ;AACd;AAAA,UACD;AAEA,eAAK,yBAA0B,aAAa,WAAW,KAAM;AAAA,QAC9D,CAAE;AAAA,MACH,CAAE;AAAA,IACH,CAAE;AAAA,EACH;AAAA,EAEA,yBAA0B,aAA0B,WAAmB,OAAe;AACrF,UAAM,cAAc,KAAK,iBAAkB,KAAM;AAEjD,QAAK,CAAE,aAAc;AACpB;AAAA,IACD;AAEA,UAAM,6BAA6B,KAAK,QAAQ;AAEhD,UAAM,cAAc,2BAA4B,SAAU;AAC1D,UAAM,cAAc,KAAK,wBAAyB,aAAa,KAAM;AAErE,UAAM,gBAAgB;AAAA,MACrB,YAAY,QAAS,UAAU,EAAE,UAAU,YAAY,CAAE;AAAA,IAC1D;AAGA,gBAAY,OAAQ,aAAc,IAAI,IAAI,uBAAQ;AAAA,MACjD,oBAAqB,aAAa,WAAY;AAAA,IAC/C;AAEA,UAAM,MAAM,IAAK,aAAc;AAAA,EAChC;AAAA,EAEA,wBAAyB,aAA0B,OAAe;AACjE,UAAM,UAAU,oBAAI,IAAY;AAEhC,gBAAY,WAAW,gBAAiB,KAAM,EAAE,QAAS,CAAEA,YAAY;AAEtE,YAAM,YAAYA;AAElB,OAAE,GAAK,UAAU,WAAW,CAAC,GAAK,SAAU,EAAE,QAAS,CAAE,cAAe;AACvE,cAAM,YAAY,yBAA0B,UAAU,aAAa,KAAK,QAAQ,GAAI;AAEpF,YAAK,WAAY;AAChB,kBAAQ,IAAK,SAAU;AAAA,QACxB;AAAA,MACD,CAAE;AAAA,IACH,CAAE;AAEF,WAAO,CAAE,GAAG,OAAQ;AAAA,EACrB;AAAA,EAEA,iBAAkB,OAAe;AAChC,WAAO,CAAE,GAAG,MAAM,KAAM,EAAE,KAAM,CAAE,MAAO,SAAS,KAAM,CAAE,CAAE;AAAA,EAC7D;AACD;","names":["module"]}

package/dist/index.mjs

@@ -1,174 +1,94 @@
-// src/index.ts
+// src/plugin.ts
 import { sources } from "webpack";
-var baseHandlesMap = {
-  exact: {
-    react: "react",
-    "react-dom": "react-dom"
-  },
-  startsWith: {
-    "@elementor/": "elementor-packages-",
-    "@wordpress/": "wp-"
+
+// src/utils.ts
+function getAssetFileContent(entryHandle, depsHandles) {
+  const depsAsString = depsHandles.filter((dep) => dep !== entryHandle).sort().map((dep) => `'${dep}',`).join("\n		");
+  return `<?php
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+/**
+ * This file is generated by Webpack, do not edit it directly.
+ */
+return [
+	'handle' => '${entryHandle}',
+	'deps' => [
+		${depsAsString}
+	],
+];
+`;
+}
+function transformRequestToHandle(request, map) {
+  if (!request) {
+    return request;
   }
-};
+  for (const item of map) {
+    let { request: requestRegex, handle } = item;
+    if (!(requestRegex instanceof RegExp)) {
+      requestRegex = new RegExp(`^${requestRegex}$`);
+    }
+    const matches = request.match(requestRegex);
+    if (matches) {
+      return request.replace(requestRegex, handle);
+    }
+  }
+}
+function createAssetFilePath(path, suffix = ".asset.php") {
+  return path.replace(/(\.min)?\.js$/i, suffix);
+}
+
+// src/plugin.ts
 var GenerateWordPressAssetFileWebpackPlugin = class {
   options;
   constructor(options) {
-    this.options = this.normalizeOptions(options);
+    this.options = options;
   }
   apply(compiler) {
     compiler.hooks.thisCompilation.tap(this.constructor.name, (compilation) => {
-      let handlesAssetsMap;
       compilation.hooks.processAssets.tap({ name: this.constructor.name }, () => {
-        handlesAssetsMap = [...compilation.entrypoints].reduce((map, [entryName, entrypoint]) => {
+        [...compilation.entrypoints].forEach(([entryName, entrypoint]) => {
           const chunk = entrypoint.chunks.find(({ name }) => name === entryName);
           if (!chunk) {
-            return map;
+            return;
           }
-          const chunkJSFile = this.getFileFromChunk(chunk);
-          if (!chunkJSFile) {
-            return map;
-          }
-          const deps = this.getDepsFromChunk(compilation, chunk);
-          const assetFilename = this.generateAssetsFileName(
-            compilation.getPath("[file]", { filename: chunkJSFile })
-          );
-          const handle = this.generateHandleName(entryName);
-          const content = this.createAssetsFileContent({
-            deps,
-            entryName,
-            i18n: this.options.i18n
-          });
-          compilation.assets[assetFilename] = new sources.RawSource(content);
-          chunk.files.add(assetFilename);
-          map[handle] = assetFilename;
-          return map;
-        }, {});
-      });
-      compilation.hooks.afterProcessAssets.tap({ name: this.constructor.name }, () => {
-        const loaderFileContent = this.getLoaderFileContent(handlesAssetsMap);
-        compilation.assets["loader.php"] = new sources.RawSource(loaderFileContent);
+          this.addAssetFileToEntrypoint(compilation, entryName, chunk);
+        });
       });
     });
   }
-  getDepsFromChunk(compilation, chunk) {
+  addAssetFileToEntrypoint(compilation, entryName, chunk) {
+    const chunkJSFile = this.getFileFromChunk(chunk);
+    if (!chunkJSFile) {
+      return;
+    }
+    const transformEntryNameToHandle = this.options.handle;
+    const entryHandle = transformEntryNameToHandle(entryName);
+    const depsHandles = this.getDepsHandlesFromChunk(compilation, chunk);
+    const assetFilePath = createAssetFilePath(
+      compilation.getPath("[file]", { filename: chunkJSFile })
+    );
+    compilation.assets[assetFilePath] = new sources.RawSource(
+      getAssetFileContent(entryHandle, depsHandles)
+    );
+    chunk.files.add(assetFilePath);
+  }
+  getDepsHandlesFromChunk(compilation, chunk) {
     const depsSet = /* @__PURE__ */ new Set();
     compilation.chunkGraph.getChunkModules(chunk).forEach((module) => {
       const theModule = module;
       [...theModule.modules || [], theModule].forEach((subModule) => {
-        if (subModule.userRequest && this.isExternalDep(subModule.userRequest)) {
-          depsSet.add(subModule.userRequest);
+        const depHandle = transformRequestToHandle(subModule.userRequest, this.options.map);
+        if (depHandle) {
+          depsSet.add(depHandle);
         }
       });
     });
-    return depsSet;
-  }
-  createAssetsFileContent({
-    deps,
-    i18n,
-    entryName
-  }) {
-    const handleName = this.generateHandleName(entryName);
-    const type = this.getEntryType(entryName);
-    const depsAsString = [...deps].map((dep) => this.getHandleFromDep(dep)).filter((dep) => dep !== handleName).sort().map((dep) => `'${dep}',`).join("\n		");
-    const i18nContent = i18n.domain ? `[
-		'domain' => '${i18n.domain}',
-		'replace_requested_file' => ${(i18n.replaceRequestedFile ?? false).toString()},
-	]` : "[]";
-    const content = `<?php
-if ( ! defined( 'ABSPATH' ) ) {
-	exit;
-}
-/**
- * This file is generated by Webpack, do not edit it directly.
- */
-return [
-	'handle' => '${handleName}',
-	'src' => plugins_url( '/', __FILE__ ) . '${entryName}{{MIN_SUFFIX}}.js',
-	'i18n' => ${i18nContent},
-	'type' => '${type}',
-	'deps' => [
-		${depsAsString}
-	],
-];
-`;
-    return content;
-  }
-  getLoaderFileContent(entriesData) {
-    const entriesContent = Object.entries(entriesData).map(([handle, assetFileName]) => {
-      return `
-	$data['${handle}'] = require __DIR__ . '/${assetFileName}';`;
-    });
-    return `<?php
-if ( ! defined( 'ABSPATH' ) ) {
-	exit;
-}
-/**
- * This file is generated by Webpack, do not edit it directly.
- */
-add_filter( 'elementor/editor-v2/packages/config', function( $data ) {
-${entriesContent.join("\n")}
-	return $data;
-} );
-`;
-  }
-  getEntryType(entryName) {
-    if (this.options.extensions.includes(entryName)) {
-      return "extension";
-    }
-    if (this.options.apps.includes(entryName)) {
-      return "app";
-    }
-    return "util";
+    return [...depsSet];
   }
   getFileFromChunk(chunk) {
     return [...chunk.files].find((f) => /\.js$/i.test(f));
   }
-  isExternalDep(request) {
-    const { startsWith, exact } = this.options.handlesMap;
-    return request && (Object.keys(exact).includes(request) || Object.keys(startsWith).some((dep) => request.startsWith(dep)));
-  }
-  getHandleFromDep(dep) {
-    const { startsWith, exact } = this.options.handlesMap;
-    if (Object.keys(exact).includes(dep)) {
-      return exact[dep];
-    }
-    for (const [key, value] of Object.entries(startsWith)) {
-      if (dep.startsWith(key)) {
-        return dep.replace(key, value);
-      }
-    }
-    return dep;
-  }
-  generateHandleName(name) {
-    if (this.options.handlePrefix) {
-      return `${this.options.handlePrefix}${name}`;
-    }
-    return name;
-  }
-  generateAssetsFileName(filename) {
-    return filename.replace(/(\.min)?\.js$/i, ".asset.php");
-  }
-  normalizeOptions(options) {
-    return {
-      ...options,
-      handlesMap: {
-        exact: {
-          ...baseHandlesMap.exact,
-          ...options?.handlesMap?.exact || {}
-        },
-        startsWith: {
-          ...baseHandlesMap.startsWith,
-          ...options?.handlesMap?.startsWith || {}
-        }
-      },
-      apps: options?.apps || [],
-      extensions: options?.extensions || [],
-      i18n: {
-        domain: options?.i18n?.domain || null,
-        replaceRequestedFile: options?.i18n?.replaceRequestedFile ?? false
-      }
-    };
-  }
 };
 export {
   GenerateWordPressAssetFileWebpackPlugin

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Inspired by \"Dependency Extraction Webpack Plugin\" by @wordpress team.\n// Link: https://github.com/WordPress/gutenberg/tree/trunk/packages/dependency-extraction-webpack-plugin\nimport { sources, Compilation, Compiler, Chunk } from 'webpack';\n\ntype HandlesMap = {\n\texact: Record<string, string>;\n\tstartsWith: Record<string, string>;\n}\n\ntype Options = {\n\thandlePrefix: string;\n\thandlesMap?: Partial<HandlesMap>\n\tapps?: string[];\n\textensions?: string[];\n\ti18n?: {\n\t\tdomain: string;\n\t\treplaceRequestedFile?: boolean;\n\t}\n}\n\ntype NormalizedOptions = {\n\thandlePrefix: string;\n\thandlesMap: HandlesMap;\n\tapps: string[];\n\textensions: string[];\n\ti18n: {\n\t\tdomain: string | null;\n\t\treplaceRequestedFile: boolean;\n\t}\n}\n\ntype Module = {\n\tuserRequest?: string;\n\tmodules?: Module[];\n}\n\nconst baseHandlesMap: HandlesMap = {\n\texact: {\n\t\treact: 'react',\n\t\t'react-dom': 'react-dom',\n\t},\n\tstartsWith: {\n\t\t'@elementor/': 'elementor-packages-',\n\t\t'@wordpress/': 'wp-',\n\t},\n};\n\nexport class GenerateWordPressAssetFileWebpackPlugin {\n\toptions: NormalizedOptions;\n\n\tconstructor( options: Options ) {\n\t\tthis.options = this.normalizeOptions( options );\n\t}\n\n\tapply( compiler: Compiler ) {\n\t\tcompiler.hooks.thisCompilation.tap( this.constructor.name, ( compilation ) => {\n\t\t\tlet handlesAssetsMap: Record<string, string>;\n\n\t\t\tcompilation.hooks.processAssets.tap( { name: this.constructor.name }, () => {\n\t\t\t\thandlesAssetsMap = [ ...compilation.entrypoints ].reduce<Record<string, string>>( ( map, [ entryName, entrypoint ] ) => {\n\t\t\t\t\tconst chunk = entrypoint.chunks.find( ( { name } ) => name === entryName );\n\n\t\t\t\t\tif ( ! chunk ) {\n\t\t\t\t\t\treturn map;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst chunkJSFile = this.getFileFromChunk( chunk );\n\n\t\t\t\t\tif ( ! chunkJSFile ) {\n\t\t\t\t\t\treturn map;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst deps = this.getDepsFromChunk( compilation, chunk );\n\n\t\t\t\t\tconst assetFilename = this.generateAssetsFileName(\n\t\t\t\t\t\tcompilation.getPath( '[file]', { filename: chunkJSFile } )\n\t\t\t\t\t);\n\n\t\t\t\t\tconst handle = this.generateHandleName( entryName );\n\n\t\t\t\t\tconst content = this.createAssetsFileContent( {\n\t\t\t\t\t\tdeps,\n\t\t\t\t\t\tentryName,\n\t\t\t\t\t\ti18n: this.options.i18n,\n\t\t\t\t\t} );\n\n\t\t\t\t\t// Add source and file into compilation for webpack to output.\n\t\t\t\t\tcompilation.assets[ assetFilename ] = new sources.RawSource( content );\n\n\t\t\t\t\tchunk.files.add( assetFilename );\n\n\t\t\t\t\tmap[ handle ] = assetFilename;\n\n\t\t\t\t\treturn map;\n\t\t\t\t}, {} );\n\t\t\t} );\n\n\t\t\tcompilation.hooks.afterProcessAssets.tap( { name: this.constructor.name }, () => {\n\t\t\t\tconst loaderFileContent = this.getLoaderFileContent( handlesAssetsMap );\n\n\t\t\t\tcompilation.assets[ 'loader.php' ] = new sources.RawSource( loaderFileContent );\n\t\t\t} );\n\t\t} );\n\t}\n\n\tgetDepsFromChunk( compilation: Compilation, chunk: Chunk ) {\n\t\tconst depsSet = new Set<string>();\n\n\t\tcompilation.chunkGraph.getChunkModules( chunk ).forEach( ( module ) => {\n\t\t\t// There are some issues with types in webpack, so we need to cast it.\n\t\t\tconst theModule = module as Module;\n\n\t\t\t[ ...( theModule.modules || [] ), theModule ].forEach( ( subModule ) => {\n\t\t\t\tif ( subModule.userRequest && this.isExternalDep( subModule.userRequest ) ) {\n\t\t\t\t\tdepsSet.add( subModule.userRequest );\n\t\t\t\t}\n\t\t\t} );\n\t\t} );\n\n\t\treturn depsSet;\n\t}\n\n\tcreateAssetsFileContent( {\n\t\tdeps,\n\t\ti18n,\n\t\tentryName,\n\t}: {\n\t\tdeps: Set<string>;\n\t\ti18n: NormalizedOptions[ 'i18n' ];\n\t\tentryName: string;\n\t} ) {\n\t\tconst handleName = this.generateHandleName( entryName );\n\t\tconst type = this.getEntryType( entryName );\n\n\t\tconst depsAsString = [ ...deps ]\n\t\t\t.map( ( dep ) => this.getHandleFromDep( dep ) )\n\t\t\t.filter( ( dep ) => dep !== handleName )\n\t\t\t.sort()\n\t\t\t.map( ( dep ) => `'${ dep }',` )\n\t\t\t.join( '\\n\\t\\t' );\n\n\t\tconst i18nContent = i18n.domain ? `[\n\t\t'domain' => '${ i18n.domain }',\n\t\t'replace_requested_file' => ${ ( i18n.replaceRequestedFile ?? false ).toString() },\n\t]` : '[]';\n\n\t\tconst content =\n\t\t\t`<?php\nif ( ! defined( 'ABSPATH' ) ) {\n\texit;\n}\n/**\n * This file is generated by Webpack, do not edit it directly.\n */\nreturn [\n\t'handle' => '${ handleName }',\n\t'src' => plugins_url( '/', __FILE__ ) . '${ entryName }{{MIN_SUFFIX}}.js',\n\t'i18n' => ${ i18nContent },\n\t'type' => '${ type }',\n\t'deps' => [\n\t\t${ depsAsString }\n\t],\n];\n`;\n\n\t\treturn content;\n\t}\n\n\tgetLoaderFileContent( entriesData: Record<string, string> ) {\n\t\tconst entriesContent = Object.entries( entriesData ).map( ( [ handle, assetFileName ] ) => {\n\t\t\treturn `\n\t$data['${ handle }'] = require __DIR__ . '/${ assetFileName }';`;\n\t\t} );\n\n\t\treturn `<?php\nif ( ! defined( 'ABSPATH' ) ) {\n\texit;\n}\n/**\n * This file is generated by Webpack, do not edit it directly.\n */\nadd_filter( 'elementor/editor-v2/packages/config', function( $data ) {\n${ entriesContent.join( '\\n' ) }\n\treturn $data;\n} );\n`;\n\t}\n\n\tgetEntryType( entryName: string ) {\n\t\tif ( this.options.extensions.includes( entryName ) ) {\n\t\t\treturn 'extension';\n\t\t}\n\n\t\tif ( this.options.apps.includes( entryName ) ) {\n\t\t\treturn 'app';\n\t\t}\n\n\t\treturn 'util';\n\t}\n\n\tgetFileFromChunk( chunk: Chunk ) {\n\t\treturn [ ...chunk.files ].find( ( f ) => /\\.js$/i.test( f ) );\n\t}\n\n\tisExternalDep( request: string ) {\n\t\tconst { startsWith, exact } = this.options.handlesMap;\n\n\t\treturn request && (\n\t\t\tObject.keys( exact ).includes( request ) ||\n\t\t\tObject.keys( startsWith ).some( ( dep ) => request.startsWith( dep ) )\n\t\t);\n\t}\n\n\tgetHandleFromDep( dep: string ) {\n\t\tconst { startsWith, exact } = this.options.handlesMap;\n\n\t\tif ( Object.keys( exact ).includes( dep ) ) {\n\t\t\treturn exact[ dep ];\n\t\t}\n\n\t\tfor ( const [ key, value ] of Object.entries( startsWith ) ) {\n\t\t\tif ( dep.startsWith( key ) ) {\n\t\t\t\treturn dep.replace( key, value );\n\t\t\t}\n\t\t}\n\n\t\treturn dep;\n\t}\n\n\tgenerateHandleName( name: string ) {\n\t\tif ( this.options.handlePrefix ) {\n\t\t\treturn `${ this.options.handlePrefix }${ name }`;\n\t\t}\n\n\t\treturn name;\n\t}\n\n\tgenerateAssetsFileName( filename: string ) {\n\t\treturn filename.replace( /(\\.min)?\\.js$/i, '.asset.php' );\n\t}\n\n\tnormalizeOptions( options: Options ): NormalizedOptions {\n\t\treturn {\n\t\t\t...options,\n\t\t\thandlesMap: {\n\t\t\t\texact: {\n\t\t\t\t\t...baseHandlesMap.exact,\n\t\t\t\t\t...( options?.handlesMap?.exact || {} ),\n\t\t\t\t},\n\t\t\t\tstartsWith: {\n\t\t\t\t\t...baseHandlesMap.startsWith,\n\t\t\t\t\t...( options?.handlesMap?.startsWith || {} ),\n\t\t\t\t},\n\t\t\t},\n\t\t\tapps: options?.apps || [],\n\t\t\textensions: options?.extensions || [],\n\t\t\ti18n: {\n\t\t\t\tdomain: options?.i18n?.domain || null,\n\t\t\t\treplaceRequestedFile: options?.i18n?.replaceRequestedFile ?? false,\n\t\t\t},\n\t\t};\n\t}\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/plugin.ts","../src/utils.ts"],"sourcesContent":["// Inspired by \"Dependency Extraction Webpack Plugin\" by @wordpress team.\n// Link: https://github.com/WordPress/gutenberg/tree/trunk/packages/dependency-extraction-webpack-plugin\nimport { sources, Compilation, Compiler, Chunk } from 'webpack';\nimport { createAssetFilePath, getAssetFileContent, transformRequestToHandle } from './utils';\nimport { RequestToHandleMap } from './types';\n\ntype Options = {\n\thandle: ( entryName: string ) => string;\n\tmap: RequestToHandleMap\n}\n\ntype Module = {\n\tuserRequest?: string;\n\tmodules?: Module[];\n}\n\nexport default class GenerateWordPressAssetFileWebpackPlugin {\n\toptions: Options;\n\n\tconstructor( options: Options ) {\n\t\tthis.options = options;\n\t}\n\n\tapply( compiler: Compiler ) {\n\t\tcompiler.hooks.thisCompilation.tap( this.constructor.name, ( compilation ) => {\n\t\t\tcompilation.hooks.processAssets.tap( { name: this.constructor.name }, () => {\n\t\t\t\t[ ...compilation.entrypoints ].forEach( ( [ entryName, entrypoint ] ) => {\n\t\t\t\t\tconst chunk = entrypoint.chunks.find( ( { name } ) => name === entryName );\n\n\t\t\t\t\tif ( ! chunk ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tthis.addAssetFileToEntrypoint( compilation, entryName, chunk );\n\t\t\t\t} );\n\t\t\t} );\n\t\t} );\n\t}\n\n\taddAssetFileToEntrypoint( compilation: Compilation, entryName: string, chunk: Chunk ) {\n\t\tconst chunkJSFile = this.getFileFromChunk( chunk );\n\n\t\tif ( ! chunkJSFile ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst transformEntryNameToHandle = this.options.handle;\n\n\t\tconst entryHandle = transformEntryNameToHandle( entryName );\n\t\tconst depsHandles = this.getDepsHandlesFromChunk( compilation, chunk );\n\n\t\tconst assetFilePath = createAssetFilePath(\n\t\t\tcompilation.getPath( '[file]', { filename: chunkJSFile } )\n\t\t);\n\n\t\t// Add source and file into compilation for webpack to output.\n\t\tcompilation.assets[ assetFilePath ] = new sources.RawSource(\n\t\t\tgetAssetFileContent( entryHandle, depsHandles )\n\t\t);\n\n\t\tchunk.files.add( assetFilePath );\n\t}\n\n\tgetDepsHandlesFromChunk( compilation: Compilation, chunk: Chunk ) {\n\t\tconst depsSet = new Set<string>();\n\n\t\tcompilation.chunkGraph.getChunkModules( chunk ).forEach( ( module ) => {\n\t\t\t// There are some issues with types in webpack, so we need to cast it.\n\t\t\tconst theModule = module as Module;\n\n\t\t\t[ ...( theModule.modules || [] ), theModule ].forEach( ( subModule ) => {\n\t\t\t\tconst depHandle = transformRequestToHandle( subModule.userRequest, this.options.map );\n\n\t\t\t\tif ( depHandle ) {\n\t\t\t\t\tdepsSet.add( depHandle );\n\t\t\t\t}\n\t\t\t} );\n\t\t} );\n\n\t\treturn [ ...depsSet ];\n\t}\n\n\tgetFileFromChunk( chunk: Chunk ) {\n\t\treturn [ ...chunk.files ].find( ( f ) => /\\.js$/i.test( f ) );\n\t}\n}\n","import { RequestToHandleMap } from './types';\n\nexport function getAssetFileContent( entryHandle: string, depsHandles: string[] ) {\n\tconst depsAsString = depsHandles\n\t\t.filter( ( dep ) => dep !== entryHandle )\n\t\t.sort()\n\t\t.map( ( dep ) => `'${ dep }',` )\n\t\t.join( '\\n\\t\\t' );\n\n\treturn `<?php\nif ( ! defined( 'ABSPATH' ) ) {\n\texit;\n}\n/**\n * This file is generated by Webpack, do not edit it directly.\n */\nreturn [\n\t'handle' => '${ entryHandle }',\n\t'deps' => [\n\t\t${ depsAsString }\n\t],\n];\n`;\n}\n\nexport function transformRequestToHandle( request: string | undefined, map: RequestToHandleMap ) {\n\tif ( ! request ) {\n\t\treturn request;\n\t}\n\n\tfor ( const item of map ) {\n\t\tlet { request: requestRegex, handle } = item;\n\n\t\tif ( ! ( requestRegex instanceof RegExp ) ) {\n\t\t\trequestRegex = new RegExp( `^${ requestRegex }$` );\n\t\t}\n\n\t\tconst matches = request.match( requestRegex );\n\n\t\tif ( matches ) {\n\t\t\treturn request.replace( requestRegex, handle );\n\t\t}\n\t}\n}\n\nexport function createAssetFilePath( path: string, suffix = '.asset.php' ) {\n\treturn path.replace( /(\\.min)?\\.js$/i, suffix );\n}\n"],"mappings":";AAEA,SAAS,eAA6C;;;ACA/C,SAAS,oBAAqB,aAAqB,aAAwB;AACjF,QAAM,eAAe,YACnB,OAAQ,CAAE,QAAS,QAAQ,WAAY,EACvC,KAAK,EACL,IAAK,CAAE,QAAS,IAAK,GAAI,IAAK,EAC9B,KAAM,MAAS;AAEjB,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAQS,WAAY;AAAA;AAAA,IAExB,YAAa;AAAA;AAAA;AAAA;AAIlB;AAEO,SAAS,yBAA0B,SAA6B,KAA0B;AAChG,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAEA,aAAY,QAAQ,KAAM;AACzB,QAAI,EAAE,SAAS,cAAc,OAAO,IAAI;AAExC,QAAK,EAAI,wBAAwB,SAAW;AAC3C,qBAAe,IAAI,OAAQ,IAAK,YAAa,GAAI;AAAA,IAClD;AAEA,UAAM,UAAU,QAAQ,MAAO,YAAa;AAE5C,QAAK,SAAU;AACd,aAAO,QAAQ,QAAS,cAAc,MAAO;AAAA,IAC9C;AAAA,EACD;AACD;AAEO,SAAS,oBAAqB,MAAc,SAAS,cAAe;AAC1E,SAAO,KAAK,QAAS,kBAAkB,MAAO;AAC/C;;;AD/BA,IAAqB,0CAArB,MAA6D;AAAA,EAC5D;AAAA,EAEA,YAAa,SAAmB;AAC/B,SAAK,UAAU;AAAA,EAChB;AAAA,EAEA,MAAO,UAAqB;AAC3B,aAAS,MAAM,gBAAgB,IAAK,KAAK,YAAY,MAAM,CAAE,gBAAiB;AAC7E,kBAAY,MAAM,cAAc,IAAK,EAAE,MAAM,KAAK,YAAY,KAAK,GAAG,MAAM;AAC3E,SAAE,GAAG,YAAY,WAAY,EAAE,QAAS,CAAE,CAAE,WAAW,UAAW,MAAO;AACxE,gBAAM,QAAQ,WAAW,OAAO,KAAM,CAAE,EAAE,KAAK,MAAO,SAAS,SAAU;AAEzE,cAAK,CAAE,OAAQ;AACd;AAAA,UACD;AAEA,eAAK,yBAA0B,aAAa,WAAW,KAAM;AAAA,QAC9D,CAAE;AAAA,MACH,CAAE;AAAA,IACH,CAAE;AAAA,EACH;AAAA,EAEA,yBAA0B,aAA0B,WAAmB,OAAe;AACrF,UAAM,cAAc,KAAK,iBAAkB,KAAM;AAEjD,QAAK,CAAE,aAAc;AACpB;AAAA,IACD;AAEA,UAAM,6BAA6B,KAAK,QAAQ;AAEhD,UAAM,cAAc,2BAA4B,SAAU;AAC1D,UAAM,cAAc,KAAK,wBAAyB,aAAa,KAAM;AAErE,UAAM,gBAAgB;AAAA,MACrB,YAAY,QAAS,UAAU,EAAE,UAAU,YAAY,CAAE;AAAA,IAC1D;AAGA,gBAAY,OAAQ,aAAc,IAAI,IAAI,QAAQ;AAAA,MACjD,oBAAqB,aAAa,WAAY;AAAA,IAC/C;AAEA,UAAM,MAAM,IAAK,aAAc;AAAA,EAChC;AAAA,EAEA,wBAAyB,aAA0B,OAAe;AACjE,UAAM,UAAU,oBAAI,IAAY;AAEhC,gBAAY,WAAW,gBAAiB,KAAM,EAAE,QAAS,CAAE,WAAY;AAEtE,YAAM,YAAY;AAElB,OAAE,GAAK,UAAU,WAAW,CAAC,GAAK,SAAU,EAAE,QAAS,CAAE,cAAe;AACvE,cAAM,YAAY,yBAA0B,UAAU,aAAa,KAAK,QAAQ,GAAI;AAEpF,YAAK,WAAY;AAChB,kBAAQ,IAAK,SAAU;AAAA,QACxB;AAAA,MACD,CAAE;AAAA,IACH,CAAE;AAEF,WAAO,CAAE,GAAG,OAAQ;AAAA,EACrB;AAAA,EAEA,iBAAkB,OAAe;AAChC,WAAO,CAAE,GAAG,MAAM,KAAM,EAAE,KAAM,CAAE,MAAO,SAAS,KAAM,CAAE,CAAE;AAAA,EAC7D;AACD;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/generate-wordpress-asset-file-webpack-plugin",
-	"version": "0.2.1",
+	"version": "0.3.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -34,5 +34,5 @@
 	"peerDependencies": {
 		"webpack": "5.x"
 	},
-	"gitHead": "0fc79b25b83fa50350f1670cb5d1e31ec8ae0874"
+	"gitHead": "7fd9a516887f8bdb3479c54a48dafcb12bb41db7"
 }

package/src/__tests__/__snapshots__/index.test.ts.snap

@@ -9,15 +9,11 @@ if ( ! defined( 'ABSPATH' ) ) {
  * This file is generated by Webpack, do not edit it directly.
  */
 return [
-	'handle' => 'elementor-test-app',
-	'src' => plugins_url( '/', __FILE__ ) . 'app{{MIN_SUFFIX}}.js',
-	'i18n' => [
-		'domain' => 'elementor-test',
-		'replace_requested_file' => true,
-	],
-	'type' => 'app',
+	'handle' => 'elementor-packages-app',
 	'deps' => [
-		'elementor-editor',
+		'elementor-packages-editor',
+		'react',
+		'react-dom',
 		'wp-element',
 	],
 ];
@@ -33,41 +29,17 @@ if ( ! defined( 'ABSPATH' ) ) {
  * This file is generated by Webpack, do not edit it directly.
  */
 return [
-	'handle' => 'elementor-test-extension',
-	'src' => plugins_url( '/', __FILE__ ) . 'extension{{MIN_SUFFIX}}.js',
-	'i18n' => [
-		'domain' => 'elementor-test',
-		'replace_requested_file' => true,
-	],
-	'type' => 'extension',
+	'handle' => 'elementor-packages-extension',
 	'deps' => [
-		'elementor-editor',
+		'elementor-packages-editor',
+		'react',
+		'react-dom',
 		'wp-element',
 	],
 ];
 "
 `;
 
-exports[`@elementor/generate-wordpress-asset-file-webpack-plugin should generate assets files: loader.php 1`] = `
-"<?php
-if ( ! defined( 'ABSPATH' ) ) {
-	exit;
-}
-/**
- * This file is generated by Webpack, do not edit it directly.
- */
-add_filter( 'elementor/editor-v2/packages/config', function( $data ) {
-
-	$data['elementor-test-app'] = require __DIR__ . '/app.asset.php';
-
-	$data['elementor-test-extension'] = require __DIR__ . '/extension.asset.php';
-
-	$data['elementor-test-util'] = require __DIR__ . '/util.asset.php';
-	return $data;
-} );
-"
-`;
-
 exports[`@elementor/generate-wordpress-asset-file-webpack-plugin should generate assets files: util.asset.php 1`] = `
 "<?php
 if ( ! defined( 'ABSPATH' ) ) {
@@ -77,15 +49,11 @@ if ( ! defined( 'ABSPATH' ) ) {
  * This file is generated by Webpack, do not edit it directly.
  */
 return [
-	'handle' => 'elementor-test-util',
-	'src' => plugins_url( '/', __FILE__ ) . 'util{{MIN_SUFFIX}}.js',
-	'i18n' => [
-		'domain' => 'elementor-test',
-		'replace_requested_file' => true,
-	],
-	'type' => 'util',
+	'handle' => 'elementor-packages-util',
 	'deps' => [
-		'elementor-editor',
+		'elementor-packages-editor',
+		'react',
+		'react-dom',
 		'wp-element',
 	],
 ];

package/src/__tests__/index.test.ts

@@ -16,6 +16,8 @@ describe( '@elementor/generate-wordpress-asset-file-webpack-plugin', () => {
 			import elementor from '@elementor/editor';
 			import wp from '@wordpress/element';
 			import other from '@other/package';
+			import react from 'react';
+			import ReactDOM from 'react-dom';
 
 			elementor();
 			wp();
@@ -49,30 +51,24 @@ describe( '@elementor/generate-wordpress-asset-file-webpack-plugin', () => {
 				'@elementor/editor': 'editor',
 				'@wordpress/element': 'wp',
 				'@other/package': 'other',
+				react: 'react',
+				'react-dom': 'reactDOM',
 			},
 			plugins: [
 				new GenerateWordPressAssetFileWebpackPlugin( {
-					handlePrefix: 'elementor-test-',
-					apps: [ 'app' ],
-					extensions: [ 'extension' ],
-					handlesMap: {
-						exact: {
-							'@elementor/editor': 'elementor-editor',
-						},
-						startsWith: {
-							'@wordpress/': 'wp-',
-						},
-					},
-					i18n: {
-						domain: 'elementor-test',
-						replaceRequestedFile: true,
-					},
+					handle: ( entryName ) => `elementor-packages-${ entryName }`,
+					map: [
+						{ request: 'react', handle: 'react' },
+						{ request: 'react-dom', handle: 'react-dom' },
+						{ request: /^@elementor\/(.+)$/, handle: 'elementor-packages-$1' },
+						{ request: /^@wordpress\/(.+)$/, handle: 'wp-$1' },
+					],
 				} ),
 			],
 		} );
 
 		// Expect.
-		expect.assertions( 7 );
+		expect.assertions( 6 );
 
 		// Act.
 		compiler.run( ( err, stats ) => {
@@ -85,7 +81,6 @@ describe( '@elementor/generate-wordpress-asset-file-webpack-plugin', () => {
 				'app.asset.php',
 				'extension.asset.php',
 				'util.asset.php',
-				'loader.php',
 			];
 
 			files.forEach( ( fileName ) => {

package/src/index.ts

@@ -1,263 +1 @@
-// Inspired by "Dependency Extraction Webpack Plugin" by @wordpress team.
-// Link: https://github.com/WordPress/gutenberg/tree/trunk/packages/dependency-extraction-webpack-plugin
-import { sources, Compilation, Compiler, Chunk } from 'webpack';
-
-type HandlesMap = {
-	exact: Record<string, string>;
-	startsWith: Record<string, string>;
-}
-
-type Options = {
-	handlePrefix: string;
-	handlesMap?: Partial<HandlesMap>
-	apps?: string[];
-	extensions?: string[];
-	i18n?: {
-		domain: string;
-		replaceRequestedFile?: boolean;
-	}
-}
-
-type NormalizedOptions = {
-	handlePrefix: string;
-	handlesMap: HandlesMap;
-	apps: string[];
-	extensions: string[];
-	i18n: {
-		domain: string | null;
-		replaceRequestedFile: boolean;
-	}
-}
-
-type Module = {
-	userRequest?: string;
-	modules?: Module[];
-}
-
-const baseHandlesMap: HandlesMap = {
-	exact: {
-		react: 'react',
-		'react-dom': 'react-dom',
-	},
-	startsWith: {
-		'@elementor/': 'elementor-packages-',
-		'@wordpress/': 'wp-',
-	},
-};
-
-export class GenerateWordPressAssetFileWebpackPlugin {
-	options: NormalizedOptions;
-
-	constructor( options: Options ) {
-		this.options = this.normalizeOptions( options );
-	}
-
-	apply( compiler: Compiler ) {
-		compiler.hooks.thisCompilation.tap( this.constructor.name, ( compilation ) => {
-			let handlesAssetsMap: Record<string, string>;
-
-			compilation.hooks.processAssets.tap( { name: this.constructor.name }, () => {
-				handlesAssetsMap = [ ...compilation.entrypoints ].reduce<Record<string, string>>( ( map, [ entryName, entrypoint ] ) => {
-					const chunk = entrypoint.chunks.find( ( { name } ) => name === entryName );
-
-					if ( ! chunk ) {
-						return map;
-					}
-
-					const chunkJSFile = this.getFileFromChunk( chunk );
-
-					if ( ! chunkJSFile ) {
-						return map;
-					}
-
-					const deps = this.getDepsFromChunk( compilation, chunk );
-
-					const assetFilename = this.generateAssetsFileName(
-						compilation.getPath( '[file]', { filename: chunkJSFile } )
-					);
-
-					const handle = this.generateHandleName( entryName );
-
-					const content = this.createAssetsFileContent( {
-						deps,
-						entryName,
-						i18n: this.options.i18n,
-					} );
-
-					// Add source and file into compilation for webpack to output.
-					compilation.assets[ assetFilename ] = new sources.RawSource( content );
-
-					chunk.files.add( assetFilename );
-
-					map[ handle ] = assetFilename;
-
-					return map;
-				}, {} );
-			} );
-
-			compilation.hooks.afterProcessAssets.tap( { name: this.constructor.name }, () => {
-				const loaderFileContent = this.getLoaderFileContent( handlesAssetsMap );
-
-				compilation.assets[ 'loader.php' ] = new sources.RawSource( loaderFileContent );
-			} );
-		} );
-	}
-
-	getDepsFromChunk( compilation: Compilation, chunk: Chunk ) {
-		const depsSet = new Set<string>();
-
-		compilation.chunkGraph.getChunkModules( chunk ).forEach( ( module ) => {
-			// There are some issues with types in webpack, so we need to cast it.
-			const theModule = module as Module;
-
-			[ ...( theModule.modules || [] ), theModule ].forEach( ( subModule ) => {
-				if ( subModule.userRequest && this.isExternalDep( subModule.userRequest ) ) {
-					depsSet.add( subModule.userRequest );
-				}
-			} );
-		} );
-
-		return depsSet;
-	}
-
-	createAssetsFileContent( {
-		deps,
-		i18n,
-		entryName,
-	}: {
-		deps: Set<string>;
-		i18n: NormalizedOptions[ 'i18n' ];
-		entryName: string;
-	} ) {
-		const handleName = this.generateHandleName( entryName );
-		const type = this.getEntryType( entryName );
-
-		const depsAsString = [ ...deps ]
-			.map( ( dep ) => this.getHandleFromDep( dep ) )
-			.filter( ( dep ) => dep !== handleName )
-			.sort()
-			.map( ( dep ) => `'${ dep }',` )
-			.join( '\n\t\t' );
-
-		const i18nContent = i18n.domain ? `[
-		'domain' => '${ i18n.domain }',
-		'replace_requested_file' => ${ ( i18n.replaceRequestedFile ?? false ).toString() },
-	]` : '[]';
-
-		const content =
-			`<?php
-if ( ! defined( 'ABSPATH' ) ) {
-	exit;
-}
-/**
- * This file is generated by Webpack, do not edit it directly.
- */
-return [
-	'handle' => '${ handleName }',
-	'src' => plugins_url( '/', __FILE__ ) . '${ entryName }{{MIN_SUFFIX}}.js',
-	'i18n' => ${ i18nContent },
-	'type' => '${ type }',
-	'deps' => [
-		${ depsAsString }
-	],
-];
-`;
-
-		return content;
-	}
-
-	getLoaderFileContent( entriesData: Record<string, string> ) {
-		const entriesContent = Object.entries( entriesData ).map( ( [ handle, assetFileName ] ) => {
-			return `
-	$data['${ handle }'] = require __DIR__ . '/${ assetFileName }';`;
-		} );
-
-		return `<?php
-if ( ! defined( 'ABSPATH' ) ) {
-	exit;
-}
-/**
- * This file is generated by Webpack, do not edit it directly.
- */
-add_filter( 'elementor/editor-v2/packages/config', function( $data ) {
-${ entriesContent.join( '\n' ) }
-	return $data;
-} );
-`;
-	}
-
-	getEntryType( entryName: string ) {
-		if ( this.options.extensions.includes( entryName ) ) {
-			return 'extension';
-		}
-
-		if ( this.options.apps.includes( entryName ) ) {
-			return 'app';
-		}
-
-		return 'util';
-	}
-
-	getFileFromChunk( chunk: Chunk ) {
-		return [ ...chunk.files ].find( ( f ) => /\.js$/i.test( f ) );
-	}
-
-	isExternalDep( request: string ) {
-		const { startsWith, exact } = this.options.handlesMap;
-
-		return request && (
-			Object.keys( exact ).includes( request ) ||
-			Object.keys( startsWith ).some( ( dep ) => request.startsWith( dep ) )
-		);
-	}
-
-	getHandleFromDep( dep: string ) {
-		const { startsWith, exact } = this.options.handlesMap;
-
-		if ( Object.keys( exact ).includes( dep ) ) {
-			return exact[ dep ];
-		}
-
-		for ( const [ key, value ] of Object.entries( startsWith ) ) {
-			if ( dep.startsWith( key ) ) {
-				return dep.replace( key, value );
-			}
-		}
-
-		return dep;
-	}
-
-	generateHandleName( name: string ) {
-		if ( this.options.handlePrefix ) {
-			return `${ this.options.handlePrefix }${ name }`;
-		}
-
-		return name;
-	}
-
-	generateAssetsFileName( filename: string ) {
-		return filename.replace( /(\.min)?\.js$/i, '.asset.php' );
-	}
-
-	normalizeOptions( options: Options ): NormalizedOptions {
-		return {
-			...options,
-			handlesMap: {
-				exact: {
-					...baseHandlesMap.exact,
-					...( options?.handlesMap?.exact || {} ),
-				},
-				startsWith: {
-					...baseHandlesMap.startsWith,
-					...( options?.handlesMap?.startsWith || {} ),
-				},
-			},
-			apps: options?.apps || [],
-			extensions: options?.extensions || [],
-			i18n: {
-				domain: options?.i18n?.domain || null,
-				replaceRequestedFile: options?.i18n?.replaceRequestedFile ?? false,
-			},
-		};
-	}
-}
+export { default as GenerateWordPressAssetFileWebpackPlugin } from './plugin';

package/src/plugin.ts

@@ -0,0 +1,86 @@
+// Inspired by "Dependency Extraction Webpack Plugin" by @wordpress team.
+// Link: https://github.com/WordPress/gutenberg/tree/trunk/packages/dependency-extraction-webpack-plugin
+import { sources, Compilation, Compiler, Chunk } from 'webpack';
+import { createAssetFilePath, getAssetFileContent, transformRequestToHandle } from './utils';
+import { RequestToHandleMap } from './types';
+
+type Options = {
+	handle: ( entryName: string ) => string;
+	map: RequestToHandleMap
+}
+
+type Module = {
+	userRequest?: string;
+	modules?: Module[];
+}
+
+export default class GenerateWordPressAssetFileWebpackPlugin {
+	options: Options;
+
+	constructor( options: Options ) {
+		this.options = options;
+	}
+
+	apply( compiler: Compiler ) {
+		compiler.hooks.thisCompilation.tap( this.constructor.name, ( compilation ) => {
+			compilation.hooks.processAssets.tap( { name: this.constructor.name }, () => {
+				[ ...compilation.entrypoints ].forEach( ( [ entryName, entrypoint ] ) => {
+					const chunk = entrypoint.chunks.find( ( { name } ) => name === entryName );
+
+					if ( ! chunk ) {
+						return;
+					}
+
+					this.addAssetFileToEntrypoint( compilation, entryName, chunk );
+				} );
+			} );
+		} );
+	}
+
+	addAssetFileToEntrypoint( compilation: Compilation, entryName: string, chunk: Chunk ) {
+		const chunkJSFile = this.getFileFromChunk( chunk );
+
+		if ( ! chunkJSFile ) {
+			return;
+		}
+
+		const transformEntryNameToHandle = this.options.handle;
+
+		const entryHandle = transformEntryNameToHandle( entryName );
+		const depsHandles = this.getDepsHandlesFromChunk( compilation, chunk );
+
+		const assetFilePath = createAssetFilePath(
+			compilation.getPath( '[file]', { filename: chunkJSFile } )
+		);
+
+		// Add source and file into compilation for webpack to output.
+		compilation.assets[ assetFilePath ] = new sources.RawSource(
+			getAssetFileContent( entryHandle, depsHandles )
+		);
+
+		chunk.files.add( assetFilePath );
+	}
+
+	getDepsHandlesFromChunk( compilation: Compilation, chunk: Chunk ) {
+		const depsSet = new Set<string>();
+
+		compilation.chunkGraph.getChunkModules( chunk ).forEach( ( module ) => {
+			// There are some issues with types in webpack, so we need to cast it.
+			const theModule = module as Module;
+
+			[ ...( theModule.modules || [] ), theModule ].forEach( ( subModule ) => {
+				const depHandle = transformRequestToHandle( subModule.userRequest, this.options.map );
+
+				if ( depHandle ) {
+					depsSet.add( depHandle );
+				}
+			} );
+		} );
+
+		return [ ...depsSet ];
+	}
+
+	getFileFromChunk( chunk: Chunk ) {
+		return [ ...chunk.files ].find( ( f ) => /\.js$/i.test( f ) );
+	}
+}

package/src/types.ts

@@ -0,0 +1,4 @@
+export type RequestToHandleMap = Array<{
+	request: string | RegExp,
+	handle: string
+}>

package/src/utils.ts

@@ -0,0 +1,48 @@
+import { RequestToHandleMap } from './types';
+
+export function getAssetFileContent( entryHandle: string, depsHandles: string[] ) {
+	const depsAsString = depsHandles
+		.filter( ( dep ) => dep !== entryHandle )
+		.sort()
+		.map( ( dep ) => `'${ dep }',` )
+		.join( '\n\t\t' );
+
+	return `<?php
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+/**
+ * This file is generated by Webpack, do not edit it directly.
+ */
+return [
+	'handle' => '${ entryHandle }',
+	'deps' => [
+		${ depsAsString }
+	],
+];
+`;
+}
+
+export function transformRequestToHandle( request: string | undefined, map: RequestToHandleMap ) {
+	if ( ! request ) {
+		return request;
+	}
+
+	for ( const item of map ) {
+		let { request: requestRegex, handle } = item;
+
+		if ( ! ( requestRegex instanceof RegExp ) ) {
+			requestRegex = new RegExp( `^${ requestRegex }$` );
+		}
+
+		const matches = request.match( requestRegex );
+
+		if ( matches ) {
+			return request.replace( requestRegex, handle );
+		}
+	}
+}
+
+export function createAssetFilePath( path: string, suffix = '.asset.php' ) {
+	return path.replace( /(\.min)?\.js$/i, suffix );
+}