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,60 @@ export const copyObject = (node) => {
 }
 
 /**
- * 动态导入组件，缓存组件对象
- * @param {object} param0 组件的依赖： { package: 包名，script：js文件cdn, components：组件id和导出组件名的映射关系}
+ * 从页面importmap中获取模块的名称
+ * @returns importmap中模块的名称集合
+ */
+const getImportMapKeys = () => {
+  try {
+    const importMaps = document.querySelector('script[type="importmap"]').textContent
+    const importMapObject = JSON.parse(importMaps)
+
+    return Object.keys(importMapObject.import)
+  } 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 dynamicImportComponents = 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 setComponents = async ({ package: pkg, script, components }) => {
+  if (!pkg) return
+
+  const modules = await dynamicImportComponents(pkg, script)
+
+  Object.entries(components).forEach(([componentId, exportName]) => {
     if (!window.TinyLowcodeComponent[componentId]) {
       window.TinyLowcodeComponent[componentId] = modules[exportName]
     }
@@ -85,7 +122,7 @@ 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))

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,35 @@ 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') {
+      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')
 

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

@@ -11,7 +11,14 @@
  */
 
 import { reactive } from 'vue'
-import { useResource, useNotify, useCanvas, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import {
+  useResource,
+  useNotify,
+  useCanvas,
+  getMetaApi,
+  META_SERVICE,
+  useMaterial
+} from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import {
   fetchResourceList,
@@ -175,48 +182,52 @@ const generateBridgeUtil = (...args) => {
   }
 }
 
-export const saveResource = (data, callback, emit) => {
-  const { updateUtils } = useCanvas().canvasApi.value
+export const saveResource = async (data, callback, emit) => {
+  let result = {}
+
+  try {
+    if (getActionType() === ACTION_TYPE.Edit) {
+      data.id = state.resource.id
+      const result = await requestUpdateReSource(data)
 
-  if (getActionType() === ACTION_TYPE.Edit) {
-    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
-
-        // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新
-        updateUtils([result])
-        generateBridgeUtil(getAppId())
-
-        useNotify({
-          type: 'success',
-          message: '修改成功'
-        })
-
-        emit('refresh', state.type)
-        state.refresh = true
-        callback()
       }
-    })
-  } else {
-    requestAddReSource(data).then((result) => {
+    } else {
+      const result = await requestAddReSource(data)
+
       if (result) {
         useResource().resState[data.category].push(result)
-
-        // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新
-        updateUtils([result])
-        generateBridgeUtil(getAppId())
-        useNotify({
-          type: 'success',
-          message: '创建成功'
-        })
-        emit('refresh', state.type)
-        state.refresh = true
-        callback()
       }
+    }
+  } catch (error) {
+    useNotify({
+      type: 'error',
+      message: `${getActionType() === ACTION_TYPE.Edit ? '更新' : '创建'}失败：${error}`
     })
+
+    return
   }
+
+  if (data.type === 'npm') {
+    // 更新画布import并刷新画布
+    useMaterial().setCanvasDeps()
+  } else {
+    const { updateUtils } = useCanvas().canvasApi.value
+
+    // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新
+    updateUtils([result])
+  }
+
+  generateBridgeUtil(getAppId())
+  useNotify({
+    type: 'success',
+    message: `${getActionType() === ACTION_TYPE.Edit ? '更新' : '创建'}成功`
+  })
+  emit('refresh', state.type)
+  state.refresh = true
+  callback()
 }
 
 export const deleteData = (name, callback, emit) => {