From 2ac2740837023f08de66d24fbd638a1a99712c33 Mon Sep 17 00:00:00 2001 From: hexqi Date: Mon, 27 May 2024 20:58:30 +0800 Subject: [PATCH 1/4] feat: extract init logic to init.js --- packages/design-core/index.js | 80 +------------------------- packages/design-core/src/index.js | 15 ----- packages/design-core/src/init.js | 96 +++++++++++++++++++++++++++++++ packages/design-core/src/main.js | 35 +---------- 4 files changed, 99 insertions(+), 127 deletions(-) delete mode 100644 packages/design-core/src/index.js create mode 100644 packages/design-core/src/init.js diff --git a/packages/design-core/index.js b/packages/design-core/index.js index 59a5fbdec0..e7fdbd7e25 100644 --- a/packages/design-core/index.js +++ b/packages/design-core/index.js @@ -1,79 +1 @@ -/** - * Copyright (c) 2024 - present TinyEngine Authors. - * Copyright (c) 2024 - 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 { defineEntry } from '@opentiny/tiny-engine-entry' -import { createApp } from 'vue' -import EngineApp from './src/index.js' -import defaultRegistry from './registry.js' -import { merge } from 'lodash-es' -import initSvgs from '@opentiny/tiny-engine-svgs' -import { setGlobalConfig } from '@opentiny/tiny-engine-controller' -import i18n from '@opentiny/tiny-engine-controller/js/i18n' -import globalConfig from './config/lowcode.config' -import { initMonitor } from '@opentiny/tiny-engine-controller/js/monitor' -import { injectGlobalComponents } from '@opentiny/tiny-engine-common' -import { initHttp } from '@opentiny/tiny-engine-http' -import 'virtual:svg-icons-register' - -import TinyThemeTool from '@opentiny/vue-theme/theme-tool' -import { tinySmbTheme } from '@opentiny/vue-theme/theme' // SMB 主题 - -const type = (obj) => { - return Object.prototype.toString.call(obj).match(/\[object (.*)\]/)[1] -} - -const mergeRegistry = (registry) => { - Object.entries(registry).forEach(([key, value]) => { - const defaultConfig = defaultRegistry[key] - if (Array.isArray(value) && defaultConfig) { - value.forEach((meta, index) => { - const defaultMeta = defaultConfig.find((item) => item.id === meta.id) - if (defaultMeta) { - value[index] = merge(defaultMeta, meta) - } - }) - } - - if (type(value) === 'Object' && defaultConfig) { - registry[key] = merge(defaultConfig, registry[key]) - } - }) - console.log('default registry:', defaultRegistry) - console.log('merged registry:', registry) - return registry -} - -const init = (selector, registry) => { - // 合并用户自定义注册表 - const newRegistry = mergeRegistry(registry) - - // 在common层注入合并后的注册表 - defineEntry(newRegistry) - const app = createApp(EngineApp) - initHttp({ env: import.meta.env }) - - // eslint-disable-next-line no-new - new TinyThemeTool(tinySmbTheme, 'smbtheme') // 初始化主题 - - if (import.meta.env.VITE_ERROR_MONITOR === 'true' && import.meta.env.VITE_ERROR_MONITOR_URL) { - initMonitor(import.meta.env.VITE_ERROR_MONITOR_URL) - } - - window.TinyGlobalConfig = globalConfig - setGlobalConfig(globalConfig) - - initSvgs(app) - window.lowcodeI18n = i18n - app.use(i18n).use(injectGlobalComponents).mount('#app') - app.mount(selector) -} -export { init } +export { init } from './src/init' \ No newline at end of file diff --git a/packages/design-core/src/index.js b/packages/design-core/src/index.js deleted file mode 100644 index 1a7837280c..0000000000 --- a/packages/design-core/src/index.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Copyright (c) 2024 - present TinyEngine Authors. - * Copyright (c) 2024 - 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 component from './App.vue' - -export default component diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js new file mode 100644 index 0000000000..9ce02a8f50 --- /dev/null +++ b/packages/design-core/src/init.js @@ -0,0 +1,96 @@ +/** + * 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 { createApp } from 'vue' +import { merge } from 'lodash-es' +import initSvgs from '@opentiny/tiny-engine-svgs' +import { setGlobalConfig } from '@opentiny/tiny-engine-controller' +import i18n from '@opentiny/tiny-engine-controller/js/i18n' +import globalConfig from '../config/lowcode.config' +import { initMonitor } from '@opentiny/tiny-engine-controller/js/monitor' +import { injectGlobalComponents } from '@opentiny/tiny-engine-common' +import { initHttp } from '@opentiny/tiny-engine-http' +import TinyThemeTool from '@opentiny/vue-theme/theme-tool' +import { tinySmbTheme } from '@opentiny/vue-theme/theme' // SMB 主题 +import { defineEntry } from '@opentiny/tiny-engine-entry' +import App from './App.vue' +import defaultRegistry from '../registry.js' + +import 'virtual:svg-icons-register' + +const type = (obj) => { + return Object.prototype.toString.call(obj).match(/\[object (.*)\]/)[1] +} + +const mergeRegistry = (registry) => { + Object.entries(registry).forEach(([key, value]) => { + const defaultConfig = defaultRegistry[key] + if (Array.isArray(value) && defaultConfig) { + value.forEach((meta, index) => { + const defaultMeta = defaultConfig.find((item) => item.id === meta.id) + if (defaultMeta) { + value[index] = merge(defaultMeta, meta) + } + }) + } + + if (type(value) === 'Object' && defaultConfig) { + registry[key] = merge(defaultConfig, registry[key]) + } + }) + console.log('default registry:', defaultRegistry) + console.log('merged registry:', registry) + return registry +} + +const beforeAppCreate = ({ selector, registry }) => { + // 合并用户自定义注册表 + const newRegistry = mergeRegistry(registry) + + // 在common层注入合并后的注册表 + defineEntry(newRegistry) + + initHttp({ env: import.meta.env }) + + // eslint-disable-next-line no-new + new TinyThemeTool(tinySmbTheme, 'smbtheme') // 初始化主题 + + if (import.meta.env.VITE_ERROR_MONITOR === 'true' && import.meta.env.VITE_ERROR_MONITOR_URL) { + initMonitor(import.meta.env.VITE_ERROR_MONITOR_URL) + } + + window.TinyGlobalConfig = globalConfig + setGlobalConfig(globalConfig) +} + +const appCreated = (app) => { + initSvgs(app) + window.lowcodeI18n = i18n + app.use(i18n).use(injectGlobalComponents) +} + +const beforeAppMounted = (app) => { + +} + +const appMounted = (app) => { + +} + +export const init = (selector = '#app', registry = defaultRegistry) => { + beforeAppCreate({ selector, registry }) + const app = createApp(App) + appCreated(app) + beforeAppMounted(app) + app.mount(selector) + appMounted(app) +} diff --git a/packages/design-core/src/main.js b/packages/design-core/src/main.js index 8cfa2c0af7..9ee12b07c6 100644 --- a/packages/design-core/src/main.js +++ b/packages/design-core/src/main.js @@ -10,37 +10,6 @@ * */ -import { createApp } from 'vue' -import initSvgs from '@opentiny/tiny-engine-svgs' -import { setGlobalConfig } from '@opentiny/tiny-engine-controller' -import i18n from '@opentiny/tiny-engine-controller/js/i18n' -import App from './App.vue' -import globalConfig from '../config/lowcode.config' -import { initMonitor } from '@opentiny/tiny-engine-controller/js/monitor' -import { injectGlobalComponents } from '@opentiny/tiny-engine-common' -import { initHttp } from '@opentiny/tiny-engine-http' -import 'virtual:svg-icons-register' +import { init } from './init' -import TinyThemeTool from '@opentiny/vue-theme/theme-tool' -import { tinySmbTheme } from '@opentiny/vue-theme/theme' // SMB 主题 -import { defineEntry } from '@opentiny/tiny-engine-entry' -import defaultRegistry from '../registry.js' - -defineEntry(defaultRegistry) -initHttp({ env: import.meta.env }) - -// eslint-disable-next-line no-new -new TinyThemeTool(tinySmbTheme, 'smbtheme') // 初始化主题 - -if (import.meta.env.VITE_ERROR_MONITOR === 'true' && import.meta.env.VITE_ERROR_MONITOR_URL) { - initMonitor(import.meta.env.VITE_ERROR_MONITOR_URL) -} - -window.TinyGlobalConfig = globalConfig -setGlobalConfig(globalConfig) - -const app = createApp(App) - -initSvgs(app) -window.lowcodeI18n = i18n -app.use(i18n).use(injectGlobalComponents).mount('#app') +init() From 87cb3eb2518ef105650651a1cad022426f820541 Mon Sep 17 00:00:00 2001 From: hexqi Date: Tue, 28 May 2024 16:23:56 +0800 Subject: [PATCH 2/4] feat: use vite command --- designer-demo/engine.config.js | 19 ------------------- designer-demo/package.json | 4 ++-- designer-demo/vite.config.js | 14 ++++++++++++++ 3 files changed, 16 insertions(+), 21 deletions(-) delete mode 100644 designer-demo/engine.config.js create mode 100644 designer-demo/vite.config.js diff --git a/designer-demo/engine.config.js b/designer-demo/engine.config.js deleted file mode 100644 index 4e77b7662e..0000000000 --- a/designer-demo/engine.config.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Copyright (c) 2024 - present TinyEngine Authors. - * Copyright (c) 2024 - 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 defaultConfig from '@opentiny/tiny-engine/vite.config.js' -import { defineConfig } from 'vite' - -export default { - viteConfig: defaultConfig(({ command }) => defineConfig({ command, mode: 'serve' })), - otherConfig: {} -} diff --git a/designer-demo/package.json b/designer-demo/package.json index c6e4c61f5a..69a54f99ef 100644 --- a/designer-demo/package.json +++ b/designer-demo/package.json @@ -4,8 +4,8 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "engine-cli serve", - "build": "engine-cli build" + "dev": "vite", + "build": "vite build" }, "dependencies": { "vue": "^3.4.21", diff --git a/designer-demo/vite.config.js b/designer-demo/vite.config.js new file mode 100644 index 0000000000..61ba84dbe2 --- /dev/null +++ b/designer-demo/vite.config.js @@ -0,0 +1,14 @@ +import { defineConfig } from 'vite' +import getDefaultConfig from '@opentiny/tiny-engine/vite.config.js' + +export default defineConfig((options) => { + const defaultConfig = getDefaultConfig(options) + + return { + ...defaultConfig, + server: { + ...defaultConfig.server, + port: 8090 + } + } +}) From 85545da4970b2f9970646edb9b3fb0a18dbcbc44 Mon Sep 17 00:00:00 2001 From: hexqi Date: Tue, 28 May 2024 17:48:50 +0800 Subject: [PATCH 3/4] feat: add app lifecycle --- designer-demo/src/App.vue | 15 ----- designer-demo/src/canvas.js | 12 ++++ designer-demo/src/defineEntry.js | 15 ----- designer-demo/src/main.js | 13 ++-- package.json | 2 +- .../package.json | 1 + packages/design-core/src/init.js | 61 +++++++++---------- scripts/setup.js | 4 +- 8 files changed, 52 insertions(+), 71 deletions(-) delete mode 100644 designer-demo/src/App.vue delete mode 100644 designer-demo/src/defineEntry.js diff --git a/designer-demo/src/App.vue b/designer-demo/src/App.vue deleted file mode 100644 index a4fa20ff4e..0000000000 --- a/designer-demo/src/App.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - - - diff --git a/designer-demo/src/canvas.js b/designer-demo/src/canvas.js index 118254a0d3..b867bf53f0 100644 --- a/designer-demo/src/canvas.js +++ b/designer-demo/src/canvas.js @@ -1,3 +1,15 @@ +/** + * 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 { createRender } from '@opentiny/tiny-engine-canvas' createRender(window.parent.TinyGlobalConfig) diff --git a/designer-demo/src/defineEntry.js b/designer-demo/src/defineEntry.js deleted file mode 100644 index 2d7ea2064e..0000000000 --- a/designer-demo/src/defineEntry.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Copyright (c) 2024 - present TinyEngine Authors. - * Copyright (c) 2024 - 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 registry from '../registry.js' -import { defineEntry } from '@opentiny/tiny-engine-entry' -defineEntry(registry) diff --git a/designer-demo/src/main.js b/designer-demo/src/main.js index ac35c0ac72..b7eec3b257 100644 --- a/designer-demo/src/main.js +++ b/designer-demo/src/main.js @@ -1,6 +1,6 @@ /** - * Copyright (c) 2024 - present TinyEngine Authors. - * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd. + * 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. * @@ -10,8 +10,9 @@ * */ -import './defineEntry.js' -import { createApp } from 'vue' -import App from './App.vue' +import registry from '../registry.js' +import { defineEntry } from '@opentiny/tiny-engine-entry' +import { init } from '@opentiny/tiny-engine' -createApp(App).mount('#app') +defineEntry(registry) +init() diff --git a/package.json b/package.json index 285319f457..24c3f77dfd 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "preinstall": "npx only-allow pnpm", "dev": "pnpm run setup && concurrently 'pnpm:serve:backend' 'pnpm:serve:frontend'", "dev:mock": "pnpm --filter @opentiny/tiny-engine dev", - "dev:demo": "concurrently 'pnpm:serve:backend' 'pnpm:dev:demo:frontend'", + "dev:demo": "pnpm run setup && concurrently 'pnpm:serve:backend' 'pnpm:dev:demo:frontend'", "serve:frontend": "pnpm --filter @opentiny/tiny-engine serve", "dev:demo:frontend": "pnpm --filter designer-demo dev", "serve:backend": "pnpm --filter @opentiny/tiny-engine-mock dev", diff --git a/packages/build/vite-plugin-generate-comments/package.json b/packages/build/vite-plugin-generate-comments/package.json index 3c245b597b..4225a192d0 100644 --- a/packages/build/vite-plugin-generate-comments/package.json +++ b/packages/build/vite-plugin-generate-comments/package.json @@ -2,6 +2,7 @@ "name": "@opentiny/vite-plugin-generate-comments", "version": "1.0.0", "description": "", + "type": "module", "main": "dist/index.cjs", "module": "dist/index.js", "files": [ diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js index 9ce02a8f50..7484bda519 100644 --- a/packages/design-core/src/init.js +++ b/packages/design-core/src/init.js @@ -32,7 +32,7 @@ const type = (obj) => { } const mergeRegistry = (registry) => { - Object.entries(registry).forEach(([key, value]) => { + for (const [key, value] of Object.entries(registry)) { const defaultConfig = defaultRegistry[key] if (Array.isArray(value) && defaultConfig) { value.forEach((meta, index) => { @@ -46,51 +46,48 @@ const mergeRegistry = (registry) => { if (type(value) === 'Object' && defaultConfig) { registry[key] = merge(defaultConfig, registry[key]) } - }) - console.log('default registry:', defaultRegistry) - console.log('merged registry:', registry) + } + console.log('default registry:', defaultRegistry) // eslint-disable-line + console.log('merged registry:', registry) // eslint-disable-line return registry } -const beforeAppCreate = ({ selector, registry }) => { - // 合并用户自定义注册表 - const newRegistry = mergeRegistry(registry) - - // 在common层注入合并后的注册表 - defineEntry(newRegistry) +const defaultLifeCycles = { + beforeAppCreate: ({ registry }) => { + // 合并用户自定义注册表 + const newRegistry = mergeRegistry(registry) - initHttp({ env: import.meta.env }) + // 在common层注入合并后的注册表 + defineEntry(newRegistry) - // eslint-disable-next-line no-new - new TinyThemeTool(tinySmbTheme, 'smbtheme') // 初始化主题 + initHttp({ env: import.meta.env }) - if (import.meta.env.VITE_ERROR_MONITOR === 'true' && import.meta.env.VITE_ERROR_MONITOR_URL) { - initMonitor(import.meta.env.VITE_ERROR_MONITOR_URL) - } + // eslint-disable-next-line no-new + new TinyThemeTool(tinySmbTheme, 'smbtheme') // 初始化主题 - window.TinyGlobalConfig = globalConfig - setGlobalConfig(globalConfig) -} + if (import.meta.env.VITE_ERROR_MONITOR === 'true' && import.meta.env.VITE_ERROR_MONITOR_URL) { + initMonitor(import.meta.env.VITE_ERROR_MONITOR_URL) + } -const appCreated = (app) => { + window.TinyGlobalConfig = globalConfig + setGlobalConfig(globalConfig) + }, + appCreated: ({ app }) => { initSvgs(app) window.lowcodeI18n = i18n app.use(i18n).use(injectGlobalComponents) + } } -const beforeAppMounted = (app) => { - -} - -const appMounted = (app) => { +export const init = (selector = '#app', registry = defaultRegistry, lifeCycles = {}) => { + const { beforeAppCreate, appCreated, appMounted } = lifeCycles -} - -export const init = (selector = '#app', registry = defaultRegistry) => { - beforeAppCreate({ selector, registry }) + defaultLifeCycles.beforeAppCreate({ registry }) + beforeAppCreate?.({ registry }) const app = createApp(App) - appCreated(app) - beforeAppMounted(app) + defaultLifeCycles.appCreated({ app }) + appCreated?.({ app }) + app.mount(selector) - appMounted(app) + appMounted?.({ app }) } diff --git a/scripts/setup.js b/scripts/setup.js index e68188dac9..1ce9872932 100644 --- a/scripts/setup.js +++ b/scripts/setup.js @@ -1,3 +1,3 @@ -const { exec } = require('child_process') +const { exec } = require('node:child_process') -exec('pnpm -F @opentiny/tiny-engine-controller -F @opentiny/tiny-engine-dsl-vue build') +exec('pnpm -F @opentiny/vite-plugin-generate-comments -F @opentiny/tiny-engine-controller -F @opentiny/tiny-engine-dsl-vue build') From a5e9329c7a0ae2d63646aead6a227e983f8c859f Mon Sep 17 00:00:00 2001 From: hexqi Date: Tue, 28 May 2024 19:23:29 +0800 Subject: [PATCH 4/4] fix: reviews --- designer-demo/vite.config.js | 9 ++++----- packages/design-core/src/init.js | 13 +++++++------ 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/designer-demo/vite.config.js b/designer-demo/vite.config.js index 61ba84dbe2..1a424c307e 100644 --- a/designer-demo/vite.config.js +++ b/designer-demo/vite.config.js @@ -1,14 +1,13 @@ -import { defineConfig } from 'vite' +import { defineConfig, mergeConfig } from 'vite' import getDefaultConfig from '@opentiny/tiny-engine/vite.config.js' export default defineConfig((options) => { const defaultConfig = getDefaultConfig(options) - - return { - ...defaultConfig, + const config = { server: { - ...defaultConfig.server, port: 8090 } } + + return mergeConfig(defaultConfig, config) }) diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js index 7484bda519..72f2dc9f7c 100644 --- a/packages/design-core/src/init.js +++ b/packages/design-core/src/init.js @@ -21,15 +21,14 @@ import { injectGlobalComponents } from '@opentiny/tiny-engine-common' import { initHttp } from '@opentiny/tiny-engine-http' import TinyThemeTool from '@opentiny/vue-theme/theme-tool' import { tinySmbTheme } from '@opentiny/vue-theme/theme' // SMB 主题 +import { utils } from '@opentiny/tiny-engine-utils' import { defineEntry } from '@opentiny/tiny-engine-entry' import App from './App.vue' import defaultRegistry from '../registry.js' import 'virtual:svg-icons-register' -const type = (obj) => { - return Object.prototype.toString.call(obj).match(/\[object (.*)\]/)[1] -} +const { getType } = utils const mergeRegistry = (registry) => { for (const [key, value] of Object.entries(registry)) { @@ -43,12 +42,14 @@ const mergeRegistry = (registry) => { }) } - if (type(value) === 'Object' && defaultConfig) { + if (getType(value) === 'Object' && defaultConfig) { registry[key] = merge(defaultConfig, registry[key]) } } - console.log('default registry:', defaultRegistry) // eslint-disable-line - console.log('merged registry:', registry) // eslint-disable-line + if (process.env.NODE_ENV === 'development') { + console.log('default registry:', defaultRegistry) // eslint-disable-line + console.log('merged registry:', registry) // eslint-disable-line + } return registry }