reorg

demo/.gitignore

@@ -0,0 +1 @@
+node_modules

demo/dist/540.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

demo/dist/665.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdemo=self.webpackChunkdemo||[]).push([[665],{665:(e,t,a)=>{a.r(t),a.d(t,{default:()=>c});var r=a(914),l=a.n(r),n=a(435),i=a(101);const c=()=>{const[e,t]=(0,r.useState)(0),[a,c]=(0,r.useState)(!1);(0,r.useEffect)(()=>{const e=setInterval(()=>{t(e=>e>=100?0:e+1)},100);return()=>clearInterval(e)},[]);const o=[{label:"Active Users",value:"1,234",icon:i.IconUsers,color:"blue"},{label:"Total Revenue",value:"$45,678",icon:i.IconChartLine,color:"green"},{label:"Projects",value:"89",icon:i.IconRocket,color:"orange"}];return l().createElement(n.Container,{size:"xl",py:"xl"},l().createElement(n.Stack,{gap:"xl"},l().createElement(n.Group,{justify:"space-between",align:"center"},l().createElement("div",null,l().createElement(n.Title,{order:1},"Demo Application"),l().createElement(n.Text,{c:"dimmed",size:"lg",mt:"xs"},"A sample federated application showcasing module federation")),l().createElement(n.ActionIcon,{size:"lg",variant:"light",loading:a,onClick:()=>{c(!0),setTimeout(()=>c(!1),1500)}},l().createElement(i.IconRefresh,{size:18}))),l().createElement(n.Alert,{icon:l().createElement(i.IconInfoCircle,{size:16}),title:"Welcome!",color:"blue",variant:"light"},"This is a demo application loaded via Module Federation. It demonstrates how microfrontends can be seamlessly integrated into the shell application."),l().createElement(n.SimpleGrid,{cols:{base:1,sm:3},spacing:"md"},o.map(e=>l().createElement(n.Paper,{key:e.label,p:"md",radius:"md",withBorder:!0},l().createElement(n.Group,{justify:"space-between"},l().createElement("div",null,l().createElement(n.Text,{c:"dimmed",size:"sm",fw:500,tt:"uppercase"},e.label),l().createElement(n.Text,{fw:700,size:"xl"},e.value)),l().createElement(e.icon,{size:24,color:`var(--mantine-color-${e.color}-6)`}))))),l().createElement(n.Card,{shadow:"sm",padding:"lg",radius:"md",withBorder:!0},l().createElement(n.Card.Section,{withBorder:!0,inheritPadding:!0,py:"xs"},l().createElement(n.Group,{justify:"space-between"},l().createElement(n.Text,{fw:500},"System Performance"),l().createElement(n.Badge,{color:"green",variant:"light"},"Healthy"))),l().createElement(n.Card.Section,{inheritPadding:!0,py:"md"},l().createElement(n.Stack,{gap:"xs"},l().createElement(n.Text,{size:"sm",c:"dimmed"},"CPU Usage: ",e.toFixed(1),"%"),l().createElement(n.Progress,{value:e,size:"sm",color:"blue",animated:!0})))),l().createElement("div",null,l().createElement(n.Title,{order:2,mb:"md"},"Features"),l().createElement(n.SimpleGrid,{cols:{base:1,sm:2},spacing:"md"},[{title:"Real-time Analytics",description:"Monitor your data in real-time"},{title:"Team Collaboration",description:"Work together seamlessly"},{title:"Cloud Integration",description:"Connect with cloud services"},{title:"Custom Reports",description:"Generate detailed reports"}].map((e,t)=>l().createElement(n.Card,{key:t,shadow:"sm",padding:"lg",radius:"md",withBorder:!0},l().createElement(n.Group,{mb:"xs"},l().createElement(i.IconCheck,{size:16,color:"var(--mantine-color-green-6)"}),l().createElement(n.Text,{fw:500},e.title)),l().createElement(n.Text,{size:"sm",c:"dimmed"},e.description))))),l().createElement(n.Divider,null),l().createElement(n.Group,{justify:"center"},l().createElement(n.Button,{variant:"outline",size:"md"},"View Documentation"),l().createElement(n.Button,{size:"md"},"Get Started"))))}}}]);

demo/dist/81.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

demo/dist/961.js.LICENSE.txt

@@ -0,0 +1,19 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

demo/dist/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Demo App</title><script defer="defer" src="main.js"></script><script defer="defer" src="remoteEntry.js"></script></head><body><div id="root"></div></body></html>

demo/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "dev": "webpack serve --mode development"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@mantine/core": "^7.0.0",
+    "@mantine/hooks": "^7.0.0",
+    "@tabler/icons-react": "^2.40.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.3",
+    "html-webpack-plugin": "^5.5.0",
+    "style-loader": "^3.3.1",
+    "typescript": "^4.9.5",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.7.4"
+  }
+}

demo/public/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Demo App</title>
+</head>
+<body>
+    <div id="root"></div>
+</body>
+</html>

demo/src/App.tsx

@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Container,
+  Title,
+  Text,
+  Card,
+  SimpleGrid,
+  Group,
+  Badge,
+  Button,
+  Stack,
+  Progress,
+  ActionIcon,
+  Paper,
+  Divider,
+  Alert,
+} from '@mantine/core';
+import {
+  IconRocket,
+  IconChartLine,
+  IconUsers,
+  IconRefresh,
+  IconCheck,
+  IconInfoCircle,
+} from '@tabler/icons-react';
+
+const DemoApp: React.FC = () => {
+  const [progress, setProgress] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prev) => (prev >= 100 ? 0 : prev + 1));
+    }, 100);
+    return () => clearInterval(timer);
+  }, []);
+
+  const handleRefresh = () => {
+    setIsLoading(true);
+    setTimeout(() => setIsLoading(false), 1500);
+  };
+
+  const stats = [
+    { label: 'Active Users', value: '1,234', icon: IconUsers, color: 'blue' },
+    { label: 'Total Revenue', value: '$45,678', icon: IconChartLine, color: 'green' },
+    { label: 'Projects', value: '89', icon: IconRocket, color: 'orange' },
+  ];
+
+  const features = [
+    { title: 'Real-time Analytics', description: 'Monitor your data in real-time' },
+    { title: 'Team Collaboration', description: 'Work together seamlessly' },
+    { title: 'Cloud Integration', description: 'Connect with cloud services' },
+    { title: 'Custom Reports', description: 'Generate detailed reports' },
+  ];
+
+  return (
+    <Container size="xl" py="xl">
+      <Stack gap="xl">
+        <Group justify="space-between" align="center">
+          <div>
+            <Title order={1}>Demo Application</Title>
+            <Text c="dimmed" size="lg" mt="xs">
+              A sample federated application showcasing module federation
+            </Text>
+          </div>
+          <ActionIcon
+            size="lg"
+            variant="light"
+            loading={isLoading}
+            onClick={handleRefresh}
+          >
+            <IconRefresh size={18} />
+          </ActionIcon>
+        </Group>
+
+        <Alert icon={<IconInfoCircle size={16} />} title="Welcome!" color="blue" variant="light">
+          This is a demo application loaded via Module Federation. It demonstrates how 
+          microfrontends can be seamlessly integrated into the shell application.
+        </Alert>
+
+        <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="md">
+          {stats.map((stat) => (
+            <Paper key={stat.label} p="md" radius="md" withBorder>
+              <Group justify="space-between">
+                <div>
+                  <Text c="dimmed" size="sm" fw={500} tt="uppercase">
+                    {stat.label}
+                  </Text>
+                  <Text fw={700} size="xl">
+                    {stat.value}
+                  </Text>
+                </div>
+                <stat.icon size={24} color={`var(--mantine-color-${stat.color}-6)`} />
+              </Group>
+            </Paper>
+          ))}
+        </SimpleGrid>
+
+        <Card shadow="sm" padding="lg" radius="md" withBorder>
+          <Card.Section withBorder inheritPadding py="xs">
+            <Group justify="space-between">
+              <Text fw={500}>System Performance</Text>
+              <Badge color="green" variant="light">
+                Healthy
+              </Badge>
+            </Group>
+          </Card.Section>
+
+          <Card.Section inheritPadding py="md">
+            <Stack gap="xs">
+              <Text size="sm" c="dimmed">
+                CPU Usage: {progress.toFixed(1)}%
+              </Text>
+              <Progress value={progress} size="sm" color="blue" animated />
+            </Stack>
+          </Card.Section>
+        </Card>
+
+        <div>
+          <Title order={2} mb="md">Features</Title>
+          <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+            {features.map((feature, index) => (
+              <Card key={index} shadow="sm" padding="lg" radius="md" withBorder>
+                <Group mb="xs">
+                  <IconCheck size={16} color="var(--mantine-color-green-6)" />
+                  <Text fw={500}>{feature.title}</Text>
+                </Group>
+                <Text size="sm" c="dimmed">
+                  {feature.description}
+                </Text>
+              </Card>
+            ))}
+          </SimpleGrid>
+        </div>
+
+        <Divider />
+
+        <Group justify="center">
+          <Button variant="outline" size="md">
+            View Documentation
+          </Button>
+          <Button size="md">
+            Get Started
+          </Button>
+        </Group>
+      </Stack>
+    </Container>
+  );
+};
+
+export default DemoApp;

demo/src/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { MantineProvider } from '@mantine/core';
+import App from './App';
+import '@mantine/core/styles.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+  <React.StrictMode>
+    <MantineProvider>
+      <App />
+    </MantineProvider>
+  </React.StrictMode>
+);

demo/webpack.config.js

@@ -0,0 +1,76 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { ModuleFederationPlugin } = require('webpack').container;
+
+module.exports = {
+  mode: 'development',
+  entry: './src/index.tsx',
+  devServer: {
+    port: 3001,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js', '.jsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              '@babel/preset-react',
+              '@babel/preset-typescript',
+            ],
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'demo',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './App': './src/App.tsx',
+      },
+      shared: {
+        react: {
+          singleton: true,
+          requiredVersion: '^18.2.0',
+          eager: false,
+        },
+        'react-dom': {
+          singleton: true,
+          requiredVersion: '^18.2.0',
+          eager: false,
+        },
+        '@mantine/core': {
+          singleton: true,
+          requiredVersion: '^7.0.0',
+          eager: false,
+        },
+        '@mantine/hooks': {
+          singleton: true,
+          requiredVersion: '^7.0.0',
+          eager: false,
+        },
+        '@tabler/icons-react': {
+          singleton: true,
+          requiredVersion: '^2.40.0',
+          eager: false,
+        },
+      },
+    }),
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+    }),
+  ],
+};