feat: add vueVersion prop

Jevon617 · Dec 12, 2022 · aa0f95c · aa0f95c
1 parent e93d138
commit aa0f95c
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -154,6 +154,8 @@ function App() {
 | symbolIdFormatter     | `(svgName:string, prefix: string)=>string` | [code](./src/core/utils.ts/#L33)               | the symbolId's formatter            |
 | optimizeOptions       | `SvgoOptions` | -          | svgo optimize [Options](https://github.com/svg/svgo) |
 | svgSpriteDomId        | `string`                   | __svg_sprite__dom__                            | Customize the ID of the svgDom                      |
+| vueVersion            | `2 | 3 | auto`             | auto                                           | Vue version                                         |
+
 
 ## Typescript support
 ```json

diff --git a/README.zh_CN.md b/README.zh_CN.md
@@ -154,6 +154,7 @@ function App() {
 | symbolIdFormatter     | `(svgName:string, prefix: string)=>string` | [code](./src/core/utils.ts/#L33)               | 可以通过这个参数来设置symbolId的格式       |
 | optimizeOptions       | `SvgoOptions` | -          |  [svgo 的优化参数](https://github.com/svg/svgo) |
 | svgSpriteDomId        | `string`                   | __svg_sprite__dom__                            | 自定义生成的svg元素的id                                  |
+| vueVersion            | `2 | 3 | auto`             | auto                                           | Vue 版本, 默认会自动检测                                  |
 
 
 ## Typescript 支持

diff --git a/src/core/generator.ts b/src/core/generator.ts
@@ -1,7 +1,7 @@
 import path from 'path'
 import fs from 'fs/promises'
 import { getPackageInfo, importModule, isPackageExists } from 'local-pkg'
-import type { Options } from '../types'
+import type { Options, VueVersion } from '../types'
 import { dts, golbalDts, reactDts, reactTemplate, template } from './snippets'
 import { replace, transformStyleStrToObject } from './utils'
 import createSvgSprite from './sprite'
@@ -91,13 +91,13 @@ export function genDts(symbolIds: Set<string>, options: Options, isVueProject: b
 }
 
 async function genComponent(options: Options, isVueProject: boolean) {
-  const { componentStyle, componentName } = options
+  const { componentStyle, componentName, vueVersion } = options
   if (!isVueProject) {
     return reactTemplate.replace(/\$component_name/, componentName!)
       .replace(/\$component_style/, JSON.stringify(transformStyleStrToObject(componentStyle!)))
   }
 
-  const vueVerison = await getVueVersion()
+  const vueVerison = await getVueVersion(vueVersion!)
   if (!vueVerison)
     return 'export default {}'
 
@@ -148,23 +148,25 @@ async function compileVue2Template(template: string): Promise<string> {
   return code
 }
 
-async function getVueVersion() {
-  try {
-    const result = await getPackageInfo('vue')
-    if (!result)
+async function getVueVersion(vueVerison: VueVersion) {
+  if (vueVerison === 'auto') {
+    try {
+      const result = await getPackageInfo('vue')
+      if (!result)
+        return null
+      return result.version.startsWith('2.') ? 'vue2' : 'vue3'
+    }
+    catch {
       return null
-    return result.version.startsWith('2.') ? 'vue2' : 'vue3'
+    }
   }
-  catch {
-    return null
+  else {
+    return `vue${vueVerison}`
   }
 }
 
 function detectProjectType(options: Options) {
-  if (options.projectType) {
-    return options.projectType === 'vue'
-  }
-  else {
+  if (options.projectType === 'auto') {
     try {
       if (isPackageExists('vue'))
         return true
@@ -177,4 +179,7 @@ function detectProjectType(options: Options) {
       throw new Error('[unpluign-svg-component] can\'t detect your project type, please set options.projectType.')
     }
   }
+  else {
+    return options.projectType === 'vue'
+  }
 }
diff --git a/src/core/utils.ts b/src/core/utils.ts
@@ -29,6 +29,7 @@ export function resolveOptions(options: Options): Options {
     componentName: 'SvgIcon',
     dtsDir: process.cwd(),
     projectType: 'auto',
+    vueVersion: 'auto',
     svgSpriteDomId: '__svg_sprite__dom__',
     componentStyle: 'width: 1em; height: 1em; fill:currentColor;',
     symbolIdFormatter(svgName: string, prefix: string) {

diff --git a/src/types.ts b/src/types.ts
@@ -12,5 +12,7 @@ export interface Options {
   symbolIdFormatter?: (name: string, prefix: string) => string
   optimizeOptions?: OptimizeOptions
   projectType?: 'vue' | 'react' | 'auto'
+  vueVersion?: VueVersion
 }
 
+export type VueVersion = 2 | 3 | 'auto'
diff --git a/test/gen-module-code.test.ts b/test/gen-module-code.test.ts
@@ -4,9 +4,17 @@ import { genModuleCode } from '../src/core/generator'
 
 test('createSprite', async () => {
   const { code } = await genModuleCode({
+    projectType: 'vue',
+    vueVersion: 3,
     iconDir: path.resolve(__dirname, './icons'),
     componentName: 'SvgIcon',
     svgSpriteDomId: 'sprite-id',
+    symbolIdFormatter(svgName: string, prefix: string) {
+      const nameArr = svgName.split('/')
+      if (prefix)
+        nameArr.unshift(prefix)
+      return nameArr.join('-').replace(/\.svg$/, '')
+    },
   }, true)
   expect(code).matchSnapshot()
 })