fix(plugin-assets-retry): runtime code is cut off by </script> and support es5 (#2115)

Author: SoonIter

e2e/cases/assets-retry/index.test.ts

@@ -0,0 +1,103 @@
+import { expect, test } from '@playwright/test';
+import { dev, gotoPage, proxyConsole } from '@e2e/helper';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginAssetsRetry } from '@rsbuild/plugin-assets-retry';
+import type { PluginAssetsRetryOptions } from '@rsbuild/plugin-assets-retry';
+import type { RequestHandler } from '@rsbuild/shared';
+
+function count404Response(logs: string[]) {
+  let count = 0;
+  for (const log of logs) {
+    if (log.includes('404')) {
+      count++;
+    }
+  }
+  return count;
+}
+
+function createBlockMiddleware({
+  urlPrefix,
+  blockNum,
+}: {
+  urlPrefix: string;
+  blockNum: number;
+}): RequestHandler {
+  let counter = 0;
+  return (req, res, next) => {
+    if (req.url?.startsWith(urlPrefix)) {
+      counter++;
+      // if blockNum is 3, 1 2 3 would be blocked, 4 would be passed
+      if (counter % (blockNum + 1) !== 0) {
+        res.statusCode = 404;
+      }
+      res.setHeader('block-async', counter);
+    }
+    next();
+  };
+}
+
+async function createRsbuildWithMiddleware(
+  middleware: RequestHandler,
+  options: PluginAssetsRetryOptions,
+) {
+  const rsbuild = await dev({
+    cwd: __dirname,
+    rsbuildConfig: {
+      plugins: [pluginReact(), pluginAssetsRetry(options)],
+      dev: {
+        hmr: false,
+        liveReload: false,
+        setupMiddlewares: [
+          (middlewares, _server) => {
+            middlewares.unshift(middleware);
+          },
+        ],
+      },
+    },
+  });
+  return rsbuild;
+}
+
+test('@rsbuild/plugin-assets-retry should work when blocking initial chunk index.js`', async ({
+  page,
+}) => {
+  process.env.DEBUG = 'rsbuild';
+  const { logs, restore } = proxyConsole();
+  const blockedMiddleware = createBlockMiddleware({
+    blockNum: 3,
+    urlPrefix: '/static/js/index.js',
+  });
+  const rsbuild = await createRsbuildWithMiddleware(blockedMiddleware, {});
+
+  await gotoPage(page, rsbuild);
+  const compTestElement = page.locator('#comp-test');
+  await expect(compTestElement).toHaveText('Hello CompTest');
+  const blockedResponseCount = count404Response(logs);
+  expect(blockedResponseCount).toBe(3);
+  await rsbuild.close();
+  restore();
+  delete process.env.DEBUG;
+});
+
+test('@rsbuild/plugin-assets-retry should work with minified runtime code when blocking initial chunk index.js`', async ({
+  page,
+}) => {
+  process.env.DEBUG = 'rsbuild';
+  const { logs, restore } = proxyConsole();
+  const blockedMiddleware = createBlockMiddleware({
+    blockNum: 3,
+    urlPrefix: '/static/js/index.js',
+  });
+  const rsbuild = await createRsbuildWithMiddleware(blockedMiddleware, {
+    minify: true,
+  });
+
+  await gotoPage(page, rsbuild);
+  const compTestElement = page.locator('#comp-test');
+  await expect(compTestElement).toHaveText('Hello CompTest');
+  const blockedResponseCount = count404Response(logs);
+  expect(blockedResponseCount).toBe(3);
+  await rsbuild.close();
+  restore();
+  delete process.env.DEBUG;
+});

e2e/cases/assets-retry/src/App.css

@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}

e2e/cases/assets-retry/src/App.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import './App.css';
+import { ErrorBoundary } from './ErrorBoundary';
+import CompTest from './CompTest';
+
+const AsyncCompTest = React.lazy(() => import('./AsyncCompTest'));
+
+const App = () => {
+  return (
+    <div className="content">
+      <div style={{ border: '1px solid white', padding: 20 }}>
+        <ErrorBoundary elementId="comp-test-error">
+          <CompTest />
+        </ErrorBoundary>
+      </div>
+      <div style={{ border: '1px solid white', padding: 20 }}>
+        <ErrorBoundary elementId='"async-comp-test-error"'>
+          <AsyncCompTest />
+        </ErrorBoundary>
+      </div>
+    </div>
+  );
+};
+
+export default App;

e2e/cases/assets-retry/src/AsyncCompTest.css

@@ -0,0 +1,4 @@
+#async-comp-test {
+  color: white;
+  background-color: darkblue;
+}

e2e/cases/assets-retry/src/AsyncCompTest.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import './AsyncCompTest.css';
+
+export default function AsyncCompTest() {
+  return <div id="async-comp-test">Hello AsyncCompTest</div>;
+}

e2e/cases/assets-retry/src/CompTest.css

@@ -0,0 +1,4 @@
+#comp-test {
+  color: white;
+  background-color: darkblue;
+}

e2e/cases/assets-retry/src/CompTest.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import './CompTest.css';
+
+export default function CompTest() {
+  return <div id="comp-test">Hello CompTest</div>;
+}

e2e/cases/assets-retry/src/ErrorBoundary.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface Props {
+  elementId: string;
+  children: React.ReactNode;
+}
+
+class ErrorBoundary extends React.Component<
+  Props,
+  { hasError: boolean; error: null | Error },
+  unknown
+> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.log(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <pre id={this.props.elementId}>{this.state?.error?.toString()}</pre>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export { ErrorBoundary };

e2e/cases/assets-retry/src/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

packages/plugin-assets-retry/src/runtime/index.ts

@@ -1,3 +1,4 @@
+// rsbuild/initial-chunk/retry
 import type { CrossOrigin } from '@rsbuild/shared';
 import type {
   PluginAssetsRetryOptions,
@@ -99,10 +100,13 @@ function createElement(
     if (attributes.isAsync) {
       script.dataset.rsbuildAsync = '';
     }
-
     return {
       element: script,
-      str: `<script src="${attributes.url}" ${crossOriginAttr} ${retryTimesAttr} ${isAsyncAttr}></script>`,
+      str:
+        // biome-ignore lint/style/useTemplate: use "</" + "script>" instead of script tag to avoid syntax error when inlining in html
+        `<script src="${attributes.url}" ${crossOriginAttr} ${retryTimesAttr} ${isAsyncAttr}>` +
+        '</' +
+        'script>',
     };
   }
   if (origin instanceof HTMLLinkElement) {
@@ -278,7 +282,18 @@ function resourceMonitor(
 
 // @ts-expect-error init is a global function, ignore ts(6133)
 function init(options: PluginAssetsRetryOptions) {
-  const config = Object.assign({}, defaultConfig, options);
+  const config: PluginAssetsRetryOptions = {};
+
+  for (const key in defaultConfig) {
+    // @ts-ignore
+    config[key] = defaultConfig[key];
+  }
+
+  for (const key in options) {
+    // @ts-ignore
+    config[key] = options[key];
+  }
+
   // Normalize config
   if (!Array.isArray(config.type) || config.type.length === 0) {
     config.type = defaultConfig.type;