improved examples with MUI and etc (#55)

module-federation · Aug 15, 2024 · c4482ec · c4482ec
1 parent a4dcdd3
commit c4482ec
Show file tree

Hide file tree

Showing 15 changed files with 620 additions and 74 deletions.
diff --git a/examples/rust-vite/vite-remote/src/main.jsx b/examples/rust-vite/vite-remote/src/main.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 
 //@ts-ignore

diff --git a/examples/vite-vite/vite-host/package.json b/examples/vite-vite/vite-host/package.json
@@ -3,9 +3,9 @@
   "version": "0.0.3",
   "type": "module",
   "scripts": {
-    "dev": "vite --force --port 5175",
+    "dev": "vite --force",
     "build": "vite build",
-    "preview": "vite build && http-server --cors -p 5175 dist"
+    "preview": "vite build && vite preview"
   },
   "dependencies": {
     "@module-federation/vite": "workspace:*",
@@ -21,4 +21,4 @@
     "vite-plugin-top-level-await": "^1.4.4",
     "http-server": "^14.1.1"
   }
-}
+}
diff --git a/examples/vite-vite/vite-host/src/App.jsx b/examples/vite-vite/vite-host/src/App.jsx
@@ -7,15 +7,20 @@ import Button from 'remote3/button';
 import { AgGridDemo } from '@namespace/viteViteRemote/AgGridDemo';
 import App1 from '@namespace/viteViteRemote/App1';
 import { App2 } from '@namespace/viteViteRemote/App2';
+import { MuiDemo } from '@namespace/viteViteRemote/MuiDemo';
 import { ref } from 'vue';
 
-console.log('Share vue', ref);
+console.log('Share Vue', ref);
 console.log('Share React', R, RD);
 
 export default function () {
   return (
     <div>
-      Vite React
+      <p>
+        Vite React (v {R.version}) app running from Host in{' '}
+        <i> {import.meta.env.DEV ? ' Dev ' : ' prod '} mode </i>
+      </p>
+      <hr />
       <h2>Button</h2>
       <Button />
       <h2>Remote2App</h2>
@@ -28,6 +33,8 @@ export default function () {
       <App2 />
       <h2>Vite Remote AgGridDemo</h2>
       <AgGridDemo />
+      <h3>Vite Remote MuiDemo</h3>
+      <MuiDemo />
     </div>
   );
-}
+}
diff --git a/examples/vite-vite/vite-host/src/mfPlugins.js b/examples/vite-vite/vite-host/src/mfPlugins.js
@@ -1,8 +1,19 @@
 const runtimePlugin = () => {
   return {
     name: 'module-federation-example-plugin',
+    beforeInit(args) {
+      return args;
+    },
+    init(args) {
+      console.log('init: ', args);
+      return args;
+    },
+    beforeLoadShare(args) {
+      console.log('beforeLoadShare: ', args);
+      return args;
+    },
     beforeRequest(args) {
-      console.log('before request hook');
+      console.log('before request hook', args);
       return args;
     },
   };

diff --git a/examples/vite-vite/vite-host/vite.config.js b/examples/vite-vite/vite-host/vite.config.js
@@ -9,6 +9,9 @@ export default defineConfig({
     open: true,
     port: 5175,
   },
+  preview: {
+    port: 5175,
+  },
   // base: 'http://localhost:5175',
   plugins: [
     react(),

diff --git a/examples/vite-vite/vite-remote/package.json b/examples/vite-vite/vite-remote/package.json
@@ -3,16 +3,19 @@
   "version": "0.0.3",
   "type": "module",
   "scripts": {
-    "dev": "vite --force --port 5176",
+    "dev": "vite --force",
     "build": "vite build",
-    "preview": "vite build && http-server --cors -p 5176 dist"
+    "preview": "vite build&&vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
     "@module-federation/vite": "workspace:*",
+    "@mui/material": "^5.13.4",
     "ag-grid-community": "^30.2.0",
     "ag-grid-react": "^30.2.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "sass-embedded": "^1.77.8",
     "vue": "^3.4.37",
     "vue-router": "^4.4.3"

diff --git a/examples/vite-vite/vite-remote/src/AgGridDemo.jsx b/examples/vite-vite/vite-remote/src/AgGridDemo.jsx
@@ -2,9 +2,10 @@ import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import { AgGridReact } from 'ag-grid-react';
 import { useState } from 'react';
+import './agGrid.css';
 
 
-export const AgGridDemo = ({  }) => {
+export const AgGridDemo = ({ }) => {
   const [rowData] = useState([
     { make: 'Toyota', model: 'Celica', price: 35000 },
     { make: 'Ford', model: 'Mondeo', price: 32000 },

diff --git a/examples/vite-vite/vite-remote/src/App1.jsx b/examples/vite-vite/vite-remote/src/App1.jsx
@@ -1,9 +1,12 @@
 import React from 'react';
+import vueImg from "./assets/vue.svg";
 
 export default function () {
   return (
     <div style={{ background: 'yellow', padding: 30 }}>
-      Vite react App1 as default export via remote
+      <img src={vueImg} />
+      Vite React App1 as default export via remote in
+      <i>{import.meta.env.DEV ? ' Dev ' : ' prod '}</i> mode
     </div>
   );
 }
diff --git a/examples/vite-vite/vite-remote/src/App2.jsx b/examples/vite-vite/vite-remote/src/App2.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import "./app2.sass";
 
 console.log("App2 shared React", React, ReactDOM)
 export function App2() {
     return (
-        <div class="container">
-            Vite react App2 as named export via remote with Sass use
+        <div className="container">
+            Vite react (v. {React.version})App2 as named export via remote with Sass use
         </div>
     );
 }
diff --git a/examples/vite-vite/vite-remote/src/Mui5Widget.module.css b/examples/vite-vite/vite-remote/src/Mui5Widget.module.css
@@ -0,0 +1,12 @@
+.container {
+    padding: 20px;
+    border: 2px;
+    border-style: solid;
+    border-color: cadetblue;
+  }
+
+  .myButton {
+    color: black;
+    background-color: blueviolet;
+    font-size: 10px;
+  }
diff --git a/examples/vite-vite/vite-remote/src/MuiDemo.jsx b/examples/vite-vite/vite-remote/src/MuiDemo.jsx
@@ -0,0 +1,96 @@
+import { css } from '@emotion/react';
+import { createTheme, Paper, StyledEngineProvider, ThemeProvider, Typography } from '@mui/material';
+import Button from '@mui/material/Button';
+import React from 'react';
+import styles from './Mui5Widget.module.css';
+
+const FooterClasses = {
+    root: {
+        padding: '10px',
+    },
+};
+
+// Emotion
+const emotionClass = css`
+  background-color: orange;
+  color: red;
+  border: 1px solid black;
+  font-size: 20px;
+  margin: 10px;
+`;
+
+// Create Theme
+const theme = createTheme({
+    palette: {
+        background: {
+            paper: '#FF0000',
+        },
+        text: {
+            primary: '#173A5E',
+            secondary: '#46505A',
+        },
+        action: {
+            active: '#001E3C',
+        },
+    },
+    components: {
+        // Name of the component
+        MuiButtonBase: {
+            defaultProps: {
+                // The props to change the default for.
+                disableRipple: true, // No more ripple, on the whole application 💣!
+            },
+        },
+        MuiButton: {
+            styleOverrides: {
+                // Name of the slot
+                root: {
+                    // Some CSS
+                    fontSize: '1rem',
+                    fontFamily: 'Arial',
+                    margin: 10,
+                    border: '2px solid yellow',
+                },
+            },
+        },
+    },
+});
+
+export const MuiDemo = ({ }) => {
+    return (
+        <StyledEngineProvider injectFirst>
+            <div className={styles.container}>
+                <div>
+                    <Button variant="contained">Button OutSide Theme</Button>
+                </div>
+                <div>
+                    <ThemeProvider theme={theme}>
+                        <Button variant="contained">Button Theme Styled </Button>
+                    </ThemeProvider>
+                </div>
+                <div>
+                    <ThemeProvider theme={theme}>
+                        <Button variant="contained" sx={{ bgcolor: 'background.paper' }}>
+                            Button Theme Styled overriden
+                        </Button>
+                    </ThemeProvider>
+                </div>
+                <div>
+                    <Button variant="contained" css={emotionClass}>
+                        Button Emotion Styled
+                    </Button>
+                </div>
+
+                <div>
+                    <Button variant="contained" className={styles.myButton}>
+                        Button CSS Module Styled
+                    </Button>
+                </div>
+
+                <Paper component="footer" sx={FooterClasses.root} elevation={3} id="footer-paper-container">
+                    <Typography variant="subtitle1">Text inside typography</Typography>
+                </Paper>
+            </div>
+        </StyledEngineProvider>
+    );
+};
diff --git a/examples/vite-vite/vite-remote/src/agGrid.css b/examples/vite-vite/vite-remote/src/agGrid.css
@@ -0,0 +1,15 @@
+#grid1 .ag-header-cell {
+    background-color: #b02e2e;
+    }
+
+    #grid1 .ag-row {
+    font-weight: bold;
+    }
+
+    #grid2 .ag-header-cell {
+    background-color: #26ea2c;
+    }
+
+    #grid2 .ag-row {
+    font-weight: bold;
+    }
diff --git a/examples/vite-vite/vite-remote/src/main.jsx b/examples/vite-vite/vite-remote/src/main.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { AgGridDemo } from './AgGridDemo';
 import App1 from './App1';
 import { App2 } from './App2';
+import { MuiDemo } from './MuiDemo';
+
 
 const root = ReactDOM.createRoot(document.getElementById('app'));
 root.render(
@@ -18,5 +20,7 @@ root.render(
     <h2>AgGridDemo</h2>
     <AgGridDemo />
 
+    <h2>MuiDemo</h2>
+    <MuiDemo />
   </React.StrictMode>
 );
diff --git a/examples/vite-vite/vite-remote/vite.config.js b/examples/vite-vite/vite-remote/vite.config.js
@@ -8,16 +8,21 @@ export default defineConfig({
   server: {
     open: true,
     port: 5176,
+    origin: 'http://localhost:5176',
+  },
+  preview: {
+    port: 5176,
   },
   base: 'http://localhost:5176',
   plugins: [
-    react(),
+    react({ jsxImportSource: '@emotion/react' }),
     federation({
       name: '@namespace/viteViteRemote',
       exposes: {
         './App1': './src/App1.jsx',
         './App2': './src/App2.jsx',
         './AgGridDemo': './src/AgGridDemo.jsx',
+        './MuiDemo': './src/MuiDemo.jsx',
         '.': './src/App1.jsx',
       },
       filename: 'remoteEntry.js',