From c3079d239eaee9ee33679e889670c4be89ef726c Mon Sep 17 00:00:00 2001 From: gene9831 Date: Tue, 5 Dec 2023 03:12:52 -0800 Subject: [PATCH 1/8] =?UTF-8?q?fix:=20=E6=89=8B=E5=8A=A8=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E7=94=BB=E5=B8=83key=E5=AF=BC=E8=87=B4=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E5=87=BA=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/canvas/src/components/container/container.js | 4 ++-- packages/canvas/src/components/render/runner.js | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js index 10fd4d3419..075b4600f9 100644 --- a/packages/canvas/src/components/container/container.js +++ b/packages/canvas/src/components/container/container.js @@ -678,8 +678,8 @@ export const setState = (state) => { getRenderer().setState(state) } -export const setUtils = (utils) => { - getRenderer().setUtils(utils) +export const setUtils = (utils, clear, isForceRefresh) => { + getRenderer().setUtils(utils, clear, isForceRefresh) } export const deleteState = (variable) => { diff --git a/packages/canvas/src/components/render/runner.js b/packages/canvas/src/components/render/runner.js index 012b89029d..bb64a226b1 100644 --- a/packages/canvas/src/components/render/runner.js +++ b/packages/canvas/src/components/render/runner.js @@ -111,11 +111,15 @@ const create = () => { document.body.remove() document.body = document.createElement('body') + const app = document.createElement('div') + app.setAttribute('id', 'app') + document.body.appendChild(app) + dispatch('canvasReady', { detail: renderer }) App = Vue.createApp(Main).use(TinyI18nHost).provide(I18nInjectionKey, TinyI18nHost) App.config.globalProperties.lowcodeConfig = window.parent.TinyGlobalConfig - App.mount(document.body) + App.mount(document.querySelector('#app')) new ResizeObserver(() => { dispatch('canvasResize') From f7c9ff7b6b4fa123e151a9021b8526390ebae894 Mon Sep 17 00:00:00 2001 From: gene9831 Date: Wed, 6 Dec 2023 22:36:54 -0800 Subject: [PATCH 2/8] =?UTF-8?q?fix:=20=E4=BD=BF=E7=94=A8import=E5=8A=A8?= =?UTF-8?q?=E6=80=81=E5=AF=BC=E5=85=A5=E6=9C=89cdn=E7=9A=84=E5=B7=A5?= =?UTF-8?q?=E5=85=B7=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/container/container.js | 8 +++ .../src/components/render/RenderMain.js | 50 ++++++++++++++++--- packages/canvas/src/index.js | 4 ++ .../src/preview/src/preview/generate.js | 15 ++++-- packages/plugins/bridge/src/js/resource.js | 7 ++- .../toolbars/generate-vue/src/generateCode.js | 15 ++++-- 6 files changed, 84 insertions(+), 15 deletions(-) diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js index 075b4600f9..9657f4b858 100644 --- a/packages/canvas/src/components/container/container.js +++ b/packages/canvas/src/components/container/container.js @@ -682,6 +682,14 @@ export const setUtils = (utils, clear, isForceRefresh) => { getRenderer().setUtils(utils, clear, isForceRefresh) } +export const updateUtils = (utils) => { + getRenderer().updateUtils(utils) +} + +export const deleteUtils = (utils) => { + getRenderer().deleteUtils(utils) +} + export const deleteState = (variable) => { getRenderer().deleteState(variable) } diff --git a/packages/canvas/src/components/render/RenderMain.js b/packages/canvas/src/components/render/RenderMain.js index 468f0e0f78..b0ed95f6f3 100644 --- a/packages/canvas/src/components/render/RenderMain.js +++ b/packages/canvas/src/components/render/RenderMain.js @@ -61,33 +61,67 @@ const setUtils = (data, clear, isForceRefresh) => { reset(utils) } const utilsCollection = {} - // 目前画布还不具备远程加载utils工具类的功能，目前只能加载TinyVue组件库中的组件工具 + const utilsWithCDN = [] data?.forEach((item) => { - const util = window.TinyVue[item.name] + // 解析函数式的工具类 + if (item.type === 'function') { + const defaultFn = () => {} + utilsCollection[item.name] = generateFunction(item.content.value, context) || defaultFn + return + } + + // 解析npm式的工具类 + const util = window.TinyVue[item.content.exportName] if (util) { utilsCollection[item.name] = util } // 此处需要把工具类中的icon图标也加入utils上下文环境 - const utilIcon = window.TinyVueIcon[item.name] + const utilIcon = window.TinyVueIcon[item.content.exportName] if (utilIcon) { utilsCollection[item.name] = utilIcon } - // 解析函数式的工具类 - if (item.type === 'function') { - const defaultFn = () => {} - utilsCollection[item.name] = generateFunction(item.content.value, context) || defaultFn + if (item.content.cdnLink) { + utilsWithCDN.push(item) } }) Object.assign(utils, utilsCollection) + if (utilsWithCDN.length > 0) { + // 动态导入utils中有cdnLink的模块 + Promise.all( + utilsWithCDN.map((item) => import(/* @vite-ignore */ item.content.cdnLink).then((module) => [item, module])) + ).then((modules) => { + modules.forEach(([item, module]) => { + const defaultExport = module.default + Object.assign(utils, { + [item.name]: item.content.destructuring ? defaultExport[item.content.exportName] : defaultExport + }) + }) + refreshKey.value++ + }) + } + // 因为工具类并不具有响应式行为，所以需要通过修改key来强制刷新画布 if (isForceRefresh) { refreshKey.value++ } } +const updateUtils = (data) => { + setUtils(data, false, true) +} + +const deleteUtils = (data) => { + data?.forEach((item) => { + if (utils[item.name]) { + delete utils[item.name] + } + }) + setUtils([], false, true) +} + const setBridge = (data, clear) => { clear && reset(bridge) Object.assign(bridge, data) @@ -381,6 +415,8 @@ export default { export const api = { getUtils, setUtils, + updateUtils, + deleteUtils, getBridge, setBridge, getMethods, diff --git a/packages/canvas/src/index.js b/packages/canvas/src/index.js index ff64476c16..fcf1d07eeb 100644 --- a/packages/canvas/src/index.js +++ b/packages/canvas/src/index.js @@ -41,6 +41,8 @@ import { getCurrent, setSchema, setUtils, + updateUtils, + deleteUtils, getSchema, setI18n, getCanvasType, @@ -70,6 +72,8 @@ export { getCurrent, setSchema, setUtils, + updateUtils, + deleteUtils, getSchema, setLocales, setState, diff --git a/packages/design-core/src/preview/src/preview/generate.js b/packages/design-core/src/preview/src/preview/generate.js index f36e3247de..846cdbd10b 100644 --- a/packages/design-core/src/preview/src/preview/generate.js +++ b/packages/design-core/src/preview/src/preview/generate.js @@ -71,11 +71,13 @@ function generateImportsByType({ item, imports, exportNames, functionStrs }) { if (item.content.destructuring) { importItem.destructurings = importItem.destructurings || [] importItem.destructurings.push(item.content.exportName) + importItem.aliases = importItem.aliases || [] + importItem.aliases.push(item.name) } else { - importItem.exportName = item.content.exportName + importItem.exportName = item.name } - exportNames.push(item.content.exportName) + exportNames.push(item.name) } } else if (item.type === 'function' && checkIsValidFunString(item.content.value)) { functionStrs.push(`const ${item.name} = ${item.content.value}`) @@ -94,7 +96,14 @@ function generateStrsFromImports({ imports, strs, functionStrs, exportNames }) { } if (Array.isArray(value.destructurings) && value.destructurings.length) { - list.push(`{ ${value.destructurings.join(', ')} }`) + const destructuringsWidthAliases = value.destructurings.map((destructuring, index) => { + const alias = value.aliases[index] + if (destructuring === alias) { + return destructuring + } + return `${destructuring} as ${alias}` + }) + list.push(`{ ${destructuringsWidthAliases.join(', ')} }`) } importStrs.push(`import ${list.join(', ')} from '${key}'`) diff --git a/packages/plugins/bridge/src/js/resource.js b/packages/plugins/bridge/src/js/resource.js index 6b43658b5a..d46f49b1cf 100644 --- a/packages/plugins/bridge/src/js/resource.js +++ b/packages/plugins/bridge/src/js/resource.js @@ -13,7 +13,7 @@ import { reactive } from 'vue' import { useApp, useResource, useNotify } from '@opentiny/tiny-engine-controller' import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments' -import { setUtils } from '@opentiny/tiny-engine-canvas' +import { updateUtils, deleteUtils } from '@opentiny/tiny-engine-canvas' import { fetchResourceList, requestDeleteReSource, @@ -183,7 +183,7 @@ export const saveResource = (data, callback, emit) => { useResource().resState[data.category][index] = result // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新 - setUtils([result], false, true) + updateUtils([result]) generateBridgeUtil(useApp().appInfoState.selectedId) useNotify({ @@ -201,6 +201,8 @@ export const saveResource = (data, callback, emit) => { if (result) { useResource().resState[data.category].push(result) + // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新 + updateUtils([result]) generateBridgeUtil(useApp().appInfoState.selectedId) useNotify({ type: 'success', @@ -221,6 +223,7 @@ export const deleteData = (name, callback, emit) => { const index = useResource().resState[state.type].findIndex((item) => item.name === data.name) useResource().resState[state.type].splice(index, 1) + deleteUtils([data]) generateBridgeUtil(useApp().appInfoState.selectedId) useNotify({ type: 'success', diff --git a/packages/toolbars/generate-vue/src/generateCode.js b/packages/toolbars/generate-vue/src/generateCode.js index fe4eb25e56..67a8b015f2 100644 --- a/packages/toolbars/generate-vue/src/generateCode.js +++ b/packages/toolbars/generate-vue/src/generateCode.js @@ -214,7 +214,14 @@ function getImportStrsFromImports(imports) { } if (Array.isArray(value.destructurings) && value.destructurings.length) { - list.push(`{ ${value.destructurings.join(', ')} }`) + const destructuringsWidthAliases = value.destructurings.map((destructuring, index) => { + const alias = value.aliases[index] + if (destructuring === alias) { + return destructuring + } + return `${destructuring} as ${alias}` + }) + list.push(`{ ${destructuringsWidthAliases.join(', ')} }`) } result.push(`import ${list.join(', ')} from '${key}'`) @@ -234,11 +241,13 @@ function parseExportInfo(utilItem, imports, exportNames, functionStrs) { if (utilItem.content.destructuring) { importItem.destructurings = importItem.destructurings || [] importItem.destructurings.push(utilItem.content.exportName) + importItem.aliases = importItem.aliases || [] + importItem.aliases.push(utilItem.name) } else { - importItem.exportName = utilItem.content.exportName + importItem.exportName = utilItem.name } - exportNames.push(utilItem.content.exportName) + exportNames.push(utilItem.name) } } else if (utilItem.type === 'function') { functionStrs.push(`const ${utilItem.name} = ${utilItem.content.value}`) From 9466df8e9b7e53a561438c734d0a0d49b80aab45 Mon Sep 17 00:00:00 2001 From: gene9831 Date: Wed, 6 Dec 2023 23:04:06 -0800 Subject: [PATCH 3/8] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E5=B7=A5=E5=85=B7?= =?UTF-8?q?=E7=B1=BB=E5=A2=9E=E5=8A=A0=E6=A0=A1=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/component/SvgButton.vue | 18 +++++- packages/plugins/bridge/src/BridgeSetting.vue | 59 +++++++++++++++++-- 2 files changed, 70 insertions(+), 7 deletions(-) diff --git a/packages/common/component/SvgButton.vue b/packages/common/component/SvgButton.vue index e46650d35a..8066b5a769 100644 --- a/packages/common/component/SvgButton.vue +++ b/packages/common/component/SvgButton.vue @@ -1,5 +1,5 @@