fix: gen utils with difference name and exportName (#1609)

Author: chilingling

packages/vue-generator/src/plugins/genUtilsPlugin.js

@@ -12,14 +12,20 @@ function genUtilsPlugin(options = {}) {
   const { path, fileName } = realOptions
 
   const handleNpmUtils = (utilsConfig) => {
-    const { content } = utilsConfig
-    const { package: packageName, exportName, destructuring, subName } = content
-
-    const statement = generateImportStatement({ moduleName: packageName, exportName, alias: subName, destructuring })
+    const { content, name } = utilsConfig
+    const { package: packageName, exportName, destructuring } = content
+
+    // 如果 destructuring 为 false，则使用 name 作为导出名称
+    const statement = generateImportStatement({
+      moduleName: packageName,
+      exportName: destructuring ? exportName : name,
+      alias: name,
+      destructuring
+    })
     let realExportName = exportName
 
-    if (subName) {
-      realExportName = subName
+    if (name) {
+      realExportName = name
     }
 
     return {

packages/vue-generator/test/testcases/generator/expected/appdemo01/src/utils.js

@@ -1,6 +1,6 @@
 import axios from 'axios'
 import { Button } from '@opentiny/vue'
-import { NavMenu } from '@opentiny/vue'
+import { NavMenu as Menu } from '@opentiny/vue'
 import { Modal } from '@opentiny/vue'
 import { Pager } from '@opentiny/vue'
 const npm = ''
@@ -10,4 +10,4 @@ const test = function test() {
 const util = function util() {
   console.log(321)
 }
-export { axios, Button, NavMenu, Modal, npm, Pager, test, util }
+export { axios, Button, Menu, Modal, npm, Pager, test, util }

packages/vue-generator/test/testcases/sfc/case08/expected/iconTest.vue

@@ -22,22 +22,19 @@ import { IconEdit, IconMore, IconCustom } from '@opentiny/vue-icon'
 import * as vue from 'vue'
 import { defineProps, defineEmits } from 'vue'
 import { I18nInjectionKey } from 'vue-i18n'
+
 const TinyIconEdit = IconEdit()
 const TinyIconMore = IconMore()
 const TinyIconCustom = IconCustom()
 const props = defineProps({})
+
 const emit = defineEmits([])
 const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
-const wrap = lowcodeWrap(props, {
-  emit
-})
-wrap({
-  stores
-})
+const wrap = lowcodeWrap(props, { emit })
+wrap({ stores })
+
 const state = vue.reactive({})
-wrap({
-  state
-})
+wrap({ state })
 </script>
 <style scoped>
 .page-base-style {

packages/vue-generator/test/unit/plugins/genUtilsPlugiin.test.js

@@ -0,0 +1,147 @@
+import { describe, expect, test } from 'vitest'
+import genUtilsPlugin from '@/plugins/genUtilsPlugin'
+
+describe('genUtilsPlugin', () => {
+  test('should do nothing when utils is not array', () => {
+    const plugin = genUtilsPlugin()
+    expect(plugin.run({})).toBeUndefined()
+    expect(plugin.run({ utils: null })).toBeUndefined()
+  })
+
+  test('should generate import for npm util (destructuring true)', () => {
+    const plugin = genUtilsPlugin()
+    const schema = {
+      utils: [
+        {
+          type: 'npm',
+          name: 'request',
+          content: {
+            package: 'axios',
+            exportName: 'axios',
+            destructuring: false
+          }
+        }
+      ]
+    }
+
+    const result = plugin.run(schema)
+    expect(result?.fileType).toBe('js')
+    expect(result?.fileName).toBe('utils.js')
+    expect(result?.path).toBe('./src')
+    expect(result?.fileContent).toContain("import request from 'axios'")
+    expect(result?.fileContent).toContain('export { request }')
+  })
+
+  test('should generate const for function util', () => {
+    const plugin = genUtilsPlugin()
+    const schema = {
+      utils: [
+        {
+          type: 'function',
+          name: 'sum',
+          content: {
+            value: '(a, b) => a + b'
+          }
+        }
+      ]
+    }
+
+    const result = plugin.run(schema)
+    expect(result?.fileContent).toContain('const sum = (a, b) => a + b')
+    expect(result?.fileContent).toContain('export { sum }')
+  })
+
+  test('should support aliasing npm util via name', () => {
+    const plugin = genUtilsPlugin()
+    const schema = {
+      utils: [
+        {
+          type: 'npm',
+          name: 'dayjs',
+          content: {
+            package: 'dayjs',
+            exportName: 'dayjs',
+            destructuring: false
+          }
+        }
+      ]
+    }
+
+    const result = plugin.run(schema)
+    expect(result?.fileContent).toContain("import dayjs from 'dayjs'")
+    expect(result?.fileContent).toContain('export { dayjs }')
+  })
+
+  test('should support mixed utils and custom options', () => {
+    const plugin = genUtilsPlugin({ path: './custom', fileName: 'my-utils.js' })
+    const schema = {
+      utils: [
+        {
+          type: 'npm',
+          name: 'request',
+          content: {
+            package: 'axios',
+            exportName: 'axios',
+            destructuring: false
+          }
+        },
+        {
+          type: 'function',
+          name: 'sum',
+          content: {
+            value: '(a, b) => a + b'
+          }
+        }
+      ]
+    }
+
+    const result = plugin.run(schema)
+    expect(result?.fileName).toBe('my-utils.js')
+    expect(result?.path).toBe('./custom')
+    expect(result?.fileContent).toContain("import request from 'axios'")
+    expect(result?.fileContent).toContain('const sum = (a, b) => a + b')
+    expect(result?.fileContent).toContain('export { request,sum }')
+  })
+
+  test('should generate destructuring import without alias for npm util', () => {
+    const plugin = genUtilsPlugin()
+    const schema = {
+      utils: [
+        {
+          type: 'npm',
+          name: 'TinyButton',
+          content: {
+            package: '@opentiny/vue',
+            exportName: 'TinyButton',
+            destructuring: true
+          }
+        }
+      ]
+    }
+
+    const result = plugin.run(schema)
+    expect(result?.fileContent).toContain("import { TinyButton } from '@opentiny/vue'")
+    expect(result?.fileContent).toContain('export { TinyButton }')
+  })
+
+  test('should generate destructuring import with alias for npm util', () => {
+    const plugin = genUtilsPlugin()
+    const schema = {
+      utils: [
+        {
+          type: 'npm',
+          name: 'TinyButton',
+          content: {
+            package: '@opentiny/vue',
+            exportName: 'Button',
+            destructuring: true
+          }
+        }
+      ]
+    }
+
+    const result = plugin.run(schema)
+    expect(result?.fileContent).toContain("import { Button as TinyButton } from '@opentiny/vue'")
+    expect(result?.fileContent).toContain('export { TinyButton }')
+  })
+})