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

* fix: 使用import动态导入有cdn的工具类
2023-12-22 01:29:39 -08:00 · 2023-12-22 01:29:39 -08:00 · 1b80dd3a35
parent a3b43ec166
commit 1b80dd3a35
9 changed files with 128 additions and 34 deletions
--- a/packages/canvas/src/components/container/container.js
+++ b/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)
 }
--- a/packages/canvas/src/components/render/RenderMain.js
+++ b/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,
--- 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,
--- 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 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}'`)
--- a/packages/plugins/bridge/src/BridgeSetting.vue
+++ b/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>
--- 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',
--- a/packages/theme/dark/bridge.less
+++ b/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;
 }
--- a/packages/theme/light/bridge.less
+++ b/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;
 }
--- 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 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}`)