feat: materials new protocol (opentiny#940)

Author: yy-wow

designer-demo/public/mock/bundle.json

@@ -2092,7 +2092,8 @@
           "value": "",
           "package": "axios",
           "destructuring": false,
-          "exportName": "axios"
+          "exportName": "axios",
+          "cdnLink": "https://unpkg.com/browse/axios@1.7.9/dist/esm/axios.min.js"
         }
       },
       {

mockServer/src/mock/get/app-center/v1/apps/schema/918.json

@@ -65,12 +65,21 @@ export default {
     const canvasRef = ref(null)
     let showModal = false // 弹窗标识
     const { canvasSrc = '' } = getOptions(meta.id) || {}
-    let canvasSrcDoc = ''
+    const canvasSrcDoc = ref('')
 
-    if (!canvasSrc) {
-      const { importMap, importStyles } = getImportMapData(getMergeMeta('engine.config')?.importMapVersion)
-      canvasSrcDoc = initCanvas(importMap, importStyles).html
-    }
+    useMessage().subscribe({
+      topic: 'init_canvas_deps',
+      subscriber: 'canvas_design_canvas',
+      callback: (deps) => {
+        if (canvasSrc) {
+          return
+        }
+
+        const { importMap, importStyles } = getImportMapData(getMergeMeta('engine.config')?.importMapVersion, deps)
+
+        canvasSrcDoc.value = initCanvas(importMap, importStyles).html
+      }
+    })
 
     const removeNode = (node) => {
       const { pageState } = useCanvas()
@@ -231,6 +240,11 @@ export default {
     })
     onUnmounted(() => {
       window.removeEventListener('popstate', postUrlChanged)
+
+      useMessage().unsubscribe({
+        topic: 'init_canvas_deps',
+        subscriber: 'canvas_design_canvas'
+      })
     })
 
     return {

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -1,6 +1,6 @@
 import { VITE_CDN_DOMAIN } from '@opentiny/tiny-engine-common/js/environments'
 
-export function getImportMapData(overrideVersions = {}) {
+export function getImportMapData(overrideVersions = {}, canvasDeps = { scripts: [], styles: [] }) {
   const importMapVersions = Object.assign(
     {
       vue: '3.4.23',
@@ -32,16 +32,25 @@ export function getImportMapData(overrideVersions = {}) {
     }
   }
 
+  const materialsAndUtilsRequire = canvasDeps.scripts.reduce((imports, { package: pkg, script }) => {
+    if (pkg && script) {
+      imports[pkg] = script
+    }
+
+    return imports
+  }, {})
+
   const importMap = {
     imports: {
       vue: `${VITE_CDN_DOMAIN}/vue@${importMapVersions.vue}/dist/vue.runtime.esm-browser.prod.js`,
       'vue-i18n': `${VITE_CDN_DOMAIN}/vue-i18n@${importMapVersions.vueI18n}/dist/vue-i18n.esm-browser.js`,
       ...blockRequire.imports,
-      ...tinyVueRequire.imports
+      ...tinyVueRequire.imports,
+      ...materialsAndUtilsRequire
     }
   }
 
-  const importStyles = [...blockRequire.importStyles]
+  const importStyles = [...blockRequire.importStyles, ...canvasDeps.styles]
 
   return {
     importMap,

packages/canvas/DesignCanvas/src/importMap.js

@@ -56,12 +56,20 @@ export const copyObject = (node) => {
 }
 
 /**
- * 动态导入组件，缓存组件对象
- * @param {object} param0 组件的依赖： { package: 包名，script：js文件cdn, components：组件id和导出组件名的映射关系}
+ * 动态导入获取组件库模块
+ * @param {*} pkg 模块名称
+ * @param {*} script 模块的cdn地址
  * @returns
  */
-export const dynamicImportComponents = async ({ package: pkg, script, components }) => {
-  if (!script) return
+const dynamicImportComponentLib = async ({ pkg, script }) => {
+  if (window.TinyComponentLibs[pkg]) {
+    return window.TinyComponentLibs[pkg]
+  }
+
+  if (!script) {
+    return {}
+  }
+
   const href = window.parent.location.href || location.href // 这里要取父窗口的地址，因为在iframe中href是about:srcdoc
   const scriptUrl = script.startsWith('.') ? new URL(script, href).href : script
 
@@ -71,27 +79,22 @@ export const dynamicImportComponents = async ({ package: pkg, script, components
     window.TinyComponentLibs[pkg] = modules
   }
 
-  Object.entries(components).forEach(([componentId, exportName]) => {
-    const modules = window.TinyComponentLibs[pkg]
-
-    if (!window.TinyLowcodeComponent[componentId]) {
-      window.TinyLowcodeComponent[componentId] = modules[exportName]
-    }
-  })
+  return window.TinyComponentLibs[pkg]
 }
 
 /**
- * 更新区块/组件依赖
- * @param {object} param0 依赖的CDN信息
+ * 获取组件对象并缓存，组件渲染时使用
+ * @param {object} param0 组件的依赖： { package： 包名，script：js文件cdn, components：组件id和导出组件名的映射关系}
+ * @returns
  */
-export const updateDependencies = ({ detail }) => {
-  const { scripts = [], styles = [] } = detail || {}
-  const { styles: canvasStyles } = window.thirdPartyDeps
-  const newStyles = [...styles].filter((item) => !canvasStyles.has(item))
+export const getComponents = async ({ package: pkg, script, components }) => {
+  if (!pkg) return
 
-  newStyles.forEach((item) => canvasStyles.add(item))
+  const modules = await dynamicImportComponentLib({ pkg, script })
 
-  const promises = [...newStyles].map((src) => addStyle(src)).concat(scripts.map(dynamicImportComponents))
-
-  Promise.allSettled(promises)
+  Object.entries(components).forEach(([componentId, exportName]) => {
+    if (!window.TinyLowcodeComponent[componentId]) {
+      window.TinyLowcodeComponent[componentId] = modules[exportName]
+    }
+  })
 }

packages/canvas/common/src/utils.js

@@ -33,7 +33,7 @@
 <script>
 import { onMounted, ref, computed, onUnmounted, watch, watchEffect } from 'vue'
 import { iframeMonitoring } from '@opentiny/tiny-engine-common/js/monitor'
-import { useTranslate, useCanvas, useMaterial, useMessage, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useTranslate, useCanvas, useMessage, 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'
@@ -117,7 +117,8 @@ export default {
     const beforeCanvasReady = () => {
       if (iframe.value) {
         const win = iframe.value.contentWindow
-        win.thirdPartyDeps = useMaterial().materialState.thirdPartyDeps
+        // 用于画布初始化组件依赖
+        win.componentsDeps = useResource().appSchemaState.materialsDeps.scripts.filter((item) => item.components)
 
         const { subscribe, unsubscribe } = useMessage()
         const { getSchemaDiff, patchLatestSchema, getSchema, getNode } = useCanvas()

packages/canvas/container/src/CanvasContainer.vue

@@ -899,6 +899,5 @@ export const initCanvas = ({ renderer, iframe, emit, controller }) => {
   }
 
   setConfigure(useMaterial().getConfigureMap())
-  canvasDispatch('updateDependencies', { detail: useMaterial().materialState.thirdPartyDeps })
   canvasState.loading = false
 }

packages/canvas/container/src/container.js

@@ -2,6 +2,7 @@ import { ref } from 'vue'
 import TinyVue from '@opentiny/vue'
 import * as TinyVueIcon from '@opentiny/vue-icon'
 import { generateFunction } from '../data-utils'
+import { globalNotify } from '../canvas-function'
 
 export interface IUtil {
   name: string
@@ -18,7 +19,7 @@ export function useUtils(context: Record<string, any>) {
   const utils: Record<string, Function | any> = {}
   const getUtils = () => utils
 
-  const setUtils = (data: Array<IUtil>) => {
+  const setUtils = async (data: Array<IUtil>) => {
     if (!Array.isArray(data)) {
       return
     }
@@ -52,6 +53,29 @@ export function useUtils(context: Record<string, any>) {
         utilsCollection[item.name] = generateFunction(item.content.value, context) || defaultFn
       }
     })
+
+    const npmUtilsImports = data
+      .filter((item) => item.type === 'npm' && item.content.cdnLink)
+      .map((item) => import(/* @vite-ignore */ item.content.cdnLink))
+    const npmUtils = await Promise.allSettled(npmUtilsImports)
+
+    npmUtils.forEach((res, index) => {
+      const { name, content } = data[index]
+      const { exportName, destructuring, cdnLink } = content
+
+      if (res.status !== 'fulfilled') {
+        globalNotify({
+          type: 'error',
+          message: `加载工具类“${name}”失败，请检查cdn链接是否正确，${cdnLink}`
+        })
+
+        return
+      }
+
+      const module = res.value
+      utilsCollection[name] = destructuring ? module[exportName] : module.default
+    })
+
     Object.assign(utils, utilsCollection)
 
     refreshKey.value++

packages/canvas/render/src/application-function/utils.ts

@@ -11,7 +11,7 @@
  */
 
 import { createApp } from 'vue'
-import { addScript, addStyle, dynamicImportComponents, updateDependencies } from '../../common/index.js'
+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'
@@ -31,8 +31,6 @@ const initRenderContext = () => {
 
   window.TinyLowcodeComponent = {}
   window.TinyComponentLibs = {}
-
-  document.addEventListener('updateDependencies', updateDependencies)
 }
 
 let App = null
@@ -83,10 +81,10 @@ export const createRender = (config) => {
   initRenderContext()
 
   const { styles = [], scripts = [] } = config.canvasDependencies
-  const { styles: thirdStyles = [], scripts: thirdScripts = [] } = window.thirdPartyDeps || {}
+  const componentsDeps = window.componentsDeps || []
 
   Promise.all([
-    ...thirdScripts.map(dynamicImportComponents),
-    ...scripts.map((src) => addScript(src)).concat([...thirdStyles, ...styles].map((src) => addStyle(src)))
+    ...componentsDeps.map(getComponents),
+    ...scripts.map((src) => addScript(src)).concat(styles.map((src) => addStyle(src)))
   ]).finally(() => create(config))
 }

packages/canvas/render/src/runner.ts

@@ -10,5 +10,10 @@ export declare global {
     TinyGlobalConfig: Record<string, any>
     loadBlockComponent: (blockName: string) => Promise<any>
     host: any
+    componentsDeps: Array<{
+      script: string
+      package: string
+      components: Record<string, string>
+    }>
   }
 }