feat(external-loading-plugin): remove backgroundChunks and mainThreadChunks options

.changeset/chilly-ravens-smile.md

@@ -11,8 +11,6 @@ import { ExternalsLoadingPlugin } from '@lynx-js/externals-loading-webpack-plugi
 export default {
   plugins: [
     new ExternalsLoadingPlugin({
-      mainThreadChunks: ['index__main-thread'],
-      backgroundChunks: ['index'],
       mainThreadLayer: 'main-thread',
       backgroundLayer: 'background',
       externals: {

.changeset/forty-groups-drum.md

@@ -0,0 +1,3 @@
+---
+
+---

examples/react-externals/lynx.config.js

@@ -11,8 +11,6 @@ export default defineConfig({
     rspack: {
       plugins: [
         new ExternalsLoadingPlugin({
-          mainThreadChunks: ['main__main-thread'],
-          backgroundChunks: ['main'],
           mainThreadLayer: LAYERS.MAIN_THREAD,
           backgroundLayer: LAYERS.BACKGROUND,
           externals: {

packages/webpack/externals-loading-webpack-plugin/etc/externals-loading-webpack-plugin.api.md

@@ -15,7 +15,6 @@ export class ExternalsLoadingPlugin {
 
 // @public
 export interface ExternalsLoadingPluginOptions {
-    backgroundChunks: string[];
     backgroundLayer: string;
     externals: Record<string, {
         url: string;
@@ -25,7 +24,6 @@ export interface ExternalsLoadingPluginOptions {
         mainThread?: LayerOptions;
         timeout?: number;
     }>;
-    mainThreadChunks: string[];
     mainThreadLayer: string;
 }
 

packages/webpack/externals-loading-webpack-plugin/src/index.ts

@@ -24,16 +24,6 @@ import type {
  * @public
  */
 export interface ExternalsLoadingPluginOptions {
-  /**
-   * The chunk names to be considered as main thread chunks.
-   */
-  mainThreadChunks: string[];
-
-  /**
-   * The chunk names to be considered as background chunks.
-   */
-  backgroundChunks: string[];
-
   /**
    * The name of the main thread layer.
    */
@@ -264,39 +254,19 @@ export class ExternalsLoadingPlugin {
     const externalsLoadingPluginOptions = this.options;
 
     class ExternalsLoadingRuntimeModule extends RuntimeModule {
-      constructor() {
+      constructor(private options: { layer: string }) {
         super('externals-loading-runtime');
       }
 
       override generate() {
-        if (!this.chunk?.name) {
+        if (!this.chunk?.name || !externalsLoadingPluginOptions.externals) {
           return '';
         }
-        if (!externalsLoadingPluginOptions.externals) {
-          return '';
-        }
-
-        if (
-          externalsLoadingPluginOptions.backgroundChunks.some(name =>
-            name === this.chunk!.name
-          )
-        ) {
-          return this.#genFetchAndLoadCode('background');
-        }
-
-        if (
-          externalsLoadingPluginOptions.mainThreadChunks.some(name =>
-            name === this.chunk!.name
-          )
-        ) {
-          return this.#genFetchAndLoadCode('mainThread');
-        }
-
-        return '';
+        return this.#genExternalsLoadingCode(this.options.layer);
       }
 
-      #genFetchAndLoadCode(
-        layer: 'background' | 'mainThread',
+      #genExternalsLoadingCode(
+        chunkLayer: string,
       ): string {
         const fetchCode: string[] = [];
         const asyncLoadCode: string[] = [];
@@ -306,6 +276,16 @@ export class ExternalsLoadingPlugin {
           string | string[],
           ExternalsLoadingPluginOptions['externals'][string]
         >();
+        let layer: 'background' | 'mainThread';
+        if (chunkLayer === externalsLoadingPluginOptions.backgroundLayer) {
+          layer = 'background';
+        } else if (
+          chunkLayer === externalsLoadingPluginOptions.mainThreadLayer
+        ) {
+          layer = 'mainThread';
+        } else {
+          return '';
+        }
         for (
           const [pkgName, external] of Object.entries(
             externalsLoadingPluginOptions.externals,
@@ -430,9 +410,23 @@ function createLoadExternalSync(handler, sectionPath, timeout) {
       compilation => {
         compilation.hooks.additionalTreeRuntimeRequirements
           .tap(ExternalsLoadingRuntimeModule.name, (chunk) => {
+            const modules = compilation.chunkGraph.getChunkModulesIterable(
+              chunk,
+            );
+            let layer: string | undefined;
+            for (const module of modules) {
+              if (module.layer) {
+                layer = module.layer;
+                break;
+              }
+            }
+            if (!layer) {
+              // Skip chunks without a layer
+              return;
+            }
             compilation.addRuntimeModule(
               chunk,
-              new ExternalsLoadingRuntimeModule(),
+              new ExternalsLoadingRuntimeModule({ layer }),
             );
           });
       },

packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/async/rspack.config.js

@@ -5,8 +5,6 @@ export default {
   context: __dirname,
   ...createConfig(
     {
-      backgroundChunks: ['main:background'],
-      mainThreadChunks: ['main:main-thread'],
       backgroundLayer: 'background',
       mainThreadLayer: 'main-thread',
       externals: {

packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/filter-duplicate-externals/rspack.config.js

@@ -5,8 +5,6 @@ export default {
   context: __dirname,
   ...createConfig(
     {
-      backgroundChunks: ['main:background'],
-      mainThreadChunks: ['main:main-thread'],
       backgroundLayer: 'background',
       mainThreadLayer: 'main-thread',
       externals: {

packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/not-overrides-existed-externals/rspack.config.js

@@ -5,8 +5,6 @@ export default {
   context: __dirname,
   ...createConfig(
     {
-      backgroundChunks: ['main:background'],
-      mainThreadChunks: ['main:main-thread'],
       backgroundLayer: 'background',
       mainThreadLayer: 'main-thread',
       externals: {

packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/only-background-externals/rspack.config.js

@@ -5,8 +5,6 @@ export default {
   context: __dirname,
   ...createConfig(
     {
-      backgroundChunks: ['main:background'],
-      mainThreadChunks: ['main:main-thread'],
       backgroundLayer: 'background',
       mainThreadLayer: 'main-thread',
       externals: {

packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/only-main-thread-externals/rspack.config.js

@@ -5,8 +5,6 @@ export default {
   context: __dirname,
   ...createConfig(
     {
-      backgroundChunks: ['main:background'],
-      mainThreadChunks: ['main:main-thread'],
       backgroundLayer: 'background',
       mainThreadLayer: 'main-thread',
       externals: {

packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/sync/rspack.config.js

@@ -5,8 +5,6 @@ export default {
   context: __dirname,
   ...createConfig(
     {
-      backgroundChunks: ['main:background'],
-      mainThreadChunks: ['main:main-thread'],
       backgroundLayer: 'background',
       mainThreadLayer: 'main-thread',
       externals: {