Merge pull request #133 from codingapi/dev

Dev

Author: xlorne

admin-ui/mocks/index.ts

@@ -0,0 +1,23 @@
+import type {IncomingMessage} from "node:http";
+
+export const parseBody = (req: IncomingMessage): Promise<any> => {
+    return new Promise((resolve, reject) => {
+        let body = '';
+        req.on('data', (chunk) => {
+            body += chunk.toString('utf-8');
+        });
+        req.on('end', () => {
+            try {
+                resolve(JSON.parse(body));
+            } catch (e) {
+                resolve({});
+            }
+        });
+        req.on('error', (err) => reject(err));
+    });
+};
+
+export const getQuery = (req: IncomingMessage) => {
+    const reqUrl = new URL(req.url || '', 'http://localhost');
+    return Object.fromEntries(reqUrl.searchParams.entries());
+}

admin-ui/mocks/product.ts

@@ -1,22 +1,28 @@
 import Mock from "mockjs";
-import webpackMockServer from "webpack-mock-server";
+import type {IncomingMessage, ServerResponse} from "node:http";
+import {NextFunction} from "@rsbuild/core/dist-types/types/config";
 
-export default webpackMockServer.add((app, helper) => {
-    app.get('/api/products', (req, res) => {
+export const productsHandler = async (req: IncomingMessage, res: ServerResponse, next: NextFunction) => {
+    const url = req.url;
+    const method = req.method?.toUpperCase();
+    if(url?.startsWith("/api/products") && method === 'GET') {
         const products = Mock.mock({
             'list|100': [{
                 'id|+1': 1,
                 'name': '@name',
                 'price|100-1000': 1,
             }]
         }).list;
-
-        res.json({
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify({
             success: true,
-            data:{
-                list:products,
+            data: {
+                list: products,
                 total: products.length
             },
-        });
-    });
-});
+        }), 'utf-8');
+        return;
+    }
+
+    next();
+}

admin-ui/mocks/tsconfig.json

@@ -1,29 +1,37 @@
-import webpackMockServer from "webpack-mock-server";
+import type {IncomingMessage, ServerResponse} from "node:http";
+import {NextFunction} from "@rsbuild/core/dist-types/types/config";
+import {parseBody} from "./index";
 
-export default webpackMockServer.add((app, helper) => {
-    app.post('/user/login', (req, res) => {
-        const username = req.body.username;
+export const usersHandler = async (req: IncomingMessage, res: ServerResponse, next: NextFunction) => {
+    const url = req.url;
+    const method = req.method?.toUpperCase();
+    if(url?.startsWith("/user/login") && method === 'POST') {
+        const body = await parseBody(req);
+        const username = body.username || '';
+        res.setHeader('Content-Type', 'application/json');
         if(username==='admin'){
-            res.json({
-                success:true,
-                data:{
+            res.end(JSON.stringify({
+                success: true,
+                data: {
                     'username': username,
-                    'token':'test token',
-                    'avatar':'/logo.png',
-                    'authorities': ['ROLE_ADMIN','ROLE_DEVELOPER'],
+                    'token': 'test token',
+                    'avatar': '/logo.png',
+                    'authorities': ['ROLE_ADMIN', 'ROLE_DEVELOPER'],
                 }
-            });
-            return;
+            }), 'utf-8');
+        }else {
+            res.end(JSON.stringify({
+                success: true,
+                data: {
+                    'username': username,
+                    'token': 'test token',
+                    'avatar': '/logo.png',
+                    'authorities': ['ROLE_USER'],
+                }
+            }), 'utf-8');
         }
+        return;
+    }
 
-        res.json({
-            success:true,
-            data:{
-                'username': username,
-                'token':'test token',
-                'avatar':'/logo.png',
-                'authorities': ['ROLE_USER'],
-            }
-        });
-    });
-});
+    next();
+}

admin-ui/mocks/user.ts

@@ -6,19 +6,15 @@
     "@ant-design/icons": "^5.4.0",
     "@ant-design/pro-components": "^2.8.7",
     "@babel/standalone": "^7.25.6",
-    "@codingapi/flow-pc": "^0.0.42",
-    "@codingapi/form-pc": "^0.0.42",
-    "@codingapi/ui-framework": "^0.0.42",
+    "@codingapi/flow-pc": "^0.0.43",
+    "@codingapi/form-pc": "^0.0.43",
+    "@codingapi/ui-framework": "^0.0.43",
     "@dnd-kit/core": "^6.2.0",
     "@dnd-kit/sortable": "^9.0.0",
     "@handsontable/react-wrapper": "^15.0.0",
     "@logicflow/core": "^2.0.5",
     "@logicflow/extension": "^2.0.9",
     "@reduxjs/toolkit": "^2.2.7",
-    "@types/babel__standalone": "^7.1.7",
-    "@types/node": "^16.18.108",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
     "antd": "^5.20.6",
     "axios": "^1.7.7",
     "base64-js": "^1.5.1",
@@ -37,9 +33,10 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "webpack serve --config webpack.config.mock.js --open",
-    "dev": "webpack serve --config webpack.config.dev.js --open",
-    "build": "webpack --mode production --config webpack.config.prod.js",
+    "dev": "rsbuild start --config rsbuild.config.dev.ts",
+    "start": "rsbuild start",
+    "mock": "rsbuild start --config rsbuild.config.mock.ts",
+    "build": "rsbuild build",
     "test": "jest",
     "test:watch": "jest --watchAll"
   },
@@ -61,6 +58,15 @@
     ]
   },
   "devDependencies": {
+    "@module-federation/enhanced": "^0.17.0",
+    "@module-federation/rsbuild-plugin": "^0.17.0",
+    "@rsbuild/core": "^1.4.7",
+    "@rsbuild/plugin-react": "^1.3.4",
+    "@rsbuild/plugin-sass": "^1.3.3",
+    "@types/babel__standalone": "^7.1.7",
+    "@types/node": "^16.18.108",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
@@ -72,11 +78,8 @@
     "@types/lodash-es": "^4.17.12",
     "@types/mockjs": "^1.0.10",
     "babel-jest": "^29.7.0",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "express": "^4.21.0",
-    "html-webpack-plugin": "^5.6.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -87,11 +90,6 @@
     "style-loader": "^4.0.0",
     "ts-jest": "^29.3.2",
     "ts-loader": "^9.5.1",
-    "ts-node": "^10.9.2",
-    "webpack": "^5.94.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0",
-    "webpack-merge": "^6.0.1",
-    "webpack-mock-server": "^1.0.23"
+    "ts-node": "^10.9.2"
   }
 }

admin-ui/package.json

@@ -0,0 +1,15 @@
+import {defineConfig} from '@rsbuild/core';
+import commonConfig from './rsbuild.config';
+
+export default defineConfig({
+    ...commonConfig,
+    server: {
+        port: 8000,
+        proxy: {
+            '/api': 'http://127.0.0.1:8090',
+            '/open': 'http://127.0.0.1:8090',
+            '/user': 'http://127.0.0.1:8090',
+        },
+    },
+})
+

admin-ui/rsbuild.config.dev.ts

@@ -0,0 +1,21 @@
+import {defineConfig} from '@rsbuild/core';
+import commonConfig from './rsbuild.config';
+import {usersHandler} from "./mocks/user";
+import {productsHandler} from "./mocks/product";
+
+export default defineConfig({
+    ...commonConfig,
+    server: {
+        port: 8000,
+    },
+    dev:{
+        setupMiddlewares:(middlewares, devServer) => {
+            if (!devServer) {
+                throw new Error('webpack-dev-server is not defined');
+            }
+            console.log('mock server is running');
+            middlewares.unshift(usersHandler,productsHandler);
+        }
+    }
+})
+

admin-ui/rsbuild.config.mock.ts

@@ -0,0 +1,77 @@
+import * as path from 'path';
+import {defineConfig} from '@rsbuild/core';
+import {pluginReact} from '@rsbuild/plugin-react';
+import {pluginSass} from '@rsbuild/plugin-sass';
+// @ts-ignore
+import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
+import {pluginModuleFederation} from '@module-federation/rsbuild-plugin';
+
+export default defineConfig({
+    plugins: [
+        pluginReact(),
+        pluginSass(),
+        pluginModuleFederation({
+            name: "AdminUI",
+            shared: {
+                react: {
+                    requiredVersion: '^18.3.1',
+                    singleton: true,
+                    strictVersion: false,
+                },
+                'react-dom': {
+                    requiredVersion: '^18.3.1',
+                    singleton: true,
+                    strictVersion: false,
+                },
+            }
+        }, {
+            ssr: false,
+            ssrDir: path.resolve(__dirname, 'ssr'),
+            environment: 'development',
+        }),
+    ],
+    server:{
+        port: 8000,
+    },
+    source: {
+        entry: {
+            index: './src/entry.tsx',
+        },
+        decorators: {
+            version: 'legacy',
+        },
+    },
+    resolve:{
+        alias:{
+            '@': path.resolve(__dirname, 'src'),
+            react: path.resolve(__dirname, 'node_modules/react'),
+            'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
+        }
+    },
+    html: {
+        template: './public/index.html',
+    },
+    performance: {
+        chunkSplit: {
+            strategy: 'split-by-size',
+            minSize: 10000,
+            maxSize: 30000,
+        },
+    },
+    tools: {
+        rspack: (config) => {
+            config.plugins.push(
+                new MonacoWebpackPlugin({
+                    languages: ['javascript', 'typescript', 'json', 'css', 'html'],
+                    features: ['!gotoSymbol']
+                }),
+            );
+            config.ignoreWarnings = [
+                (warning) =>
+                    typeof warning.message === 'string' &&
+                    warning.message.includes('Critical dependency: require function is used'),
+            ];
+            return config;
+        }
+    }
+});

admin-ui/rsbuild.config.ts

@@ -0,0 +1 @@
+import("./index");

admin-ui/src/entry.tsx

@@ -0,0 +1,23 @@
+import type {IncomingMessage} from "node:http";
+
+export const parseBody = (req: IncomingMessage): Promise<any> => {
+    return new Promise((resolve, reject) => {
+        let body = '';
+        req.on('data', (chunk) => {
+            body += chunk.toString('utf-8');
+        });
+        req.on('end', () => {
+            try {
+                resolve(JSON.parse(body));
+            } catch (e) {
+                resolve({});
+            }
+        });
+        req.on('error', (err) => reject(err));
+    });
+};
+
+export const getQuery = (req: IncomingMessage) => {
+    const reqUrl = new URL(req.url || '', 'http://localhost');
+    return Object.fromEntries(reqUrl.searchParams.entries());
+}