feat: iconifyIntelliSense 支持自定义路径 (#25)

* feat: iconifyIntelliSense 支持自定义路径 * feat: 自定义路径 * perf: 优化代码
waset · Oct 28, 2024 · e2df46b · e2df46b
1 parent c1f029c
commit e2df46b
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 26 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,5 +12,12 @@
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",
   "editor.formatOnSave": false,
   "eslint.format.enable": true,
-  "eslint.useFlatConfig": true
+  "eslint.useFlatConfig": true,
+  "iconify.customCollectionJsonPaths": [
+    "playground/node_modules/.unplugin-iconify/icon.json",
+    "playground/node_modules/.unplugin-iconify/svg.json"
+  ],
+  "[svg]": {
+    "editor.defaultFormatter": "jock.svg"
+  }
 }
diff --git a/playground/icons/cat.svg b/playground/icons/cat.svg
diff --git a/playground/icons/daiban.svg b/playground/icons/daiban.svg
diff --git a/playground/index.html b/playground/index.html
@@ -6,7 +6,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
-  <div id="app"></div>
+  <div id="app">
+    <div class="i-icon:cat"></div>
+    <div class="i-svg:cat"></div>
+    <div class="i-icon-daiban"></div>
+    <div class="i-svg-daiban"></div>
+  </div>
   <a href="/__inspect/#/module?id=./main.ts&index=2" target="_blank" style="text-decoration: none; margin-top:10px; display: block;">visit /__inspect/ to inspect the intermediate state</a>
   <script type="module" src="./main.ts"></script>
 </body>

diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -1,3 +1,5 @@
+import { join } from 'node:path'
+import { cwd } from 'node:process'
 import { defineConfig } from 'vite'
 import Inspect from 'vite-plugin-inspect'
 import Iconify from '../src/vite'
@@ -6,12 +8,13 @@ export default defineConfig({
   plugins: [
     Inspect(),
     Iconify({
+      workspace: join(cwd(), '..'),
       convert: {
-        svg: {
+        icon: {
           path: './icons',
           noColor: true,
         },
-        icon: './icons',
+        svg: './icons',
       },
       iconifyIntelliSense: true,
     }),

diff --git a/src/core/convert.ts b/src/core/convert.ts
@@ -1,7 +1,6 @@
 import type { Convert, Options } from './types'
 import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
 import { join } from 'node:path'
-import { cwd } from 'node:process'
 import { isEmptyColor, parseColors } from '@iconify/tools/lib/colors/parse'
 import { importDirectory } from '@iconify/tools/lib/import/directory'
 import { runSVGO } from '@iconify/tools/lib/optimise/svgo'
@@ -21,7 +20,7 @@ export async function Generateds(options: Required<Options>): Promise<void> {
   }
 
   for (const key in options.convert) {
-    await Generated(key, options.convert[key], options.output)
+    await Generated(key, options.convert[key], join(options.workspace, options.output))
   }
 
   // eslint-disable-next-line no-console
@@ -91,13 +90,12 @@ export async function Generated(name: string, setting: string | Convert, output:
   const exported = `${JSON.stringify(iconSet.export(), null, '\t')}\n`
 
   // 构建 manifest 文件路径
-  const out_dir = join(cwd(), output)
-  if (!existsSync(out_dir)) {
-    mkdirSync(out_dir, { recursive: true })
+  if (!existsSync(output)) {
+    mkdirSync(output, { recursive: true })
   }
 
   // Save to file
-  writeFileSync(`${out_dir}/${iconSet.prefix}.json`, exported, 'utf8')
+  writeFileSync(join(output, `${iconSet.prefix}.json`), exported, 'utf8')
 
   // eslint-disable-next-line no-console
   console.log(`${SUCCESS_COLOR} Imported ${name}: ${RESET_COLOR}${NUMBER_COLOR}${Object.keys(iconSet.entries).length}${RESET_COLOR}`)

diff --git a/src/core/index.ts b/src/core/index.ts
@@ -1,4 +1,6 @@
 import type { Convert, Loaders, Optional, Options } from './types'
+import { join } from 'node:path'
+import { cwd } from 'node:process'
 import { OUTPUT } from '../env'
 import { getOutputFiles, UnocssLoader } from '../loader'
 import { Generateds } from './convert'
@@ -16,6 +18,7 @@ export class Iconify {
    * @description 统一管理默认值，避免使用 `if` 判断
    */
   defaultOptions: Optional<Options> = {
+    workspace: cwd(),
     output: OUTPUT,
     iconifyIntelliSense: false,
     convert: {},
@@ -116,6 +119,24 @@ export class Iconify {
    * 生成 Iconify IntelliSense 配置
    */
   async toIntelliSense(): Promise<void> {
-    await IconifyIntelliSenseSettings(this.outputs)
+    // 如果未开启 IntelliSense，则直接返回
+    if (!this.options.iconifyIntelliSense) {
+      return
+    }
+    // 生成文件的文件路径
+    const paths = []
+    for (const dir of this.outputs) {
+      paths.push(dir.replace(`${this.options.workspace}/`, ''))
+    }
+    // 如果没有生成文件，则直接返回
+    if (!paths.length) {
+      return
+    }
+    // 生成 IntelliSense 配置文件
+    const dir = typeof this.options.iconifyIntelliSense === 'string' ? this.options.iconifyIntelliSense : '.vscode'
+    await IconifyIntelliSenseSettings(
+      join(this.options.workspace, dir),
+      paths,
+    )
   }
 }
diff --git a/src/core/types.ts b/src/core/types.ts
@@ -22,6 +22,13 @@ export interface Convert {
  * 选项
  */
 export interface Options {
+  /**
+   * 工作区路径
+   * @description 项目根目录
+   * @default process.cwd()
+   */
+  workspace?: string
+
   /**
    * 要转换的图表集
    *

diff --git a/src/core/vscode.ts b/src/core/vscode.ts
@@ -1,26 +1,26 @@
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
 import { join } from 'node:path'
-import { cwd } from 'node:process'
 import { injectJsonc } from './utils'
 
 /**
  * vscode `iconify.customCollectionJsonPaths` 配置
+ *
+ * @param dir `.vscode` 的绝对路径
  * @param jsons json 文件路径
  */
-export async function IconifyIntelliSenseSettings(jsons: string[]): Promise<void> {
-  const dir = join(cwd(), '.vscode')
+export async function IconifyIntelliSenseSettings(dir: string, jsons: string[]): Promise<void> {
+  // 判断目录是否存在
   if (!existsSync(dir)) {
     mkdirSync(dir, { recursive: true })
   }
+  // 判断文件是否存在
   const settingPath = join(dir, 'settings.json')
-
   if (!existsSync(settingPath)) {
-    writeFileSync(settingPath, '{}')
+    writeFileSync(settingPath, '{}', { encoding: 'utf-8' })
   }
-
+  // 生成配置
   const settingText = readFileSync(settingPath, 'utf-8')
-
-  writeFileSync(settingPath, injectJsonc(settingText, 'iconify.customCollectionJsonPaths', jsons), {
-    encoding: 'utf-8',
-  })
+  // 写入配置
+  const newContent = injectJsonc(settingText, 'iconify.customCollectionJsonPaths', jsons)
+  writeFileSync(settingPath, newContent, { encoding: 'utf-8' })
 }
diff --git a/src/index.ts b/src/index.ts
@@ -24,9 +24,7 @@ export const unpluginFactory: UnpluginFactory<Options> = options => ({
     /**
      * 生成 Iconify IntelliSense 配置
      */
-    if (options.iconifyIntelliSense) {
-      await handle.toIntelliSense()
-    }
+    await handle.toIntelliSense()
   },
 })
 

diff --git a/src/loader.ts b/src/loader.ts
@@ -33,5 +33,5 @@ export function getOutputFiles(dir: string = OUTPUT): string[] {
 
   const files = readdirSync(srcDir).filter(file => file.endsWith('.json'))
 
-  return files.map(file => join(dir, file))
+  return files.map(file => join(srcDir, file))
 }