feat: 添加Vue和React的Rsbuild模板支持

commands/o2oa-component-x.js

@@ -99,6 +99,63 @@ class componentFactory{
             chalk.cyan(` ${chalk.gray('$')} ${'npm run dev'}`)
         );
     }
+
+    static async vue3_rsbuild(name, opts) {
+        const componentPath = 'x_component_'+name.replace(/\./g, '_');
+        const templatePath = path.resolve(__dirname, options["vue3 rsbuild"]);
+
+        if (existsSync(componentPath)){
+            console.log();
+            console.log(`👉  `+`${chalk.red('Can not Create Component "'+name+'", file already exists "'+componentPath+'" !')}`);
+
+            return '';
+        }
+
+        const host = await ask("o2serverHost");
+        const port = await ask("o2serverCenterPort");
+        const webPort = await ask("o2serverWebPort");
+        const isHttps = await ask("isHttps");
+
+        await fs.mkdir(componentPath);
+        await componentFactory.cpfile(componentPath, templatePath, {
+            projectName: name,
+            projectPath: componentPath,
+            o2serverHost: host,
+            o2serverCenterPort: port,
+            o2serverWebPort: webPort,
+            isHttps: isHttps
+        });
+
+        // if (packageManager==='yarn'){
+        //     await executeCommand(packageManager, ['add', '@o2oa/component'], componentPath);
+        //     await executeCommand(packageManager, ['add', '@o2oa/oovm'], componentPath);
+        //     await executeCommand(packageManager, ['add', '@o2oa/oovm-scripts', '--dve'], componentPath);
+        // }else{
+        //     await executeCommand(packageManager, ['install', '@o2oa/component', '-save'], componentPath);
+        //     await executeCommand(packageManager, ['install', '@o2oa/oovm', '-save'], componentPath);
+        //     await executeCommand(packageManager, ['install', '@o2oa/oovm-scripts', '-save-dev'], componentPath);
+        // }
+
+        await executeCommand('npm', ['install', '@o2oa/component', '--save'], componentPath);
+        await executeCommand('npm', ['install', 'vue@^3.0.0', '--save'], componentPath);
+        await executeCommand('npm', ['install', '@rsbuild/core@^1.6.0', '--save-dev'], componentPath);
+        await executeCommand('npm', ['install', '@rsbuild/plugin-vue@^1.0.0', '--save-dev'], componentPath);
+        await executeCommand('npm', ['install', '@rsbuild/plugin-umd@^1.0.0', '--save-dev'], componentPath);
+        await executeCommand('npm', ['install', 'uglify-js', '--save-dev'], componentPath);
+        await executeCommand('npm', ['install', 'axios', '--save-dev'], componentPath);
+
+        await componentFactory.writeGulpAppFile(componentPath);
+
+        console.log();
+        console.log(`👉  `+`${chalk.green('O2OA Comonent "'+componentPath+'" Created!')}`);
+        console.log();
+        console.log(
+            `👉  Get started with the following commands:\n\n` +
+            chalk.cyan(` ${chalk.gray('$')} cd ${componentPath}\n`) +
+            // chalk.cyan(` ${chalk.gray('$')} ${packageManager === 'yarn' ? 'yarn start' : packageManager === 'pnpm' ? 'pnpm run start' : 'npm run start'}`)
+            chalk.cyan(` ${chalk.gray('$')} ${'npm run dev'}`)
+        );
+    }
     static async react_webpack(name, opts) {
         const componentPath = 'x_component_'+name.replace(/\./g, '_');
         const templatePath = path.resolve(__dirname, options["react webpack"]);
@@ -229,6 +286,63 @@ class componentFactory{
             chalk.cyan(` ${chalk.gray('$')} ${'npm run dev'}`)
         );
     }
+    static async react_rsbuild(name, opts) {
+        const componentPath = 'x_component_'+name.replace(/\./g, '_');
+        const templatePath = path.resolve(__dirname, options["react rsbuild"]);
+
+        if (existsSync(componentPath)){
+            console.log();
+            console.log(`👉  `+`${chalk.red('Can not Create Component "'+name+'", file already exists "'+componentPath+'" !')}`);
+
+            return '';
+        }
+
+        const host = await ask("o2serverHost");
+        const port = await ask("o2serverCenterPort");
+        const webPort = await ask("o2serverWebPort");
+        const isHttps = await ask("isHttps");
+
+        await fs.mkdir(componentPath);
+        await componentFactory.cpfile(componentPath, templatePath, {
+            projectName: name,
+            projectPath: componentPath,
+            o2serverHost: host,
+            o2serverCenterPort: port,
+            o2serverWebPort: webPort,
+            isHttps: isHttps
+        });
+
+        // if (packageManager==='yarn'){
+        //     await executeCommand(packageManager, ['add', '@o2oa/component'], componentPath);
+        //     await executeCommand(packageManager, ['add', '@o2oa/oovm'], componentPath);
+        //     await executeCommand(packageManager, ['add', '@o2oa/oovm-scripts', '--dve'], componentPath);
+        // }else{
+        //     await executeCommand(packageManager, ['install', '@o2oa/component', '-save'], componentPath);
+        //     await executeCommand(packageManager, ['install', '@o2oa/oovm', '-save'], componentPath);
+        //     await executeCommand(packageManager, ['install', '@o2oa/oovm-scripts', '-save-dev'], componentPath);
+        // }
+
+        await executeCommand('npm', ['install', '@o2oa/component', '--save'], componentPath);
+        await executeCommand('npm', ['install', 'react@^18.0.0', '--save'], componentPath);
+        await executeCommand('npm', ['install', 'react-dom@^18.0.0', '--save'], componentPath);
+        await executeCommand('npm', ['install', '@rsbuild/core@^1.6.0', '--save-dev'], componentPath);
+        await executeCommand('npm', ['install', '@rsbuild/plugin-react@^1.0.0', '--save-dev'], componentPath);
+        await executeCommand('npm', ['install', '@rsbuild/plugin-umd@^1.0.0', '--save-dev'], componentPath);
+        await executeCommand('npm', ['install', 'uglify-js', '--save-dev'], componentPath);
+        await executeCommand('npm', ['install', 'axios', '--save-dev'], componentPath);
+
+        await componentFactory.writeGulpAppFile(componentPath);
+
+        console.log();
+        console.log(`👉  `+`${chalk.green('O2OA Comonent "'+componentPath+'" Created!')}`);
+        console.log();
+        console.log(
+            `👉  Get started with the following commands:\n\n` +
+            chalk.cyan(` ${chalk.gray('$')} cd ${componentPath}\n`) +
+            // chalk.cyan(` ${chalk.gray('$')} ${packageManager === 'yarn' ? 'yarn start' : packageManager === 'pnpm' ? 'pnpm run start' : 'npm run start'}`)
+            chalk.cyan(` ${chalk.gray('$')} ${'npm run dev'}`)
+        );
+    }
     static async o2_native(name, opts) {
         const componentPath = 'x_component_'+name.replace(/\./g, '_');
         const templatePath = path.resolve(__dirname, options["o2_native"]);

lib/options.js

@@ -3,8 +3,10 @@ const options = {
     "oovm": "../template/oovm",
     "vue3 vue-cli": "../template/vue/vue-cli/preset.json",
     "vue3 vite": "../template/vue/vite",
+    "vue3 rsbuild": "../template/vue/rsbuild",
     "vue2": "../template/vue2/preset.json",
     "react webpack": "../template/react/webpack",
-    "react vite": "../template/react/vite"
+    "react vite": "../template/react/vite",
+    "react rsbuild": "../template/react/rsbuild"
 };
 export default options;

template/react/rsbuild/.gitignore

@@ -0,0 +1,16 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# Profile
+.rspack-profile-*/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

template/react/rsbuild/AGENTS.md

@@ -0,0 +1,14 @@
+# AGENTS.md
+
+You are an expert in JavaScript, Rsbuild, and web application development. You write maintainable, performant, and accessible code.
+
+## Commands
+
+- `npm run dev` - Start the dev server
+- `npm run build` - Build the app for production
+- `npm run preview` - Preview the production build locally
+
+## Docs
+
+- Rsbuild: https://rsbuild.rs/llms.txt
+- Rspack: https://rspack.rs/llms.txt

template/react/rsbuild/README.md

@@ -0,0 +1,36 @@
+# O2OA Rsbuild project with React
+
+## Setup
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+## Get started
+
+Start the dev server, and the app will be available at [http://localhost:7979](http://localhost:7979).
+
+```bash
+npm run dev
+```
+
+Build the app for production:
+
+```bash
+npm run build
+```
+
+Preview the production build locally:
+
+```bash
+npm run preview
+```
+
+## Learn more
+
+To learn more about Rsbuild, check out the following resources:
+
+- [Rsbuild documentation](https://rsbuild.rs) - explore Rsbuild features and APIs.
+- [Rsbuild GitHub repository](https://github.com/web-infra-dev/rsbuild) - your feedback and contributions are welcome!

template/react/rsbuild/o2.config.json

@@ -0,0 +1,7 @@
+{
+  "devServer": {
+    "host": "<%= o2serverHost %>",
+    "port": "<%= o2serverWebPort %>",
+    "https": <%= isHttps %>
+  }
+}

template/react/rsbuild/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "<%= projectPath %>",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rsbuild build",
+    "dev": "rsbuild dev --open",
+    "preview": "rsbuild preview",
+    "o2-deploy": "rsbuild build",
+    "o2-build": "rsbuild build"
+  },
+  "dependencies": {
+  },
+  "devDependencies": {
+  }
+}

template/react/rsbuild/public/$Main/default/style.css

@@ -0,0 +1,3 @@
+.appContent {
+    text-align: center
+}

template/react/rsbuild/public/lp/en.js

@@ -0,0 +1,16 @@
+MWF.xApplication.<%= projectName %>.LP = {
+    "title": "<%= projectName %>",
+
+    "welcome": "Welcome to O2OA Component with React",
+    "taskListTitle": "Here are your top 5 task",
+
+    "taskTitle": "Title",
+    "taskProcess": "Process",
+    "taskTime": "Time",
+
+    "openCalendar": "Open Calendar",
+    "openOrganization": "Open Organization",
+    "startProcess": "Start Process",
+    "createDocument": "Create Document",
+    "openInBrowser": "Open In Browser"
+}

template/react/rsbuild/public/lp/zh-cn.js

@@ -0,0 +1,16 @@
+MWF.xApplication.<%= projectName %>.LP = {
+    "title": "<%= projectName %>",
+
+    "welcome": "Welcome to O2OA Component with React",
+    "taskListTitle": "此处列出您的5个最新待办",
+
+    "taskTitle": "标题",
+    "taskProcess": "流程",
+    "taskTime": "到达时间",
+
+    "openCalendar": "打开日程管理",
+    "openOrganization": "打开组织管理",
+    "startProcess": "启动流程",
+    "createDocument": "创建信息",
+    "openInBrowser": "在新浏览器窗口中打开"
+}

template/react/rsbuild/rsbuild.config.mjs

@@ -0,0 +1,13 @@
+import { defineConfig, mergeRsbuildConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import devConfig from './rsbuild.dev.config'
+import prodConfig from './rsbuild.prod.config'
+
+export default defineConfig(({ envMode }) => {
+  const config = envMode === 'development' ? devConfig : prodConfig
+  const mergedConfig = mergeRsbuildConfig(config, {
+    plugins: [pluginReact()],
+    // Your config here
+  })
+  return mergedConfig
+})