debug alternative remote devtools (#3836)

* debug alternative remote devtools

* update rspack

* fix single runtime for rspack

* fix single runtime for rspack

---------

Co-authored-by: ScriptedAlchemy <[email protected]>

Author: ScriptedAlchemy

angular14-react/pnpm-lock.yaml

@@ -11,4 +11,4 @@ packages:
   - '!nextjs-dynamic-ssr/*'
   - '!cra-react-app-rewired/*'
   - '!runtime-plugins/remote-router'
-  - '!react-manifest-example'
+  - '!react-manifest-example/*'

pnpm-lock.yaml

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import './App.css';
 declare const App: (info?: {
     abc?: string;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default App;

pnpm-workspace.yaml

@@ -1,2 +1 @@
-/// <reference types="react" />
-export default function Button(): JSX.Element;
+export default function Button(): import("react/jsx-runtime").JSX.Element;

react-manifest-example/host/@mf-types/remote1/compiled-types/app.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export default function Button(): JSX.Element;
+export default function Button(): import("react/jsx-runtime").JSX.Element;

react-manifest-example/host/@mf-types/remote1/compiled-types/button.d.ts

@@ -4,7 +4,8 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "start": "pnpm run --filter react-manifest-example_* --parallel dev",
+    "preinstall": "find . -name \"noexist\" -type d -prune -exec rm -rf '{}' +; pnpm install --ignore-scripts",
+    "start": "pnpm run --filter react-manifest-example_** --parallel dev",
     "build": "pnpm run --filter react-manifest-example_* build",
     "serve": "pnpm run --filter react-manifest-example_* --parallel serve",
     "clean": "pnpm run --filter react-manifest-example_* --parallel clean"

react-manifest-example/host/@mf-types/remote2/compiled-types/button.d.ts

@@ -2,4 +2,4 @@ packages:
  - host
  - remote1
  - remote2
- 
+ - remote2_alternative

react-manifest-example/package.json

@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```

react-manifest-example/pnpm-lock.yaml

@@ -0,0 +1,24 @@
+{
+  "name": "react-manifest-example_remote2_alternative",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "@module-federation/enhanced": "^0.1.12",
+    "antd": "^5.16.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^0.6.3",
+    "@rsbuild/plugin-react": "^0.6.3",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "^5.4.5"
+  }
+}

react-manifest-example/pnpm-workspace.yaml

@@ -0,0 +1,28 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
+
+export default defineConfig({
+  server: {
+    port: 3003,
+  },
+  dev: {
+    // It is necessary to configure assetPrefix, and in the production environment, you need to configure output.assetPrefix
+    assetPrefix: 'http://localhost:3003',
+  },
+  tools: {
+    rspack: (config, { appendPlugins }) => {
+      config.output!.uniqueName = 'app2a';
+      appendPlugins([
+        new ModuleFederationPlugin({
+          name: 'remote2',
+          exposes: {
+            './button': './src/button.tsx',
+          },
+          shared: ['react', 'react-dom'],
+        }),
+      ]);
+    },
+  },
+  plugins: [pluginReact()],
+});

react-manifest-example/remote2_alternative/README.md

@@ -0,0 +1,27 @@
+/* body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+} */
+
+
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}

react-manifest-example/remote2_alternative/package.json

@@ -0,0 +1,39 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route, MemoryRouter, Link } from 'react-router-dom';
+import './App.css';
+import { Image } from 'antd';
+
+function Home(){
+  return <div>hello sub2 home page</div>
+}
+
+function Detail(){
+  return <>
+   <div>hello sub2 detail page</div>
+    <Image
+      width={200}
+      src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
+    />
+  </>
+}
+
+const App = (info: {abc?: number}) => {
+  return (
+    <>
+      <ul>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/detail">Detail</Link>
+        </li>
+      </ul>
+      <Routes>
+        <Route path="/" Component={Home}/>
+        <Route path="/detail" Component={Detail}/>
+      </Routes>
+    </>
+  );
+};
+
+export default App;

react-manifest-example/remote2_alternative/rsbuild.config.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+//@ts-ignore
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <React.StrictMode>
+    <App basename={'/remote2'}/>
+  </React.StrictMode>,
+);

react-manifest-example/remote2_alternative/src/App.css

@@ -0,0 +1,3 @@
+export default function Button() {
+    return <div style={{background: 'red'}}>Button from elsewhere</div>;
+}

react-manifest-example/remote2_alternative/src/App.tsx

@@ -0,0 +1 @@
+/// <reference types="@rsbuild/core/types" />

react-manifest-example/remote2_alternative/src/bootstrap.tsx

@@ -0,0 +1 @@
+import('./bootstrap');

react-manifest-example/remote2_alternative/src/button.tsx

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true
+  },
+  "include": ["src"]
+}