feat: merge lowcodeconfig with registry, migrate alias config to demo

designer-demo/registry.js

@@ -11,6 +11,11 @@
  */
 
 export default {
+  config: {
+    id: 'engine.config',
+    theme: 'dark',
+    material: [],
+  },
   layout: { id: 'engine.layout' },
   toolbars: [
     {

designer-demo/vite.config.js

@@ -1,11 +1,70 @@
+import path from 'node:path'
 import { defineConfig, mergeConfig } from 'vite'
 import getDefaultConfig from '@opentiny/tiny-engine/vite.config.js'
 
 export default defineConfig((options) => {
   const defaultConfig = getDefaultConfig(options)
+
+  const devAlias = {
+    '@opentiny/tiny-engine-controller/js': path.resolve(__dirname, '../packages/controller/js'),
+    '@opentiny/tiny-engine-common/component': path.resolve(__dirname, '../packages/common/component'),
+    '@opentiny/tiny-engine-common': path.resolve(__dirname, '../packages/common/index.js'),
+    '@opentiny/tiny-engine-controller/utils': path.resolve(__dirname, '../packages/controller/utils.js'),
+    '@opentiny/tiny-engine-controller/adapter': path.resolve(__dirname, '../packages/controller/adapter.js'),
+    '@opentiny/tiny-engine-controller': path.resolve(__dirname, '../packages/controller/src/index.js'),
+    '@opentiny/tiny-engine-plugin-materials': path.resolve(__dirname, '../packages/plugins/materials/index.js'),
+    '@opentiny/tiny-engine-plugin-block': path.resolve(__dirname, '../packages/plugins/block/index.js'),
+    '@opentiny/tiny-engine-plugin-data': path.resolve(__dirname, '../packages/plugins/data/index.js'),
+    '@opentiny/tiny-engine-plugin-datasource': path.resolve(__dirname, '../packages/plugins/datasource/index.js'),
+    '@opentiny/tiny-engine-plugin-script': path.resolve(__dirname, '../packages/plugins/script/index.js'),
+    '@opentiny/tiny-engine-plugin-tree': path.resolve(__dirname, '../packages/plugins/tree/index.js'),
+    '@opentiny/tiny-engine-plugin-help': path.resolve(__dirname, '../packages/plugins/help/index.js'),
+    '@opentiny/tiny-engine-plugin-schema': path.resolve(__dirname, '../packages/plugins/schema/index.js'),
+    '@opentiny/tiny-engine-plugin-page': path.resolve(__dirname, '../packages/plugins/page/index.js'),
+    '@opentiny/tiny-engine-plugin-i18n': path.resolve(__dirname, '../packages/plugins/i18n/index.js'),
+    '@opentiny/tiny-engine-plugin-bridge': path.resolve(__dirname, '../packages/plugins/bridge/index.js'),
+    '@opentiny/tiny-engine-plugin-tutorial': path.resolve(__dirname, '../packages/plugins/tutorial/index.js'),
+    '@opentiny/tiny-engine-plugin-robot': path.resolve(__dirname, '../packages/plugins/robot/index.js'),
+    '@opentiny/tiny-engine-settings-panel': path.resolve(__dirname, '../packages/settings/panel/index.js'),
+    '@opentiny/tiny-engine-setting-events': path.resolve(__dirname, '../packages/settings/events/index.js'),
+    '@opentiny/tiny-engine-setting-props': path.resolve(__dirname, '../packages/settings/props/index.js'),
+    '@opentiny/tiny-engine-setting-styles': path.resolve(__dirname, '../packages/settings/styles/index.js'),
+    '@opentiny/tiny-engine-toolbar-breadcrumb': path.resolve(__dirname, '../packages/toolbars/breadcrumb/index.js'),
+    '@opentiny/tiny-engine-toolbar-fullscreen': path.resolve(__dirname, '../packages/toolbars/fullscreen/index.js'),
+    '@opentiny/tiny-engine-toolbar-lang': path.resolve(__dirname, '../packages/toolbars/lang/index.js'),
+    '@opentiny/tiny-engine-toolbar-layout': path.resolve(__dirname, '../packages/toolbars/layout/index.js'),
+    '@opentiny/tiny-engine-toolbar-checkinout': path.resolve(__dirname, '../packages/toolbars/lock/index.js'),
+    '@opentiny/tiny-engine-toolbar-logo': path.resolve(__dirname, '../packages/toolbars/logo/index.js'),
+    '@opentiny/tiny-engine-toolbar-logout': path.resolve(__dirname, '../packages/toolbars/logout/index.js'),
+    '@opentiny/tiny-engine-toolbar-media': path.resolve(__dirname, '../packages/toolbars/media/index.js'),
+    '@opentiny/tiny-engine-toolbar-preview': path.resolve(__dirname, '../packages/toolbars/preview/index.js'),
+    '@opentiny/tiny-engine-toolbar-generate-vue': path.resolve(__dirname, '../packages/toolbars/generate-vue/index.js'),
+    '@opentiny/tiny-engine-toolbar-refresh': path.resolve(__dirname, '../packages/toolbars/refresh/index.js'),
+    '@opentiny/tiny-engine-toolbar-redoundo': path.resolve(__dirname, '../packages/toolbars/redoundo/index.js'),
+    '@opentiny/tiny-engine-toolbar-clean': path.resolve(__dirname, '../packages/toolbars/clean/index.js'),
+    '@opentiny/tiny-engine-toolbar-save': path.resolve(__dirname, '../packages/toolbars/save/index.js'),
+    '@opentiny/tiny-engine-toolbar-setting': path.resolve(__dirname, '../packages/toolbars/setting/index.js'),
+    '@opentiny/tiny-engine-toolbar-collaboration': path.resolve(__dirname, '../packages/toolbars/collaboration/index.js'),
+    '@opentiny/tiny-engine-theme-dark': path.resolve(__dirname, '../packages/theme/dark/index.less'),
+    '@opentiny/tiny-engine-theme-light': path.resolve(__dirname, '../packages/theme/light/index.less'),
+    '@opentiny/tiny-engine-svgs': path.resolve(__dirname, '../packages/svgs/index.js'),
+    '@opentiny/tiny-engine-http': path.resolve(__dirname, '../packages/http/src/index.js'),
+    '@opentiny/tiny-engine-canvas': path.resolve(__dirname, '../packages/canvas/src/index.js'),
+    '@opentiny/tiny-engine-utils': path.resolve(__dirname, '../packages/utils/src/index.js'),
+    '@opentiny/tiny-engine-webcomponent-core': path.resolve(__dirname, '../packages/webcomponent/src/lib.js'),
+    '@opentiny/tiny-engine-i18n-host': path.resolve(__dirname, '../packages/i18n/src/lib.js'),
+    '@opentiny/tiny-engine-builtin-component': path.resolve(__dirname, '../packages/builtinComponent/index.js'),
+    '@opentiny/tiny-engine-entry': path.resolve(__dirname, '../packages/entry/src/index.js'),
+    '@opentiny/tiny-engine-layout': path.resolve(__dirname, '../packages/layout/index.js'),
+    '@opentiny/tiny-engine-configurator': path.resolve(__dirname, '../packages/configurator/src/index.js')
+  }
+
   const config = {
     server: {
       port: 8090
+    },
+    resolve: {
+      alias: devAlias
     }
   }
 

packages/canvas/src/components/render/runner.js

@@ -134,8 +134,8 @@ const create = () => {
 
 export const createRender = (config) => {
   initRenderContext()
-  const { dslMode, canvasOptions } = config
-  const { styles = [], scripts = [] } = canvasOptions[dslMode]
+
+  const { styles = [], scripts = [] } = config.canvasDependencies
   const { styles: thirdStyles = [], scripts: thirdScripts = [] } = window.thirdPartyDeps || {}
 
   Promise.all([

packages/common/component/LifeCycles.vue

@@ -78,7 +78,8 @@
 <script lang="jsx">
 import { reactive, ref, watchEffect, onBeforeUnmount } from 'vue'
 import { Button, DialogBox, Popover, Search, Alert } from '@opentiny/vue'
-import { getGlobalConfig, useModal, usePage, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
+import { useModal, usePage, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
+import { getMergeMeta } from '@opentiny/tiny-engine-entry'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
 import MetaListItems from './MetaListItems.vue'
 import { iconYes } from '@opentiny/vue-icon'
@@ -112,9 +113,9 @@ export default {
     const { confirm } = useModal()
     const { getPageContent } = usePage()
 
-    const lifeCycles = getGlobalConfig()?.lifeCyclesOptions[getGlobalConfig()?.dslMode]
+    const lifeCycles = getMergeMeta('engine.config')?.lifeCyclesOptions[getMergeMeta('engine.config')?.dslMode]
 
-    const lifeCycleTips = getGlobalConfig()?.lifeCycleTips[getGlobalConfig()?.dslMode]
+    const lifeCycleTips = getMergeMeta('engine.config')?.lifeCycleTips[getMergeMeta('engine.config')?.dslMode]
 
     const state = reactive({
       showPopover: true,

packages/controller/adapter.js

@@ -11,7 +11,7 @@
  */
 
 import { toRaw } from 'vue'
-import { getGlobalConfig } from './src/globalConfig'
+import { getMergeMeta } from '@opentiny/tiny-engine-entry'
 
 /**
  * 将画布pageSchema对象转换成编辑器中的string
@@ -55,7 +55,7 @@ export const string2Obj = (string) => {
  */
 
 export const theme = () => {
-  const theme = getGlobalConfig()?.theme?.includes('dark') ? 'vs-dark' : 'vs'
+  const theme = getMergeMeta('engine.config').theme?.includes('dark') ? 'vs-dark' : 'vs'
 
   return theme
 }

packages/controller/src/index.js

@@ -26,7 +26,6 @@ import usePage from './usePage'
 import useDataSource from './useDataSource'
 import useBreadcrumb from './useBreadcrumb'
 import useProperty from './useProperty'
-import { getGlobalConfig, setGlobalConfig } from './globalConfig'
 import useNotify from './useNotify'
 import useData from './useData'
 import useMessage from './useMessage'
@@ -51,8 +50,6 @@ export {
   useDataSource,
   useBreadcrumb,
   useProperty,
-  getGlobalConfig,
-  setGlobalConfig,
   useNotify,
   useData,
   useMessage,

packages/controller/src/useBlock.js

@@ -24,7 +24,7 @@ import useTranslate from './useTranslate'
 import useEditorInfo from './useEditorInfo'
 import useBreadcrumb from './useBreadcrumb'
 import useLayout from './useLayout'
-import { getGlobalConfig } from './globalConfig'
+import { getMergeMeta } from '@opentiny/tiny-engine-entry'
 
 const { SORT_TYPE, SCHEMA_DATA_TYPE, BLOCK_OPENNESS } = constants
 
@@ -328,7 +328,7 @@ const createBlock = ({ name_cn, label, path, categories }) => {
     histories: [],
     categories,
     public: BLOCK_OPENNESS.Open,
-    framework: getGlobalConfig()?.dslMode,
+    framework: getMergeMeta('engine.config')?.dslMode,
     content: {
       ...extend(true, {}, DEFAULT_BLOCK),
       fileName: label,
@@ -350,7 +350,7 @@ const createEmptyBlock = ({ name_cn, label, path, categories }) => {
     label,
     categories,
     public: BLOCK_OPENNESS.Open,
-    framework: getGlobalConfig()?.dslMode,
+    framework: getMergeMeta('engine.config')?.dslMode,
     content: {
       ...extend(true, {}, DEFAULT_BLOCK),
       fileName: label

packages/controller/src/useResource.js

@@ -11,10 +11,10 @@
  */
 
 import { reactive } from 'vue'
-import { getGlobalConfig } from './globalConfig'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { utils, constants } from '@opentiny/tiny-engine-utils'
 import { meta as BuiltinComponentMaterials } from '@opentiny/tiny-engine-builtin-component'
+import { getMergeMeta } from '@opentiny/tiny-engine-entry'
 import { getCanvasStatus } from '../js/canvas'
 import useApp from './useApp'
 import useCanvas from './useCanvas'
@@ -246,8 +246,7 @@ const getConfigureMap = () => {
 }
 
 const fetchMaterial = async () => {
-  const { dslMode, canvasOptions } = getGlobalConfig()
-  const bundleUrls = canvasOptions[dslMode].material
+  const bundleUrls = getMergeMeta('engine.config')?.material || []
   const materials = await Promise.allSettled(bundleUrls.map((url) => http.get(url)))
 
   materials.forEach((response) => {

packages/controller/src/useSaveLocal.js

@@ -13,7 +13,7 @@
 import { Modal } from '@opentiny/vue'
 import { VITE_ORIGIN } from '../js/environments'
 import useCanvas from './useCanvas'
-import { getGlobalConfig } from './globalConfig'
+import { getMergeMeta } from '@opentiny/tiny-engine-entry'
 
 // 获取当前页面的全量信息
 
@@ -28,7 +28,7 @@ const confirmSaveLocal = async () => {
     api: `${VITE_ORIGIN}/app-service/api/pages/code/${currentPageId}`,
     pageName: currentPageName,
     pageId: currentPageId,
-    platformId: getGlobalConfig()?.platformId
+    platformId: getMergeMeta('engine.config')?.platformId
   })
 
   if (savePage.error) {
@@ -53,7 +53,7 @@ const savePageLocal = async () => {
   const fileExistRes = await bridge.callHandler('page-is-exist', {
     pageName: currentPageName || currentPage.name,
     pageId: currentPageId || currentPage.id,
-    platformId: getGlobalConfig()?.platformId
+    platformId: getMergeMeta('engine.config')?.platformId
   })
 
   // 查询本地文件失败：存在同名文件 / 接口报错

packages/design-core/config/lowcode.config.js

@@ -37,7 +37,7 @@ export default {
     HTML: {},
     Flowchart: {}
   },
-
+  // TODO: 声明周期相关配置拆分到页面管理的配置项里面
   // 生命周期函数
   lifeCyclesOptions: {
     Angular: [

packages/design-core/registry.js

@@ -42,9 +42,63 @@ import Props from '@opentiny/tiny-engine-setting-props'
 import Events from '@opentiny/tiny-engine-setting-events'
 import Styles from '@opentiny/tiny-engine-setting-styles'
 
-import '@opentiny/tiny-engine-theme'
-
 export default {
+  config: {
+    id: 'engine.config',
+    // TODO: 主题支持传入主题 package 或者是 url。
+    theme: 'light',
+    // 物料链接
+    material: [],
+    // 画布依赖的 script、styles 链接。TODO: 解耦后添加默认 tinyvue 的链接
+    canvasDependencies: {
+      styles: [],
+      scripts: []
+    },
+    dslMode: 'Vue',
+    platformId: 918,
+    // TODO: 声明周期相关配置拆分到页面管理的配置项里面
+    // 生命周期函数
+    lifeCyclesOptions: {
+      Angular: [
+        '_constructor_',
+        'ngOnInit',
+        'ngOnChanges',
+        'ngDoCheck',
+        'ngAfterContentInit',
+        'ngAfterContentChecked',
+        'ngAfterViewInit',
+        'ngAfterViewChecked',
+        'ngOnDestroy'
+      ],
+      Vue: [
+        'setup',
+        'onBeforeMount',
+        'onMounted',
+        'onBeforeUpdate',
+        'onUpdated',
+        'onBeforeUnmount',
+        'onUnmounted',
+        'onErrorCaptured',
+        'onActivated',
+        'onDeactivated'
+      ],
+      HTML: [],
+      React: [
+        'componentWillMount',
+        'componentDidMount',
+        'componentWillReceiveProps',
+        'shouldComponentUpdate',
+        'componentWillUpdate',
+        'componentDidUpdate',
+        'componentWillUnmount'
+      ]
+    },
+
+    // 生命周期使用提示
+    lifeCycleTips: {
+      Vue: '通过Vue解构出来的方法都可以在setup这里使用，比如watch、computed、watchEffect等'
+    }
+  },
   layout: { id: 'engine.layout' },
   toolbars: [
     Logo,

packages/design-core/src/App.vue

@@ -40,12 +40,17 @@ import blockPlugin from '@opentiny/tiny-engine-plugin-block'
 import materials from '@opentiny/tiny-engine-plugin-materials'
 import { useBroadcastChannel } from '@vueuse/core'
 import { constants } from '@opentiny/tiny-engine-utils'
+import { getMergeMeta } from '@opentiny/tiny-engine-entry'
 
 const { message } = useModal()
 const { requestInitBlocks } = blockPlugin.api
 const { fetchGroups } = materials.api
 const { BROADCAST_CHANNEL } = constants
 
+const config = getMergeMeta('engine.config')
+
+import(`./theme/${config.theme}.js`)
+
 export default {
   name: 'TinyLowCode',
   components: {
@@ -177,3 +182,4 @@ export default {
   }
 }
 </style>
+./theme/light.js

packages/design-core/src/init.js

@@ -12,9 +12,7 @@
 
 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 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'
@@ -48,8 +46,8 @@ const defaultLifeCycles = {
       initMonitor(import.meta.env.VITE_ERROR_MONITOR_URL)
     }
 
-    window.TinyGlobalConfig = globalConfig
-    setGlobalConfig(globalConfig)
+    // 这里暴露到 window 是为了让 canvas 可以读取
+    window.TinyGlobalConfig = newRegistry.config || {}
   },
   appCreated: ({ app }) => {
     initSvgs(app)

packages/design-core/src/preview/src/App.vue

@@ -4,10 +4,14 @@
 </template>
 
 <script>
+import { getMergeMeta } from '@opentiny/tiny-engine-entry'
 import { useDebugSwitch } from './preview/debugSwitch'
 import Preview from './preview/Preview.vue'
 import Toolbar from './Toolbar.vue'
-import '@opentiny/tiny-engine-theme'
+
+const config = getMergeMeta('engine.config')
+
+import(`../../theme/${config.theme}.js`)
 
 export default {
   components: {

packages/design-core/src/theme/dark.js

@@ -0,0 +1 @@
+import '@opentiny/tiny-engine-theme-dark'

packages/design-core/src/theme/light.js

@@ -0,0 +1 @@
+import '@opentiny/tiny-engine-theme-light'