feat: optimize types

apps/router-demo/router-host-2000/src/App.css

@@ -1,3 +1,3 @@
 .remote1 {
-  background: pink;
+  background: green;
 }

apps/router-demo/router-host-2000/src/App.tsx

@@ -6,6 +6,7 @@ import Navigation from './navigation';
 import Detail from './pages/Detail';
 import Home from './pages/Home';
 import './App.css';
+import styles from './index.module.less';
 
 const FallbackErrorComp = (info: any) => {
   return (
@@ -83,8 +84,8 @@ const App = () => {
       <Routes>
         <Route path="/" Component={Home} />
         <Route path="/detail/*" Component={Detail} />
-        <Route path="/remote1/*" Component={() => <Remote1App className="remote1" msg={'hello remote1'} ref={ref} />} />
-        <Route path="/remote2/*" Component={() => <Remote2App style={{ background: '#d4e8fa' }} msg={'hello remote2'} />} />
+        <Route path="/remote1/*" Component={() => <Remote1App className={styles.remote1} props={{ msg: 'hello remote1' }} ref={ref} />} />
+        <Route path="/remote2/*" Component={() => <Remote2App style={{ background: 'black' }} props={{ msg: 'hello remote2' }} />} />
         <Route path="/remote3/*" Component={() => <Remote3App />} />
         <Route path="/memory-router/*" Component={() => <Wraper3 />} />
       </Routes>

apps/router-demo/router-host-2000/src/index.module.less

@@ -0,0 +1,4 @@
+.remote1 {
+    background: pink;
+}
+

packages/bridge/bridge-react/src/create.tsx

@@ -7,6 +7,7 @@ import {
   ErrorBoundaryPropsWithComponent,
 } from 'react-error-boundary';
 import RemoteApp from './remote';
+
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
 }
@@ -84,18 +85,12 @@ function createLazyRemoteComponent<T, E extends keyof T>(info: {
   });
 }
 
-type RemoteProps = {
-  basename?: ProviderParams['basename'];
-  memoryRoute?: ProviderParams['memoryRoute'];
-  [key: string]: any;
-};
-
 export function createRemoteComponent<T, E extends keyof T>(info: {
   loader: () => Promise<T>;
   loading: React.ReactNode;
   fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
   export?: E;
-}): ForwardRefExoticComponent< PropsWithoutRef<RemoteProps> & RefAttributes<HTMLElement | HTMLDivElement>> {
+}): ForwardRefExoticComponent<PropsWithoutRef<ProviderParams> & RefAttributes<HTMLElement | HTMLDivElement>> {
   // type ExportType = T[E] extends (...args: any) => any
   //   ? ReturnType<T[E]>
   //   : never;

packages/bridge/bridge-react/src/remote/index.tsx

@@ -5,7 +5,6 @@ import { LoggerInstance, pathJoin } from '../utils';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
 
 declare const __APP_VERSION__: string;
-
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
 }
@@ -34,8 +33,6 @@ const RemoteAppWrapper = forwardRef(function (props: RemoteAppParams & ProviderP
       memoryRoute,
       basename,
       providerInfo,
-      className,
-      style,
       ...resProps
     } = props;
 
@@ -80,7 +77,7 @@ const RemoteAppWrapper = forwardRef(function (props: RemoteAppParams & ProviderP
     }, []);
 
     //@ts-ignore
-    return <div className={className} style={style} ref={rootRef}></div>;
+    return <div className={props?.className} style={props?.style} ref={rootRef}></div>;
   }
 
   (RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;

packages/bridge/bridge-shared/src/type.ts

@@ -1,10 +1,11 @@
-import { CSSProperties } from 'react';
-export interface ProviderParams {
+import React from 'react';
+export interface ProviderParams extends React.HTMLAttributes<HTMLDivElement> {
   name?: string;
   basename?: string;
   memoryRoute?: { entryPath: string };
-  style?: CSSProperties;
-  className?: string | string[];
+  props?: {
+    [key: string]: any;
+  }
 }
 
 export interface RenderFnParams extends ProviderParams {