feat(cli): add build script & update template

designer-demo/package.json

@@ -10,7 +10,6 @@
   "dependencies": {
     "vue": "^3.4.21",
     "@opentiny/tiny-engine": "workspace:^",
-    "@opentiny/tiny-engine-configurator": "workspace:*",
     "@opentiny/tiny-engine-theme-dark": "workspace:*",
     "@opentiny/tiny-engine-theme-light": "workspace:*",
     "@opentiny/vue": "~3.14.0",

packages/design-core/package.json

@@ -42,6 +42,7 @@
     "@babel/generator": "~7.23.2",
     "@babel/parser": "~7.23.2",
     "@babel/traverse": "~7.23.2",
+    "@opentiny/tiny-engine-configurator": "workspace:*",
     "@opentiny/tiny-engine-layout": "workspace:~",
     "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",
     "@opentiny/tiny-engine-entry": "workspace:*",

packages/engine-cli/.npmrc

@@ -0,0 +1 @@
+@opentiny:registry=https://registry.npmmirror.com/

packages/engine-cli/README.md

@@ -0,0 +1,28 @@
+# engine-cli
+
+tiny-engine cli for create new designer/plugin/...
+
+## dev
+
+```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
+```
+
+## usage
+
+### create
+
+```sh
+npx @opentiny/tiny-engine-cli@latest create my-designer
+```
+
+### dev
+
+```sh
+cd my-designer && npm install # install
+npm run dev                   # designer dev
+npm run build                 # designer build
+```
+

packages/engine-cli/bin/cli.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import '../src/index.js'
+require('../dist/index.js')

packages/engine-cli/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@opentiny/tiny-engine-cli",
   "version": "1.0.0",
-  "type": "module",
   "description": "",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "npm run build -- --watch",
+    "build": "esbuild src/index.js --bundle --minify=true --outfile=dist/index.js --format=cjs --platform=node --target=node14"
   },
   "bin": {
     "engine-cli": "./bin/cli.js"
@@ -16,12 +16,7 @@
   "devDependencies": {
     "chalk": "^5.3.0",
     "commander": "^12.0.0",
-    "execa": "^8.0.1",
     "fs-extra": "^11.2.0",
-    "globby": "^14.0.1",
-    "handlebars": "^4.7.8",
-    "inquirer": "^9.2.17",
-    "ora": "^8.0.1",
-    "vite": "^5.1.6"
+    "esbuild": "^0.18.20"
   }
 }

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

@@ -10,18 +10,13 @@
  *
  */
 
-import { fileURLToPath } from 'node:url'
 import { cwd } from 'node:process'
 import path from 'node:path'
 import fs from 'fs-extra'
 import chalk from 'chalk'
 
-const __filename = fileURLToPath(import.meta.url)
-
-const __dirname = path.dirname(__filename)
-
 export default function (name) {
-  const sourcePath = path.join(__dirname, '../../template/designer/')
+  const sourcePath = path.join(__dirname, '../template/designer/')
   const destPath = path.join(cwd(), name)
   fs.copySync(sourcePath, destPath)
   console.log(

packages/engine-cli/src/index.js

@@ -9,13 +9,9 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-
-import { fileURLToPath } from 'node:url'
 import { Command } from 'commander'
 import create from './commands/create.js'
 
-const __filename = fileURLToPath(import.meta.url)
-
 const program = new Command()
 
 program

packages/engine-cli/template/designer/env/.env.development

@@ -1,7 +1,7 @@
 # development mode, used by the "vite" command
 
 NODE_ENV=development
-VITE_CDN_DOMAIN=https://npm.onmicrosoft.cn
+VITE_CDN_DOMAIN=https://unpkg.com
 VITE_LOCAL_IMPORT_MAPS=false
 VITE_LOCAL_BUNDLE_DEPS=false
 # request data via alpha service

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

@@ -10,11 +10,10 @@
   "dependencies": {
     "vue": "^3.4.21",
     "@opentiny/tiny-engine": "latest",
-    "@opentiny/tiny-engine-entry": "latest",
-    "@opentiny/tiny-engine-configurator": "latest",
     "@opentiny/tiny-engine-theme-dark": "latest",
     "@opentiny/tiny-engine-theme-light": "latest",
     "@opentiny/vue": "~3.14.0",
+    "@opentiny/vue-icon": "~3.14.0",
     "@opentiny/vue-design-smb": "~3.14.0",
     "@opentiny/vue-renderless": "~3.14.0",
     "@opentiny/vue-theme": "~3.14.0"
@@ -23,7 +22,6 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "cross-env": "^7.0.3",
     "vite": "^5.2.7",
-    "@opentiny/tiny-engine-vite-config": "latest",
-    "@opentiny/tiny-engine-vite-plugin-meta-comments": "latest"
+    "@opentiny/tiny-engine-vite-config": "latest"
   }
 }

packages/engine-cli/template/designer/preview.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="./src/preview.js"></script>
+    <script type="module" src="/src/preview.js"></script>
   </body>
 </html>

packages/engine-cli/template/designer/registry.js

@@ -40,17 +40,50 @@ import {
   Props,
   Events,
   Styles,
+  Layout,
+  Canvas,
+  EditorInfoService,
+  HelpService,
+  AppService,
+  BlockService,
+  BreadcrumbService,
+  DataSourceService,
+  PageService,
+  ResourceService,
+  PropertiesService,
+  PropertyService,
+  SaveLocalService,
+  TranslateService,
+  HistoryService,
 } from '@opentiny/tiny-engine'
 
 export default {
+  root: {
+    id: 'engine.root',
+    metas: [
+      EditorInfoService,
+      HelpService,
+      AppService,
+      BreadcrumbService,
+      BlockService,
+      DataSourceService,
+      PageService,
+      ResourceService,
+      PropertiesService,
+      PropertyService,
+      SaveLocalService,
+      TranslateService,
+      HistoryService,
+    ]
+  },
   config: {
     id: 'engine.config',
     theme: import.meta.env.VITE_THEME || 'light',
     material: ['/mock/bundle.json'],
     scripts: [],
     styles: []
   },
-  layout: { id: 'engine.layout' },
+  layout: Layout,
   themes: [
     {
       id: 'engine.theme.light'
@@ -75,25 +108,8 @@ export default {
     Setting,
     Lang
   ],
-  plugins: [
-    Materials,
-    Tree,
-    Page,
-    Block,
-    Datasource,
-    Bridge,
-    I18n,
-    Script,
-    Data,
-    Schema,
-    Help,
-    Robot
-  ],
+  plugins: [Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, Data, Schema, Help, Robot],
   dsls: [{ id: 'engine.dsls.dslvue' }],
-  settings: [
-    Props,
-    Styles,
-    Events
-  ],
-  canvas: {}
+  settings: [Props, Styles, Events],
+  canvas: Canvas
 }

packages/engine-cli/template/designer/src/configurators/index.js

@@ -1,7 +1,5 @@
-import * as allConfigurator from '@opentiny/tiny-engine-configurator'
 import MyInputConfigurator from './MyInputConfigurator.vue'
 
 export const configurators = {
-  ...allConfigurator,
   MyInputConfigurator
 }

packages/engine-cli/template/designer/src/defineEntry.js

@@ -11,7 +11,7 @@
  */
 
 import registry from '../registry.js'
-import { defineEntry } from '@opentiny/tiny-engine-entry'
+import { defineEntry } from '@opentiny/tiny-engine'
 
 defineEntry(registry)
 

packages/engine-cli/template/designer/src/main.js

@@ -13,7 +13,7 @@
 // 导入@opentiny/tiny-engine时，内部的依赖包也会逐个导入，可能会执行useComplie，此时需要templateHashMap。所以需要先执行一次defineEntry
 import { registry } from './defineEntry.js'
 import { init } from '@opentiny/tiny-engine'
-import { initHook, HOOK_NAME } from '@opentiny/tiny-engine-entry'
+import { initHook, HOOK_NAME } from '@opentiny/tiny-engine'
 import { configurators } from './configurators/'
 import 'virtual:svg-icons-register'
 import '@opentiny/tiny-engine-theme'

packages/engine-cli/template/designer/src/preview.js

@@ -10,6 +10,20 @@
  *
  */
 
+import { initHook, HOOK_NAME } from '@opentiny/tiny-engine'
 import { initPreview } from '@opentiny/tiny-engine'
+import 'virtual:svg-icons-register'
+import '@opentiny/tiny-engine-theme'
 
-initPreview({ registry: { config: { id : 'engine.config', theme: 'light' } } })
+const beforeAppCreate = () => {
+  initHook(HOOK_NAME.useEnv, import.meta.env)
+}
+
+initPreview({
+  registry: {
+    config: { id : 'engine.config', theme: 'light' },
+  },
+  lifeCycles: {
+    beforeAppCreate
+  }
+})

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

@@ -10,13 +10,25 @@ export default defineConfig((options) => {
   }
   const defaultConfig = getDefaultConfig(options, extOptions)
 
+  const devAlias = {
+    '@opentiny/tiny-engine-theme': ['light', 'dark'].includes(extOptions.VITE_THEME)
+      ? path.resolve(
+          process.cwd(),
+          `./node_modules/@opentiny/tiny-engine-theme-${extOptions.VITE_THEME}/dist/style.css`
+        )
+      : ''
+  }
+
   const config = {
     envDir,
     publicDir: path.resolve(__dirname, './public'),
     server: {
       port: 8090
+    },
+    resolve: {
+      alias: devAlias
     }
   }
-  
+
   return mergeConfig(defaultConfig, config)
 })