fix(rspeedy/core): chunk loading on Web platform

.changeset/shy-pears-serve.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/rspeedy": patch
+---
+
+Use `chunkLoading: 'import-scripts'` for Web platform

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

@@ -6,13 +6,25 @@ import type { RsbuildPlugin } from '@rsbuild/core'
 
 import { ChunkLoadingWebpackPlugin } from '@lynx-js/chunk-loading-webpack-plugin'
 
+import { isLynx } from '../utils/is-lynx.js'
+import { isWeb } from '../utils/is-web.js'
+
 export function pluginChunkLoading(): RsbuildPlugin {
   return {
     name: 'lynx:rsbuild:chunk-loading',
     setup(api) {
-      api.modifyBundlerChain(chain => {
-        // dprint-ignore
-        chain
+      api.modifyBundlerChain((chain, { environment }) => {
+        if (isWeb(environment)) {
+          chain
+            .output
+            .chunkLoading('import-scripts')
+            .end()
+          return
+        }
+
+        if (isLynx(environment)) {
+          // dprint-ignore
+          chain
           .plugin('lynx:chunk-loading')
             .use(ChunkLoadingWebpackPlugin)
           .end()
@@ -23,14 +35,17 @@ export function pluginChunkLoading(): RsbuildPlugin {
             .chunkFormat('commonjs')
             .iife(false)
           .end()
+        }
       })
 
-      api.modifyWebpackChain(chain => {
-        chain
-          .output
-          // For webpack, we directly use `chunkLoading: 'lynx'`.
-          .chunkLoading('lynx')
-          .end()
+      api.modifyWebpackChain((chain, { environment }) => {
+        if (isLynx(environment)) {
+          chain
+            .output
+            // For webpack, we directly use `chunkLoading: 'lynx'`.
+            .chunkLoading('lynx')
+            .end()
+        }
       })
     },
   }

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

@@ -5,13 +5,22 @@
 import type { RsbuildPlugin } from '@rsbuild/core'
 
 import { getESVersionTarget } from '../utils/getESVersionTarget.js'
+import { isWeb } from '../utils/is-web.js'
 
 export function pluginTarget(): RsbuildPlugin {
   return {
     name: 'lynx:rsbuild:target',
     setup(api) {
-      api.modifyBundlerChain((options) => {
-        options.target([getESVersionTarget()])
+      api.modifyBundlerChain((options, { environment }) => {
+        if (isWeb(environment)) {
+          options.target([
+            getESVersionTarget(),
+            // Add `target: 'web'` to make Rsbuild inject HMR related code.
+            'web',
+          ])
+        } else {
+          options.target([getESVersionTarget()])
+        }
       })
     },
   }

packages/rspeedy/core/src/utils/is-lynx.ts

@@ -0,0 +1,11 @@
+// Copyright 2024 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.
+
+import type { EnvironmentContext } from '@rsbuild/core'
+
+export function isLynx(environment: EnvironmentContext | string): boolean {
+  return typeof environment === 'string'
+    ? environment === 'lynx'
+    : environment.name === 'lynx'
+}

packages/rspeedy/core/src/utils/is-web.ts

@@ -0,0 +1,11 @@
+// Copyright 2024 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.
+
+import type { EnvironmentContext } from '@rsbuild/core'
+
+export function isWeb(environment: EnvironmentContext | string): boolean {
+  return typeof environment === 'string'
+    ? environment === 'web'
+    : environment.name === 'web'
+}

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

@@ -36,4 +36,71 @@ describe('Plugins - chunkLoading', () => {
       ),
     ).toBeTruthy()
   })
+
+  describe('Web', () => {
+    test('Rspack', async () => {
+      const rspeedy = await createStubRspeedy({
+        environments: {
+          web: {},
+        },
+      })
+
+      const config = await rspeedy.unwrapConfig()
+
+      expect(config.output?.chunkLoading).toBe('import-scripts')
+      expect(config.output?.chunkFormat).not.toBe('commonjs')
+      expect(config.output?.iife).not.toBe(false)
+    })
+
+    test('Webpack', async () => {
+      const { webpackProvider } = await import('@rsbuild/webpack')
+      const rspeedy = await createStubRspeedy({
+        provider: webpackProvider,
+        environments: {
+          web: {},
+        },
+      })
+
+      const config = await rspeedy.unwrapConfig()
+
+      expect(config.output?.chunkLoading).toBe('import-scripts')
+      expect(config.output?.chunkFormat).not.toBe('commonjs')
+      expect(config.output?.iife).not.toBe(false)
+    })
+
+    test('multiple environments', async () => {
+      const rspeedy = await createStubRspeedy({
+        environments: {
+          web: {},
+          lynx: {},
+        },
+      })
+
+      const [webConfig, lynxConfig] = await rspeedy.initConfigs()
+
+      expect(webConfig?.output?.chunkLoading).toBe('import-scripts')
+      expect(webConfig?.output?.chunkFormat).not.toBe('commonjs')
+      expect(webConfig?.output?.iife).not.toBe(false)
+
+      expect(lynxConfig?.output?.chunkLoading).toBe('require')
+      expect(lynxConfig?.output?.chunkFormat).toBe('commonjs')
+      expect(lynxConfig?.output?.iife).toBe(false)
+    })
+
+    test('override with tools.rspack.output.chunkLoading', async () => {
+      const rspeedy = await createStubRspeedy({
+        environments: {
+          web: {
+            tools: {
+              rspack: { output: { chunkLoading: 'import' } },
+            },
+          },
+        },
+      })
+
+      const config = await rspeedy.unwrapConfig()
+
+      expect(config.output?.chunkLoading).toBe('import')
+    })
+  })
 })

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

@@ -28,4 +28,30 @@ describe('target.plugin', () => {
 
     expect(config.target).toEqual(['es2019'])
   })
+
+  test('Web', async () => {
+    const rspeedy = await createStubRspeedy({
+      environments: {
+        web: {},
+      },
+    })
+
+    const config = await rspeedy.unwrapConfig()
+
+    expect(config.target).toEqual(['es2019', 'web'])
+  })
+
+  test('multiple environments', async () => {
+    const rspeedy = await createStubRspeedy({
+      environments: {
+        web: {},
+        lynx: {},
+      },
+    })
+
+    const [webConfig, lynxConfig] = await rspeedy.initConfigs()
+
+    expect(webConfig?.target).toEqual(['es2019', 'web'])
+    expect(lynxConfig?.target).toEqual(['es2019'])
+  })
 })

packages/web-platform/web-tests/tests/main-thread-apis.test.ts

@@ -9,23 +9,13 @@ import {
 } from '@lynx-js/web-constants';
 import { test, expect } from './coverage-fixture.js';
 import type { Page } from '@playwright/test';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import fs from 'node:fs/promises';
-import v8toIstanbul from 'v8-to-istanbul';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
 
 const wait = async (ms: number) => {
   await new Promise((resolve) => {
     setTimeout(resolve, ms);
   });
 };
 
-const getTitle = (titlePath: string[]) => {
-  return path.join(...[titlePath.pop()!, titlePath.pop()!].reverse());
-};
-
 test.describe('main thread api tests', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(`/main-thread-test.html`, {

packages/web-platform/web-tests/tests/react.spec.ts

@@ -4,12 +4,6 @@
 import { swipe, dragAndHold } from './utils.js';
 import { test, expect } from './coverage-fixture.js';
 import type { Page } from '@playwright/test';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import fs from 'node:fs/promises';
-import v8toIstanbul from 'v8-to-istanbul';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
 
 const wait = async (ms: number) => {
   await new Promise((resolve) => {
@@ -40,7 +34,7 @@
 
 const expectHasText = async (page: Page, text: string) => {
   const hasText = (await page.getByText(text).count()) === 1;
   await expect(hasText).toBe(true);
 };
 
 const expectNoText = async (page: Page, text: string) => {
@@ -324,7 +318,7 @@
     test('api-getJSModule', async ({ page }, { title }) => {
       await goto(page, title);
       await wait(1000);
       expect(await page.locator('#target').getAttribute('style')).toContain(
         'pink',
       );
     });
@@ -498,7 +492,7 @@
       await goto(page, title);
       await wait(200);
       const target = await page.locator('lynx-view');
       expect(target).toHaveCSS('display', 'none');
     });
 
     test('api-preheat', async ({ page }, { title }) => {
@@ -964,7 +958,7 @@
         await expect(target).toHaveCSS('height', '100px');
       },
     );
-    test.fixme( // TODO(@colinaaa): update the template plugin
+    test(
       'config-splitchunk-single-vendor',
       async ({ page }, { title }) => {
         await goto(page, title, true);
@@ -973,7 +967,7 @@
         await expect(target).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
       },
     );
-    test.fixme( // TODO(@colinaaa): update the template plugin
+    test(
       'config-splitchunk-split-by-experience',
       async ({ page }, { title }) => {
         await goto(page, title, true);
@@ -982,7 +976,7 @@
         await expect(target).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
       },
     );
-    test.fixme( // TODO(@colinaaa): update the template plugin
+    test(
       'config-splitchunk-split-by-module',
       async ({ page }, { title }) => {
         await goto(page, title, true);
@@ -992,16 +986,6 @@
       },
     );
 
-    test.fixme( // TODO(@colinaaa): update the template plugin
-      'config-splitchunk-error-assertPrefix',
-      async ({ page }, { title }) => {
-        await goto(page, title, true);
-        await wait(1500);
-        const target = page.locator('#target');
-        await expect(target).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
-      },
-    );
-
     test('config-mode-dev-with-all-in-one', async ({ page }, { title }) => {
       await goto(page, title, true);
       await wait(100);
@@ -1274,7 +1258,7 @@
           await wait(200);
           // --initialtextinitial
           let count = await page.getByText('--').count();
           expect(count).toBe(1);
           count = await page.getByText('initial').count();
           expect(count).toBeGreaterThanOrEqual(1);
           await page.locator('#target').click();
@@ -1536,7 +1520,7 @@
         }) => {
           await goto(page, title);
           await wait(300);
           await page.evaluate(() => {
             document.querySelector('lynx-view')!.shadowRoot!.querySelector(
               'scroll-view',
             )!.scrollTop = 200;
@@ -1942,7 +1926,7 @@
         await wait(100);
         await page.locator('input').fill('foobar');
         const result = await page.locator('.result').first().innerText();
         expect(result).toBe('foobar');
       });
       // input/bindinput test-case end
     });

packages/web-platform/web-tests/tests/react/config-splitchunk-single-vendor/rspeedy.config.ts

@@ -22,8 +22,11 @@ export default defineConfig({
   },
   performance: {
     chunkSplit: {
-      // Rspack 1.2.8 introduced a bug that causes the single-vendor strategy to fail.
-      // strategy: 'single-vendor',
+      strategy: 'single-vendor',
+      override: {
+        // See: https://github.com/web-infra-dev/rspack/issues/9812
+        filename: '[name].[contenthash:8].js',
+      },
     },
   },
 });

packages/web-platform/web-tests/tests/react/config-splitchunk-split-by-experience/rspeedy.config.ts

@@ -22,8 +22,11 @@ export default defineConfig({
   },
   performance: {
     chunkSplit: {
-      // Rspack 1.2.8 introduced a bug that causes the split-by-experience strategy to fail.
-      // strategy: 'split-by-experience',
+      strategy: 'split-by-experience',
+      override: {
+        // See: https://github.com/web-infra-dev/rspack/issues/9812
+        filename: '[name].[contenthash:8].js',
+      },
     },
   },
 });

packages/web-platform/web-tests/tests/react/config-splitchunk-split-by-module/rspeedy.config.ts

@@ -22,8 +22,11 @@ export default defineConfig({
   },
   performance: {
     chunkSplit: {
-      // Rspack 1.2.8 introduced a bug that causes the split-by-module strategy to fail.
-      // strategy: 'split-by-module',
+      strategy: 'split-by-module',
+      override: {
+        // See: https://github.com/web-infra-dev/rspack/issues/9812
+        filename: '[name].[contenthash:8].js',
+      },
     },
   },
 });