chore: use rspack host

Author: 2heal1

modernjs-ssr/host/modern.config.ts

@@ -3,7 +3,7 @@ import { moduleFederationPlugin } from '@module-federation/modern-js';
 
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
-  dev:{
+  dev: {
     // FIXME: it should be removed , related issue: https://github.com/web-infra-dev/modern.js/issues/5999
     host: '0.0.0.0',
   },
@@ -18,7 +18,7 @@ export default defineConfig({
   },
   plugins: [
     // not support data loader in rspack mode yet
-    appTools(),
+    appTools({ bundler: 'experimental-rspack' }),
     moduleFederationPlugin()
   ],
 });

modernjs-ssr/host/src/components/dynamic-remote.tsx

@@ -0,0 +1,19 @@
+import { createRemoteSSRComponent, loadRemote, registerRemotes } from '@modern-js/runtime/mf';
+
+registerRemotes([
+    {
+        name: 'dynamic_provider',
+        entry: 'http://localhost:3008/mf-manifest.json',
+    }
+])
+
+export const DynamicRemoteSSRComponents = createRemoteSSRComponent({
+    loader: () => loadRemote('dynamic_provider/Image'),
+    loading: 'loading...',
+    fallback: ({ error }) => {
+        if (error instanceof Error && error.message.includes('not exist')) {
+            return <div>fallback - not existed id</div>;
+        }
+        return <div>fallback</div>;
+    },
+});

modernjs-ssr/host/src/routes/page.data.ts

@@ -1,7 +1,5 @@
 import { createRemoteSSRComponent, loadRemote, registerRemotes } from '@modern-js/runtime/mf';
-import type { DataLoaderRes } from './page.data'
-import { useRouteLoaderData } from '@modern-js/runtime/router';
-
+import {DynamicRemoteSSRComponents} from '../components/dynamic-remote'
 import './index.css';
 
 const RemoteSSRComponent = createRemoteSSRComponent({
@@ -16,28 +14,13 @@ const RemoteSSRComponent = createRemoteSSRComponent({
   },
 });
 
-const Index = () => {
-  const dataLoader = useRouteLoaderData('page') as DataLoaderRes;
-  registerRemotes(dataLoader.providerList);
 
-  const DynamicRemoteSSRComponents = dataLoader.providerList.map(item => {
-    const { id } = item;
-    const Com = createRemoteSSRComponent({
-      loader: () => loadRemote(id),
-      loading: 'loading...',
-      fallback: ({ error }) => {
-        if (error instanceof Error && error.message.includes('not exist')) {
-          return <div>fallback - not existed id</div>;
-        }
-        return <div>fallback</div>;
-      },
-    });
-    return <Com />
-  })
+
+const Index = () => {
   return (
     <div className="container-box">
       <RemoteSSRComponent />
-      {DynamicRemoteSSRComponents}
+      <DynamicRemoteSSRComponents />
     </div>
   );
 }