@elementor/externalize-wordpress-assets-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/externalize-wordpress-assets-webpack-plugin@0.2.1...@elementor/externalize-wordpress-assets-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/externalize-wordpress-assets-webpack-plugin

package/dist/index.d.mts

@@ -1,26 +1,23 @@
 import { ExternalsPlugin, Compiler } from 'webpack';
 
-type ExternalsMap = {
-    exact: Record<string, string>;
-    startsWith: Record<string, string>;
-};
-type NormalizedOptions = {
-    globalKey: string;
-    externalsMap: ExternalsMap;
-};
+type Global = string | string[];
+type RequestToGlobalMap = Array<{
+    request: string | RegExp;
+    global: Global;
+}>;
+
 type Options = {
-    globalKey: string;
-    externalsMap?: Partial<ExternalsMap>;
+    type: string;
+    global?: (entryName: string) => Global;
+    map: RequestToGlobalMap;
 };
 declare class ExternalizeWordPressAssetsWebpackPlugin {
+    options: Options;
     externalPlugin: ExternalsPlugin;
-    options: NormalizedOptions;
-    constructor(options: Options);
+    constructor(options: Pick<Options, 'map' | 'global'>);
     apply(compiler: Compiler): void;
-    requestToExternal(request?: string): string | string[] | undefined;
-    exportAsWindowItem(compiler: Compiler): void;
-    kebabToCamelCase(kebabCase: string): string;
-    normalizeOptions(options: Options): NormalizedOptions;
+    externalsPluginCallback(request: string | undefined, callback: (err?: undefined, result?: Global) => void): void;
+    exposeEntry(compiler: Compiler): void;
 }
 
 export { ExternalizeWordPressAssetsWebpackPlugin };

package/dist/index.d.ts

@@ -1,26 +1,23 @@
 import { ExternalsPlugin, Compiler } from 'webpack';
 
-type ExternalsMap = {
-    exact: Record<string, string>;
-    startsWith: Record<string, string>;
-};
-type NormalizedOptions = {
-    globalKey: string;
-    externalsMap: ExternalsMap;
-};
+type Global = string | string[];
+type RequestToGlobalMap = Array<{
+    request: string | RegExp;
+    global: Global;
+}>;
+
 type Options = {
-    globalKey: string;
-    externalsMap?: Partial<ExternalsMap>;
+    type: string;
+    global?: (entryName: string) => Global;
+    map: RequestToGlobalMap;
 };
 declare class ExternalizeWordPressAssetsWebpackPlugin {
+    options: Options;
     externalPlugin: ExternalsPlugin;
-    options: NormalizedOptions;
-    constructor(options: Options);
+    constructor(options: Pick<Options, 'map' | 'global'>);
     apply(compiler: Compiler): void;
-    requestToExternal(request?: string): string | string[] | undefined;
-    exportAsWindowItem(compiler: Compiler): void;
-    kebabToCamelCase(kebabCase: string): string;
-    normalizeOptions(options: Options): NormalizedOptions;
+    externalsPluginCallback(request: string | undefined, callback: (err?: undefined, result?: Global) => void): void;
+    exposeEntry(compiler: Compiler): void;
 }
 
 export { ExternalizeWordPressAssetsWebpackPlugin };

package/dist/index.js

@@ -23,88 +23,87 @@ __export(src_exports, {
   ExternalizeWordPressAssetsWebpackPlugin: () => ExternalizeWordPressAssetsWebpackPlugin
 });
 module.exports = __toCommonJS(src_exports);
+
+// src/plugin.ts
 var import_webpack = require("webpack");
-var baseExternalsMap = {
-  exact: {
-    react: "React",
-    "react-dom": "ReactDOM"
-  },
-  startsWith: {
-    "@elementor/": "__UNSTABLE__elementorPackages",
-    "@wordpress/": "wp"
+
+// src/utils.ts
+function transformRequestToGlobal(request, map) {
+  if (!request) {
+    return null;
   }
-};
+  for (const item of map) {
+    let { request: requestRegex, global } = item;
+    if (!(requestRegex instanceof RegExp)) {
+      requestRegex = new RegExp(`^${requestRegex}$`);
+    }
+    const matches = request.match(requestRegex);
+    if (matches) {
+      return replaceGlobal(global, matches);
+    }
+  }
+  return null;
+}
+function replaceGlobal(global, matches) {
+  let result = typeof global === "string" ? [global] : [...global];
+  matches.forEach((value, index) => {
+    result = result.map((item) => item.replace(`$${index}`, kebabToCamelCase(value)));
+  });
+  return result;
+}
+function kebabToCamelCase(kebabCase) {
+  return kebabCase.replace(
+    /-(\w)/g,
+    (_, w) => w.toUpperCase()
+  );
+}
+
+// src/plugin.ts
 var ExternalizeWordPressAssetsWebpackPlugin = class {
-  externalPlugin;
   options;
+  externalPlugin;
   constructor(options) {
-    this.options = this.normalizeOptions(options);
+    this.options = {
+      map: options.map,
+      global: options.global,
+      type: "window"
+    };
     this.externalPlugin = new import_webpack.ExternalsPlugin(
-      "window",
-      ({ request }, callback) => {
-        const externalRequest = this.requestToExternal(request);
-        if (externalRequest) {
-          return callback(void 0, externalRequest);
-        }
-        return callback();
-      }
+      this.options.type,
+      ({ request }, callback) => this.externalsPluginCallback(request, callback)
     );
   }
   apply(compiler) {
     this.externalPlugin.apply(compiler);
     compiler.hooks.environment.tap(this.constructor.name, () => {
-      this.exportAsWindowItem(compiler);
+      this.exposeEntry(compiler);
     });
   }
-  requestToExternal(request) {
-    if (!request) {
+  externalsPluginCallback(request, callback) {
+    const global = transformRequestToGlobal(request, this.options.map);
+    if (!global) {
+      callback();
       return;
     }
-    const { exact, startsWith } = this.options.externalsMap;
-    if (Object.keys(exact).includes(request)) {
-      return exact[request];
-    }
-    for (const [prefix, globalKey] of Object.entries(startsWith)) {
-      if (request.startsWith(prefix)) {
-        return [globalKey, this.kebabToCamelCase(request.replace(prefix, ""))];
-      }
-    }
-  }
-  exportAsWindowItem(compiler) {
-    compiler.options.output.enabledLibraryTypes?.push("window");
-    compiler.options.entry = Object.fromEntries(
-      Object.entries(compiler.options.entry).map(([name, entry]) => [
-        name,
-        {
-          ...entry,
-          library: {
-            name: [this.options.globalKey, this.kebabToCamelCase(name)],
-            type: "window"
-          }
-        }
-      ])
-    );
+    callback(void 0, global);
   }
-  kebabToCamelCase(kebabCase) {
-    return kebabCase.replace(
-      /-(\w)/g,
-      (_, w) => w.toUpperCase()
-    );
-  }
-  normalizeOptions(options) {
-    return {
-      ...options || {},
-      externalsMap: {
-        exact: {
-          ...baseExternalsMap.exact,
-          ...options?.externalsMap?.exact || {}
-        },
-        startsWith: {
-          ...baseExternalsMap.startsWith,
-          ...options?.externalsMap?.startsWith || {}
+  exposeEntry(compiler) {
+    compiler.options.output.enabledLibraryTypes?.push(this.options.type);
+    const transformEntryNameToGlobal = this.options.global;
+    const entry = compiler.options.entry;
+    if (!transformEntryNameToGlobal) {
+      return;
+    }
+    compiler.options.entry = Object.entries(entry).reduce((carry, [name, entryItem]) => ({
+      ...carry,
+      [name]: {
+        ...entryItem,
+        library: {
+          name: transformEntryNameToGlobal(kebabToCamelCase(name)),
+          type: this.options.type
         }
       }
-    };
+    }), {});
   }
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { ExternalsPlugin, Compiler } from 'webpack';\n\ntype ExternalsMap = {\n\texact: Record<string, string>;\n\tstartsWith: Record<string, string>;\n};\n\ntype NormalizedOptions = {\n\tglobalKey: string,\n\texternalsMap: ExternalsMap\n};\n\ntype Options = {\n\tglobalKey: string,\n\texternalsMap?: Partial<ExternalsMap>\n};\n\nconst baseExternalsMap: ExternalsMap = {\n\texact: {\n\t\treact: 'React',\n\t\t'react-dom': 'ReactDOM',\n\t},\n\tstartsWith: {\n\t\t'@elementor/': '__UNSTABLE__elementorPackages',\n\t\t'@wordpress/': 'wp',\n\t},\n};\n\nexport class ExternalizeWordPressAssetsWebpackPlugin {\n\texternalPlugin: ExternalsPlugin;\n\n\toptions: NormalizedOptions;\n\n\tconstructor( options: Options ) {\n\t\tthis.options = this.normalizeOptions( options );\n\n\t\tthis.externalPlugin = new ExternalsPlugin(\n\t\t\t'window',\n\t\t\t( { request }, callback ) => {\n\t\t\t\tconst externalRequest = this.requestToExternal( request );\n\n\t\t\t\tif ( externalRequest ) {\n\t\t\t\t\treturn callback( undefined, externalRequest );\n\t\t\t\t}\n\n\t\t\t\treturn callback();\n\t\t\t}\n\t\t);\n\t}\n\n\tapply( compiler: Compiler ) {\n\t\tthis.externalPlugin.apply( compiler );\n\n\t\tcompiler.hooks.environment.tap( this.constructor.name, () => {\n\t\t\tthis.exportAsWindowItem( compiler );\n\t\t} );\n\t}\n\n\trequestToExternal( request?: string ) {\n\t\tif ( ! request ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { exact, startsWith } = this.options.externalsMap;\n\n\t\tif ( Object.keys( exact ).includes( request ) ) {\n\t\t\treturn exact[ request ];\n\t\t}\n\n\t\tfor ( const [ prefix, globalKey ] of Object.entries( startsWith ) ) {\n\t\t\tif ( request.startsWith( prefix ) ) {\n\t\t\t\treturn [ globalKey, this.kebabToCamelCase( request.replace( prefix, '' ) ) ];\n\t\t\t}\n\t\t}\n\t}\n\n\texportAsWindowItem( compiler: Compiler ) {\n\t\tcompiler.options.output.enabledLibraryTypes?.push( 'window' );\n\n\t\tcompiler.options.entry = Object.fromEntries(\n\t\t\tObject.entries( compiler.options.entry ).map( ( [ name, entry ] ) => [\n\t\t\t\tname,\n\t\t\t\t{\n\t\t\t\t\t...entry,\n\t\t\t\t\tlibrary: {\n\t\t\t\t\t\tname: [ this.options.globalKey, this.kebabToCamelCase( name ) ],\n\t\t\t\t\t\ttype: 'window',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t] )\n\t\t);\n\t}\n\n\tkebabToCamelCase( kebabCase: string ) {\n\t\treturn kebabCase.replace(\n\t\t\t/-(\\w)/g,\n\t\t\t( _, w: string ) => w.toUpperCase()\n\t\t);\n\t}\n\n\tnormalizeOptions( options: Options ): NormalizedOptions {\n\t\treturn {\n\t\t\t...( options || {} ),\n\t\t\texternalsMap: {\n\t\t\t\texact: {\n\t\t\t\t\t...baseExternalsMap.exact,\n\t\t\t\t\t...( options?.externalsMap?.exact || {} ),\n\t\t\t\t},\n\t\t\t\tstartsWith: {\n\t\t\t\t\t...baseExternalsMap.startsWith,\n\t\t\t\t\t...( options?.externalsMap?.startsWith || {} ),\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA0C;AAiB1C,IAAM,mBAAiC;AAAA,EACtC,OAAO;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,EACd;AAAA,EACA,YAAY;AAAA,IACX,eAAe;AAAA,IACf,eAAe;AAAA,EAChB;AACD;AAEO,IAAM,0CAAN,MAA8C;AAAA,EACpD;AAAA,EAEA;AAAA,EAEA,YAAa,SAAmB;AAC/B,SAAK,UAAU,KAAK,iBAAkB,OAAQ;AAE9C,SAAK,iBAAiB,IAAI;AAAA,MACzB;AAAA,MACA,CAAE,EAAE,QAAQ,GAAG,aAAc;AAC5B,cAAM,kBAAkB,KAAK,kBAAmB,OAAQ;AAExD,YAAK,iBAAkB;AACtB,iBAAO,SAAU,QAAW,eAAgB;AAAA,QAC7C;AAEA,eAAO,SAAS;AAAA,MACjB;AAAA,IACD;AAAA,EACD;AAAA,EAEA,MAAO,UAAqB;AAC3B,SAAK,eAAe,MAAO,QAAS;AAEpC,aAAS,MAAM,YAAY,IAAK,KAAK,YAAY,MAAM,MAAM;AAC5D,WAAK,mBAAoB,QAAS;AAAA,IACnC,CAAE;AAAA,EACH;AAAA,EAEA,kBAAmB,SAAmB;AACrC,QAAK,CAAE,SAAU;AAChB;AAAA,IACD;AAEA,UAAM,EAAE,OAAO,WAAW,IAAI,KAAK,QAAQ;AAE3C,QAAK,OAAO,KAAM,KAAM,EAAE,SAAU,OAAQ,GAAI;AAC/C,aAAO,MAAO,OAAQ;AAAA,IACvB;AAEA,eAAY,CAAE,QAAQ,SAAU,KAAK,OAAO,QAAS,UAAW,GAAI;AACnE,UAAK,QAAQ,WAAY,MAAO,GAAI;AACnC,eAAO,CAAE,WAAW,KAAK,iBAAkB,QAAQ,QAAS,QAAQ,EAAG,CAAE,CAAE;AAAA,MAC5E;AAAA,IACD;AAAA,EACD;AAAA,EAEA,mBAAoB,UAAqB;AACxC,aAAS,QAAQ,OAAO,qBAAqB,KAAM,QAAS;AAE5D,aAAS,QAAQ,QAAQ,OAAO;AAAA,MAC/B,OAAO,QAAS,SAAS,QAAQ,KAAM,EAAE,IAAK,CAAE,CAAE,MAAM,KAAM,MAAO;AAAA,QACpE;AAAA,QACA;AAAA,UACC,GAAG;AAAA,UACH,SAAS;AAAA,YACR,MAAM,CAAE,KAAK,QAAQ,WAAW,KAAK,iBAAkB,IAAK,CAAE;AAAA,YAC9D,MAAM;AAAA,UACP;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACH;AAAA,EACD;AAAA,EAEA,iBAAkB,WAAoB;AACrC,WAAO,UAAU;AAAA,MAChB;AAAA,MACA,CAAE,GAAG,MAAe,EAAE,YAAY;AAAA,IACnC;AAAA,EACD;AAAA,EAEA,iBAAkB,SAAsC;AACvD,WAAO;AAAA,MACN,GAAK,WAAW,CAAC;AAAA,MACjB,cAAc;AAAA,QACb,OAAO;AAAA,UACN,GAAG,iBAAiB;AAAA,UACpB,GAAK,SAAS,cAAc,SAAS,CAAC;AAAA,QACvC;AAAA,QACA,YAAY;AAAA,UACX,GAAG,iBAAiB;AAAA,UACpB,GAAK,SAAS,cAAc,cAAc,CAAC;AAAA,QAC5C;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/plugin.ts","../src/utils.ts"],"sourcesContent":["export { default as ExternalizeWordPressAssetsWebpackPlugin } from './plugin';\n","import { ExternalsPlugin, Compiler } from 'webpack';\nimport { kebabToCamelCase, transformRequestToGlobal } from './utils';\nimport { RequestToGlobalMap, Global } from './types';\n\ntype Options = {\n\ttype: string,\n\tglobal?: ( entryName: string ) => Global,\n\tmap: RequestToGlobalMap\n};\n\nexport default class ExternalizeWordPressAssetsWebpackPlugin {\n\toptions: Options;\n\n\texternalPlugin: ExternalsPlugin;\n\n\tconstructor( options: Pick<Options, 'map' | 'global'> ) {\n\t\tthis.options = {\n\t\t\tmap: options.map,\n\t\t\tglobal: options.global,\n\t\t\ttype: 'window',\n\t\t};\n\n\t\tthis.externalPlugin = new ExternalsPlugin(\n\t\t\tthis.options.type,\n\t\t\t( { request }, callback ) => this.externalsPluginCallback( request, callback )\n\t\t);\n\t}\n\n\tapply( compiler: Compiler ) {\n\t\tthis.externalPlugin.apply( compiler );\n\n\t\tcompiler.hooks.environment.tap( this.constructor.name, () => {\n\t\t\tthis.exposeEntry( compiler );\n\t\t} );\n\t}\n\n\texternalsPluginCallback(\n\t\trequest: string | undefined,\n\t\tcallback: ( err?: undefined, result?: Global ) => void\n\t) {\n\t\tconst global = transformRequestToGlobal( request, this.options.map );\n\n\t\tif ( ! global ) {\n\t\t\tcallback();\n\n\t\t\treturn;\n\t\t}\n\n\t\tcallback( undefined, global );\n\t}\n\n\texposeEntry( compiler: Compiler ) {\n\t\tcompiler.options.output.enabledLibraryTypes?.push( this.options.type );\n\n\t\tconst transformEntryNameToGlobal = this.options.global;\n\t\tconst entry = compiler.options.entry;\n\n\t\tif ( ! transformEntryNameToGlobal ) {\n\t\t\treturn;\n\t\t}\n\n\t\tcompiler.options.entry = Object.entries( entry )\n\t\t\t.reduce( ( carry, [ name, entryItem ] ) => ( {\n\t\t\t\t...carry,\n\t\t\t\t[ name ]: {\n\t\t\t\t\t...entryItem,\n\t\t\t\t\tlibrary: {\n\t\t\t\t\t\tname: transformEntryNameToGlobal( kebabToCamelCase( name ) ),\n\t\t\t\t\t\ttype: this.options.type,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t} ), {} );\n\t}\n}\n","import { RequestToGlobalMap } from './types';\n\nexport function transformRequestToGlobal( request: string | undefined, map: RequestToGlobalMap ) {\n\tif ( ! request ) {\n\t\treturn null;\n\t}\n\n\tfor ( const item of map ) {\n\t\tlet { request: requestRegex, global } = 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 replaceGlobal( global, matches );\n\t\t}\n\t}\n\n\treturn null;\n}\n\nexport function replaceGlobal( global: string | string[], matches: RegExpMatchArray ) {\n\tlet result = typeof global === 'string' ? [ global ] : [ ...global ];\n\n\tmatches.forEach( ( value, index ) => {\n\t\t// Replace regex backreferences with capture groups.\n\t\t// The user can set ['something', '$1', 'a', '$2'] in the global, and the backreferences will\n\t\t// be replaced by the matched groups in the regex.\n\t\tresult = result.map( ( item ) => item.replace( `$${ index }`, kebabToCamelCase( value ) ) );\n\t} );\n\n\treturn result;\n}\n\nexport function kebabToCamelCase( kebabCase: string ) {\n\treturn kebabCase.replace(\n\t\t/-(\\w)/g,\n\t\t( _, w: string ) => w.toUpperCase()\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAA0C;;;ACEnC,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,cAAe,QAAQ,OAAQ;AAAA,IACvC;AAAA,EACD;AAEA,SAAO;AACR;AAEO,SAAS,cAAe,QAA2B,SAA4B;AACrF,MAAI,SAAS,OAAO,WAAW,WAAW,CAAE,MAAO,IAAI,CAAE,GAAG,MAAO;AAEnE,UAAQ,QAAS,CAAE,OAAO,UAAW;AAIpC,aAAS,OAAO,IAAK,CAAE,SAAU,KAAK,QAAS,IAAK,KAAM,IAAI,iBAAkB,KAAM,CAAE,CAAE;AAAA,EAC3F,CAAE;AAEF,SAAO;AACR;AAEO,SAAS,iBAAkB,WAAoB;AACrD,SAAO,UAAU;AAAA,IAChB;AAAA,IACA,CAAE,GAAG,MAAe,EAAE,YAAY;AAAA,EACnC;AACD;;;ADhCA,IAAqB,0CAArB,MAA6D;AAAA,EAC5D;AAAA,EAEA;AAAA,EAEA,YAAa,SAA2C;AACvD,SAAK,UAAU;AAAA,MACd,KAAK,QAAQ;AAAA,MACb,QAAQ,QAAQ;AAAA,MAChB,MAAM;AAAA,IACP;AAEA,SAAK,iBAAiB,IAAI;AAAA,MACzB,KAAK,QAAQ;AAAA,MACb,CAAE,EAAE,QAAQ,GAAG,aAAc,KAAK,wBAAyB,SAAS,QAAS;AAAA,IAC9E;AAAA,EACD;AAAA,EAEA,MAAO,UAAqB;AAC3B,SAAK,eAAe,MAAO,QAAS;AAEpC,aAAS,MAAM,YAAY,IAAK,KAAK,YAAY,MAAM,MAAM;AAC5D,WAAK,YAAa,QAAS;AAAA,IAC5B,CAAE;AAAA,EACH;AAAA,EAEA,wBACC,SACA,UACC;AACD,UAAM,SAAS,yBAA0B,SAAS,KAAK,QAAQ,GAAI;AAEnE,QAAK,CAAE,QAAS;AACf,eAAS;AAET;AAAA,IACD;AAEA,aAAU,QAAW,MAAO;AAAA,EAC7B;AAAA,EAEA,YAAa,UAAqB;AACjC,aAAS,QAAQ,OAAO,qBAAqB,KAAM,KAAK,QAAQ,IAAK;AAErE,UAAM,6BAA6B,KAAK,QAAQ;AAChD,UAAM,QAAQ,SAAS,QAAQ;AAE/B,QAAK,CAAE,4BAA6B;AACnC;AAAA,IACD;AAEA,aAAS,QAAQ,QAAQ,OAAO,QAAS,KAAM,EAC7C,OAAQ,CAAE,OAAO,CAAE,MAAM,SAAU,OAAS;AAAA,MAC5C,GAAG;AAAA,MACH,CAAE,IAAK,GAAG;AAAA,QACT,GAAG;AAAA,QACH,SAAS;AAAA,UACR,MAAM,2BAA4B,iBAAkB,IAAK,CAAE;AAAA,UAC3D,MAAM,KAAK,QAAQ;AAAA,QACpB;AAAA,MACD;AAAA,IACD,IAAK,CAAC,CAAE;AAAA,EACV;AACD;","names":[]}

package/dist/index.mjs

@@ -1,86 +1,83 @@
-// src/index.ts
+// src/plugin.ts
 import { ExternalsPlugin } from "webpack";
-var baseExternalsMap = {
-  exact: {
-    react: "React",
-    "react-dom": "ReactDOM"
-  },
-  startsWith: {
-    "@elementor/": "__UNSTABLE__elementorPackages",
-    "@wordpress/": "wp"
+
+// src/utils.ts
+function transformRequestToGlobal(request, map) {
+  if (!request) {
+    return null;
   }
-};
+  for (const item of map) {
+    let { request: requestRegex, global } = item;
+    if (!(requestRegex instanceof RegExp)) {
+      requestRegex = new RegExp(`^${requestRegex}$`);
+    }
+    const matches = request.match(requestRegex);
+    if (matches) {
+      return replaceGlobal(global, matches);
+    }
+  }
+  return null;
+}
+function replaceGlobal(global, matches) {
+  let result = typeof global === "string" ? [global] : [...global];
+  matches.forEach((value, index) => {
+    result = result.map((item) => item.replace(`$${index}`, kebabToCamelCase(value)));
+  });
+  return result;
+}
+function kebabToCamelCase(kebabCase) {
+  return kebabCase.replace(
+    /-(\w)/g,
+    (_, w) => w.toUpperCase()
+  );
+}
+
+// src/plugin.ts
 var ExternalizeWordPressAssetsWebpackPlugin = class {
-  externalPlugin;
   options;
+  externalPlugin;
   constructor(options) {
-    this.options = this.normalizeOptions(options);
+    this.options = {
+      map: options.map,
+      global: options.global,
+      type: "window"
+    };
     this.externalPlugin = new ExternalsPlugin(
-      "window",
-      ({ request }, callback) => {
-        const externalRequest = this.requestToExternal(request);
-        if (externalRequest) {
-          return callback(void 0, externalRequest);
-        }
-        return callback();
-      }
+      this.options.type,
+      ({ request }, callback) => this.externalsPluginCallback(request, callback)
     );
   }
   apply(compiler) {
     this.externalPlugin.apply(compiler);
     compiler.hooks.environment.tap(this.constructor.name, () => {
-      this.exportAsWindowItem(compiler);
+      this.exposeEntry(compiler);
     });
   }
-  requestToExternal(request) {
-    if (!request) {
+  externalsPluginCallback(request, callback) {
+    const global = transformRequestToGlobal(request, this.options.map);
+    if (!global) {
+      callback();
       return;
     }
-    const { exact, startsWith } = this.options.externalsMap;
-    if (Object.keys(exact).includes(request)) {
-      return exact[request];
-    }
-    for (const [prefix, globalKey] of Object.entries(startsWith)) {
-      if (request.startsWith(prefix)) {
-        return [globalKey, this.kebabToCamelCase(request.replace(prefix, ""))];
-      }
-    }
-  }
-  exportAsWindowItem(compiler) {
-    compiler.options.output.enabledLibraryTypes?.push("window");
-    compiler.options.entry = Object.fromEntries(
-      Object.entries(compiler.options.entry).map(([name, entry]) => [
-        name,
-        {
-          ...entry,
-          library: {
-            name: [this.options.globalKey, this.kebabToCamelCase(name)],
-            type: "window"
-          }
-        }
-      ])
-    );
+    callback(void 0, global);
   }
-  kebabToCamelCase(kebabCase) {
-    return kebabCase.replace(
-      /-(\w)/g,
-      (_, w) => w.toUpperCase()
-    );
-  }
-  normalizeOptions(options) {
-    return {
-      ...options || {},
-      externalsMap: {
-        exact: {
-          ...baseExternalsMap.exact,
-          ...options?.externalsMap?.exact || {}
-        },
-        startsWith: {
-          ...baseExternalsMap.startsWith,
-          ...options?.externalsMap?.startsWith || {}
+  exposeEntry(compiler) {
+    compiler.options.output.enabledLibraryTypes?.push(this.options.type);
+    const transformEntryNameToGlobal = this.options.global;
+    const entry = compiler.options.entry;
+    if (!transformEntryNameToGlobal) {
+      return;
+    }
+    compiler.options.entry = Object.entries(entry).reduce((carry, [name, entryItem]) => ({
+      ...carry,
+      [name]: {
+        ...entryItem,
+        library: {
+          name: transformEntryNameToGlobal(kebabToCamelCase(name)),
+          type: this.options.type
         }
       }
-    };
+    }), {});
   }
 };
 export {

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { ExternalsPlugin, Compiler } from 'webpack';\n\ntype ExternalsMap = {\n\texact: Record<string, string>;\n\tstartsWith: Record<string, string>;\n};\n\ntype NormalizedOptions = {\n\tglobalKey: string,\n\texternalsMap: ExternalsMap\n};\n\ntype Options = {\n\tglobalKey: string,\n\texternalsMap?: Partial<ExternalsMap>\n};\n\nconst baseExternalsMap: ExternalsMap = {\n\texact: {\n\t\treact: 'React',\n\t\t'react-dom': 'ReactDOM',\n\t},\n\tstartsWith: {\n\t\t'@elementor/': '__UNSTABLE__elementorPackages',\n\t\t'@wordpress/': 'wp',\n\t},\n};\n\nexport class ExternalizeWordPressAssetsWebpackPlugin {\n\texternalPlugin: ExternalsPlugin;\n\n\toptions: NormalizedOptions;\n\n\tconstructor( options: Options ) {\n\t\tthis.options = this.normalizeOptions( options );\n\n\t\tthis.externalPlugin = new ExternalsPlugin(\n\t\t\t'window',\n\t\t\t( { request }, callback ) => {\n\t\t\t\tconst externalRequest = this.requestToExternal( request );\n\n\t\t\t\tif ( externalRequest ) {\n\t\t\t\t\treturn callback( undefined, externalRequest );\n\t\t\t\t}\n\n\t\t\t\treturn callback();\n\t\t\t}\n\t\t);\n\t}\n\n\tapply( compiler: Compiler ) {\n\t\tthis.externalPlugin.apply( compiler );\n\n\t\tcompiler.hooks.environment.tap( this.constructor.name, () => {\n\t\t\tthis.exportAsWindowItem( compiler );\n\t\t} );\n\t}\n\n\trequestToExternal( request?: string ) {\n\t\tif ( ! request ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { exact, startsWith } = this.options.externalsMap;\n\n\t\tif ( Object.keys( exact ).includes( request ) ) {\n\t\t\treturn exact[ request ];\n\t\t}\n\n\t\tfor ( const [ prefix, globalKey ] of Object.entries( startsWith ) ) {\n\t\t\tif ( request.startsWith( prefix ) ) {\n\t\t\t\treturn [ globalKey, this.kebabToCamelCase( request.replace( prefix, '' ) ) ];\n\t\t\t}\n\t\t}\n\t}\n\n\texportAsWindowItem( compiler: Compiler ) {\n\t\tcompiler.options.output.enabledLibraryTypes?.push( 'window' );\n\n\t\tcompiler.options.entry = Object.fromEntries(\n\t\t\tObject.entries( compiler.options.entry ).map( ( [ name, entry ] ) => [\n\t\t\t\tname,\n\t\t\t\t{\n\t\t\t\t\t...entry,\n\t\t\t\t\tlibrary: {\n\t\t\t\t\t\tname: [ this.options.globalKey, this.kebabToCamelCase( name ) ],\n\t\t\t\t\t\ttype: 'window',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t] )\n\t\t);\n\t}\n\n\tkebabToCamelCase( kebabCase: string ) {\n\t\treturn kebabCase.replace(\n\t\t\t/-(\\w)/g,\n\t\t\t( _, w: string ) => w.toUpperCase()\n\t\t);\n\t}\n\n\tnormalizeOptions( options: Options ): NormalizedOptions {\n\t\treturn {\n\t\t\t...( options || {} ),\n\t\t\texternalsMap: {\n\t\t\t\texact: {\n\t\t\t\t\t...baseExternalsMap.exact,\n\t\t\t\t\t...( options?.externalsMap?.exact || {} ),\n\t\t\t\t},\n\t\t\t\tstartsWith: {\n\t\t\t\t\t...baseExternalsMap.startsWith,\n\t\t\t\t\t...( options?.externalsMap?.startsWith || {} ),\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n}\n"],"mappings":";AAAA,SAAS,uBAAiC;AAiB1C,IAAM,mBAAiC;AAAA,EACtC,OAAO;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,EACd;AAAA,EACA,YAAY;AAAA,IACX,eAAe;AAAA,IACf,eAAe;AAAA,EAChB;AACD;AAEO,IAAM,0CAAN,MAA8C;AAAA,EACpD;AAAA,EAEA;AAAA,EAEA,YAAa,SAAmB;AAC/B,SAAK,UAAU,KAAK,iBAAkB,OAAQ;AAE9C,SAAK,iBAAiB,IAAI;AAAA,MACzB;AAAA,MACA,CAAE,EAAE,QAAQ,GAAG,aAAc;AAC5B,cAAM,kBAAkB,KAAK,kBAAmB,OAAQ;AAExD,YAAK,iBAAkB;AACtB,iBAAO,SAAU,QAAW,eAAgB;AAAA,QAC7C;AAEA,eAAO,SAAS;AAAA,MACjB;AAAA,IACD;AAAA,EACD;AAAA,EAEA,MAAO,UAAqB;AAC3B,SAAK,eAAe,MAAO,QAAS;AAEpC,aAAS,MAAM,YAAY,IAAK,KAAK,YAAY,MAAM,MAAM;AAC5D,WAAK,mBAAoB,QAAS;AAAA,IACnC,CAAE;AAAA,EACH;AAAA,EAEA,kBAAmB,SAAmB;AACrC,QAAK,CAAE,SAAU;AAChB;AAAA,IACD;AAEA,UAAM,EAAE,OAAO,WAAW,IAAI,KAAK,QAAQ;AAE3C,QAAK,OAAO,KAAM,KAAM,EAAE,SAAU,OAAQ,GAAI;AAC/C,aAAO,MAAO,OAAQ;AAAA,IACvB;AAEA,eAAY,CAAE,QAAQ,SAAU,KAAK,OAAO,QAAS,UAAW,GAAI;AACnE,UAAK,QAAQ,WAAY,MAAO,GAAI;AACnC,eAAO,CAAE,WAAW,KAAK,iBAAkB,QAAQ,QAAS,QAAQ,EAAG,CAAE,CAAE;AAAA,MAC5E;AAAA,IACD;AAAA,EACD;AAAA,EAEA,mBAAoB,UAAqB;AACxC,aAAS,QAAQ,OAAO,qBAAqB,KAAM,QAAS;AAE5D,aAAS,QAAQ,QAAQ,OAAO;AAAA,MAC/B,OAAO,QAAS,SAAS,QAAQ,KAAM,EAAE,IAAK,CAAE,CAAE,MAAM,KAAM,MAAO;AAAA,QACpE;AAAA,QACA;AAAA,UACC,GAAG;AAAA,UACH,SAAS;AAAA,YACR,MAAM,CAAE,KAAK,QAAQ,WAAW,KAAK,iBAAkB,IAAK,CAAE;AAAA,YAC9D,MAAM;AAAA,UACP;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACH;AAAA,EACD;AAAA,EAEA,iBAAkB,WAAoB;AACrC,WAAO,UAAU;AAAA,MAChB;AAAA,MACA,CAAE,GAAG,MAAe,EAAE,YAAY;AAAA,IACnC;AAAA,EACD;AAAA,EAEA,iBAAkB,SAAsC;AACvD,WAAO;AAAA,MACN,GAAK,WAAW,CAAC;AAAA,MACjB,cAAc;AAAA,QACb,OAAO;AAAA,UACN,GAAG,iBAAiB;AAAA,UACpB,GAAK,SAAS,cAAc,SAAS,CAAC;AAAA,QACvC;AAAA,QACA,YAAY;AAAA,UACX,GAAG,iBAAiB;AAAA,UACpB,GAAK,SAAS,cAAc,cAAc,CAAC;AAAA,QAC5C;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD;","names":[]}
+{"version":3,"sources":["../src/plugin.ts","../src/utils.ts"],"sourcesContent":["import { ExternalsPlugin, Compiler } from 'webpack';\nimport { kebabToCamelCase, transformRequestToGlobal } from './utils';\nimport { RequestToGlobalMap, Global } from './types';\n\ntype Options = {\n\ttype: string,\n\tglobal?: ( entryName: string ) => Global,\n\tmap: RequestToGlobalMap\n};\n\nexport default class ExternalizeWordPressAssetsWebpackPlugin {\n\toptions: Options;\n\n\texternalPlugin: ExternalsPlugin;\n\n\tconstructor( options: Pick<Options, 'map' | 'global'> ) {\n\t\tthis.options = {\n\t\t\tmap: options.map,\n\t\t\tglobal: options.global,\n\t\t\ttype: 'window',\n\t\t};\n\n\t\tthis.externalPlugin = new ExternalsPlugin(\n\t\t\tthis.options.type,\n\t\t\t( { request }, callback ) => this.externalsPluginCallback( request, callback )\n\t\t);\n\t}\n\n\tapply( compiler: Compiler ) {\n\t\tthis.externalPlugin.apply( compiler );\n\n\t\tcompiler.hooks.environment.tap( this.constructor.name, () => {\n\t\t\tthis.exposeEntry( compiler );\n\t\t} );\n\t}\n\n\texternalsPluginCallback(\n\t\trequest: string | undefined,\n\t\tcallback: ( err?: undefined, result?: Global ) => void\n\t) {\n\t\tconst global = transformRequestToGlobal( request, this.options.map );\n\n\t\tif ( ! global ) {\n\t\t\tcallback();\n\n\t\t\treturn;\n\t\t}\n\n\t\tcallback( undefined, global );\n\t}\n\n\texposeEntry( compiler: Compiler ) {\n\t\tcompiler.options.output.enabledLibraryTypes?.push( this.options.type );\n\n\t\tconst transformEntryNameToGlobal = this.options.global;\n\t\tconst entry = compiler.options.entry;\n\n\t\tif ( ! transformEntryNameToGlobal ) {\n\t\t\treturn;\n\t\t}\n\n\t\tcompiler.options.entry = Object.entries( entry )\n\t\t\t.reduce( ( carry, [ name, entryItem ] ) => ( {\n\t\t\t\t...carry,\n\t\t\t\t[ name ]: {\n\t\t\t\t\t...entryItem,\n\t\t\t\t\tlibrary: {\n\t\t\t\t\t\tname: transformEntryNameToGlobal( kebabToCamelCase( name ) ),\n\t\t\t\t\t\ttype: this.options.type,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t} ), {} );\n\t}\n}\n","import { RequestToGlobalMap } from './types';\n\nexport function transformRequestToGlobal( request: string | undefined, map: RequestToGlobalMap ) {\n\tif ( ! request ) {\n\t\treturn null;\n\t}\n\n\tfor ( const item of map ) {\n\t\tlet { request: requestRegex, global } = 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 replaceGlobal( global, matches );\n\t\t}\n\t}\n\n\treturn null;\n}\n\nexport function replaceGlobal( global: string | string[], matches: RegExpMatchArray ) {\n\tlet result = typeof global === 'string' ? [ global ] : [ ...global ];\n\n\tmatches.forEach( ( value, index ) => {\n\t\t// Replace regex backreferences with capture groups.\n\t\t// The user can set ['something', '$1', 'a', '$2'] in the global, and the backreferences will\n\t\t// be replaced by the matched groups in the regex.\n\t\tresult = result.map( ( item ) => item.replace( `$${ index }`, kebabToCamelCase( value ) ) );\n\t} );\n\n\treturn result;\n}\n\nexport function kebabToCamelCase( kebabCase: string ) {\n\treturn kebabCase.replace(\n\t\t/-(\\w)/g,\n\t\t( _, w: string ) => w.toUpperCase()\n\t);\n}\n"],"mappings":";AAAA,SAAS,uBAAiC;;;ACEnC,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,cAAe,QAAQ,OAAQ;AAAA,IACvC;AAAA,EACD;AAEA,SAAO;AACR;AAEO,SAAS,cAAe,QAA2B,SAA4B;AACrF,MAAI,SAAS,OAAO,WAAW,WAAW,CAAE,MAAO,IAAI,CAAE,GAAG,MAAO;AAEnE,UAAQ,QAAS,CAAE,OAAO,UAAW;AAIpC,aAAS,OAAO,IAAK,CAAE,SAAU,KAAK,QAAS,IAAK,KAAM,IAAI,iBAAkB,KAAM,CAAE,CAAE;AAAA,EAC3F,CAAE;AAEF,SAAO;AACR;AAEO,SAAS,iBAAkB,WAAoB;AACrD,SAAO,UAAU;AAAA,IAChB;AAAA,IACA,CAAE,GAAG,MAAe,EAAE,YAAY;AAAA,EACnC;AACD;;;ADhCA,IAAqB,0CAArB,MAA6D;AAAA,EAC5D;AAAA,EAEA;AAAA,EAEA,YAAa,SAA2C;AACvD,SAAK,UAAU;AAAA,MACd,KAAK,QAAQ;AAAA,MACb,QAAQ,QAAQ;AAAA,MAChB,MAAM;AAAA,IACP;AAEA,SAAK,iBAAiB,IAAI;AAAA,MACzB,KAAK,QAAQ;AAAA,MACb,CAAE,EAAE,QAAQ,GAAG,aAAc,KAAK,wBAAyB,SAAS,QAAS;AAAA,IAC9E;AAAA,EACD;AAAA,EAEA,MAAO,UAAqB;AAC3B,SAAK,eAAe,MAAO,QAAS;AAEpC,aAAS,MAAM,YAAY,IAAK,KAAK,YAAY,MAAM,MAAM;AAC5D,WAAK,YAAa,QAAS;AAAA,IAC5B,CAAE;AAAA,EACH;AAAA,EAEA,wBACC,SACA,UACC;AACD,UAAM,SAAS,yBAA0B,SAAS,KAAK,QAAQ,GAAI;AAEnE,QAAK,CAAE,QAAS;AACf,eAAS;AAET;AAAA,IACD;AAEA,aAAU,QAAW,MAAO;AAAA,EAC7B;AAAA,EAEA,YAAa,UAAqB;AACjC,aAAS,QAAQ,OAAO,qBAAqB,KAAM,KAAK,QAAQ,IAAK;AAErE,UAAM,6BAA6B,KAAK,QAAQ;AAChD,UAAM,QAAQ,SAAS,QAAQ;AAE/B,QAAK,CAAE,4BAA6B;AACnC;AAAA,IACD;AAEA,aAAS,QAAQ,QAAQ,OAAO,QAAS,KAAM,EAC7C,OAAQ,CAAE,OAAO,CAAE,MAAM,SAAU,OAAS;AAAA,MAC5C,GAAG;AAAA,MACH,CAAE,IAAK,GAAG;AAAA,QACT,GAAG;AAAA,QACH,SAAS;AAAA,UACR,MAAM,2BAA4B,iBAAkB,IAAK,CAAE;AAAA,UAC3D,MAAM,KAAK,QAAQ;AAAA,QACpB;AAAA,MACD;AAAA,IACD,IAAK,CAAC,CAAE;AAAA,EACV;AACD;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/externalize-wordpress-assets-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

@@ -2,15 +2,7 @@
 
 exports[`@elementor/externalize-wordpress-assets-webpack-plugin should externalize Elementor & WordPress assets 1`] = `
 ""use strict";
-/*
- * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-(self["webpackChunk"] = self["webpackChunk"] || []).push([["app"],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["my-app-test"],{
 
 /***/ "./.":
 /*!***********!*\\
@@ -18,14 +10,46 @@ exports[`@elementor/externalize-wordpress-assets-webpack-plugin should externali
   \\***********/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\\n/* harmony import */ var _elementor_editor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor */ \\"@elementor/editor\\");\\n/* harmony import */ var _elementor_editor__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor__WEBPACK_IMPORTED_MODULE_0__);\\n/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ \\"@wordpress/element\\");\\n/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);\\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \\"react\\");\\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-dom */ \\"react-dom\\");\\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_3__);\\n/* harmony import */ var _other_package_name__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @other/package-name */ \\"@other/package-name\\");\\n/* harmony import */ var _other_package_name__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_other_package_name__WEBPACK_IMPORTED_MODULE_4__);\\n\\n\\t\\t\\t\\n\\t\\t\\t\\n\\t\\t\\t\\n\\t\\t\\t\\n\\t\\t\\t\\n\\n\\t\\t\\t_elementor_editor__WEBPACK_IMPORTED_MODULE_0___default()();\\n\\t\\t\\t_wordpress_element__WEBPACK_IMPORTED_MODULE_1___default()();\\n\\t\\t\\treact__WEBPACK_IMPORTED_MODULE_2___default()();\\n\\t\\t\\treact_dom__WEBPACK_IMPORTED_MODULE_3___default()();\\n\\t\\t\\t_other_package_name__WEBPACK_IMPORTED_MODULE_4___default()();\\n\\t\\t\\n\\n//# sourceURL=webpack:///./.?");
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   test: () => (/* binding */ test)
+/* harmony export */ });
+/* harmony import */ var _elementor_editor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor */ "@elementor/editor");
+/* harmony import */ var _elementor_editor__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _elementor_editor_panels__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-panels */ "@elementor/editor-panels");
+/* harmony import */ var _elementor_editor_panels__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_panels__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-dom */ "react-dom");
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _other_package_name__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @other/package-name */ "@other/package-name");
+/* harmony import */ var _other_package_name__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_other_package_name__WEBPACK_IMPORTED_MODULE_5__);
+
+			
+			
+			
+			
+			
+			
+
+			_elementor_editor__WEBPACK_IMPORTED_MODULE_0___default()();
+			_elementor_editor_panels__WEBPACK_IMPORTED_MODULE_1___default()();
+			_wordpress_element__WEBPACK_IMPORTED_MODULE_2___default()();
+			react__WEBPACK_IMPORTED_MODULE_3___default()();
+			react_dom__WEBPACK_IMPORTED_MODULE_4___default()();
+			_other_package_name__WEBPACK_IMPORTED_MODULE_5___default()();
+			
+			const test = 'This is test for exporting something';
+		
 
 /***/ }),
 
 /***/ "react":
-/*!************************!*\\
-  !*** external "React" ***!
-  \\************************/
+/*!**************************!*\\
+  !*** external ["React"] ***!
+  \\**************************/
 /***/ ((module) => {
 
 module.exports = window["React"];
@@ -33,32 +57,42 @@ module.exports = window["React"];
 /***/ }),
 
 /***/ "react-dom":
-/*!***************************!*\\
-  !*** external "ReactDOM" ***!
-  \\***************************/
+/*!*****************************!*\\
+  !*** external ["ReactDOM"] ***!
+  \\*****************************/
 /***/ ((module) => {
 
 module.exports = window["ReactDOM"];
 
 /***/ }),
 
-/***/ "@other/package-name":
-/*!***********************************!*\\
-  !*** external "otherPackageName" ***!
-  \\***********************************/
+/***/ "@elementor/editor":
+/*!***********************************************!*\\
+  !*** external ["elementorPackages","editor"] ***!
+  \\***********************************************/
 /***/ ((module) => {
 
-module.exports = window["otherPackageName"];
+module.exports = window["elementorPackages"]["editor"];
 
 /***/ }),
 
-/***/ "@elementor/editor":
-/*!***********************************************************!*\\
-  !*** external ["__UNSTABLE__elementorPackages","editor"] ***!
-  \\***********************************************************/
+/***/ "@elementor/editor-panels":
+/*!*****************************************************!*\\
+  !*** external ["elementorPackages","editorPanels"] ***!
+  \\*****************************************************/
 /***/ ((module) => {
 
-module.exports = window["__UNSTABLE__elementorPackages"]["editor"];
+module.exports = window["elementorPackages"]["editorPanels"];
+
+/***/ }),
+
+/***/ "@other/package-name":
+/*!*************************************!*\\
+  !*** external ["otherPackageName"] ***!
+  \\*************************************/
+/***/ ((module) => {
+
+module.exports = window["otherPackageName"];
 
 /***/ }),
 
@@ -76,7 +110,7 @@ module.exports = window["wp"]["element"];
 /******/ __webpack_require__ => { // webpackRuntimeModules
 /******/ var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
 /******/ var __webpack_exports__ = (__webpack_exec__("./."));
-/******/ (window.testGlobalKey = window.testGlobalKey || {}).app = __webpack_exports__;
+/******/ (window.elementorPackages = window.elementorPackages || {}).myAppTest = __webpack_exports__;
 /******/ }
 ]);"
 `;

package/src/__tests__/index.test.ts

@@ -13,17 +13,21 @@ jest.mock( 'fs', () => jest.requireActual( 'memfs' ) );
 describe( '@elementor/externalize-wordpress-assets-webpack-plugin', () => {
 	beforeEach( () => {
 		const fileContent = `
-			import elementor from '@elementor/editor';
+			import editor from '@elementor/editor';
+			import editorPanels from '@elementor/editor-panels';
 			import wp from '@wordpress/element';
 			import React from 'react';
 			import ReactDOM from 'react-dom';
 			import other from '@other/package-name';
 
-			elementor();
+			editor();
+			editorPanels();
 			wp();
 			React();
 			ReactDOM();
 			other();
+			
+			export const test = 'This is test for exporting something';
 		`;
 
 		fs.writeFileSync( path.resolve( '/app.js' ), fileContent );
@@ -37,25 +41,24 @@ describe( '@elementor/externalize-wordpress-assets-webpack-plugin', () => {
 		// Arrange.
 		const compiler = webpack( {
 			mode: 'development',
-			entry: {
-				app: path.resolve( '/app.js' ),
-			},
+			devtool: false,
+			entry: { 'my-app-test': path.resolve( '/app.js' ) },
 			context: path.resolve( '/app.js' ),
-			optimization: {
-				runtimeChunk: 'single',
-			},
+			optimization: { runtimeChunk: 'single' },
 			output: {
 				filename: '[name].js',
 				path: path.resolve( '/dist' ),
 			},
 			plugins: [
 				new ExternalizeWordPressAssetsWebpackPlugin( {
-					globalKey: 'testGlobalKey',
-					externalsMap: {
-						exact: {
-							'@other/package-name': 'otherPackageName',
-						},
-					},
+					global: ( entryName ) => [ 'elementorPackages', entryName ],
+					map: [
+						{ request: 'react', global: 'React' },
+						{ request: 'react-dom', global: 'ReactDOM' },
+						{ request: /^@elementor\/(.+)$/, global: [ 'elementorPackages', '$1' ] },
+						{ request: /^@wordpress\/(.+)$/, global: [ 'wp', '$1' ] },
+						{ request: '@other/package-name', global: 'otherPackageName' },
+					],
 				} ),
 			],
 		} );
@@ -70,7 +73,7 @@ describe( '@elementor/externalize-wordpress-assets-webpack-plugin', () => {
 			expect( stats?.hasErrors() ).toBe( false );
 			expect( stats?.hasWarnings() ).toBe( false );
 
-			const fileContent = fs.readFileSync( path.resolve( `/dist/app.js` ), { encoding: 'utf8' } );
+			const fileContent = fs.readFileSync( path.resolve( `/dist/my-app-test.js` ), { encoding: 'utf8' } );
 
 			expect( fileContent ).toMatchSnapshot();
 

package/src/index.ts

@@ -1,116 +1 @@
-import { ExternalsPlugin, Compiler } from 'webpack';
-
-type ExternalsMap = {
-	exact: Record<string, string>;
-	startsWith: Record<string, string>;
-};
-
-type NormalizedOptions = {
-	globalKey: string,
-	externalsMap: ExternalsMap
-};
-
-type Options = {
-	globalKey: string,
-	externalsMap?: Partial<ExternalsMap>
-};
-
-const baseExternalsMap: ExternalsMap = {
-	exact: {
-		react: 'React',
-		'react-dom': 'ReactDOM',
-	},
-	startsWith: {
-		'@elementor/': '__UNSTABLE__elementorPackages',
-		'@wordpress/': 'wp',
-	},
-};
-
-export class ExternalizeWordPressAssetsWebpackPlugin {
-	externalPlugin: ExternalsPlugin;
-
-	options: NormalizedOptions;
-
-	constructor( options: Options ) {
-		this.options = this.normalizeOptions( options );
-
-		this.externalPlugin = new ExternalsPlugin(
-			'window',
-			( { request }, callback ) => {
-				const externalRequest = this.requestToExternal( request );
-
-				if ( externalRequest ) {
-					return callback( undefined, externalRequest );
-				}
-
-				return callback();
-			}
-		);
-	}
-
-	apply( compiler: Compiler ) {
-		this.externalPlugin.apply( compiler );
-
-		compiler.hooks.environment.tap( this.constructor.name, () => {
-			this.exportAsWindowItem( compiler );
-		} );
-	}
-
-	requestToExternal( request?: string ) {
-		if ( ! request ) {
-			return;
-		}
-
-		const { exact, startsWith } = this.options.externalsMap;
-
-		if ( Object.keys( exact ).includes( request ) ) {
-			return exact[ request ];
-		}
-
-		for ( const [ prefix, globalKey ] of Object.entries( startsWith ) ) {
-			if ( request.startsWith( prefix ) ) {
-				return [ globalKey, this.kebabToCamelCase( request.replace( prefix, '' ) ) ];
-			}
-		}
-	}
-
-	exportAsWindowItem( compiler: Compiler ) {
-		compiler.options.output.enabledLibraryTypes?.push( 'window' );
-
-		compiler.options.entry = Object.fromEntries(
-			Object.entries( compiler.options.entry ).map( ( [ name, entry ] ) => [
-				name,
-				{
-					...entry,
-					library: {
-						name: [ this.options.globalKey, this.kebabToCamelCase( name ) ],
-						type: 'window',
-					},
-				},
-			] )
-		);
-	}
-
-	kebabToCamelCase( kebabCase: string ) {
-		return kebabCase.replace(
-			/-(\w)/g,
-			( _, w: string ) => w.toUpperCase()
-		);
-	}
-
-	normalizeOptions( options: Options ): NormalizedOptions {
-		return {
-			...( options || {} ),
-			externalsMap: {
-				exact: {
-					...baseExternalsMap.exact,
-					...( options?.externalsMap?.exact || {} ),
-				},
-				startsWith: {
-					...baseExternalsMap.startsWith,
-					...( options?.externalsMap?.startsWith || {} ),
-				},
-			},
-		};
-	}
-}
+export { default as ExternalizeWordPressAssetsWebpackPlugin } from './plugin';

package/src/plugin.ts

@@ -0,0 +1,74 @@
+import { ExternalsPlugin, Compiler } from 'webpack';
+import { kebabToCamelCase, transformRequestToGlobal } from './utils';
+import { RequestToGlobalMap, Global } from './types';
+
+type Options = {
+	type: string,
+	global?: ( entryName: string ) => Global,
+	map: RequestToGlobalMap
+};
+
+export default class ExternalizeWordPressAssetsWebpackPlugin {
+	options: Options;
+
+	externalPlugin: ExternalsPlugin;
+
+	constructor( options: Pick<Options, 'map' | 'global'> ) {
+		this.options = {
+			map: options.map,
+			global: options.global,
+			type: 'window',
+		};
+
+		this.externalPlugin = new ExternalsPlugin(
+			this.options.type,
+			( { request }, callback ) => this.externalsPluginCallback( request, callback )
+		);
+	}
+
+	apply( compiler: Compiler ) {
+		this.externalPlugin.apply( compiler );
+
+		compiler.hooks.environment.tap( this.constructor.name, () => {
+			this.exposeEntry( compiler );
+		} );
+	}
+
+	externalsPluginCallback(
+		request: string | undefined,
+		callback: ( err?: undefined, result?: Global ) => void
+	) {
+		const global = transformRequestToGlobal( request, this.options.map );
+
+		if ( ! global ) {
+			callback();
+
+			return;
+		}
+
+		callback( undefined, global );
+	}
+
+	exposeEntry( compiler: Compiler ) {
+		compiler.options.output.enabledLibraryTypes?.push( this.options.type );
+
+		const transformEntryNameToGlobal = this.options.global;
+		const entry = compiler.options.entry;
+
+		if ( ! transformEntryNameToGlobal ) {
+			return;
+		}
+
+		compiler.options.entry = Object.entries( entry )
+			.reduce( ( carry, [ name, entryItem ] ) => ( {
+				...carry,
+				[ name ]: {
+					...entryItem,
+					library: {
+						name: transformEntryNameToGlobal( kebabToCamelCase( name ) ),
+						type: this.options.type,
+					},
+				},
+			} ), {} );
+	}
+}

package/src/types.ts

@@ -0,0 +1,6 @@
+export type Global = string | string[];
+
+export type RequestToGlobalMap = Array<{
+	request: string | RegExp,
+	global: Global
+}>

package/src/utils.ts

@@ -0,0 +1,43 @@
+import { RequestToGlobalMap } from './types';
+
+export function transformRequestToGlobal( request: string | undefined, map: RequestToGlobalMap ) {
+	if ( ! request ) {
+		return null;
+	}
+
+	for ( const item of map ) {
+		let { request: requestRegex, global } = item;
+
+		if ( ! ( requestRegex instanceof RegExp ) ) {
+			requestRegex = new RegExp( `^${ requestRegex }$` );
+		}
+
+		const matches = request.match( requestRegex );
+
+		if ( matches ) {
+			return replaceGlobal( global, matches );
+		}
+	}
+
+	return null;
+}
+
+export function replaceGlobal( global: string | string[], matches: RegExpMatchArray ) {
+	let result = typeof global === 'string' ? [ global ] : [ ...global ];
+
+	matches.forEach( ( value, index ) => {
+		// Replace regex backreferences with capture groups.
+		// The user can set ['something', '$1', 'a', '$2'] in the global, and the backreferences will
+		// be replaced by the matched groups in the regex.
+		result = result.map( ( item ) => item.replace( `$${ index }`, kebabToCamelCase( value ) ) );
+	} );
+
+	return result;
+}
+
+export function kebabToCamelCase( kebabCase: string ) {
+	return kebabCase.replace(
+		/-(\w)/g,
+		( _, w: string ) => w.toUpperCase()
+	);
+}