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

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

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/canvas/render/src/RenderMain.js

@@ -13,13 +13,13 @@
 import { h, provide, inject, nextTick, shallowReactive, reactive, ref, watch, watchEffect } from 'vue'
 import { I18nInjectionKey } from 'vue-i18n'
 import { useBroadcastChannel } from '@vueuse/core'
-import { constants } from '@opentiny/tiny-engine-utils'
-import { generateFunction } from '@opentiny/tiny-engine-controller/utils'
+import { constants, utils as commonUtils } from '@opentiny/tiny-engine-utils'
 import renderer, { parseData, setConfigure, setController, globalNotify, isStateAccessor } from './render'
 import { getNode as getNodeById, clearNodes, getRoot, setContext, getContext, setCondition, context } from './context'
 import CanvasEmpty from './CanvasEmpty.vue'
 
 const { BROADCAST_CHANNEL } = constants
+const { parseFunction: generateFunction } = commonUtils
 
 const reset = (obj) => {
   Object.keys(obj).forEach((key) => delete obj[key])

packages/common/component/BindI18n.vue

@@ -54,7 +54,7 @@
 <script>
 import { reactive, ref, watchEffect } from 'vue'
 import { useLayout, useTranslate } from '@opentiny/tiny-engine-controller'
-import { PROP_DATA_TYPE } from '@opentiny/tiny-engine-controller/utils'
+import { PROP_DATA_TYPE } from '@opentiny/tiny-engine-controller/js/constants'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { Select, Option, Button, Input } from '@opentiny/vue'
 import { iconPlus } from '@opentiny/vue-icon'

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/ConfigItem.vue

@@ -107,9 +107,11 @@ import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 import { CodeConfigurator, VariableConfigurator } from '@opentiny/tiny-engine-configurator'
 import MultiTypeSelector from './MultiTypeSelector.vue'
 import { useHistory, useProperties, useResource, useLayout, useCanvas } from '@opentiny/tiny-engine-controller'
-import { generateFunction } from '@opentiny/tiny-engine-controller/utils'
 import { SCHEMA_DATA_TYPE, PAGE_STATUS, TYPES } from '@opentiny/tiny-engine-controller/js/constants'
 import { getConfigurator } from '@opentiny/tiny-engine-entry'
+import { utils } from '@opentiny/tiny-engine-utils'
+
+const { parseFunction: generateFunction } = utils
 
 const hasRule = (required, rules) => {
   if (required) {

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/components/BindI18n.vue

@@ -54,7 +54,7 @@
 <script>
 import { reactive, ref, watchEffect } from 'vue'
 import { useLayout, useTranslate } from '@opentiny/tiny-engine-controller'
-import { PROP_DATA_TYPE } from '@opentiny/tiny-engine-controller/utils'
+import { PROP_DATA_TYPE } from '@opentiny/tiny-engine-controller/js/constants'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { Select, Option, Button, Input } from '@opentiny/vue'
 import { iconPlus } from '@opentiny/vue-icon'

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/js/constants.js

@@ -71,8 +71,27 @@ export const HOST_TYPE = {
   Block: 'block'
 }
 
-// ת�����ʻ���ӳ���ϵ��
 export const i18nKeyMaps = {
   zhCN: 'zh_CN',
   enUS: 'en_US'
 }
+
+export const MATERIAL_TYPE = {
+  Component: 'component',
+  Block: 'block'
+}
+
+export const NODE_INSERT_TYPE = {
+  Inside: 'inside',
+  After: 'after',
+  Before: 'before',
+  Replace: 'replace'
+}
+
+export const PROP_DATA_TYPE = {
+  I18N: 'i18n',
+  VARIABLE: 'variable',
+  JSEXPRESSION: 'JSExpression',
+  JSRESOURCE: 'JSResource',
+  JSSLOT: 'JSSlot'
+}

packages/controller/js/css.js

@@ -11,7 +11,9 @@
  */
 
 import * as cssTree from 'css-tree'
-import { hyphenate } from '../utils'
+import { utils } from '@opentiny/tiny-engine-utils'
+
+const { hyphenate } = utils
 
 /**
  * 传入 css 字符串，得到以选择器为 Key，css 规则为 value 的 object

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
+  }
+}
+