feat: materials new protocol

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

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

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -26,6 +26,7 @@ import {
   useMaterial,
   useHistory,
   useModal,
+  useMessage,
   getMergeRegistry,
   getMergeMeta,
   getOptions,
@@ -57,12 +58,20 @@ 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',
+      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()

packages/canvas/DesignCanvas/src/importMap.js

@@ -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',
@@ -27,16 +27,23 @@ export function getImportMapData(overrideVersions = {}) {
     }
   }
 
+  const materialRequire = canvasDeps.scripts.reduce((imports, { package: 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,
+      ...materialRequire
     }
   }
 
-  const importStyles = [...blockRequire.importStyles]
+  const importStyles = [...blockRequire.importStyles, ...canvasDeps.styles]
 
   return {
     importMap,

packages/canvas/common/src/utils.js

@@ -56,23 +56,66 @@ export const copyObject = (node) => {
 }
 
 /**
- * 动态导入组件，缓存组件对象
- * @param {object} param0 组件的依赖： { package: 包名，script：js文件cdn, components：组件id和导出组件名的映射关系}
+ * 从页面importmap中获取模块的名称
+ * @returns importmap中模块的名称集合
+ */
+const getImportMapKeys = () => {
+  try {
+    const importMapElement = document.querySelector('script[type="importmap"]')
+
+    if (!importMapElement) {
+      return []
+    }
+
+    const importMaps = importMapElement.textContent
+    const importMapObject = JSON.parse(importMaps)
+
+    return Object.keys(importMapObject.imports)
+  } catch (error) {
+    return []
+  }
+}
+
+/**
+ * 动态导入获取组件库模块
+ * @param {*} pkg 模块名称
+ * @param {*} script 模块的cdn地址
  * @returns
  */
-export const dynamicImportComponents = async ({ package: pkg, script, components }) => {
-  if (!script) return
-  const scriptUrl = script.startsWith('.') ? new URL(script, location.href).href : script
+const dynamicImportComponentLib = async ({ pkg, script }) => {
+  if (window.TinyComponentLibs[pkg]) {
+    return window.TinyComponentLibs[pkg]
+  }
 
-  if (!window.TinyComponentLibs[pkg]) {
-    const modules = await import(/* @vite-ignore */ scriptUrl)
+  let modules = {}
 
-    window.TinyComponentLibs[pkg] = modules
+  try {
+    // 优先从importmap导入，兼容npm.script字段定义的cdn地址
+    if (getImportMapKeys().includes(pkg)) {
+      modules = await import(/* @vite-ignore */ pkg)
+    } else if (script) {
+      modules = await import(/* @vite-ignore */ script)
+    }
+  } catch (error) {
+    modules = {}
   }
 
-  Object.entries(components).forEach(([componentId, exportName]) => {
-    const modules = window.TinyComponentLibs[pkg]
+  window.TinyComponentLibs[pkg] = modules
+
+  return modules
+}
+
+/**
+ * 获取组件对象并缓存，组件渲染时使用
+ * @param {object} param0 组件的依赖： { package： 包名，script：js文件cdn, components：组件id和导出组件名的映射关系}
+ * @returns
+ */
+export const getComponents = async ({ package: pkg, script, components }) => {
+  if (!pkg) return
 
+  const modules = await dynamicImportComponentLib({ pkg, script })
+
+  Object.entries(components).forEach(([componentId, exportName]) => {
     if (!window.TinyLowcodeComponent[componentId]) {
       window.TinyLowcodeComponent[componentId] = modules[exportName]
     }
@@ -85,12 +128,12 @@ export const dynamicImportComponents = async ({ package: pkg, script, components
  */
 export const updateDependencies = ({ detail }) => {
   const { scripts = [], styles = [] } = detail || {}
-  const { styles: canvasStyles } = window.thirdPartyDeps
+  const { styles: canvasStyles } = window.componentsDepsMap
   const newStyles = [...styles].filter((item) => !canvasStyles.has(item))
 
   newStyles.forEach((item) => canvasStyles.add(item))
 
-  const promises = [...newStyles].map((src) => addStyle(src)).concat(scripts.map(dynamicImportComponents))
+  const promises = [...newStyles].map((src) => addStyle(src)).concat(scripts.map(getComponents))
 
   Promise.allSettled(promises)
 }

packages/canvas/container/src/CanvasContainer.vue

@@ -113,7 +113,7 @@ export default {
     const beforeCanvasReady = () => {
       if (iframe.value) {
         const win = iframe.value.contentWindow
-        win.thirdPartyDeps = useMaterial().materialState.thirdPartyDeps
+        win.componentsDepsMap = useMaterial().materialState.componentsDepsMap
       }
     }
 

packages/canvas/container/src/container.js

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

packages/canvas/render/src/RenderMain.js

@@ -12,8 +12,6 @@
 
 import { h, provide, inject, nextTick, shallowReactive, reactive, ref, watch, watchEffect } from 'vue'
 import { I18nInjectionKey } from 'vue-i18n'
-import TinyVue from '@opentiny/vue'
-import * as TinyVueIcon from '@opentiny/vue-icon'
 import { useBroadcastChannel } from '@vueuse/core'
 import { constants, utils as commonUtils } from '@opentiny/tiny-engine-utils'
 import renderer, { parseData, setConfigure, setController, globalNotify, isStateAccessor } from './render'
@@ -69,30 +67,39 @@ watchEffect(() => {
 
 const getUtils = () => utils
 
-const setUtils = (data, clear, isForceRefresh) => {
+const setUtils = async (data, clear, isForceRefresh) => {
   if (clear) {
     reset(utils)
   }
-  const utilsCollection = {}
-  // 目前画布还不具备远程加载utils工具类的功能，目前只能加载TinyVue组件库中的组件工具
-  data?.forEach((item) => {
-    const util = TinyVue[item.content.exportName]
-    if (util) {
-      utilsCollection[item.name] = util
-    }
 
-    // 此处需要把工具类中的icon图标也加入utils上下文环境
-    const utilIcon = TinyVueIcon[item.content.exportName]
-    if (utilIcon) {
-      utilsCollection[item.name] = utilIcon
-    }
+  const utilsCollection = {}
 
-    // 解析函数式的工具类
-    if (item.type === 'function') {
+  data
+    .filter((item) => item.type === 'function')
+    .forEach((item) => {
       const defaultFn = () => {}
       utilsCollection[item.name] = generateFunction(item.content.value, context) || defaultFn
+    })
+
+  const npmUtils = data.filter((item) => item.type === 'npm' && item.content.cdnLink)
+  const results = await Promise.allSettled(npmUtils.map((item) => import(/* @vite-ignore */ item.content.package)))
+
+  results.forEach((res, index) => {
+    if (res.status !== 'fulfilled') {
+      globalNotify({
+        type: 'error',
+        message: `工具类 ${npmUtils[index].name} 加载失败，请检查CDN地址是否配置正确`
+      })
+      return
     }
+
+    const module = res.value
+    const { name, content } = npmUtils[index]
+    const { exportName, destructuring } = content
+
+    utilsCollection[name] = destructuring ? module[exportName] : module.default
   })
+
   Object.assign(utils, utilsCollection)
 
   // 因为工具类并不具有响应式行为，所以需要通过修改key来强制刷新画布

packages/canvas/render/src/runner.js

@@ -11,7 +11,7 @@
  */
 
 import { createApp } from 'vue'
-import { addScript, addStyle, dynamicImportComponents, updateDependencies } from '../../common'
+import { addScript, addStyle, setComponents, updateDependencies } from '../../common'
 import TinyI18nHost, { I18nInjectionKey } from '@opentiny/tiny-engine-common/js/i18n'
 import Main, { api } from './RenderMain'
 import lowcode from './lowcode'
@@ -82,10 +82,10 @@ export const createRender = (config) => {
   initRenderContext()
 
   const { styles = [], scripts = [] } = config.canvasDependencies
-  const { styles: thirdStyles = [], scripts: thirdScripts = [] } = window.thirdPartyDeps || {}
+  const { scripts: componentsScriptsDeps = [], styles: componentsStylesDeps = [] } = window.componentsDepsMap || {}
 
   Promise.all([
-    ...thirdScripts.map(dynamicImportComponents),
-    ...scripts.map((src) => addScript(src)).concat([...thirdStyles, ...styles].map((src) => addStyle(src)))
+    ...componentsScriptsDeps.map(setComponents),
+    ...scripts.map((src) => addScript(src)).concat([...componentsStylesDeps, ...styles].map((src) => addStyle(src)))
   ]).finally(() => create(config))
 }

packages/common/js/preview.js

@@ -26,7 +26,7 @@ const open = (params = {}) => {
   params.app = paramsMap.get('id')
   params.tenant = paramsMap.get('tenant')
 
-  const { scripts, styles } = useMaterial().materialState.thirdPartyDeps
+  const { scripts, styles } = useMaterial().materialState.componentsDepsMap
   params.scripts = {}
   scripts
     .filter((item) => item.script)

packages/design-core/src/preview/src/preview/Preview.vue

@@ -59,17 +59,6 @@ export default {
       store['initTsConfig']() // 触发获取组件d.ts方便调试
     }
 
-    const addUtilsImportMap = (importMap, utils = []) => {
-      const utilsImportMaps = {}
-      utils.forEach(({ type, content: { package: packageName, cdnLink } }) => {
-        if (type === 'npm' && cdnLink) {
-          utilsImportMaps[packageName] = cdnLink
-        }
-      })
-      const newImportMap = { imports: { ...importMap.imports, ...utilsImportMaps } }
-      store.setImportMap(newImportMap)
-    }
-
     const queryParams = getSearchParams()
     const getImportMap = async () => {
       if (import.meta.env.VITE_LOCAL_BUNDLE_DEPS === 'true') {
@@ -91,7 +80,7 @@ export default {
       getImportMap()
     ]
     Promise.all(promiseList).then(async ([appData, metaData, _void, importMapData]) => {
-      addUtilsImportMap(importMapData, metaData.utils || [])
+      store.setImportMap(importMapData)
 
       const { getAllNestedBlocksSchema, generatePageCode } = getMetaApi('engine.service.generateCode')