@ddm-center/create-plugin 0.0.1

package/README.md

@@ -0,0 +1,100 @@
+# @ddm-center/create-plugin
+
+`@ddm-center/create-plugin` 是 Dubbo Desktop Manager 的插件工程脚手架。
+
+它只创建一种推荐工程形态：`renderer + main` mixed 插件。单独 renderer 或单独 main 的插件可以在生成后自行删除不需要的入口。
+
+## 创建 TypeScript 插件
+
+```bash
+npm create @ddm-center/plugin my-plugin -- --ts
+```
+
+## 创建 JavaScript 插件
+
+```bash
+npm create @ddm-center/plugin my-plugin -- --js
+```
+
+如果插件名没有 `ddm-plugin-` 前缀，脚手架会自动补齐。例如 `my-plugin` 会生成 `ddm-plugin-my-plugin`。
+
+## 生成目录
+
+TypeScript 模板会生成：
+
+```text
+ddm-plugin-my-plugin/
+    src/main/index.ts
+    src/renderer/index.ts
+    src/renderer/views/Settings.vue
+    src/i18n/index.ts
+    package.json
+    tsconfig.json
+    webpack.config.js
+```
+
+JavaScript 模板会生成：
+
+```text
+ddm-plugin-my-plugin/
+    src/main/index.js
+    src/renderer/index.js
+    src/renderer/views/Settings.vue
+    src/i18n/index.js
+    package.json
+    jsconfig.json
+    webpack.config.js
+```
+
+## 常用命令
+
+```bash
+npm install
+npm run build
+```
+
+TypeScript 模板额外提供：
+
+```bash
+npm run typecheck
+```
+
+## 入口约定
+
+生成的插件包含三个入口：
+
+- `main`：主进程入口，默认输出 `dist/main.js`。
+- `rendererMain`：渲染进程入口，默认输出 `dist/renderer.js`。
+- `i18nMain`：国际化入口，默认输出 `dist/i18n.js`。
+
+`package.json` 中会自动写入：
+
+```json
+{
+    "main": "dist/main.js",
+    "rendererMain": "dist/renderer.js",
+    "i18nMain": "dist/i18n.js"
+}
+```
+
+## 类型提示
+
+生成的插件默认依赖：
+
+```json
+{
+    "devDependencies": {
+        "@ddm-center/plugin-api": "^0.0.1"
+    }
+}
+```
+
+`@ddm-center/plugin-api` 提供 `appMain`、`appView`、`MainEntry`、`RendererEntry` 等类型提示。运行时对象仍由 DDM 宿主注入。
+
+## 参数
+
+- `--ts`：创建 TypeScript mixed 插件。
+- `--js`：创建 JavaScript mixed 插件。
+- `--language=ts`：等同于 `--ts`。
+- `--language=js`：等同于 `--js`。
+- `--force`：目标目录不为空时仍然写入。

package/bin/create-plugin.js

@@ -0,0 +1,143 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+
+const TEMPLATE_ROOT = path.join(__dirname, '..', 'templates');
+
+/**
+ * 只解析脚手架需要的少量参数，避免引入额外命令行依赖。
+ */
+function parseArgs(argv) {
+    const result = {
+        name: null,
+        language: null,
+        force: false,
+    };
+
+    argv.forEach(arg => {
+        if (arg === '--force' || arg === '-f') {
+            result.force = true;
+            return;
+        }
+
+        if (arg.startsWith('--language=')) {
+            result.language = arg.slice('--language='.length);
+            return;
+        }
+
+        if (arg === '--js') {
+            result.language = 'js';
+            return;
+        }
+
+        if (arg === '--ts') {
+            result.language = 'ts';
+            return;
+        }
+
+        if (!result.name) {
+            result.name = arg;
+        }
+    });
+
+    return result;
+}
+
+/**
+ * 没有传插件名或语言时，用交互问题补齐。
+ */
+function ask(question) {
+    const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout,
+    });
+
+    return new Promise(resolve => {
+        rl.question(question, answer => {
+            rl.close();
+            resolve(answer.trim());
+        });
+    });
+}
+
+/**
+ * DDM 插件默认使用 ddm-plugin- 前缀，scope 包名保留用户输入。
+ */
+function normalizePluginName(name) {
+    const normalized = name.trim().toLowerCase().replace(/[^a-z0-9-_./@]/g, '-').replace(/--+/g, '-');
+    if (!normalized) {
+        throw new Error('插件名称不能为空');
+    }
+    return normalized.startsWith('ddm-plugin-') || normalized.startsWith('@') ? normalized : `ddm-plugin-${normalized}`;
+}
+
+/**
+ * 根据包名生成一个适合展示在插件列表里的默认名称。
+ */
+function toTitle(name) {
+    const rawName = name.includes('/') ? name.split('/').pop() : name;
+    return rawName.replace(/^ddm-plugin-/, '').split(/[-_]/).filter(Boolean).map(item => item.charAt(0).toUpperCase() + item.slice(1)).join(' ');
+}
+
+/**
+ * 模板文件统一用 .tpl 后缀，复制时替换占位符并去掉后缀。
+ */
+function copyTemplate(sourceDir, targetDir, variables) {
+    fs.mkdirSync(targetDir, { recursive: true });
+
+    fs.readdirSync(sourceDir, { withFileTypes: true }).forEach(entry => {
+        const sourcePath = path.join(sourceDir, entry.name);
+        const targetName = entry.name.replace(/\.tpl$/, '');
+        const targetPath = path.join(targetDir, targetName);
+
+        if (entry.isDirectory()) {
+            copyTemplate(sourcePath, targetPath, variables);
+            return;
+        }
+
+        let content = fs.readFileSync(sourcePath, 'utf8');
+        Object.keys(variables).forEach(key => {
+            content = content.replace(new RegExp(`__${key}__`, 'g'), variables[key]);
+        });
+        fs.writeFileSync(targetPath, content);
+    });
+}
+
+/**
+ * 创建 mixed 插件工程：主进程、渲染进程和 i18n 入口一起生成。
+ */
+async function main() {
+    const args = parseArgs(process.argv.slice(2));
+    const inputName = args.name || await ask('插件名称: ');
+    const pluginName = normalizePluginName(inputName);
+    const languageInput = args.language || await ask('语言(js/ts，默认 ts): ');
+    const language = (languageInput || 'ts').toLowerCase();
+
+    if (!['js', 'ts', 'javascript', 'typescript'].includes(language)) {
+        throw new Error('language 只支持 js 或 ts');
+    }
+
+    const templateName = language.startsWith('j') ? 'mixed-js' : 'mixed-ts';
+    const targetDir = path.resolve(process.cwd(), pluginName.includes('/') ? pluginName.split('/').pop() : pluginName);
+
+    if (fs.existsSync(targetDir) && !args.force && fs.readdirSync(targetDir).length > 0) {
+        throw new Error(`目标目录已存在且不为空: ${targetDir}`);
+    }
+
+    copyTemplate(path.join(TEMPLATE_ROOT, templateName), targetDir, {
+        PLUGIN_NAME: pluginName,
+        PLUGIN_TITLE: toTitle(pluginName),
+    });
+
+    console.log(`已创建 ${pluginName}`);
+    console.log(`cd ${path.basename(targetDir)}`);
+    console.log('npm install');
+    console.log('npm run build');
+}
+
+main().catch(error => {
+    console.error(error.message);
+    process.exit(1);
+});

package/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@ddm-center/create-plugin",
+    "version": "0.0.1",
+    "description": "Create a mixed renderer and main plugin project for Dubbo Desktop Manager.",
+    "bin": {
+        "create-plugin": "bin/create-plugin.js"
+    },
+    "files": [
+        "README.md",
+        "bin",
+        "templates"
+    ],
+    "engines": {
+        "node": ">=14"
+    }
+}

package/templates/mixed-js/README.md.tpl

@@ -0,0 +1,10 @@
+# __PLUGIN_TITLE__
+
+DDM mixed plugin template.
+
+```bash
+npm install
+npm run build
+```
+
+构建后把当前目录作为插件包安装到 DDM，宿主会读取 `dist/main.js`、`dist/renderer.js` 和 `dist/i18n.js`。

package/templates/mixed-js/jsconfig.json.tpl

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "baseUrl": ".",
+        "moduleResolution": "node",
+        "paths": {
+            "appMain": ["node_modules/@ddm-center/plugin-api/appMain.d.ts"],
+            "appView": ["node_modules/@ddm-center/plugin-api/appView.d.ts"]
+        },
+        "types": ["@ddm-center/plugin-api"]
+    },
+    "include": ["src/**/*"]
+}

package/templates/mixed-js/package.json.tpl

@@ -0,0 +1,31 @@
+{
+    "name": "__PLUGIN_NAME__",
+    "version": "0.1.0",
+    "description": "__PLUGIN_TITLE__ plugin for Dubbo Desktop Manager.",
+    "pluginNickName": "__PLUGIN_TITLE__",
+    "main": "dist/main.js",
+    "rendererMain": "dist/renderer.js",
+    "i18nMain": "dist/i18n.js",
+    "scripts": {
+        "build": "webpack --mode production",
+        "dev": "webpack --mode development --watch"
+    },
+    "dependencies": {},
+    "devDependencies": {
+        "@ddm-center/plugin-api": "^0.0.1",
+        "css-loader": "^6.11.0",
+        "vue": "^2.6.14",
+        "vue-loader": "^15.11.1",
+        "vue-style-loader": "^4.1.3",
+        "vue-template-compiler": "^2.6.14",
+        "webpack": "^5.92.0",
+        "webpack-cli": "^5.1.4"
+    },
+    "pluginSandbox": {
+        "permissions": {
+            "require": {
+                "allow": []
+            }
+        }
+    }
+}

package/templates/mixed-js/src/i18n/index.js.tpl

@@ -0,0 +1,15 @@
+/**
+ * i18n 入口用于注册当前插件自己的语言包。
+ */
+export default function installI18n(registrar) {
+    return {
+        async install() {
+            registrar.addPluginLocaleMessage('zh-CN', {
+                title: '__PLUGIN_TITLE__',
+            });
+            registrar.addPluginLocaleMessage('en-US', {
+                title: '__PLUGIN_TITLE__',
+            });
+        },
+    };
+}

package/templates/mixed-js/src/main/index.js.tpl

@@ -0,0 +1,31 @@
+import appMain from 'appMain';
+
+/**
+ * 主进程入口由 DDM 宿主加载。
+ */
+export default function installMain() {
+    return {
+        async install() {
+            appMain.logger.info('__PLUGIN_TITLE__ main installed');
+
+            /**
+             * 暴露给渲染进程调用的服务，渲染端通过 referenceService('helloService') 获取。
+             */
+            appMain.exportPluginService('helloService', {
+                async sayHello(name) {
+                    return {
+                        message: `Hello ${name || 'DDM'} from ${appMain.pluginName}`,
+                        time: new Date().toISOString(),
+                    };
+                },
+            });
+        },
+
+        /**
+         * 插件卸载时宿主会优先调用 uninstall，可在这里释放资源。
+         */
+        async uninstall() {
+            appMain.logger.info('__PLUGIN_TITLE__ main uninstalled');
+        },
+    };
+}

package/templates/mixed-js/src/renderer/index.js.tpl

@@ -0,0 +1,39 @@
+import appView  from 'appView';
+import Settings from './views/Settings.vue';
+
+/**
+ * 渲染进程入口由 DDM 宿主加载。
+ */
+export default function installRenderer() {
+    return {
+        async install() {
+            /**
+             * 调用主进程通过 exportPluginService 暴露的服务。
+             */
+            const helloService = appView.referenceService('helloService');
+
+            /**
+             * 注册一个插件设置页，Settings 组件会被宿主自动注入插件上下文。
+             */
+            appView.addPluginSettingPage({
+                label: '__PLUGIN_TITLE__',
+                component: Settings,
+            });
+
+            /**
+             * 注册标题栏菜单，演示渲染进程调用主进程服务后发通知。
+             */
+            appView.addToolbarMenu({
+                label: '__PLUGIN_TITLE__',
+                icon: 'plugin',
+                click: async () => {
+                    const result = await helloService.sayHello('__PLUGIN_TITLE__');
+                    appView.notify({
+                        title: '__PLUGIN_TITLE__',
+                        body: result.message,
+                    });
+                },
+            });
+        },
+    };
+}

package/templates/mixed-js/src/renderer/views/Settings.vue.tpl

@@ -0,0 +1,35 @@
+<template>
+    <div class="ddm-plugin-settings">
+        <h3>{{ title }}</h3>
+        <p>{{ message }}</p>
+        <el-button size="mini" type="primary" @click="loadMessage">调用主进程服务</el-button>
+    </div>
+</template>
+
+<script>
+import appView from 'appView';
+
+const helloService = appView.referenceService('helloService');
+
+export default {
+    name: 'PluginSettings',
+    data() {
+        return {
+            title: '__PLUGIN_TITLE__',
+            message: 'Ready',
+        };
+    },
+    methods: {
+        async loadMessage() {
+            const result = await helloService.sayHello(this.title);
+            this.message = result.message;
+        },
+    },
+};
+</script>
+
+<style scoped>
+.ddm-plugin-settings {
+    padding: 12px;
+}
+</style>

package/templates/mixed-js/webpack.config.js.tpl

@@ -0,0 +1,48 @@
+const path                     = require('path');
+const { VueLoaderPlugin }      = require('vue-loader');
+
+module.exports = {
+    target: 'electron-renderer',
+    entry: {
+        main: './src/main/index.js',
+        renderer: './src/renderer/index.js',
+        i18n: './src/i18n/index.js',
+    },
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: '[name].js',
+        library: {
+            type: 'commonjs2',
+            export: 'default',
+        },
+    },
+    resolve: {
+        extensions: ['.js', '.vue', '.json'],
+        alias: {
+            '@': path.resolve(__dirname, 'src'),
+        },
+    },
+    externals: {
+        appMain: 'commonjs appMain',
+        appView: 'commonjs appView',
+        axios: 'commonjs axios',
+        constant: 'commonjs constant',
+        logger: 'commonjs logger',
+        appConfig: 'commonjs appConfig',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+            },
+            {
+                test: /\.css$/,
+                use: ['vue-style-loader', 'css-loader'],
+            },
+        ],
+    },
+    plugins: [
+        new VueLoaderPlugin(),
+    ],
+};

package/templates/mixed-ts/README.md.tpl

@@ -0,0 +1,11 @@
+# __PLUGIN_TITLE__
+
+DDM mixed plugin template.
+
+```bash
+npm install
+npm run typecheck
+npm run build
+```
+
+构建后把当前目录作为插件包安装到 DDM，宿主会读取 `dist/main.js`、`dist/renderer.js` 和 `dist/i18n.js`。

package/templates/mixed-ts/package.json.tpl

@@ -0,0 +1,34 @@
+{
+    "name": "__PLUGIN_NAME__",
+    "version": "0.1.0",
+    "description": "__PLUGIN_TITLE__ plugin for Dubbo Desktop Manager.",
+    "pluginNickName": "__PLUGIN_TITLE__",
+    "main": "dist/main.js",
+    "rendererMain": "dist/renderer.js",
+    "i18nMain": "dist/i18n.js",
+    "scripts": {
+        "build": "webpack --mode production",
+        "dev": "webpack --mode development --watch",
+        "typecheck": "tsc --noEmit"
+    },
+    "dependencies": {},
+    "devDependencies": {
+        "@ddm-center/plugin-api": "^0.0.1",
+        "css-loader": "^6.11.0",
+        "ts-loader": "^9.5.1",
+        "typescript": "^5.4.5",
+        "vue": "^2.6.14",
+        "vue-loader": "^15.11.1",
+        "vue-style-loader": "^4.1.3",
+        "vue-template-compiler": "^2.6.14",
+        "webpack": "^5.92.0",
+        "webpack-cli": "^5.1.4"
+    },
+    "pluginSandbox": {
+        "permissions": {
+            "require": {
+                "allow": []
+            }
+        }
+    }
+}

package/templates/mixed-ts/src/i18n/index.ts.tpl

@@ -0,0 +1,19 @@
+import type { I18nRegistrar, PluginInstallable } from '@ddm-center/plugin-api';
+
+/**
+ * i18n 入口用于注册当前插件自己的语言包。
+ */
+function installI18n(registrar: I18nRegistrar): PluginInstallable {
+    return {
+        async install() {
+            registrar.addPluginLocaleMessage('zh-CN', {
+                title: '__PLUGIN_TITLE__',
+            });
+            registrar.addPluginLocaleMessage('en-US', {
+                title: '__PLUGIN_TITLE__',
+            });
+        },
+    };
+}
+
+export default installI18n;

package/templates/mixed-ts/src/main/index.ts.tpl

@@ -0,0 +1,39 @@
+import appMain            from 'appMain';
+import type { MainEntry } from '@ddm-center/plugin-api';
+
+interface HelloResult {
+    message: string;
+    time: string;
+}
+
+/**
+ * 主进程入口由 DDM 宿主加载。
+ */
+const entry: MainEntry = () => {
+    return {
+        async install() {
+            appMain.logger.info('__PLUGIN_TITLE__ main installed');
+
+            /**
+             * 暴露给渲染进程调用的服务，渲染端通过 referenceService('helloService') 获取。
+             */
+            appMain.exportPluginService('helloService', {
+                async sayHello(name?: string): Promise<HelloResult> {
+                    return {
+                        message: `Hello ${name || 'DDM'} from ${appMain.pluginName}`,
+                        time: new Date().toISOString(),
+                    };
+                },
+            });
+        },
+
+        /**
+         * 插件卸载时宿主会优先调用 uninstall，可在这里释放资源。
+         */
+        async uninstall() {
+            appMain.logger.info('__PLUGIN_TITLE__ main uninstalled');
+        },
+    };
+};
+
+export default entry;

package/templates/mixed-ts/src/renderer/index.ts.tpl

@@ -0,0 +1,49 @@
+import appView                from 'appView';
+import type { RendererEntry } from '@ddm-center/plugin-api';
+import Settings               from './views/Settings.vue';
+
+interface HelloService {
+    sayHello(name?: string): Promise<{
+        message: string;
+        time: string;
+    }>;
+}
+
+/**
+ * 渲染进程入口由 DDM 宿主加载。
+ */
+const entry: RendererEntry = () => {
+    return {
+        async install() {
+            /**
+             * 调用主进程通过 exportPluginService 暴露的服务。
+             */
+            const helloService = appView.referenceService<HelloService>('helloService');
+
+            /**
+             * 注册一个插件设置页，Settings 组件会被宿主自动注入插件上下文。
+             */
+            appView.addPluginSettingPage({
+                label: '__PLUGIN_TITLE__',
+                component: Settings,
+            });
+
+            /**
+             * 注册标题栏菜单，演示渲染进程调用主进程服务后发通知。
+             */
+            appView.addToolbarMenu({
+                label: '__PLUGIN_TITLE__',
+                icon: 'plugin',
+                click: async () => {
+                    const result = await helloService.sayHello('__PLUGIN_TITLE__');
+                    appView.notify({
+                        title: '__PLUGIN_TITLE__',
+                        body: result.message,
+                    });
+                },
+            });
+        },
+    };
+};
+
+export default entry;

package/templates/mixed-ts/src/renderer/views/Settings.vue.tpl

@@ -0,0 +1,43 @@
+<template>
+    <div class="ddm-plugin-settings">
+        <h3>{{ title }}</h3>
+        <p>{{ message }}</p>
+        <el-button size="mini" type="primary" @click="loadMessage">调用主进程服务</el-button>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import appView from 'appView';
+
+interface HelloService {
+    sayHello(name?: string): Promise<{
+        message: string;
+        time: string;
+    }>;
+}
+
+const helloService = appView.referenceService<HelloService>('helloService');
+
+export default Vue.extend({
+    name: 'PluginSettings',
+    data() {
+        return {
+            title: '__PLUGIN_TITLE__',
+            message: 'Ready',
+        };
+    },
+    methods: {
+        async loadMessage() {
+            const result = await helloService.sayHello(this.title);
+            this.message = result.message;
+        },
+    },
+});
+</script>
+
+<style scoped>
+.ddm-plugin-settings {
+    padding: 12px;
+}
+</style>

package/templates/mixed-ts/src/types/vue.d.ts.tpl

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+    import Vue from 'vue';
+    export default Vue;
+}

package/templates/mixed-ts/tsconfig.json.tpl

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "target": "ES2019",
+        "module": "commonjs",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "moduleResolution": "node",
+        "baseUrl": ".",
+        "paths": {
+            "appMain": ["node_modules/@ddm-center/plugin-api/appMain.d.ts"],
+            "appView": ["node_modules/@ddm-center/plugin-api/appView.d.ts"]
+        },
+        "types": ["@ddm-center/plugin-api"]
+    },
+    "include": ["src/**/*"]
+}

package/templates/mixed-ts/webpack.config.js.tpl

@@ -0,0 +1,56 @@
+const path                     = require('path');
+const { VueLoaderPlugin }      = require('vue-loader');
+
+module.exports = {
+    target: 'electron-renderer',
+    entry: {
+        main: './src/main/index.ts',
+        renderer: './src/renderer/index.ts',
+        i18n: './src/i18n/index.ts',
+    },
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: '[name].js',
+        library: {
+            type: 'commonjs2',
+            export: 'default',
+        },
+    },
+    resolve: {
+        extensions: ['.ts', '.js', '.vue', '.json'],
+        alias: {
+            '@': path.resolve(__dirname, 'src'),
+        },
+    },
+    externals: {
+        appMain: 'commonjs appMain',
+        appView: 'commonjs appView',
+        axios: 'commonjs axios',
+        constant: 'commonjs constant',
+        logger: 'commonjs logger',
+        appConfig: 'commonjs appConfig',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+            },
+            {
+                test: /\.ts$/,
+                loader: 'ts-loader',
+                options: {
+                    appendTsSuffixTo: [/\.vue$/],
+                },
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.css$/,
+                use: ['vue-style-loader', 'css-loader'],
+            },
+        ],
+    },
+    plugins: [
+        new VueLoaderPlugin(),
+    ],
+};