feat(webpack/chunk-loading)!: chunkLoading: 'lynx' for Rspack (#400)

<!--
  Thank you for submitting a pull request!

We appreciate the time and effort you have invested in making these
changes. Please ensure that you provide enough information to allow
others to review your pull request.

Upon submission, your pull request will be automatically assigned with
reviewers.

If you want to learn more about contributing to this project, please
visit:
https://github.com/lynx-family/lynx-stack/blob/main/CONTRIBUTING.md.
-->

## Summary

<!-- Can you explain the reasoning behind implementing this change? What
problem or issue does this pull request resolve? -->

This patch deletes the `ChunkLoadingRspackPlugin` and use
`ChunkLoadingWebpackPlugin` directly in Rspack.

We are doing it now since we have implemented all the APIs needed.

- web-infra-dev/rspack#9035
- web-infra-dev/rspack#9092
- web-infra-dev/rspack#9093

> [!CAUTION]
> This is a **BREAKING CHANGE** since you need to use `chunkLoading:
'lynx'` instead of `chunkLoading: 'require'`.

fix: #253 since we do not relay on `hooks.runtimeModule` which could
cause issue.

<!-- It would be helpful if you could provide any relevant context, such
as GitHub issues or related discussions. -->

## Checklist

<!--- Check and mark with an "x" -->

- [ ] Tests updated (or not required).
- [ ] Documentation updated (or not required).

Author: colinaaa

.changeset/bright-loops-walk.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/chunk-loading-webpack-plugin": minor
+---
+
+**BREAKING CHANGE**: Requires `@rspack/core` v1.3.0.

.changeset/smooth-maps-check.md

@@ -0,0 +1,18 @@
+---
+"@lynx-js/chunk-loading-webpack-plugin": minor
+---
+
+**BREAKING CHANGE**: Remove the deprecated `ChunkLoadingRspackPlugin`, use `ChunkLoadingWebpackPlugin` with `output.chunkLoading: 'lynx'` instead.
+
+```js
+import { ChunkLoadingWebpackPlugin } from '@lynx-js/chunk-loading-webpack-plugin';
+
+export default {
+  output: {
+    chunkLoading: 'lynx',
+  },
+  plugins: [
+    new ChunkLoadingWebpackPlugin(),
+  ],
+};
+```

packages/rspeedy/core/src/plugins/chunkLoading.plugin.ts

@@ -29,24 +29,12 @@ export function pluginChunkLoading(): RsbuildPlugin {
             .use(ChunkLoadingWebpackPlugin)
           .end()
           .output
-            // Rspack needs `chunkLoading: 'require'` since we use runtimeModule hook
-            // to override the chunk loading runtime.
-            .chunkLoading('require')
+            .chunkLoading('lynx')
             .chunkFormat('commonjs')
             .iife(false)
           .end()
         }
       })
-
-      api.modifyWebpackChain((chain, { environment }) => {
-        if (isLynx(environment)) {
-          chain
-            .output
-            // For webpack, we directly use `chunkLoading: 'lynx'`.
-            .chunkLoading('lynx')
-            .end()
-        }
-      })
     },
   }
 }

packages/rspeedy/core/test/plugins/__snapshots__/output.plugin.test.ts.snap

@@ -5,7 +5,7 @@ exports[`Plugins - Output > defaults - Production 1`] = `
   "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
   "chunkFilename": "static/js/async/[name].[contenthash:8].js",
   "chunkFormat": "commonjs",
-  "chunkLoading": "require",
+  "chunkLoading": "lynx",
   "filename": "static/js/[name].[contenthash:8].js",
   "hashFunction": "xxhash64",
   "iife": false,
@@ -21,7 +21,7 @@ exports[`Plugins - Output > defaults 1`] = `
   "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
   "chunkFilename": "static/js/async/[name].js",
   "chunkFormat": "commonjs",
-  "chunkLoading": "require",
+  "chunkLoading": "lynx",
   "filename": "static/js/[name].js",
   "hashFunction": "xxhash64",
   "iife": false,
@@ -37,7 +37,7 @@ exports[`Plugins - Output > output.filename 1`] = `
   "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
   "chunkFilename": "static/js/async/[name].js",
   "chunkFormat": "commonjs",
-  "chunkLoading": "require",
+  "chunkLoading": "lynx",
   "filename": "static/js/[name].js",
   "hashFunction": "xxhash64",
   "iife": false,
@@ -53,7 +53,7 @@ exports[`Plugins - Output > output.filename.js 1`] = `
   "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
   "chunkFilename": "static/js/async/[name].js",
   "chunkFormat": "commonjs",
-  "chunkLoading": "require",
+  "chunkLoading": "lynx",
   "filename": "static/js/[name].js",
   "hashFunction": "xxhash64",
   "iife": false,

packages/rspeedy/core/test/plugins/chunkLoading.plugin.test.ts

@@ -11,7 +11,7 @@ describe('Plugins - chunkLoading', () => {
 
     const config = await rspeedy.unwrapConfig()
 
-    expect(config.output?.chunkLoading).toBe('require')
+    expect(config.output?.chunkLoading).toBe('lynx')
     expect(config.output?.chunkFormat).toBe('commonjs')
     expect(
       config.plugins?.some(plugin =>
@@ -82,7 +82,7 @@ describe('Plugins - chunkLoading', () => {
       expect(webConfig?.output?.chunkFormat).not.toBe('commonjs')
       expect(webConfig?.output?.iife).not.toBe(false)
 
-      expect(lynxConfig?.output?.chunkLoading).toBe('require')
+      expect(lynxConfig?.output?.chunkLoading).toBe('lynx')
       expect(lynxConfig?.output?.chunkFormat).toBe('commonjs')
       expect(lynxConfig?.output?.iife).toBe(false)
     })

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

@@ -3,27 +3,18 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
-import type { Compiler } from '@rspack/core';
-
-// @public @deprecated
-export class ChunkLoadingRspackPlugin {
-  constructor(options?: Partial<ChunkLoadingRspackPluginOptions>);
-  apply(compiler: Compiler): void;
-  static defaultOptions: Readonly<Required<ChunkLoadingRspackPluginOptions>>;
-}
 
-// @public
-export interface ChunkLoadingRspackPluginOptions {
-}
+import type { Compiler } from '@rspack/core';
 
 // @public
 export class ChunkLoadingWebpackPlugin {
-  constructor(options?: Partial<ChunkLoadingWebpackPluginOptions>);
-  apply(compiler: Compiler): void;
-  static defaultOptions: Readonly<Required<ChunkLoadingWebpackPluginOptions>>;
+    constructor(options?: Partial<ChunkLoadingWebpackPluginOptions>);
+    apply(compiler: Compiler): void;
+    static defaultOptions: Readonly<Required<ChunkLoadingWebpackPluginOptions>>;
 }
 
 // @public
 export interface ChunkLoadingWebpackPluginOptions {
 }
+
 ```

packages/webpack/chunk-loading-webpack-plugin/package.json

@@ -41,14 +41,16 @@
   },
   "devDependencies": {
     "@lynx-js/test-tools": "workspace:*",
+    "@lynx-js/vitest-setup": "workspace:*",
     "@microsoft/api-extractor": "catalog:",
+    "@rspack/cli": "^1.3.0",
     "@rspack/core": "catalog:rspack",
     "css-loader": "^7.1.2",
     "mini-css-extract-plugin": "^2.9.2",
     "webpack": "^5.98.0"
   },
   "peerDependencies": {
-    "@rspack/core": "^1.0.0"
+    "@rspack/core": "^1.3.0"
   },
   "engines": {
     "node": ">=18"

packages/webpack/chunk-loading-webpack-plugin/src/ChunkLoadingRspackPlugin.ts

@@ -39,7 +39,8 @@ export class ChunkLoadingWebpackPluginImpl {
       const ChunkLoadingRuntimeModule = createChunkLoadingRuntimeModule(
         compiler.webpack,
       );
-      const onceForChunkSet = new WeakSet<Chunk>();
+      // TODO(colinaaa): enable this after https://github.com/web-infra-dev/rspack/issues/9849 is fixed.
+      // const onceForChunkSet = new WeakSet<Chunk>();
 
       const globalChunkLoading = compilation.outputOptions.chunkLoading;
       /**
@@ -55,8 +56,8 @@ export class ChunkLoadingWebpackPluginImpl {
       };
 
       const handler = (chunk: Chunk, runtimeRequirements: Set<string>) => {
-        if (onceForChunkSet.has(chunk)) return;
-        onceForChunkSet.add(chunk);
+        // if (onceForChunkSet.has(chunk)) return;
+        // onceForChunkSet.add(chunk);
         if (!isEnabledForChunk(chunk)) return;
         runtimeRequirements.add(RuntimeGlobals.getChunkUpdateScriptFilename);
         runtimeRequirements.add(RuntimeGlobals.moduleFactoriesAddOnly);

packages/webpack/chunk-loading-webpack-plugin/src/ChunkLoadingWebpackPlugin.ts

@@ -10,7 +10,6 @@
 
 import type { Compiler } from '@rspack/core';
 
-import { ChunkLoadingRspackPluginImpl } from './ChunkLoadingRspackPlugin.js';
 import { ChunkLoadingWebpackPluginImpl } from './ChunkLoadingWebpackPlugin.js';
 
 /**
@@ -80,16 +79,9 @@ export class ChunkLoadingWebpackPlugin {
       ChunkLoadingWebpackPlugin.defaultOptions,
       this.options,
     );
-    if (compiler.webpack.rspackVersion) {
-      new ChunkLoadingRspackPluginImpl(compiler, options);
-    } else {
-      new ChunkLoadingWebpackPluginImpl(
-        compiler as unknown as import('webpack').Compiler,
-        options,
-      );
-    }
+    new ChunkLoadingWebpackPluginImpl(
+      compiler as unknown as import('webpack').Compiler,
+      options,
+    );
   }
 }
-
-export { ChunkLoadingRspackPlugin } from './ChunkLoadingRspackPlugin.js';
-export type { ChunkLoadingRspackPluginOptions } from './ChunkLoadingRspackPlugin.js';