feat: move composables to module

designer-demo/registry.js

@@ -43,37 +43,15 @@ import {
   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,
+      AppService
     ]
   },
   config: {

designer-demo/src/main.js

@@ -13,13 +13,8 @@
 // 导入@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'
 import { configurators } from './configurators/'
 import 'virtual:svg-icons-register'
 import '@opentiny/tiny-engine-theme'
 
-const beforeAppCreate = () => {
-  initHook(HOOK_NAME.useEnv, import.meta.env)
-}
-
-init({ registry, configurators, lifeCycles: { beforeAppCreate } })
+init({ registry, configurators })

designer-demo/vite.config.js

@@ -17,7 +17,6 @@ export default defineConfig((options) => {
     '@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'),

packages/canvas/breadcrumb/index.js

@@ -1,6 +1,13 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
 import CanvasBreadcrumb from './src/CanvasFooter.vue'
 import metaData from './meta'
+import useBreadcrumb from './src/useBreadcrumb'
+
 export default {
   ...metaData,
-  entry: CanvasBreadcrumb
+  apis: useBreadcrumb(),
+  entry: CanvasBreadcrumb,
+  composable: {
+    name: HOOK_NAME.useBreadcrumb
+  }
 }

packages/common/component/BlockDeployDialog.vue

@@ -81,7 +81,7 @@ import {
   Popover as TinyPopover,
   FormItem as TinyFormItem
 } from '@opentiny/vue'
-import { theme } from '@opentiny/tiny-engine-controller/adapter'
+import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { useLayout, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
 import { constants } from '@opentiny/tiny-engine-utils'
 import VueMonaco from './VueMonaco.vue'

packages/common/component/LifeCycles.vue

@@ -80,7 +80,7 @@ import { reactive, ref, watchEffect, onBeforeUnmount } from 'vue'
 import { Button, DialogBox, Popover, Search, Alert } from '@opentiny/vue'
 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 { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import MetaListItems from './MetaListItems.vue'
 import { iconYes } from '@opentiny/vue-icon'
 import VueMonaco from './VueMonaco.vue'

packages/controller/src/components/useModal.jsx → packages/common/component/Modal.jsx

@@ -9,9 +9,7 @@ const confirm = ({ title, status, message, exec, cancel, showFooter = true }) =>
     message: () => {
       return (
         <div class="modal-content">
-          <div class="wrap">
-            {typeof message === 'string' ? message : <message />}
-          </div>
+          <div class="wrap">{typeof message === 'string' ? message : <message />}</div>
         </div>
       )
     }
@@ -32,11 +30,9 @@ const message = ({ title, status, message, exec, width = '400' }) => {
     width: width,
     message() {
       return (
-        <div div class="modal-content" >
-          <div class="wrap">
-            {typeof message === 'string' ? message : <message />}
-          </div>
-        </div >
+        <div div class="modal-content">
+          <div class="wrap">{typeof message === 'string' ? message : <message />}</div>
+        </div>
       )
     }
   }).then(() => {
@@ -67,10 +63,8 @@ const topbox = (options) => {
 window.topbox = topbox
 window.message = message
 
-export default () => {
-  return {
-    confirm,
-    message,
-    topbox
-  }
+export default {
+  confirm,
+  message,
+  topbox
 }

packages/common/component/MonacoEditor.vue

@@ -32,7 +32,7 @@
 
 <script>
 import { computed, ref, onActivated, onDeactivated } from 'vue'
-import { theme } from '@opentiny/tiny-engine-controller/adapter'
+import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { Tooltip } from '@opentiny/vue'
 import PublicIcon from './PublicIcon.vue'
 import VueMonaco from './VueMonaco.vue'

packages/common/index.js

@@ -213,3 +213,6 @@ export {
   MetaTableColumns,
   SearchEmpty
 }
+
+export { default as Modal } from './component/Modal'
+export { default as Notify } from './component/Notify'

packages/configurator/src/code-list-configurator/CodeListConfigurator.vue

@@ -43,7 +43,7 @@
 import { getCurrentInstance, reactive, ref, watchEffect } from 'vue'
 import { Button, Tabs, TabItem, Input, ButtonGroup, Switch, Select } from '@opentiny/vue'
 import { IconClose } from '@opentiny/vue-icon'
-import { theme } from '@opentiny/tiny-engine-controller/adapter'
+import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { VueMonaco } from '../components'
 
 export default {

packages/configurator/src/variable-configurator/VariableConfigurator.vue

@@ -121,8 +121,9 @@
 
 <script>
 import { VueMonaco as MonacoEditor, SvgButton } from '../components' // TODO 等 common 包移除了 configurator 依赖后再更换成 @opentiny/tiny-engine-common
-import { useApp, useCanvas, useData, useLayout, useProperties, useResource } from '@opentiny/tiny-engine-controller'
-import { theme } from '@opentiny/tiny-engine-controller/adapter'
+import { useApp, useCanvas, useLayout, useProperties, useResource } from '@opentiny/tiny-engine-controller'
+import { getCommentByKey } from '@opentiny/tiny-engine-controller/js/comment'
+import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { formatString, generate, parse, traverse } from '@opentiny/tiny-engine-controller/js/ast'
 import { DEFAULT_LOOP_NAME } from '@opentiny/tiny-engine-controller/js/constants'
 import { useHttp } from '@opentiny/tiny-engine-http'
@@ -318,7 +319,6 @@ export default {
     const genRemoteMethodToLifeSetup = (variableName, sourceRef, pageSchema) => {
       if (sourceRef?.data?.data) {
         const setupFn = pageSchema.lifeCycles?.setup?.value
-        const { getCommentByKey } = useData()
         const { start, end } = getCommentByKey(variableName)
         const intervalId = `${CONSTANTS.INTERVALID}${capitalize(camelize(sourceRef.name))}`
         const isPoll = state.isPoll && state.pollInterval !== undefined

packages/controller/js/comment.js

@@ -0,0 +1,16 @@
+/**
+ * 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 const getCommentByKey = (key) => ({
+  start: `start-${key} 设计器生成的代码，为了避免出现问题，请勿修改`,
+  end: `end-${key}`
+})

packages/controller/src/example.js → packages/controller/js/example.js

@@ -92,7 +92,8 @@ const exampleMap = {
     }
   ] `
 }
-export default (name) => {
+
+export const getExample = (name) => {
   const resetName = `${name || ''}`.toLocaleLowerCase()
   return exampleMap[resetName]
 }

packages/controller/js/http.js

@@ -11,10 +11,9 @@
  */
 
 import { useHttp } from '@opentiny/tiny-engine-http'
-import useNotify from '../src/components/useNotify'
 import { isVsCodeEnv } from './environments'
 import { generateRouter, generatePage } from './vscodeGenerateFile'
-import { usePage, useCanvas } from '@opentiny/tiny-engine-entry'
+import { usePage, useCanvas, useNotify } from '@opentiny/tiny-engine-entry'
 
 const http = useHttp()
 

packages/controller/adapter.js → packages/controller/js/monaco.js

@@ -10,50 +10,13 @@
  *
  */
 
-import { toRaw } from 'vue'
 import { getMergeMeta } from '@opentiny/tiny-engine-entry'
 
-/**
- * 将画布pageSchema对象转换成编辑器中的string
- *
- * @param {*} obj
- * @returns
- */
-export const obj2String = (obj) => {
-  let out = null
-
-  try {
-    out = JSON.stringify(toRaw(obj), null, 2)
-  } catch (error) {
-    // do nothing
-  }
-
-  return out
-}
-
-/**
- * 将编辑器中的string转换成画布识别的pageSchema对象
- * @param {*} string
- * @returns
- */
-
-export const string2Obj = (string) => {
-  let obj = null
-
-  try {
-    obj = JSON.parse(string)
-  } catch (error) {
-    // do nothing
-  }
-
-  return obj
-}
-
 /**
  * 判断 Monaco 编辑器背景色的主题
  * @returns
  */
-
+// TODO: 后续放入Monaco组件中，由组件提供API设置主题
 export const theme = () => {
   const theme = getMergeMeta('engine.config').theme?.includes('dark') ? 'vs-dark' : 'vs'
 

packages/controller/package.json

@@ -16,8 +16,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./js/": "./dist/js/",
-    "./utils": "./dist/utils.js",
-    "./adapter": "./dist/adapter.js"
+    "./utils": "./dist/utils.js"
   },
   "repository": {
     "type": "git",

packages/controller/src/composable/index.js

@@ -0,0 +1,23 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
+
+import useApp from './useApp'
+import useEditorInfo from './useEditorInfo'
+
+export const AppService = {
+  id: 'engine.service.app',
+  type: 'MetaService',
+  apis: useApp(),
+  composable: {
+    name: HOOK_NAME.useApp
+  }
+}
+
+export const EditorInfoService = {
+  id: 'engine.service.editorInfo',
+  type: 'MetaService',
+  apis: useEditorInfo(),
+  composable: {
+    name: HOOK_NAME.useEditorInfo
+  }
+}
+

packages/controller/src/hooks/useApp.js → packages/controller/src/composable/useApp.js

@@ -13,8 +13,6 @@
 import { reactive, watch } from 'vue'
 import { useHttp } from '@opentiny/tiny-engine-http'
 
-const http = useHttp()
-
 const defaultState = {
   // 应用列表
   list: [],
@@ -41,7 +39,7 @@ const defaultState = {
 const appInfoState = reactive({ ...defaultState })
 
 // 获取当前应用的信息
-const fetchAppInfo = (appId) => http.get(`/app-center/api/apps/detail/${appId}`)
+const fetchAppInfo = (appId) => useHttp().get(`/app-center/api/apps/detail/${appId}`)
 
 watch(
   () => appInfoState.selectedId,
@@ -55,7 +53,7 @@ watch(
 )
 
 // 获取应用列表
-const fetchAppList = (platformId) => http.get(`/app-center/api/apps/list/${platformId}`)
+const fetchAppList = (platformId) => useHttp().get(`/app-center/api/apps/list/${platformId}`)
 
 const updateApp = async (id) => {
   const appInfo = await fetchAppInfo(id)

packages/controller/src/hooks/useEditorInfo.js → packages/controller/src/composable/useEditorInfo.js

@@ -12,7 +12,7 @@
 
 import { ref } from 'vue'
 import { useHttp } from '@opentiny/tiny-engine-http'
-import useModal from '../components/useModal'
+import { useModal } from '@opentiny/tiny-engine-entry'
 
 // web版获取配置信息: 从url中获取
 const _getWebData = () => {