feat: add simple plugin template (#615)

* feat: add simple plugin template

* fix: change by code review

* fix: includes template and bind file to npm

packages/design-core/index.js

@@ -33,7 +33,7 @@ export { default as Styles } from '@opentiny/tiny-engine-setting-styles'
 export { default as Layout, LayoutService } from '@opentiny/tiny-engine-layout'
 export { default as Canvas } from '@opentiny/tiny-engine-canvas'
 export { initPreview } from './src/preview/src/main'
-export { GenerateCodeService } from '@opentiny/tiny-engine-common'
+export { GenerateCodeService, PluginPanel } from '@opentiny/tiny-engine-common'
 
 export { default as defaultRegistry } from './registry'
 

packages/engine-cli/README.md

@@ -12,17 +12,21 @@ npm link       # after link, you can test engine-cli commands use: engine-cli cr
 
 ## usage
 
-### create
+### create platform or plugin by prompt
 
 ```sh
-npx @opentiny/tiny-engine-cli@latest create my-designer
+# dynamic create platform or plugin by complete prompt
+npx @opentiny/tiny-engine-cli@latest create
 ```
 
-### dev
+### create a tiny-engine platform
 
 ```sh
-cd my-designer && npm install # install
-npm run dev                   # designer dev
-npm run build                 # designer build
+npx @opentiny/tiny-engine-cli@latest create-platform my-designer
 ```
 
+### create a tiny-engine plugin
+
+```sh
+npx @opentiny/tiny-engine-cli@latest create-plugin my-plugin
+```

packages/engine-cli/README.zh-CN.md

@@ -0,0 +1,41 @@
+# engine-cli
+
+用于创建 tiny-engine 平台或者插件的 cli
+
+## 开发
+
+```sh
+npm run dev    # build in watch mode
+npm run build  # build engine-cli
+npm link       # after link, you can test engine-cli commands use: engine-cli create xxx
+```
+
+## 使用
+
+### 根据 prompt 提示进行选择创建
+
+```sh
+# 根据提示选择创建类型以及项目名称
+npx @opentiny/tiny-engine-cli@latest create
+```
+
+### 创建平台
+
+```sh
+# 创建一个名为  my-designer 的低代码平台
+npx @opentiny/tiny-engine-cli@latest create-platform my-designer
+```
+
+### 创建插件
+
+```sh
+# 创建名为 my-tiny-engine-plugin 的 tiny-engine 插件
+npx @opentiny/tiny-engine-cli@latest create-plugin my-tiny-engine-plugin
+```
+
+TODO:
+
+- [ ] 插件开发文档&平台二次开发文档
+- [ ] 完善模板工程
+- [ ] 提供多种平台模板
+- [ ] 提供多种插件类型模板

packages/engine-cli/package.json

@@ -10,13 +10,31 @@
   "bin": {
     "engine-cli": "./bin/cli.js"
   },
+  "files": [
+    "dist",
+    "template",
+    "bin"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/opentiny/tiny-engine",
+    "directory": "packages/engine-cli"
+  },
+  "bugs": {
+    "url": "https://github.com/opentiny/tiny-engine/issues"
+  },
+  "author": "OpenTiny Team",
+  "license": "MIT",
+  "homepage": "https://opentiny.design/tiny-engine",
   "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
     "chalk": "^5.3.0",
     "commander": "^12.0.0",
+    "esbuild": "^0.18.20",
     "fs-extra": "^11.2.0",
-    "esbuild": "^0.18.20"
+    "@inquirer/prompts": "^5.0.7"
   }
 }

packages/engine-cli/src/commands/create.js

@@ -15,7 +15,7 @@ import path from 'node:path'
 import fs from 'fs-extra'
 import chalk from 'chalk'
 
-export default function (name) {
+export function createPlatform(name) {
   const sourcePath = path.join(__dirname, '../template/designer/')
   const destPath = path.join(cwd(), name)
   fs.copySync(sourcePath, destPath)
@@ -24,3 +24,13 @@ export default function (name) {
     chalk.green(`create finish, run the follow command to start project: \ncd ${name} && npm install && npm run dev`)
   )
 }
+
+export function createPlugin(name) {
+  const sourcePath = path.join(__dirname, '../template/plugin/')
+  const destPath = path.join(cwd(), name)
+  fs.copySync(sourcePath, destPath)
+  // eslint-disable-next-line no-console
+  console.log(
+    chalk.green(`create finish, run the follow command to start project: \ncd ${name} && npm install && npm run dev`)
+  )
+}

packages/engine-cli/src/index.js

@@ -10,15 +10,62 @@
  *
  */
 import { Command } from 'commander'
-import create from './commands/create.js'
+import { input, select } from '@inquirer/prompts'
+import { createPlatform, createPlugin } from './commands/create.js'
 
 const program = new Command()
 
 program
-  .command('create <name>')
-  .description('创建一个新工程')
+  .command('create-platform <name>')
+  .description('create a new tiny-engine platform 创建一个新的tiny-engine低代码平台')
   .action((name) => {
-    create(name)
+    createPlatform(name)
+  })
+
+program
+  .command('create-plugin <name>')
+  .description('create a new tiny-engine plugin 创建一个新的 tiny-engine 插件')
+  .action((name) => {
+    createPlugin(name)
+  })
+
+program
+  .command('create')
+  .description('create a new tiny-engine platform or plugin by prompt 根据提示创建一个新的 tiny-engine 插件')
+  .action(async () => {
+    const type = await select({
+      message: 'select create type 选择创建类型',
+      choices: [
+        {
+          name: 'platform',
+          value: 'platform',
+          description: 'create a new tiny-engine platform 创建一个新的 tiny-engine 低代码平台'
+        },
+        {
+          name: 'plugin',
+          value: 'plugin',
+          description: 'create a new tiny-engine plugin 创建一个新的 tiny-engine 插件'
+        }
+      ]
+    })
+
+    const projectName = await input({
+      message: 'please enter the project name. 请输入项目名称',
+      validate: (inputName) => {
+        if (!inputName) {
+          return 'project name can not be empty. 项目名称不允许为空。'
+        }
+
+        return true
+      }
+    })
+
+    const typeMapper = {
+      platform: createPlatform,
+      plugin: createPlugin
+    }
+
+    typeMapper[type](projectName)
   })
 
 program.parse(process.argv)

packages/engine-cli/template/plugin/README.md

@@ -0,0 +1,3 @@
+# tiny-engine Plugin demo
+
+

packages/engine-cli/template/plugin/index.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import entry from './src/Main.vue'
+import metaData from './meta.js'
+
+// 插件元服务，即用户可以通过注册表拿到该元服务，得到插件的核心元服务
+import { PluginDemoService } from './src/composable'
+
+export default {
+  ...metaData,
+  // 插件暴露的 api，可以提供其他 api 进行调用，如果无需暴露，可为空
+  apis: {},
+  // 插件的 UI 渲染入口
+  entry,
+  metas: [PluginDemoService]
+}
+
+export { PluginDemoService }

packages/engine-cli/template/plugin/meta.js

@@ -0,0 +1,12 @@
+// 描述该插件的相关元信息
+export default {
+  id: 'engine.plugins.pluginDemo',
+  // 插件标题
+  title: '插件示例',
+  // 插件分类
+  type: 'plugins',
+  // 插件位置
+  align: 'top',
+  // 插件icon
+  icon: 'plugin-icon-symbol'
+}

packages/engine-cli/template/plugin/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "plugin",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "vite build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

packages/engine-cli/template/plugin/src/Main.vue

@@ -0,0 +1,23 @@
+<template>
+  <plugin-panel title="自定义插件">
+    <template #header>
+      <span>自定义头部</span>
+    </template>
+    <template #content>
+      <div class="content">
+        <h1>hello-world 我是自定义的 plugin</h1>
+        <p>这里可以自定义UI&功能</p>
+      </div>
+    </template>
+  </plugin-panel>
+</template>
+
+<script setup>
+import { PluginPanel } from '@opentiny/tiny-engine'
+</script>
+
+<style lang="less" scoped>
+.content {
+  padding: 12px;
+}
+</style>

packages/engine-cli/template/plugin/src/composable/index.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import useBlock from './usePluginDemo'
+
+export const PluginDemoService = {
+  id: 'engine.service.pluginDemoService',
+  type: 'MetaService',
+  apis: useBlock()
+}

packages/engine-cli/template/plugin/src/composable/usePluginDemo.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+export default function () {
+  return {
+    getTitle: () => {
+      return 'plugin-demo-title'
+    }
+  }
+}

packages/engine-cli/template/plugin/vite.config.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import { defineConfig } from 'vite'
+import path from 'path'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx()],
+  publicDir: false,
+  resolve: {},
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, './index.js'),
+      fileName: () => 'index.js',
+      formats: ['es']
+    },
+    rollupOptions: {
+      output: {
+        banner: 'import "./style.css"'
+      },
+      external: ['vue', /@opentiny\/tiny-engine.*/, /@opentiny\/vue.*/]
+    }
+  }
+})