refactor(materials): useResource spilt & Message notification for material loading life cycle

designer-demo/registry.js

@@ -42,6 +42,7 @@ import {
   Canvas,
   EditorInfoService,
   AppService,
+  AppDataService,
   GenerateCodeService
 } from '@opentiny/tiny-engine'
 import engineConfig from './engine.config'
@@ -52,6 +53,7 @@ export default {
     metas: [
       EditorInfoService,
       AppService,
+      AppDataService,
       GenerateCodeService
     ]
   },

packages/canvas/container/src/container.js

@@ -19,7 +19,7 @@ import {
   NODE_TAG,
   NODE_LOOP
 } from '../../common'
-import { useCanvas, useLayout, useResource, useTranslate, useMaterial } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, useLayout, useAppData, useTranslate, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import Builtin from '../../render/src/builtin/builtin.json' //TODO 画布内外应该分开
 
@@ -790,7 +790,7 @@ export const deleteState = (variable) => {
 }
 
 export const setGlobalState = (state) => {
-  useResource().resState.globalState = state
+  useAppData().appDataState.globalState = state
   getRenderer().setGlobalState(state)
 }
 
@@ -911,10 +911,10 @@ export const initCanvas = ({ renderer, iframe, emit, controller }) => {
     senterMessage({ type: 'i18nReady', value: true }, '*')
   }
 
-  setGlobalState(useResource().resState.globalState)
-  renderer.setDataSourceMap(useResource().resState.dataSource)
+  setGlobalState(useAppData().appDataState.globalState)
+  renderer.setDataSourceMap(useAppData().appDataState.dataSource)
   // 设置画布全局的utils工具类上下文环境
-  setUtils(useResource().resState.utils)
+  setUtils(useAppData().appDataState.utils)
   setSchema(schema)
   setConfigure(useMaterial().getConfigureMap())
   canvasDispatch('updateDependencies', { detail: useMaterial().materialState.thirdPartyDeps })

packages/common/component/MetaListItems.vue

@@ -62,7 +62,7 @@
 <script>
 import { computed } from 'vue'
 import { VueDraggableNext } from 'vue-draggable-next'
-import { useResource } from '@opentiny/tiny-engine-meta-register'
+import { useAppData } from '@opentiny/tiny-engine-meta-register'
 import MetaListItem from './MetaListItem.vue'
 
 export default {
@@ -103,7 +103,7 @@ export default {
   },
   setup(props, { emit }) {
     const listItemOption = computed(() => props)
-    const { resState } = useResource()
+    const { appDataState } = useAppData()
 
     const changeItem = (params) => {
       const optionsList = [...props.optionsList]
@@ -159,7 +159,7 @@ export default {
         if (item[props.textField]) {
           if (item[props.textField].i18nKey) {
             let i18nKey = item[props.textField].i18nKey
-            text = resState.langs[i18nKey][resState.currentLang]
+            text = appDataState.langs[i18nKey][appDataState.currentLang]
           } else {
             text = item[props.textField]
           }

packages/common/composable/index.js

@@ -2,6 +2,7 @@ import { HOOK_NAME } from '@opentiny/tiny-engine-meta-register'
 
 import useApp from './useApp'
 import useEditorInfo from './useEditorInfo'
+import useAppData from './useAppData'
 
 export { GenerateCodeService } from './generateCode'
 
@@ -22,3 +23,12 @@ export const EditorInfoService = {
     name: HOOK_NAME.useEditorInfo
   }
 }
+
+export const AppDataService = {
+  id: 'engine.service.appData',
+  type: 'MetaService',
+  apis: useAppData(),
+  composable: {
+    name: HOOK_NAME.useAppData
+  }
+}

packages/common/composable/useAppData.js

@@ -0,0 +1,89 @@
+/**
+ * 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 { reactive } from 'vue'
+import { useHttp } from '@opentiny/tiny-engine-http'
+import { constants } from '@opentiny/tiny-engine-utils'
+import { useApp, useTranslate, useEditorInfo } from '@opentiny/tiny-engine-meta-register'
+
+const { DEFAULT_INTERCEPTOR } = constants
+
+const appDataState = reactive({
+  dataSource: [],
+  pageTree: [],
+  langs: {},
+  utils: {},
+  globalState: [],
+  willFetch: {},
+  dataHandler: {},
+  errorHandler: {},
+  bridge: {},
+  isDemo: false
+})
+
+const initI18n = async () => {
+  const { id, type } = useEditorInfo().useInfo()
+  try {
+    await useTranslate().initI18n({ host: id, hostType: type, init: true })
+  } catch (error) {
+    console.log(error) // eslint-disable-line
+  }
+}
+
+const setAppDataState = (appData) => {
+  appDataState.pageTree = appData.componentsTree
+  appDataState.dataSource = appData.dataSource?.list
+  appDataState.dataHandler = appData.dataSource?.dataHandler || DEFAULT_INTERCEPTOR.dataHandler
+  appDataState.willFetch = appData.dataSource?.willFetch || DEFAULT_INTERCEPTOR.willFetch
+  appDataState.errorHandler = appData.dataSource?.errorHandler || DEFAULT_INTERCEPTOR.errorHandler
+
+  appDataState.bridge = appData.bridge
+  appDataState.utils = appData.utils
+  appDataState.isDemo = appData.meta?.is_demo
+  appDataState.globalState = appData?.meta.global_state
+
+  // 词条语言为空时使用默认的语言
+  const defaultLocales = [
+    { lang: 'zh_CN', label: 'zh_CN' },
+    { lang: 'en_US', label: 'en_US' }
+  ]
+  const locales = Object.keys(appData.i18n).length
+    ? Object.keys(appData.i18n).map((key) => ({ lang: key, label: key }))
+    : defaultLocales
+  appDataState.langs = {
+    locales,
+    messages: appData.i18n
+  }
+}
+
+const fetchAppData = async () => {
+  const { id } = useEditorInfo().useInfo()
+  useApp().appInfoState.selectedId = id
+  return await useHttp().get(`/app-center/v1/api/apps/schema/${id}`)
+}
+
+const initAppData = async () => {
+  const appData = await fetchAppData()
+  setAppDataState(appData)
+  await initI18n()
+
+  //TODO： 先返回，等后续有事件通知后，则不采用返回模式，直接使用事件通知
+  return appData
+}
+
+export default function () {
+  return {
+    appDataState,
+    fetchAppData, // 请求APP全局数据
+    initAppData // 初始化APP全局数据
+  }
+}

packages/common/js/canvas.js

@@ -11,11 +11,11 @@
  */
 
 import { PAGE_STATUS } from './constants'
-import { useEditorInfo, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useEditorInfo, useAppData } from '@opentiny/tiny-engine-meta-register'
 
 export const getCanvasStatus = (data) => {
   // 写死ID 待删除
-  let isDemo = useResource().resState.isDemo
+  let isDemo = useAppData().appDataState.isDemo
   const { resetPasswordToken } = useEditorInfo().userInfo.value
 
   if (isDemo && [PAGE_STATUS.Developer, PAGE_STATUS.SuperAdmin].includes(resetPasswordToken)) {

packages/common/js/completion.js

@@ -10,7 +10,7 @@
  *
  */
 
-import { useCanvas, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, useAppData } from '@opentiny/tiny-engine-meta-register'
 
 const keyWords = [
   'state',
@@ -71,7 +71,7 @@ const getSnippetsSuggestions = (monaco, range, wordContent) =>
     .filter(({ insertText }) => insertText.indexOf(wordContent) === 0)
 
 const getUserWords = () => {
-  const { bridge = [], dataSource = [], utils = [], globalState = [] } = useResource().resState
+  const { bridge = [], dataSource = [], utils = [], globalState = [] } = useAppData().appDataState
 
   return {
     state: {

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

@@ -121,14 +121,7 @@
 
 <script>
 import { VueMonaco as MonacoEditor, SvgButton } from '@opentiny/tiny-engine-common'
-import {
-  useApp,
-  useCanvas,
-  useProperties,
-  useResource,
-  getMetaApi,
-  META_APP
-} from '@opentiny/tiny-engine-meta-register'
+import { useApp, useCanvas, useProperties, useAppData, getMetaApi, META_APP } from '@opentiny/tiny-engine-meta-register'
 import { getCommentByKey } from '@opentiny/tiny-engine-common/js/comment'
 import { formatString, generate, parse, traverse } from '@opentiny/tiny-engine-common/js/ast'
 import { DEFAULT_LOOP_NAME } from '@opentiny/tiny-engine-common/js/constants'
@@ -472,7 +465,7 @@ export default {
       } else if (item.id === 'bridge' || item.id === 'utils') {
         state.bindPrefix = `${CONSTANTS.THIS}${item.id}.`
         const bridge = {}
-        useResource().resState[item.id]?.forEach((res) => {
+        useAppData().appDataState[item.id]?.forEach((res) => {
           bridge[res.name] = `${item.id}.${res.content.exportName}`
         })
 

packages/design-core/index.js

@@ -15,7 +15,7 @@ export { default as GenerateVue, SaveLocalService } from '@opentiny/tiny-engine-
 export { default as Refresh } from '@opentiny/tiny-engine-toolbar-refresh'
 export { default as Collaboration } from '@opentiny/tiny-engine-toolbar-collaboration'
 export { default as Setting } from '@opentiny/tiny-engine-toolbar-setting'
-export { default as Materials, ResourceService, MaterialService } from '@opentiny/tiny-engine-plugin-materials'
+export { default as Materials, MaterialService, PageBlockSchemaService } from '@opentiny/tiny-engine-plugin-materials'
 export { default as Data } from '@opentiny/tiny-engine-plugin-data'
 export { default as Script } from '@opentiny/tiny-engine-plugin-script'
 export { default as Tree } from '@opentiny/tiny-engine-plugin-tree'
@@ -39,4 +39,4 @@ export { default as defaultRegistry } from './registry'
 
 export * from '@opentiny/tiny-engine-meta-register'
 
-export { EditorInfoService, AppService } from '@opentiny/tiny-engine-common'
+export { EditorInfoService, AppService, AppDataService } from '@opentiny/tiny-engine-common'

packages/design-core/src/App.vue

@@ -10,8 +10,10 @@ import {
   useModal,
   useApp,
   useNotify,
-  useResource,
-  useCanvas
+  useCanvas,
+  useAppData,
+  useMaterial,
+  usePageBlockSchema
 } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import { useBroadcastChannel } from '@vueuse/core'
@@ -48,7 +50,7 @@ export default {
     }
 
     const handlePopStateEvent = () => {
-      useResource().handlePopStateEvent()
+      usePageBlockSchema().handlePopStateEvent(useAppData().appDataState.pageTree)
     }
 
     window.addEventListener('popstate', handlePopStateEvent)
@@ -59,9 +61,15 @@ export default {
 
     watch(
       useCanvas().isCanvasApiReady,
-      (ready) => {
+      async (ready) => {
         if (ready) {
-          useResource().fetchResource()
+          const appData = await useAppData().initAppData()
+          try {
+            await useMaterial().initMaterial(appData)
+            await usePageBlockSchema().initPageOrBlock(appData?.componentsTree)
+          } catch (error) {
+            console.log(error) // eslint-disable-line
+          }
         }
       },
       {

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

@@ -44,14 +44,15 @@ import {
   Canvas,
   EditorInfoService,
   AppService,
-  GenerateCodeService
+  GenerateCodeService,
+  AppDataService
 } from '@opentiny/tiny-engine'
 import engineConfig from './engine.config'
 
 export default {
   root: {
     id: 'engine.root',
-    metas: [EditorInfoService, AppService, GenerateCodeService]
+    metas: [EditorInfoService, AppService, GenerateCodeService, AppDataService]
   },
   config: engineConfig,
   layout: Layout,

packages/plugins/bridge/src/js/resource.js

@@ -11,7 +11,7 @@
  */
 
 import { reactive } from 'vue'
-import { useApp, useResource, useNotify, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useApp, useAppData, useNotify, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import {
   fetchResourceList,
@@ -180,8 +180,8 @@ export const saveResource = (data, callback, emit) => {
     data.id = state.resource.id
     requestUpdateReSource(data).then((result) => {
       if (result) {
-        const index = useResource().resState[data.category].findIndex((item) => item.name === result.name)
-        useResource().resState[data.category][index] = result
+        const index = useAppData().appDataState[data.category].findIndex((item) => item.name === result.name)
+        useAppData().appDataState[data.category][index] = result
 
         // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新
         updateUtils([result])
@@ -200,7 +200,7 @@ export const saveResource = (data, callback, emit) => {
   } else {
     requestAddReSource(data).then((result) => {
       if (result) {
-        useResource().resState[data.category].push(result)
+        useAppData().appDataState[data.category].push(result)
 
         // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新
         updateUtils([result])
@@ -223,8 +223,8 @@ export const deleteData = (name, callback, emit) => {
 
   requestDeleteReSource(params).then((data) => {
     if (data) {
-      const index = useResource().resState[state.type].findIndex((item) => item.name === data.name)
-      useResource().resState[state.type].splice(index, 1)
+      const index = useAppData().appDataState[state.type].findIndex((item) => item.name === data.name)
+      useAppData().appDataState[state.type].splice(index, 1)
 
       deleteUtils([data])
       generateBridgeUtil(useApp().appInfoState.selectedId)

packages/plugins/data/src/DataSourceList.vue

@@ -21,7 +21,7 @@
 
 <script lang="jsx">
 import { computed } from 'vue'
-import { useModal, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useModal, useAppData } from '@opentiny/tiny-engine-meta-register'
 import { findExpressionInAppSchema } from '@opentiny/tiny-engine-common/js/ast'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { SvgButton, SearchEmpty } from '@opentiny/tiny-engine-common'
@@ -67,7 +67,7 @@ export default {
     }
 
     const removeStoreConfirm = (key) => {
-      const appPages = useResource().resState.pageTree.filter(
+      const appPages = useAppData().appDataState.pageTree.filter(
         (page) => page.componentName === COMPONENT_NAME.Page && page?.meta?.group !== 'publicPages'
       )
       const expression = `stores.${key}`

packages/plugins/data/src/Main.vue

@@ -73,7 +73,7 @@ import {
   useCanvas,
   useHistory,
   useEditorInfo,
-  useResource,
+  useAppData,
   useNotify,
   useHelp,
   getMetaApi,
@@ -300,7 +300,7 @@ export default {
     }
 
     const removeStore = (key) => {
-      const storeListt = [...useResource().resState.globalState] || []
+      const storeListt = [...useAppData().appDataState.globalState] || []
       const index = storeListt.findIndex((store) => store.id === key)
       const { setGlobalState } = useCanvas().canvasApi.value