From 0e38294cc5d5de42bdf2032b6f820df6c593fbff Mon Sep 17 00:00:00 2001 From: yy-wow Date: Sun, 15 Dec 2024 23:15:42 -0800 Subject: [PATCH 01/11] =?UTF-8?q?feat:=20=E7=89=A9=E6=96=99=E8=B5=84?= =?UTF-8?q?=E4=BA=A7=E5=8C=85=E5=8D=8F=E8=AE=AE=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- designer-demo/public/mock/bundle.json | 661 ++++-------------- .../get/app-center/v1/apps/schema/918.json | 3 +- .../canvas/DesignCanvas/src/DesignCanvas.vue | 19 +- packages/canvas/DesignCanvas/src/importMap.js | 13 +- packages/canvas/common/src/utils.js | 59 +- .../canvas/container/src/CanvasContainer.vue | 2 +- packages/canvas/container/src/container.js | 2 +- packages/canvas/render/src/RenderMain.js | 37 +- packages/canvas/render/src/runner.js | 8 +- packages/common/js/preview.js | 2 +- .../src/preview/src/preview/Preview.vue | 13 +- packages/plugins/bridge/src/js/resource.js | 13 +- .../materials/src/composable/useMaterial.js | 67 +- packages/toolbars/generate-code/src/Main.vue | 3 +- .../src/plugins/genDependenciesPlugin.js | 10 +- 15 files changed, 325 insertions(+), 587 deletions(-) diff --git a/designer-demo/public/mock/bundle.json b/designer-demo/public/mock/bundle.json index 358e84215..a425caa63 100644 --- a/designer-demo/public/mock/bundle.json +++ b/designer-demo/public/mock/bundle.json @@ -19,10 +19,6 @@ "dev_mode": "proCode", "npm": { "package": "element-plus", - "version": "2.4.2", - "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", - "dependencies": null, "exportName": "ElInput" }, "group": "表单组件", @@ -44,25 +40,13 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "type", - "size" - ] + "properties": ["type", "size"] }, "contextMenu": { - "actions": [ - "copy", - "remove", - "insert", - "updateAttr", - "bindEevent", - "createBlock" - ], + "actions": ["copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock"], "disable": [] }, - "invalidity": [ - "" - ], + "invalidity": [""], "clickCapture": true, "framework": "Vue" }, @@ -336,25 +320,13 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "type", - "size" - ] + "properties": ["type", "size"] }, "contextMenu": { - "actions": [ - "copy", - "remove", - "insert", - "updateAttr", - "bindEevent", - "createBlock" - ], + "actions": ["copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock"], "disable": [] }, - "invalidity": [ - "" - ], + "invalidity": [""], "clickCapture": true, "framework": "Vue" }, @@ -660,9 +632,7 @@ "isModal": false, "isPopper": false, "nestingRule": { - "childWhitelist": [ - "ElFormItem" - ], + "childWhitelist": ["ElFormItem"], "parentWhitelist": "", "descendantBlacklist": "", "ancestorWhitelist": "" @@ -671,25 +641,13 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "inline", - "label-width" - ] + "properties": ["inline", "label-width"] }, "contextMenu": { - "actions": [ - "copy", - "remove", - "insert", - "updateAttr", - "bindEevent", - "createBlock" - ], + "actions": ["copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock"], "disable": [] }, - "invalidity": [ - "" - ], + "invalidity": [""], "clickCapture": true, "framework": "Vue" }, @@ -1138,25 +1096,13 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "inline", - "label-width" - ] + "properties": ["inline", "label-width"] }, "contextMenu": { - "actions": [ - "copy", - "remove", - "insert", - "updateAttr", - "bindEevent", - "createBlock" - ], + "actions": ["copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock"], "disable": [] }, - "invalidity": [ - "" - ], + "invalidity": [""], "clickCapture": true, "framework": "Vue" }, @@ -1490,9 +1436,7 @@ "isModal": false, "isPopper": false, "nestingRule": { - "childWhitelist": [ - "ElTableColumn" - ], + "childWhitelist": ["ElTableColumn"], "parentWhitelist": "", "descendantBlacklist": "", "ancestorWhitelist": "" @@ -1501,25 +1445,13 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "inline", - "label-width" - ] + "properties": ["inline", "label-width"] }, "contextMenu": { - "actions": [ - "copy", - "remove", - "insert", - "updateAttr", - "bindEevent", - "createBlock" - ], + "actions": ["copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock"], "disable": [] }, - "invalidity": [ - "" - ], + "invalidity": [""], "clickCapture": true, "framework": "Vue" }, @@ -2750,25 +2682,13 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "inline", - "label-width" - ] + "properties": ["inline", "label-width"] }, "contextMenu": { - "actions": [ - "copy", - "remove", - "insert", - "updateAttr", - "bindEevent", - "createBlock" - ], + "actions": ["copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock"], "disable": [] }, - "invalidity": [ - "" - ], + "invalidity": [""], "clickCapture": true, "framework": "Vue" }, @@ -2914,19 +2834,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "disabled", - "size" - ] + "properties": ["disabled", "size"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -3243,9 +3155,7 @@ "clickCapture": false, "isModal": false, "nestingRule": { - "childWhitelist": [ - "TinyCarouselItem" - ], + "childWhitelist": ["TinyCarouselItem"], "parentWhitelist": "", "descendantBlacklist": "", "ancestorWhitelist": "" @@ -3254,19 +3164,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "disabled", - "size" - ] + "properties": ["disabled", "size"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -3418,14 +3320,7 @@ "name": { "zh_CN": "标题" }, - "component": [ - "h1", - "h2", - "h3", - "h4", - "h5", - "h6" - ], + "component": ["h1", "h2", "h3", "h4", "h5", "h6"], "icon": "h16", "description": "标题", "docUrl": "", @@ -3510,19 +3405,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "disabled", - "size" - ] + "properties": ["disabled", "size"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -3879,19 +3766,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "disabled", - "size" - ] + "properties": ["disabled", "size"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -4137,9 +4016,7 @@ ], "events": {}, "shortcuts": { - "properties": [ - "src" - ] + "properties": ["src"] }, "contentMenu": { "actions": [] @@ -4789,19 +4666,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "disabled", - "size" - ] + "properties": ["disabled", "size"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -4947,19 +4816,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "label-width", - "disabled" - ] + "properties": ["label-width", "disabled"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -5309,19 +5170,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "label-width", - "disabled" - ] + "properties": ["label-width", "disabled"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -5441,9 +5294,7 @@ "isModal": false, "nestingRule": { "childWhitelist": "", - "parentWhitelist": [ - "TinyForm" - ], + "parentWhitelist": ["TinyForm"], "descendantBlacklist": "", "ancestorWhitelist": "" }, @@ -5451,19 +5302,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "label", - "rules" - ] + "properties": ["label", "rules"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -5737,19 +5580,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "label", - "rules" - ] + "properties": ["label", "rules"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -6084,19 +5919,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "text", - "size" - ] + "properties": ["text", "size"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -6506,19 +6333,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "value", - "disabled" - ] + "properties": ["value", "disabled"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -6751,19 +6570,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "visible", - "width" - ] + "properties": ["visible", "width"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -7164,19 +6975,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "multiple", - "options" - ] + "properties": ["multiple", "options"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -7371,19 +7174,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "disabled", - "mini" - ] + "properties": ["disabled", "mini"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -7654,19 +7449,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "clearable", - "mini" - ] + "properties": ["clearable", "mini"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -7921,19 +7708,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "border", - "disabled" - ] + "properties": ["border", "disabled"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -8117,19 +7896,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "text", - "size" - ] + "properties": ["text", "size"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -8334,19 +8105,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "disabled", - "type" - ] + "properties": ["disabled", "type"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -8620,19 +8383,11 @@ "isLayout": false, "rootSelector": ".tiny-dialog-box", "shortcuts": { - "properties": [ - "visible", - "width" - ] + "properties": ["visible", "width"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -8900,9 +8655,7 @@ "clickCapture": false, "isModal": false, "nestingRule": { - "childWhitelist": [ - "TinyTabItem" - ], + "childWhitelist": ["TinyTabItem"], "parentWhitelist": [], "descendantBlacklist": [], "ancestorWhitelist": [] @@ -8911,19 +8664,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "size", - "tab-style" - ] + "properties": ["size", "tab-style"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -9020,9 +8765,7 @@ "isModal": false, "nestingRule": { "childWhitelist": "", - "parentWhitelist": [ - "TinyTab" - ], + "parentWhitelist": ["TinyTab"], "descendantBlacklist": "", "ancestorWhitelist": "" }, @@ -9030,19 +8773,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "name", - "title" - ] + "properties": ["name", "title"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -9168,9 +8903,7 @@ "clickCapture": false, "isModal": false, "nestingRule": { - "childWhitelist": [ - "TinyBreadcrumbItem" - ], + "childWhitelist": ["TinyBreadcrumbItem"], "parentWhitelist": [], "descendantBlacklist": [], "ancestorWhitelist": [] @@ -9179,18 +8912,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "separator" - ] + "properties": ["separator"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -9267,9 +8993,7 @@ "isModal": false, "nestingRule": { "childWhitelist": "", - "parentWhitelist": [ - "TinyBreadcrumb" - ], + "parentWhitelist": ["TinyBreadcrumb"], "descendantBlacklist": "", "ancestorWhitelist": "" }, @@ -9277,18 +9001,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "to" - ] + "properties": ["to"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -9411,19 +9128,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "label-width", - "disabled" - ] + "properties": ["label-width", "disabled"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -9530,19 +9239,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "label-width", - "disabled" - ] + "properties": ["label-width", "disabled"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -9757,10 +9458,7 @@ "widget": { "component": "JsSlotConfigurator", "props": { - "slots": [ - "header", - "default" - ] + "slots": ["header", "default"] } } }, @@ -10433,15 +10131,10 @@ } }, "shortcuts": { - "properties": [ - "sortable", - "columns" - ] + "properties": ["sortable", "columns"] }, "contentMenu": { - "actions": [ - "create symbol" - ] + "actions": ["create symbol"] }, "onBeforeMount": "console.log('table on load'); this.pager = source.pager; this.fetchData = source.fetchData; this.data = source.data ;this.columns = source.columns" }, @@ -10461,19 +10154,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "sortable", - "columns" - ] + "properties": ["sortable", "columns"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -10702,19 +10387,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "currentPage", - "total" - ] + "properties": ["currentPage", "total"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -11073,19 +10750,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "modelValue", - "disabled" - ] + "properties": ["modelValue", "disabled"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -11416,19 +11085,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "data", - "show-checkbox" - ] + "properties": ["data", "show-checkbox"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -11631,19 +11292,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "active", - "data" - ] + "properties": ["active", "data"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -11860,19 +11513,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "disabled", - "content" - ] + "properties": ["disabled", "content"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -12363,19 +12008,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "visible", - "width" - ] + "properties": ["visible", "width"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -12786,19 +12423,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "value", - "disabled" - ] + "properties": ["value", "disabled"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } }, @@ -13237,19 +12866,11 @@ "isLayout": false, "rootSelector": "", "shortcuts": { - "properties": [ - "value", - "disabled" - ] + "properties": ["value", "disabled"] }, "contextMenu": { - "actions": [ - "create symbol" - ], - "disable": [ - "copy", - "remove" - ] + "actions": ["create symbol"], + "disable": ["copy", "remove"] } } } @@ -13634,10 +13255,7 @@ "schema": { "componentName": "TinyCheckboxGroup", "props": { - "modelValue": [ - "name1", - "name2" - ], + "modelValue": ["name1", "name2"], "type": "checkbox", "options": [ { @@ -14459,7 +14077,16 @@ } ] } + ], + "packages": [ + { + "name": "element-plus组件库", + "package": "element-plus", + "version": "2.4.2", + "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", + "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css" + } ] } } -} \ No newline at end of file +} diff --git a/mockServer/src/mock/get/app-center/v1/apps/schema/918.json b/mockServer/src/mock/get/app-center/v1/apps/schema/918.json index 17656258e..a56712aec 100644 --- a/mockServer/src/mock/get/app-center/v1/apps/schema/918.json +++ b/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/axios@1.7.9/dist/esm/axios.min.js" } }, { diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue index 2633d88ce..a83a4bc7f 100644 --- a/packages/canvas/DesignCanvas/src/DesignCanvas.vue +++ b/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() diff --git a/packages/canvas/DesignCanvas/src/importMap.js b/packages/canvas/DesignCanvas/src/importMap.js index 813fdb7dc..52a100ed5 100644 --- a/packages/canvas/DesignCanvas/src/importMap.js +++ b/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, diff --git a/packages/canvas/common/src/utils.js b/packages/canvas/common/src/utils.js index cd2731230..42a003733 100644 --- a/packages/canvas/common/src/utils.js +++ b/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)) diff --git a/packages/canvas/container/src/CanvasContainer.vue b/packages/canvas/container/src/CanvasContainer.vue index 74cd1c21b..d39da34af 100644 --- a/packages/canvas/container/src/CanvasContainer.vue +++ b/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 } } diff --git a/packages/canvas/container/src/container.js b/packages/canvas/container/src/container.js index d758c61a4..2d84fe609 100644 --- a/packages/canvas/container/src/container.js +++ b/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 } diff --git a/packages/canvas/render/src/RenderMain.js b/packages/canvas/render/src/RenderMain.js index bb41b5fc7..8a40de886 100644 --- a/packages/canvas/render/src/RenderMain.js +++ b/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来强制刷新画布 diff --git a/packages/canvas/render/src/runner.js b/packages/canvas/render/src/runner.js index deb1ce1b9..42fd5610a 100644 --- a/packages/canvas/render/src/runner.js +++ b/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)) } diff --git a/packages/common/js/preview.js b/packages/common/js/preview.js index 3d6eea5b2..5b1e19289 100644 --- a/packages/common/js/preview.js +++ b/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) diff --git a/packages/design-core/src/preview/src/preview/Preview.vue b/packages/design-core/src/preview/src/preview/Preview.vue index 6d6901b54..ef1c24d54 100644 --- a/packages/design-core/src/preview/src/preview/Preview.vue +++ b/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') diff --git a/packages/plugins/bridge/src/js/resource.js b/packages/plugins/bridge/src/js/resource.js index 9279b671a..265a9f8ff 100644 --- a/packages/plugins/bridge/src/js/resource.js +++ b/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, @@ -185,8 +192,8 @@ export const saveResource = (data, callback, emit) => { const index = useResource().resState[data.category].findIndex((item) => item.name === result.name) useResource().resState[data.category][index] = result - // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新 - updateUtils([result]) + // 更新画布import并刷新画布 + useMaterial().setCanvasDeps() generateBridgeUtil(getAppId()) useNotify({ diff --git a/packages/plugins/materials/src/composable/useMaterial.js b/packages/plugins/materials/src/composable/useMaterial.js index 91365bfea..57c588419 100644 --- a/packages/plugins/materials/src/composable/useMaterial.js +++ b/packages/plugins/materials/src/composable/useMaterial.js @@ -19,6 +19,8 @@ import { useNotify, useCanvas, useBlock, + useMessage, + useResource, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register' @@ -36,7 +38,8 @@ const blockResource = new Map() const materialState = reactive({ components: [], // 这里存放的是物料插件面板里所有显示的组件 blocks: [], - thirdPartyDeps: { scripts: [], styles: new Set() } + componentsDepsMap: { scripts: [], styles: new Set() }, // + packages: [] // 物料依赖的包 }) const componentState = reactive({ @@ -206,7 +209,7 @@ const clearMaterials = () => { const clearBlockResources = () => blockResource.clear() /** - * 收集第三方组件库依赖 + * 生成组件依赖映射 * @param {array} components 组件物料列表 */ const generateThirdPartyDeps = (components) => { @@ -248,8 +251,8 @@ const generateThirdPartyDeps = (components) => { */ const setThirdPartyDeps = (components) => { const { scripts = [], styles = [] } = generateThirdPartyDeps(components) - materialState.thirdPartyDeps.scripts.push(...scripts) - styles.forEach((item) => materialState.thirdPartyDeps.styles.add(item)) + materialState.componentsDepsMap.scripts.push(...scripts) + styles.forEach((item) => materialState.componentsDepsMap.styles.add(item)) } /** @@ -274,6 +277,46 @@ const addComponentSnippets = (componentSnippets, snippetsData) => { return snippetsData } +const getUtilsDependencies = () => { + const { utils } = useResource().resState + + return utils + .filter((item) => item.type === 'npm' && item.content.cdnLink) + .map((item) => { + const { package: pkg, cdnLink } = item.content + + return { + package: pkg, + script: cdnLink + } + }) +} + +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) + + return { scripts, styles } + }, + { + scripts: [], + styles: new Set() + } + ) + + useMessage().publish({ + topic: 'init_canvas_deps', + data: { scripts: deps.scripts, styles: [...deps.styles] } + }) +} + /** * 添加物料Bundle文件中的组件类型物料 * @param {*} materialBundle 物料包Bundle.json文件对象 @@ -357,16 +400,21 @@ 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) } /** - * 获取区块保存的依赖信息，合并到resState.thirdPartyDeps + * 获取区块保存的依赖信息，合并到resState.componentsDepsMap * @param {object} dependencies 区块保存的依赖信息 */ const getBlockDeps = (dependencies = {}) => { @@ -375,10 +423,10 @@ const getBlockDeps = (dependencies = {}) => { scripts.length && scripts.forEach((npm) => { const { package: pkg, script, css, components } = npm - const npmInfo = materialState.thirdPartyDeps.scripts.find((item) => item.package === pkg) + const npmInfo = materialState.componentsDepsMap.scripts.find((item) => item.package === pkg) if (!npmInfo || !npmInfo.script) { - materialState.thirdPartyDeps.scripts.push({ package: pkg, script, css, components }) + materialState.componentsDepsMap.scripts.push({ package: pkg, script, css, components }) } else { const components = npmInfo.components || {} @@ -386,7 +434,7 @@ const getBlockDeps = (dependencies = {}) => { } }) - styles?.forEach((item) => materialState.thirdPartyDeps.styles.add(item)) + styles?.forEach((item) => materialState.componentsDepsMap.styles.add(item)) } /** @@ -400,7 +448,7 @@ const updateCanvasDependencies = (blocks) => { getBlockDeps(block.content.dependencies) }) - useCanvas().canvasApi.value?.canvasDispatch('updateDependencies', { detail: materialState.thirdPartyDeps }) + useCanvas().canvasApi.value?.canvasDispatch('updateDependencies', { detail: materialState.componentsDepsMap }) } const initBuiltinMaterial = () => { @@ -438,6 +486,7 @@ export default function () { addMaterials, // 添加多个物料 registerBlock, // 注册新的区块 updateCanvasDependencies, //传入新的区块，获取新增区块的依赖，更新画布中的组件依赖 + setCanvasDeps, // 设置画布依赖，包含物料的依赖和工具类的依赖。同时通知画布刷新 getConfigureMap // 获取物料组件的配置信息 } } diff --git a/packages/toolbars/generate-code/src/Main.vue b/packages/toolbars/generate-code/src/Main.vue index cd919294c..0f441a323 100644 --- a/packages/toolbars/generate-code/src/Main.vue +++ b/packages/toolbars/generate-code/src/Main.vue @@ -145,7 +145,8 @@ export default { blockSchema, // 物料数据 componentsMap: [...(appData.componentsMap || [])], - + // 物料依赖 + packages: [...(appData.packages || [])], meta: { ...(appData.meta || {}) } diff --git a/packages/vue-generator/src/plugins/genDependenciesPlugin.js b/packages/vue-generator/src/plugins/genDependenciesPlugin.js index 5bdb77a8b..582f7e280 100644 --- a/packages/vue-generator/src/plugins/genDependenciesPlugin.js +++ b/packages/vue-generator/src/plugins/genDependenciesPlugin.js @@ -22,7 +22,7 @@ const getComponentsSet = (schema) => { } const parseSchema = (schema) => { - const { utils = [], componentsMap = [] } = schema + const { utils = [], componentsMap = [], packages = [] } = schema const resDeps = {} @@ -45,6 +45,14 @@ const parseSchema = (schema) => { } } + packages.forEach((item) => { + const { package: packageName, version } = item + + if (packageName && !resDeps[packageName]) { + resDeps[packageName] = version || 'latest' + } + }) + // 处理内置 Icon，如果使用了 tinyvue 组件，则默认添加 @opentiny/vue-icon 依赖，且依赖与 @opentiny/vue 依赖版本一致 if (resDeps['@opentiny/vue']) { resDeps['@opentiny/vue-icon'] = resDeps['@opentiny/vue'] From c0ee9b39515a16b6609506501dd420b671cac72d Mon Sep 17 00:00:00 2001 From: yy-wow Date: Mon, 16 Dec 2024 00:56:55 -0800 Subject: [PATCH 02/11] =?UTF-8?q?fix=EF=BC=9A=E5=AE=B9=E9=94=99=E5=A4=84?= =?UTF-8?q?=E7=90=86packages=E4=B8=8D=E5=AD=98=E5=9C=A8=E7=9A=84=E6=83=85?= =?UTF-8?q?=E5=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugins/materials/src/composable/useMaterial.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugins/materials/src/composable/useMaterial.js b/packages/plugins/materials/src/composable/useMaterial.js index 57c588419..77c41a9da 100644 --- a/packages/plugins/materials/src/composable/useMaterial.js +++ b/packages/plugins/materials/src/composable/useMaterial.js @@ -405,7 +405,7 @@ const fetchMaterial = async () => { materials.forEach((response) => { if (response.status === 'fulfilled' && response.value.materials) { addMaterials(response.value.materials) - packages.push(...response.value.materials.packages) + packages.push(...(response.value.materials.packages || [])) } }) From 7b910c5b0e23da3bb8433c0b69bfca3a9ed8130a Mon Sep 17 00:00:00 2001 From: yy-wow Date: Mon, 16 Dec 2024 05:41:54 -0800 Subject: [PATCH 03/11] =?UTF-8?q?fix=EF=BC=9A=E6=96=B0=E5=BB=BA=E6=88=96?= =?UTF-8?q?=E4=BF=AE=E6=94=B9npm=E7=B1=BB=E5=9E=8B=E5=B7=A5=E5=85=B7?= =?UTF-8?q?=E7=B1=BB=E9=83=BD=E8=A6=81=E8=A7=A6=E5=8F=91=E7=94=BB=E5=B8=83?= =?UTF-8?q?=E9=87=8D=E6=96=B0=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugins/bridge/src/js/resource.js | 68 ++++++++++++---------- 1 file changed, 36 insertions(+), 32 deletions(-) diff --git a/packages/plugins/bridge/src/js/resource.js b/packages/plugins/bridge/src/js/resource.js index 265a9f8ff..475589d2c 100644 --- a/packages/plugins/bridge/src/js/resource.js +++ b/packages/plugins/bridge/src/js/resource.js @@ -182,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 - - // 更新画布import并刷新画布 - useMaterial().setCanvasDeps() - 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) => { From 6c496146269255c64e1860d1fee2aef7caac410e Mon Sep 17 00:00:00 2001 From: yy-wow Date: Tue, 17 Dec 2024 19:48:19 -0800 Subject: [PATCH 04/11] =?UTF-8?q?fix=EF=BC=9A=E5=8A=A8=E6=80=81=E5=AF=BC?= =?UTF-8?q?=E5=85=A5=E7=BB=84=E4=BB=B6=E5=BA=93=E6=A8=A1=E5=9D=97=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/canvas/common/src/utils.js | 20 +++++++++++++------- packages/canvas/render/src/RenderMain.js | 4 ++++ 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/packages/canvas/common/src/utils.js b/packages/canvas/common/src/utils.js index 42a003733..ae1f9d23e 100644 --- a/packages/canvas/common/src/utils.js +++ b/packages/canvas/common/src/utils.js @@ -61,22 +61,28 @@ export const copyObject = (node) => { */ const getImportMapKeys = () => { try { - const importMaps = document.querySelector('script[type="importmap"]').textContent + const importMapElement = document.querySelector('script[type="importmap"]') + + if (!importMapElement) { + return [] + } + + const importMaps = importMapElement.textContent const importMapObject = JSON.parse(importMaps) - return Object.keys(importMapObject.import) + return Object.keys(importMapObject.imports) } catch (error) { return [] } } /** - * 动态导入获取组件模块 + * 动态导入获取组件库模块 * @param {*} pkg 模块名称 * @param {*} script 模块的cdn地址 * @returns */ -const dynamicImportComponents = async (pkg, script) => { +const dynamicImportComponentLib = async ({ pkg, script }) => { if (window.TinyComponentLibs[pkg]) { return window.TinyComponentLibs[pkg] } @@ -104,10 +110,10 @@ const dynamicImportComponents = async (pkg, script) => { * @param {object} param0 组件的依赖： { package： 包名，script：js文件cdn, components：组件id和导出组件名的映射关系} * @returns */ -export const setComponents = async ({ package: pkg, script, components }) => { +export const getComponents = async ({ package: pkg, script, components }) => { if (!pkg) return - const modules = await dynamicImportComponents(pkg, script) + const modules = await dynamicImportComponentLib({ pkg, script }) Object.entries(components).forEach(([componentId, exportName]) => { if (!window.TinyLowcodeComponent[componentId]) { @@ -127,7 +133,7 @@ export const updateDependencies = ({ detail }) => { 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) } diff --git a/packages/canvas/render/src/RenderMain.js b/packages/canvas/render/src/RenderMain.js index 8a40de886..d1cb2ab9d 100644 --- a/packages/canvas/render/src/RenderMain.js +++ b/packages/canvas/render/src/RenderMain.js @@ -86,6 +86,10 @@ const setUtils = async (data, clear, isForceRefresh) => { results.forEach((res, index) => { if (res.status !== 'fulfilled') { + globalNotify({ + type: 'error', + message: `工具类 ${npmUtils[index].name} 加载失败，请检查CDN地址是否配置正确` + }) return } From c971b2b85d3f1cef6816982d61670b5f346d1347 Mon Sep 17 00:00:00 2001 From: yy-wow Date: Tue, 17 Dec 2024 23:18:13 -0800 Subject: [PATCH 05/11] =?UTF-8?q?fix=EF=BC=9A=E5=8A=A8=E6=80=81=E5=AF=BC?= =?UTF-8?q?=E5=85=A5=E7=BB=84=E4=BB=B6=E5=BA=93=E6=A8=A1=E5=9D=97=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- designer-demo/public/mock/bundle.json | 220 +++++--------------------- packages/canvas/render/src/runner.js | 4 +- 2 files changed, 42 insertions(+), 182 deletions(-) diff --git a/designer-demo/public/mock/bundle.json b/designer-demo/public/mock/bundle.json index a425caa63..1b480104d 100644 --- a/designer-demo/public/mock/bundle.json +++ b/designer-demo/public/mock/bundle.json @@ -295,10 +295,6 @@ "dev_mode": "proCode", "npm": { "package": "element-plus", - "version": "2.4.2", - "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", - "dependencies": null, "exportName": "ElButton" }, "group": "基础组件", @@ -616,10 +612,6 @@ "dev_mode": "proCode", "npm": { "package": "element-plus", - "version": "2.4.2", - "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", - "dependencies": null, "exportName": "ElForm" }, "group": "表单组件", @@ -1071,10 +1063,6 @@ "dev_mode": "proCode", "npm": { "package": "element-plus", - "version": "2.4.2", - "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", - "dependencies": null, "exportName": "ElFormItem" }, "group": "表单组件", @@ -1420,10 +1408,6 @@ "dev_mode": "proCode", "npm": { "package": "element-plus", - "version": "2.4.2", - "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", - "dependencies": null, "exportName": "ElTable" }, "group": "数据展示", @@ -2657,10 +2641,6 @@ "dev_mode": "proCode", "npm": { "package": "element-plus", - "version": "2.4.2", - "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", - "dependencies": null, "exportName": "ElTableColumn" }, "group": "表单组件", @@ -2723,11 +2703,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "CarouselItem", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "CarouselItem" }, "group": "component", "category": "容器组件", @@ -2856,11 +2832,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Carousel", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Carousel" }, "group": "component", "category": "容器组件", @@ -4530,11 +4502,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "ButtonGroup", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "ButtonGroup" }, "group": "component", "category": "general", @@ -4688,11 +4656,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Row", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Row" }, "group": "component", "priority": 5, @@ -4838,11 +4802,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Form", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Form" }, "group": "component", "priority": 5, @@ -5192,11 +5152,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "FormItem", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "FormItem" }, "group": "component", "priority": 12, @@ -5324,11 +5280,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Col", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Col" }, "group": "component", "priority": 2, @@ -5602,11 +5554,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Button", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Button" }, "group": "component", "priority": 2, @@ -5941,11 +5889,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Input", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Input" }, "group": "component", "priority": 1, @@ -6355,11 +6299,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Radio", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Radio" }, "group": "component", "priority": 3, @@ -6592,11 +6532,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Select", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Select" }, "group": "component", "priority": 8, @@ -6997,11 +6933,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Switch", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Switch" }, "group": "component", "priority": 9, @@ -7196,11 +7128,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Search", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Search" }, "group": "component", "priority": 2, @@ -7471,11 +7399,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Checkbox", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Checkbox" }, "group": "component", "priority": 4, @@ -7730,11 +7654,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "CheckboxButton", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "CheckboxButton" }, "group": "component", "priority": 1, @@ -7918,11 +7838,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "CheckboxGroup", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "CheckboxGroup" }, "group": "component", "priority": 2, @@ -8127,11 +8043,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "DialogBox", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "DialogBox" }, "group": "component", "priority": 4, @@ -8405,11 +8317,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Tabs", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Tabs" }, "group": "component", "priority": 10, @@ -8686,11 +8594,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "TabItem", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "TabItem" }, "group": "component", "priority": 2, @@ -8795,11 +8699,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Breadcrumb", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Breadcrumb" }, "group": "component", "priority": 1, @@ -8934,11 +8834,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "BreadcrumbItem", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "BreadcrumbItem" }, "group": "component", "priority": 1, @@ -9023,11 +8919,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Collapse", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Collapse" }, "group": "component", "priority": 3, @@ -9150,11 +9042,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "CollapseItem", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "CollapseItem" }, "group": "component", "priority": 2, @@ -9261,11 +9149,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Grid", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Grid" }, "group": "component", "priority": 2, @@ -10176,11 +10060,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Pager", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Pager" }, "group": "component", "priority": 1, @@ -10409,11 +10289,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Popeditor", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Popeditor" }, "group": "component", "priority": 6, @@ -10772,11 +10648,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Tree", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Tree" }, "group": "component", "priority": 12, @@ -11107,11 +10979,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "TimeLine", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "TimeLine" }, "group": "component", "priority": 3, @@ -11314,11 +11182,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Tooltip", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Tooltip" }, "group": "component", "priority": 11, @@ -11535,11 +11399,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Popover", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Popover" }, "group": "component", "priority": 7, @@ -12030,11 +11890,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "DatePicker", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "DatePicker" }, "group": "component", "priority": 1, @@ -12445,11 +12301,7 @@ "devMode": "proCode", "npm": { "package": "@opentiny/vue", - "exportName": "Numeric", - "version": "3.14.0", - "destructuring": true, - "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", - "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + "exportName": "Numeric" }, "group": "component", "priority": 1, @@ -14079,6 +13931,14 @@ } ], "packages": [ + { + "name": "TinyVue组件库", + "package": "@opentiny/vue", + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" + }, { "name": "element-plus组件库", "package": "element-plus", diff --git a/packages/canvas/render/src/runner.js b/packages/canvas/render/src/runner.js index 42fd5610a..36c6a4884 100644 --- a/packages/canvas/render/src/runner.js +++ b/packages/canvas/render/src/runner.js @@ -11,7 +11,7 @@ */ import { createApp } from 'vue' -import { addScript, addStyle, setComponents, updateDependencies } from '../../common' +import { addScript, addStyle, getComponents, updateDependencies } from '../../common' import TinyI18nHost, { I18nInjectionKey } from '@opentiny/tiny-engine-common/js/i18n' import Main, { api } from './RenderMain' import lowcode from './lowcode' @@ -85,7 +85,7 @@ export const createRender = (config) => { const { scripts: componentsScriptsDeps = [], styles: componentsStylesDeps = [] } = window.componentsDepsMap || {} Promise.all([ - ...componentsScriptsDeps.map(setComponents), + ...componentsScriptsDeps.map(getComponents), ...scripts.map((src) => addScript(src)).concat([...componentsStylesDeps, ...styles].map((src) => addStyle(src))) ]).finally(() => create(config)) } From b277596419e2eea6cbfafa66e69d372d3d4f947c Mon Sep 17 00:00:00 2001 From: yy-wow Date: Wed, 18 Dec 2024 02:10:22 -0800 Subject: [PATCH 06/11] =?UTF-8?q?fix=EF=BC=9A=E7=94=BB=E5=B8=83=E7=89=A9?= =?UTF-8?q?=E6=96=99=E4=BE=9D=E8=B5=96=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvas/container/src/CanvasContainer.vue | 4 +- packages/canvas/container/src/container.js | 1 - packages/canvas/render/src/runner.js | 9 +- packages/common/js/preview.js | 6 +- .../materials/src/composable/useMaterial.js | 100 ++++++++++++------ .../materials/src/composable/useResource.js | 3 +- .../src/meta/block/src/BlockGroupPanel.vue | 8 +- .../src/plugins/genDependenciesPlugin.js | 24 ++--- 8 files changed, 90 insertions(+), 65 deletions(-) diff --git a/packages/canvas/container/src/CanvasContainer.vue b/packages/canvas/container/src/CanvasContainer.vue index d39da34af..0d95f122f 100644 --- a/packages/canvas/container/src/CanvasContainer.vue +++ b/packages/canvas/container/src/CanvasContainer.vue @@ -31,7 +31,7 @@