@lynx-js/externals-loading-webpack-plugin-canary 0.0.1-canary-20251217-27dea6e6 → 0.0.1-canary-20251222-4d689a71

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # @lynx-js/externals-loading-webpack-plugin
 
-## 0.0.1-canary-20251217074243-27dea6e64c212ff2015d86a35810be8982f704f6
+## 0.0.1-canary-20251222035207-4d689a7194cc9b431e6055e87792c1961a44af4d
 
 ### Patch Changes
 
-- Introduce `@lynx-js/externals-loading-webpack-plugin`. ([#1924](https://github.com/lynx-family/lynx-stack/pull/1924))
+- Introduce `@lynx-js/externals-loading-webpack-plugin`. It will help you to load externals built by `@lynx-js/lynx-bundle-rslib-config`. ([#1924](https://github.com/lynx-family/lynx-stack/pull/1924))
 
   ```js
   // webpack.config.js
@@ -13,8 +13,6 @@
   export default {
     plugins: [
       new ExternalsLoadingPlugin({
-        mainThreadChunks: ["index__main-thread"],
-        backgroundChunks: ["index"],
         mainThreadLayer: "main-thread",
         backgroundLayer: "background",
         externals: {

package/lib/index.d.ts

@@ -13,14 +13,6 @@ import type { Compiler } from '@rspack/core';
  * @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.
      */
@@ -97,7 +89,7 @@ export interface ExternalsLoadingPluginOptions {
          *
          * ```js
          * externals: {
-         *   lodash: '__webpack_require__.lynx_ex.lodash',
+         *   lodash: 'lynx[Symbol.for("__LYNX_EXTERNAL_GLOBAL__")].lodash',
          * }
          * ```
          *
@@ -121,8 +113,8 @@ export interface ExternalsLoadingPluginOptions {
          *
          * ```js
          * externals: {
-         *   lodash: '__webpack_require__.lynx_ex.Lodash',
-         *   'lodash-es': '__webpack_require__.lynx_ex.Lodash',
+         *   lodash: 'lynx[Symbol.for("__LYNX_EXTERNAL_GLOBAL__")].Lodash',
+         *   'lodash-es': 'lynx[Symbol.for("__LYNX_EXTERNAL_GLOBAL__")].Lodash',
          * }
          * ```
          *
@@ -143,7 +135,7 @@ export interface ExternalsLoadingPluginOptions {
          *
          * ```js
          * externals: {
-         *   preact: '__webpack_require__.lynx_ex.ReactLynx.Preact',
+         *   preact: 'lynx[Symbol.for("__LYNX_EXTERNAL_GLOBAL__")].ReactLynx.Preact',
          * }
          * ```
          *

package/lib/index.js

@@ -1,9 +1,8 @@
 // Copyright 2025 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-function getLynxExternalGlobal(layer) {
-    // We do not use `globalThis` in BTS to avoid issues when sharing js context is enabled
-    return `${layer === 'background' ? 'lynxCoreInject.tt.lynx_ex' : 'globalThis.lynx_ex'}`;
+function getLynxExternalGlobal() {
+    return `lynx[Symbol.for('__LYNX_EXTERNAL_GLOBAL__')]`;
 }
 /**
  * The webpack plugin to load lynx external bundles.
@@ -48,30 +47,32 @@ export class ExternalsLoadingPlugin {
         const { RuntimeModule } = compiler.webpack;
         const externalsLoadingPluginOptions = this.options;
         class ExternalsLoadingRuntimeModule extends RuntimeModule {
-            constructor() {
+            options;
+            constructor(options) {
                 super('externals-loading-runtime');
+                this.options = options;
             }
             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) {
+            #genExternalsLoadingCode(chunkLayer) {
                 const fetchCode = [];
-                const asyncLoadCode = [];
-                const syncLoadCode = [];
+                const loadCode = [];
                 // filter duplicate externals by libraryName or package name to avoid loading the same external multiple times. We keep the last one.
                 const externalsMap = new Map();
+                let layer;
+                if (chunkLayer === externalsLoadingPluginOptions.backgroundLayer) {
+                    layer = 'background';
+                }
+                else if (chunkLayer === externalsLoadingPluginOptions.mainThreadLayer) {
+                    layer = 'mainThread';
+                }
+                else {
+                    return '';
+                }
                 for (const [pkgName, external] of Object.entries(externalsLoadingPluginOptions.externals)) {
                     externalsMap.set(external.libraryName ?? pkgName, external);
                 }
@@ -79,7 +80,7 @@ export class ExternalsLoadingPlugin {
                 if (externals.length === 0) {
                     return '';
                 }
-                const runtimeGlobalsInit = `${getLynxExternalGlobal(layer)} = {};`;
+                const runtimeGlobalsInit = `${getLynxExternalGlobal()} = {};`;
                 const loadExternalFunc = `
 function createLoadExternalAsync(handler, sectionPath) {
   return new Promise((resolve, reject) => {
@@ -132,17 +133,16 @@ function createLoadExternalSync(handler, sectionPath, timeout) {
                     hasUrlLibraryNamePairInjected.add(hash);
                     fetchCode.push(`const handler${i} = lynx.fetchBundle(${JSON.stringify(url)}, {});`);
                     if (async) {
-                        asyncLoadCode.push(`${getLynxExternalGlobal(layer)}[${JSON.stringify(libraryNameStr)}] = createLoadExternalAsync(handler${i}, ${JSON.stringify(layerOptions.sectionPath)});`);
+                        loadCode.push(`${getLynxExternalGlobal()}[${JSON.stringify(libraryNameStr)}] = createLoadExternalAsync(handler${i}, ${JSON.stringify(layerOptions.sectionPath)});`);
                         continue;
                     }
-                    syncLoadCode.push(`${getLynxExternalGlobal(layer)}[${JSON.stringify(libraryNameStr)}] = createLoadExternalSync(handler${i}, ${JSON.stringify(layerOptions.sectionPath)}, ${timeout});`);
+                    loadCode.push(`${getLynxExternalGlobal()}[${JSON.stringify(libraryNameStr)}] = createLoadExternalSync(handler${i}, ${JSON.stringify(layerOptions.sectionPath)}, ${timeout});`);
                 }
                 return [
                     runtimeGlobalsInit,
                     loadExternalFunc,
                     fetchCode,
-                    asyncLoadCode,
-                    syncLoadCode,
+                    loadCode,
                 ].flat().join('\n');
             }
         }
@@ -159,7 +159,19 @@ function createLoadExternalSync(handler, sectionPath, timeout) {
         compiler.hooks.compilation.tap(ExternalsLoadingRuntimeModule.name, compilation => {
             compilation.hooks.additionalTreeRuntimeRequirements
                 .tap(ExternalsLoadingRuntimeModule.name, (chunk) => {
-                compilation.addRuntimeModule(chunk, new ExternalsLoadingRuntimeModule());
+                const modules = compilation.chunkGraph.getChunkModulesIterable(chunk);
+                let layer;
+                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({ layer }));
             });
         });
     }
@@ -182,7 +194,7 @@ function createLoadExternalSync(handler, sectionPath, timeout) {
                 const isAsync = externals[request]?.async ?? true;
                 const libraryName = externals[request]?.libraryName ?? request;
                 return callback(undefined, [
-                    getLynxExternalGlobal(currentLayer),
+                    getLynxExternalGlobal(),
                     ...(Array.isArray(libraryName) ? libraryName : [libraryName]),
                 ], isAsync ? 'promise' : undefined);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/externals-loading-webpack-plugin-canary",
-  "version": "0.0.1-canary-20251217-27dea6e6",
+  "version": "0.0.1-canary-20251222-4d689a71",
   "description": "A webpack plugin to load lynx external bundles.",
   "keywords": [
     "webpack",