refactor: extract material-related code to useMaterial from useResource

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -22,7 +22,7 @@ import {
   useProperties,
   useCanvas,
   useLayout,
-  useResource,
+  useMaterial,
   useHistory,
   useModal
 } from '@opentiny/tiny-engine-meta-register'
@@ -170,9 +170,9 @@ export default {
       showMask,
       controller: {
         // 需要在canvas/render或内置组件里使用的方法
-        getMaterial: useResource().getMaterial,
+        getMaterial: useMaterial().getMaterial,
         addHistory: useHistory().addHistory,
-        registerBlock: useResource().registerBlock,
+        registerBlock: useMaterial().registerBlock,
         request: useHttp(),
         ast
       },

packages/canvas/container/src/CanvasContainer.vue

@@ -30,7 +30,7 @@
 <script>
 import { onMounted, ref, computed, onUnmounted } from 'vue'
 import { iframeMonitoring } from '@opentiny/tiny-engine-common/js/monitor'
-import { useTranslate, useCanvas, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useTranslate, useCanvas, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import { NODE_UID, NODE_LOOP } from '../../common'
 import { registerHostkeyEvent, removeHostkeyEvent } from './keyboard'
 import CanvasMenu, { closeMenu, openMenu } from './components/CanvasMenu.vue'
@@ -110,8 +110,7 @@ export default {
     const beforeCanvasReady = () => {
       if (iframe.value) {
         const win = iframe.value.contentWindow
-
-        win.thirdPartyDeps = useResource().resState.thirdPartyDeps
+        win.thirdPartyDeps = useMaterial().materialState.thirdPartyDeps
       }
     }
 

packages/canvas/container/src/components/CanvasAction.vue

@@ -128,7 +128,7 @@ import {
   dragStart,
   getCurrentElement
 } from '../container'
-import { useLayout, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import { Popover } from '@opentiny/vue'
 import shortCutPopover from './shortCutPopover.vue'
 
@@ -236,7 +236,7 @@ export default {
     const showToParent = computed(() => getCurrent().parent !== getSchema())
 
     const isModal = computed(() => {
-      const config = useResource().getMaterial(props.selectState.componentName)
+      const config = useMaterial().getMaterial(props.selectState.componentName)
       return config?.configure?.isModal
     })
 

packages/canvas/container/src/components/shortCutPopover.vue

@@ -30,7 +30,7 @@
 
 <script>
 import { computed, ref } from 'vue'
-import { useResource, useProperties, useCanvas, useProperty } from '@opentiny/tiny-engine-meta-register'
+import { useMaterial, useProperties, useCanvas, useProperty } from '@opentiny/tiny-engine-meta-register'
 import { iconSetting, iconClose } from '@opentiny/vue-icon'
 
 export default {
@@ -39,7 +39,7 @@ export default {
     IconClose: iconClose()
   },
   setup(props, { emit }) {
-    const { getMaterial } = useResource()
+    const { getMaterial } = useMaterial()
     const { pageState } = useCanvas()
     const { properties } = useProperty().getProperty({ pageState })
     const active = ref('props')

packages/canvas/container/src/container.js

@@ -19,7 +19,7 @@ import {
   NODE_TAG,
   NODE_LOOP
 } from '../../common'
-import { useCanvas, useLayout, useResource, useTranslate } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, useLayout, useResource, 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 画布内外应该分开
 
@@ -916,7 +916,7 @@ export const initCanvas = ({ renderer, iframe, emit, controller }) => {
   // 设置画布全局的utils工具类上下文环境
   setUtils(useResource().resState.utils)
   setSchema(schema)
-  setConfigure(useResource().getConfigureMap())
-  canvasDispatch('updateDependencies', { detail: useResource().resState.thirdPartyDeps })
+  setConfigure(useMaterial().getConfigureMap())
+  canvasDispatch('updateDependencies', { detail: useMaterial().materialState.thirdPartyDeps })
   canvasState.loading = false
 }

packages/common/component/ConfigItem.vue

@@ -106,7 +106,7 @@ import { typeOf } from '@opentiny/vue-renderless/common/type'
 import {
   useHistory,
   useProperties,
-  useResource,
+  useMaterial,
   useLayout,
   useCanvas,
   getConfigurator
@@ -261,7 +261,7 @@ export default {
         const currentComponent = useProperties().getSchema().componentName
         const {
           schema: { events = {} }
-        } = useResource().getMaterial(currentComponent)
+        } = useMaterial().getMaterial(currentComponent)
 
         if (Object.keys(events).includes(`onUpdate:${property}`)) {
           // 默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。

packages/common/js/preview.js

@@ -12,7 +12,7 @@
 
 import { constants } from '@opentiny/tiny-engine-utils'
 import { isDevelopEnv } from './environments'
-import { useResource } from '@opentiny/tiny-engine-meta-register'
+import { useMaterial } from '@opentiny/tiny-engine-meta-register'
 // prefer old unicode hacks for backward compatibility
 
 const { COMPONENT_NAME } = constants
@@ -25,10 +25,13 @@ const open = (params = {}) => {
   const paramsMap = new URLSearchParams(location.search)
   params.app = paramsMap.get('id')
   params.tenant = paramsMap.get('tenant')
-  const { scripts, styles } = useResource().resState.thirdPartyDeps
-  params.scripts = scripts
+  const { scripts, styles } = useMaterial().resState.thirdPartyDeps
+  params.scripts = {}
+  scripts
     .filter((item) => item.script)
-    .reduce((pre, cur) => ({ ...pre, [cur.package]: cur.script }), {})
+    .forEach((item) => {
+      params.scripts[item.package] = item.script
+    })
   params.styles = [...styles]
 
   const href = window.location.href.split('?')[0] || './'

packages/configurator/src/container-configurator/ContainerConfigurator.vue

@@ -22,7 +22,7 @@
 <script>
 import { ref } from 'vue'
 import { MetaListItems } from '@opentiny/tiny-engine-common'
-import { useProperties, useResource, useHistory } from '@opentiny/tiny-engine-meta-register'
+import { useProperties, useMaterial, useHistory } from '@opentiny/tiny-engine-meta-register'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { iconDel } from '@opentiny/vue-icon'
 
@@ -33,7 +33,7 @@ export default {
   },
   setup() {
     const { children: schemaChildren, componentName } = useProperties().getSchema()
-    const configureMap = useResource().getConfigureMap()
+    const configureMap = useMaterial().getConfigureMap()
     const childComponentName =
       configureMap[componentName]?.nestingRule?.childWhitelist?.[0] || schemaChildren?.[0]?.componentName
 

packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue

@@ -48,7 +48,7 @@
 </template>
 <script>
 import { reactive, ref, watchEffect } from 'vue'
-import { useProperties, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useProperties, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import { IconDel, IconEdit, IconClose, IconPlus } from '@opentiny/vue-icon'
 import { Form, FormItem, Input, Button, Popover, Tooltip } from '@opentiny/vue'
 import { utils } from '@opentiny/tiny-engine-utils'
@@ -89,7 +89,7 @@ export default {
         return
       }
 
-      const { schema } = useResource().getMaterial(useProperties().getSchema().componentName)
+      const { schema } = useMaterial().getMaterial(useProperties().getSchema().componentName)
       schema?.properties?.forEach(({ content }) => {
         content.forEach(({ property }) => properties.push(property))
       })

packages/configurator/src/slot-configurator/SlotConfigurator.vue

@@ -25,7 +25,7 @@
 <script>
 import { ref, watchEffect, nextTick } from 'vue'
 import { Popover } from '@opentiny/vue'
-import { useProperties, useResource, useModal, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useProperties, useModal, useCanvas, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import { iconHelpCircle } from '@opentiny/vue-icon'
 
 export default {
@@ -108,7 +108,7 @@ export default {
           cancel: () => {}
         })
       }
-      const config = useResource().getMaterial(schema.componentName)
+      const config = useMaterial().getMaterial(schema.componentName)
       const isPopper = config?.configure?.isPopper
 
       if (isPopper) {

packages/configurator/src/table-columns-configurator/TableColumnsConfigurator.vue

@@ -4,11 +4,11 @@
 
 <script setup>
 import { nextTick } from 'vue'
-import { useProperties, useResource, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useProperties, useMaterial, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import ArrayItemConfigurator from '../array-item-configurator/ArrayItemConfigurator.vue'
 
 const { children: schemaChildren, componentName, props } = useProperties().getSchema()
-const configureMap = useResource().getConfigureMap()
+const configureMap = useMaterial().getConfigureMap()
 const childComponentName =
   configureMap[componentName]?.nestingRule?.childWhitelist?.[0] || schemaChildren?.[0]?.componentName
 

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 } from '@opentiny/tiny-engine-plugin-materials'
+export { default as Materials, ResourceService, MaterialService } 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'

packages/plugins/block/src/js/blockSetting.jsx

@@ -22,7 +22,7 @@ import {
   useLayout,
   useNotify,
   useHistory,
-  useResource
+  useMaterial
 } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import { getCanvasStatus } from '@opentiny/tiny-engine-common/js/canvas'
@@ -51,7 +51,7 @@ const { getBlockList, setBlockList, setCategoryList, getCurrentBlock, addBlockEv
 const { batchCreateI18n } = useTranslate()
 const { message, confirm } = useModal()
 const { setSaved } = useCanvas()
-const { getMaterial } = useResource()
+const { getMaterial } = useMaterial()
 
 const STRING_SLOT = ['Slot', 'slot']
 

packages/plugins/materials/index.js

@@ -12,26 +12,26 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta.js'
+import { ResourceService, MaterialService } from './src/composable'
 import MaterialLayout from './src/meta/layout'
 import MaterialBlock from './src/meta/block'
 import MaterialComponent from './src/meta/component'
 import MaterialHeader from './src/components/header/Main.vue'
-import { ResourceService } from './src/composable'
 
 export default {
   ...metaData,
   entry,
   layout: MaterialLayout,
   options: {
     defaultTabId: 'engine.plugins.materials.component',
-    tabComponentIds: ['engine.plugins.materials.component', 'engine.plugins.materials.block']
+    displayComponentIds: ['engine.plugins.materials.component', 'engine.plugins.materials.block']
   },
   components: {
     header: MaterialHeader
   },
   apis: { ...MaterialBlock.apis },
   api: { ...MaterialBlock.apis },
-  metas: [MaterialBlock, MaterialComponent, ResourceService]
+  metas: [MaterialBlock, MaterialComponent, ResourceService, MaterialService]
 }
 
-export { entry, ResourceService }
+export { entry, ResourceService, MaterialService }

packages/plugins/materials/src/composable/index.js

@@ -1,5 +1,6 @@
 import { HOOK_NAME } from '@opentiny/tiny-engine-meta-register'
 import useResource from './useResource'
+import useMaterial from './useMaterial'
 
 export const ResourceService = {
   id: 'engine.service.resource',
@@ -9,3 +10,12 @@ export const ResourceService = {
     name: HOOK_NAME.useResource
   }
 }
+
+export const MaterialService = {
+  id: 'engine.service.material',
+  type: 'MetaService',
+  apis: useMaterial(),
+  composable: {
+    name: HOOK_NAME.useMaterial
+  }
+}