fix: 使用import动态导入有cdn的工具类 (#133)

* fix: 使用import动态导入有cdn的工具类

packages/canvas/src/components/container/container.js

@@ -684,6 +684,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)
 }

packages/canvas/src/components/render/RenderMain.js

@@ -63,13 +63,13 @@ const setUtils = (data, clear, isForceRefresh) => {
   const utilsCollection = {}
   // 目前画布还不具备远程加载utils工具类的功能，目前只能加载TinyVue组件库中的组件工具
   data?.forEach((item) => {
-    const util = window.TinyVue[item.name]
+    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
     }
@@ -88,6 +88,19 @@ const setUtils = (data, clear, isForceRefresh) => {
   }
 }
 
+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 +394,8 @@ export default {
 export const api = {
   getUtils,
   setUtils,
+  updateUtils,
+  deleteUtils,
   getBridge,
   setBridge,
   getMethods,

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,

packages/design-core/src/preview/src/preview/generate.js

@@ -1,14 +1,14 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 const generateDefaultExport = (data) =>
   data && typeof data === 'object' ? `export default ${JSON.stringify(data, null, 2)}`.trim() : 'export default {}'
@@ -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 destructuringsWithAliases = value.destructurings.map((destructuring, index) => {
+        const alias = value.aliases[index]
+        if (destructuring === alias) {
+          return destructuring
+        }
+        return `${destructuring} as ${alias}`
+      })
+      list.push(`{ ${destructuringsWithAliases.join(', ')} }`)
     }
 
     importStrs.push(`import ${list.join(', ')} from '${key}'`)

packages/plugins/bridge/src/BridgeSetting.vue

@@ -35,14 +35,14 @@
             </tiny-radio-group>
           </tiny-form-item>
           <tiny-form-item v-if="!state.status" label="名称" prop="name">
-            <tiny-input v-model="state.name" placeholder="请输入名称"></tiny-input>
+            <tiny-input v-model="state.name" placeholder="请输入工具类名称"></tiny-input>
           </tiny-form-item>
           <div v-if="state.category">
             <tiny-form-item label="包名" prop="content.package">
-              <tiny-input v-model="state.content.package" placeholder="package"></tiny-input>
+              <tiny-input v-model="state.content.package" placeholder="请输入npm包名称"></tiny-input>
             </tiny-form-item>
             <tiny-form-item label="导出名称" prop="content.exportName">
-              <tiny-input v-model="state.content.exportName" placeholder="exportName"></tiny-input>
+              <tiny-input v-model="state.content.exportName" placeholder="请输入npm包的导出名称"></tiny-input>
             </tiny-form-item>
             <tiny-form-item label="是否解构">
               <tiny-switch v-model="state.content.destructuring"></tiny-switch>
@@ -77,6 +77,9 @@
                 placeholder="浏览器直接可用的生产包链接，请确保可用，否则可能会造成页面预览失败"
               ></tiny-input>
             </tiny-form-item>
+            <div class="code-preview">
+              <pre>// <span class="pre-title">生成的</span> utils.js <span class="pre-title">代码预览</span>&#10;{{ codePreview }}</pre>
+            </div>
           </div>
           <monaco-editor
             v-else
@@ -183,6 +186,21 @@ export default {
       type: RESOURCE_CATEGORY.Npm
     })
 
+    const codePreview = computed(() => {
+      const name = state.name || 'name'
+      let importName = name
+      if (state.content.destructuring) {
+        if (state.name && state.name === state.content.exportName) {
+          importName = `{ ${state.content.exportName || 'exportName'} }`
+        } else {
+          importName = `{ ${state.content.exportName || 'exportName'} as ${name} }`
+        }
+      }
+
+      const importFrom = `${state.content.package || 'package'}${state.content.main || ''}`
+      return `import ${importName} from '${importFrom}'\nexport { ${name} }`
+    })
+
     watchEffect(() => {
       state.name = state.resource.name
       state.content = state.resource.content || {}
@@ -243,7 +261,7 @@ export default {
     const deleteReSource = () => {
       confirm({
         title: '删除资源',
-        message: '您确认删除该资源吗?',
+        message: '如果删除正在使用的资源，将无法正常预览页面，确认要删除吗？',
         exec: () => {
           deleteData(state.name, closePanel, emit)
         }
@@ -280,6 +298,7 @@ export default {
       resourceForm,
       editor,
       state,
+      codePreview,
       isOpen,
       closePanel,
       save,
@@ -355,4 +374,23 @@ export default {
     align-items: center;
   }
 }
+
+.code-preview {
+  font-size: 14px;
+  line-height: 20px;
+  margin-left: 12px;
+  color: var(--ti-lowcode-birdge-code-preview-color);
+  background-color: var(--ti-lowcode-birdge-code-preview-bg-color);
+  border-radius: 6px;
+
+  & .pre-title {
+    font-family: Microsoft YaHei;
+  }
+
+  & > pre {
+    margin: 0;
+    padding: 8px 20px;
+    font-family: Consolas, 'Courier New', monospace;
+  }
+}
 </style>

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',

packages/theme/dark/bridge.less

@@ -4,4 +4,8 @@
   --ti-lowcode-bridge-list-bg: #3c3c3c;
   --ti-lowcode-birdge-editor-border-color: #262626;
   --ti-lowcode-birdge-input-label-color: #adb0b8;
+
+  // npm工具类中代码预览的主题
+  --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-gray-20);
+  --ti-lowcode-birdge-code-preview-bg-color: #262626;
 }

packages/theme/light/bridge.less

@@ -4,4 +4,8 @@
   --ti-lowcode-bridge-list-bg: var(--ti-lowcode-base-gray-10);
   --ti-lowcode-birdge-editor-border-color: var(--ti-lowcode-base-gray-20);
   --ti-lowcode-birdge-input-label-color: var(--ti-lowcode-base-text-color-1);
+
+  // npm工具类中代码预览的主题
+  --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-birdge-code-preview-bg-color: #f0f0f0;
 }

packages/toolbars/generate-vue/src/generateCode.js

@@ -1,14 +1,14 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 import prettier from 'prettier'
 import parserHtml from 'prettier/parser-html'
@@ -214,7 +214,14 @@ function getImportStrsFromImports(imports) {
     }
 
     if (Array.isArray(value.destructurings) && value.destructurings.length) {
-      list.push(`{ ${value.destructurings.join(', ')} }`)
+      const destructuringsWithAliases = value.destructurings.map((destructuring, index) => {
+        const alias = value.aliases[index]
+        if (destructuring === alias) {
+          return destructuring
+        }
+        return `${destructuring} as ${alias}`
+      })
+      list.push(`{ ${destructuringsWithAliases.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}`)