feat(example): improve design (#116)

Author: gioboa

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "editor.codeActionsOnSave": {
-    "source.organizeImports": "explicit",
-    "source.fixAll": "explicit"
+    "source.organizeImports": "always",
+    "source.fixAll": "always"
   },
   "editor.formatOnSave": true
 }

README.md

@@ -19,6 +19,8 @@ This plugin makes Module Federation work together with [Vite](https://vitejs.dev
 
 ## Try this crazy example with all these bundlers together
 
+<img src="./docs/multi-example.png"/>
+
 <p float="left">
   <img src="./docs/vite.webp" width="150" />
   <img src="./docs/webpack.webp" width="160" /> 

docs/multi-example.png

@@ -10,16 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@module-federation/vite": "workspace:*",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "@module-federation/vite": "workspace:*"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "globals": "^15.9.0",
+    "tailwindcss": "^3.4.13",
     "vite": "^5.4.1"
   }
 }

examples/vite-webpack-rspack/host/package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

examples/vite-webpack-rspack/host/postcss.config.cjs

@@ -0,0 +1,47 @@
+import React, { lazy, StrictMode, Suspense } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Footer } from './components/Footer';
+import { Header } from './components/Header';
+import './index.css';
+
+const RemoteProduct = lazy(
+  () =>
+    // @ts-ignore
+    import('remote/Product')
+);
+const RspackReviews = lazy(
+  () =>
+    // @ts-ignore
+    import('rspack/Reviews')
+);
+const WebpackRelated = lazy(
+  () =>
+    // @ts-ignore
+    import('webpack/Related')
+);
+
+const App = () => {
+  return (
+    <div className="bg-white">
+      <Header />
+      <main className="mx-auto mt-8 max-w-2xl px-4 pb-16 sm:px-6 sm:pb-24 lg:max-w-7xl lg:px-8">
+        <Suspense fallback="Loading...">
+          <RemoteProduct />
+        </Suspense>
+        <Suspense fallback="Loading...">
+          <RspackReviews />
+        </Suspense>
+        <Suspense fallback="Loading...">
+          <WebpackRelated />
+        </Suspense>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

examples/vite-webpack-rspack/host/src/App.css

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default () => (
+  <a href="#" className="p-2 text-gray-400 hover:text-gray-500 lg:ml-4">
+    <span className="sr-only">Account</span>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      aria-hidden="true"
+      data-slot="icon"
+      className="h-6 w-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
+      ></path>
+    </svg>
+  </a>
+);