feat: support set className and style for remote-module

module-federation · Jul 25, 2024 · f69a74e · f69a74e
1 parent 9699311
commit f69a74e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 30 deletions.
diff --git a/apps/router-demo/router-host-2000/src/App.css b/apps/router-demo/router-host-2000/src/App.css
@@ -1,26 +1,3 @@
-/* body {
-  margin: 0;
-  color: #fff;
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  background-image: linear-gradient(to bottom, #020917, #101725);
+.remote1 {
+  background: pink;
 }
-
-.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;
-} */
diff --git a/apps/router-demo/router-host-2000/src/App.tsx b/apps/router-demo/router-host-2000/src/App.tsx
@@ -68,7 +68,7 @@ const App = () => {
   useEffect(() => {
     const refTimeout = setTimeout(() => {
       if (ref && ref.current) {
-        ref.current.style.backgroundColor = 'salmon';
+        ref.current.style.borderRadius = '20px';
       }
     }, 2000)
     return () => {
@@ -83,8 +83,8 @@ const App = () => {
       <Routes>
         <Route path="/" Component={Home} />
         <Route path="/detail/*" Component={Detail} />
-        <Route path="/remote1/*" Component={() => <Remote1App msg={'hello remote1'} ref={ref} />} />
-        <Route path="/remote2/*" Component={() => <Remote2App msg={'hello remote2'} />} />
+        <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="/remote3/*" Component={() => <Remote3App />} />
         <Route path="/memory-router/*" Component={() => <Wraper3 />} />
       </Routes>

diff --git a/packages/bridge/bridge-react/src/remote/index.tsx b/packages/bridge/bridge-react/src/remote/index.tsx
@@ -34,13 +34,15 @@ const RemoteAppWrapper = forwardRef(function (props: RemoteAppParams & ProviderP
       memoryRoute,
       basename,
       providerInfo,
+      className,
+      style,
       ...resProps
     } = props;
 
     const rootRef: React.MutableRefObject<HTMLElement | null> = ref && 'current' in ref ? ref as React.MutableRefObject<HTMLElement | null> : useRef(null);
     const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
     const providerInfoRef = useRef<any>(null);
-    
+
     useEffect(() => {
       const renderTimeout = setTimeout(() => {
         const providerReturn = providerInfo();
@@ -78,7 +80,7 @@ const RemoteAppWrapper = forwardRef(function (props: RemoteAppParams & ProviderP
     }, []);
 
     //@ts-ignore
-    return <div ref={rootRef}></div>;
+    return <div className={className} style={style} ref={rootRef}></div>;
   }
 
   (RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;

diff --git a/packages/bridge/bridge-shared/src/type.ts b/packages/bridge/bridge-shared/src/type.ts
@@ -1,7 +1,10 @@
+import { CSSProperties } from 'react';
 export interface ProviderParams {
   name?: string;
   basename?: string;
   memoryRoute?: { entryPath: string };
+  style?: CSSProperties;
+  className?: string | string[];
 }
 
 export interface RenderFnParams extends ProviderParams {