fix：画布物料依赖优化

packages/canvas/container/src/CanvasContainer.vue

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

packages/canvas/container/src/container.js

@@ -936,6 +936,5 @@ export const initCanvas = ({ renderer, iframe, emit, controller }) => {
   setUtils(useResource().resState.utils)
   setSchema(schema)
   setConfigure(useMaterial().getConfigureMap())
-  canvasDispatch('updateDependencies', { detail: useMaterial().materialState.componentsDepsMap })
   canvasState.loading = false
 }

packages/canvas/render/src/runner.js

@@ -11,7 +11,7 @@
  */
 
 import { createApp } from 'vue'
-import { addScript, addStyle, getComponents, updateDependencies } from '../../common'
+import { addScript, addStyle, getComponents } from '../../common'
 import TinyI18nHost, { I18nInjectionKey } from '@opentiny/tiny-engine-common/js/i18n'
 import Main, { api } from './RenderMain'
 import lowcode from './lowcode'
@@ -30,8 +30,6 @@ const initRenderContext = () => {
   window.TinyComponentLibs = {}
 
   supportUmdBlock()
-
-  document.addEventListener('updateDependencies', updateDependencies)
 }
 
 let App = null
@@ -82,10 +80,9 @@ export const createRender = (config) => {
   initRenderContext()
 
   const { styles = [], scripts = [] } = config.canvasDependencies
-  const { scripts: componentsScriptsDeps = [], styles: componentsStylesDeps = [] } = window.componentsDepsMap || {}
 
   Promise.all([
-    ...componentsScriptsDeps.map(getComponents),
-    ...scripts.map((src) => addScript(src)).concat([...componentsStylesDeps, ...styles].map((src) => addStyle(src)))
+    ...window.componentsDeps.map(getComponents),
+    ...scripts.map((src) => addScript(src)).concat(styles.map((src) => addStyle(src)))
   ]).finally(() => create(config))
 }

packages/common/js/preview.js

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

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

@@ -245,16 +245,6 @@ const generateThirdPartyDeps = (components) => {
   return { styles, scripts }
 }
 
-/**
- * 设置第三方组件库依赖
- * @param {array} components 组件物料列表
- */
-const setThirdPartyDeps = (components) => {
-  const { scripts = [], styles = [] } = generateThirdPartyDeps(components)
-  materialState.componentsDepsMap.scripts.push(...scripts)
-  styles.forEach((item) => materialState.componentsDepsMap.styles.add(item))
-}
-
 /**
  * 添加组件snippets(分组相同则合并)
  * @param {*} componentsSnippets 待添加的组件snippets
@@ -277,55 +267,102 @@ const addComponentSnippets = (componentSnippets, snippetsData) => {
   return snippetsData
 }
 
+/**
+ * 解析工具类依赖
+ * @returns
+ */
 const getUtilsDependencies = () => {
   const { utils } = useResource().resState
 
   return utils
     .filter((item) => item.type === 'npm' && item.content.cdnLink)
     .map((item) => {
-      const { package: pkg, cdnLink } = item.content
+      const { package: pkg, version, cdnLink } = item.content
 
       return {
         package: pkg,
+        version,
         script: cdnLink
       }
     })
 }
 
+/**
+ * 组装画布的依赖，通知画布初始化或更新importmap
+ */
 const setCanvasDeps = () => {
-  const allPackages = [...getUtilsDependencies(), ...materialState.dependencies]
-  const deps = allPackages.reduce(
-    ({ scripts, styles }, { package: pkg, script, css }) => {
-      if (scripts.find((item) => item.package === pkg)) {
-        return { scripts, styles }
-      }
-
-      scripts.push({ package: pkg, script })
-      css && styles.add(css)
+  const { scripts, styles } = useResource().resState.canvasDeps
 
-      return { scripts, styles }
-    },
-    {
-      scripts: [],
-      styles: new Set()
+  // 将utils依赖添加到canvasDeps中
+  getUtilsDependencies().forEach((util) => {
+    if (scripts.find((item) => util.package === item.package)) {
+      return
     }
-  )
+
+    scripts.push(util)
+  })
 
   useMessage().publish({
     topic: 'init_canvas_deps',
-    data: { scripts: deps.scripts, styles: [...deps.styles] }
+    data: { scripts: scripts, styles: [...styles] }
   })
 }
 
+//
+const parseMaterialsDependencies = (materialBundle) => {
+  const { packages, components } = materialBundle
+
+  const { scripts: scriptsDeps, styles: stylesDeps } = useResource().resState.canvasDeps
+
+  packages?.forEach((pkg) => {
+    if (scriptsDeps.find((item) => item.package === pkg.package)) {
+      return
+    }
+
+    scriptsDeps.push(pkg)
+
+    if (!pkg.css) {
+      return
+    }
+
+    if (Array.isArray(pkg.css)) {
+      pkg.css.map(stylesDeps.add)
+    } else {
+      stylesDeps.add(pkg.css)
+    }
+  })
+
+  // 解析组件npm字段
+  const { scripts, styles } = generateThirdPartyDeps(components)
+  // 合并到canvasDeps中
+  scripts.forEach((item) => {
+    const dep = scriptsDeps.find((dep) => dep.package === item.package)
+
+    if (dep) {
+      dep.components = { ...dep.components, ...item.components }
+    }
+  })
+
+  if (!styles) {
+    return
+  }
+
+  if (Array.isArray(styles)) {
+    styles.map(stylesDeps.add)
+  } else {
+    stylesDeps.add(styles)
+  }
+}
+
 /**
  * 添加物料Bundle文件中的组件类型物料
  * @param {*} materialBundle 物料包Bundle.json文件对象
  * @returns null
  */
 const addComponents = (materialBundle) => {
   const { snippets, components } = materialBundle
-  // 解析组件三方依赖
-  setThirdPartyDeps(components)
+  // 解析物料依赖
+  parseMaterialsDependencies(materialBundle)
   // 注册组件到map中
   components.forEach(registerComponentToResource)
   // 添加组件snippets
@@ -400,17 +437,14 @@ export const getMaterialsRes = async () => {
 
 const fetchMaterial = async () => {
   const materials = await getMaterialsRes()
-  const packages = []
 
   materials.forEach((response) => {
     if (response.status === 'fulfilled' && response.value.materials) {
       addMaterials(response.value.materials)
-      packages.push(...(response.value.materials.packages || []))
     }
   })
 
-  materialState.dependencies = packages
-  setCanvasDeps(packages)
+  setCanvasDeps()
 }
 
 /**

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

@@ -33,7 +33,8 @@ const resState = reactive({
   pageTree: [],
   langs: {},
   utils: {},
-  globalState: []
+  globalState: [],
+  canvasDeps: { scripts: [], styles: new Set() }
 })
 
 const initPage = (pageInfo) => {

packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue

@@ -37,7 +37,6 @@ import {
   useBlock,
   useModal,
   useResource,
-  useMaterial,
   useNotify,
   getMetaApi,
   META_SERVICE
@@ -133,12 +132,7 @@ export default {
             id: groupId,
             blocks,
             app: getAppId()
-          }).then((res) => {
-            const selectedId = selectedBlockArray.value.map((b) => b.id)
-            const addedBlocks = res.blocks.filter((item) => selectedId.includes(item.id))
-
-            useMaterial().updateCanvasDependencies(addedBlocks)
-
+          }).then(() => {
             isRefresh.value = true
             state.searchValue = ''
             selectedBlockArray.value.length = 0

packages/vue-generator/src/plugins/genDependenciesPlugin.js

@@ -23,20 +23,7 @@ const getComponentsSet = (schema) => {
 
 const parseSchema = (schema) => {
   const { utils = [], componentsMap = [], packages = [] } = schema
-
   const resDeps = {}
-
-  for (const {
-    type,
-    content: { package: packageName, version }
-  } of utils) {
-    if (type !== 'npm' || resDeps[packageName]) {
-      continue
-    }
-
-    resDeps[packageName] = version || 'latest'
-  }
-
   const componentsSet = getComponentsSet(schema)
 
   for (const { package: packageName, version, componentName } of componentsMap) {
@@ -53,6 +40,17 @@ const parseSchema = (schema) => {
     }
   })
 
+  for (const {
+    type,
+    content: { package: packageName, version }
+  } of utils) {
+    if (type !== 'npm' || resDeps[packageName]) {
+      continue
+    }
+
+    resDeps[packageName] = version || 'latest'
+  }
+
   // 处理内置 Icon，如果使用了 tinyvue 组件，则默认添加 @opentiny/vue-icon 依赖，且依赖与 @opentiny/vue 依赖版本一致
   if (resDeps['@opentiny/vue']) {
     resDeps['@opentiny/vue-icon'] = resDeps['@opentiny/vue']