refactor: initial-chunk-retry and async-chunk-retry should reuse the same default runtime options (#14)

* refactor: initial-chunk-retry and async-chunk-retry should reuse the same default runtime options

* chore: update

* chore: update

Author: SoonIter

playground/rsbuild.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginAssetsRetry } from '../dist';
 
 export default defineConfig({
-  plugins: [pluginAssetsRetry()],
+  plugins: [pluginAssetsRetry(), pluginReact()],
 });

playground/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);
+}

playground/src/App.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import './App.css';
+import CompTest from './CompTest';
+import { ErrorBoundary } from './ErrorBoundary';
+
+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;

playground/src/AsyncCompTest.css

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

playground/src/AsyncCompTest.tsx

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

playground/src/CompTest.css

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

playground/src/CompTest.tsx

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

playground/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 };