feat: export SvgName, svgNames

Jevon617 · Apr 24, 2023 · a21e194 · a21e194
1 parent 472d760
commit a21e194
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 26 deletions.
diff --git a/examples/vue3-vite/main.ts b/examples/vue3-vite/main.ts
@@ -1,5 +1,12 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import MySvgIcon from '~virtual/svg-component'
+import type { SvgName } from '~virtual/svg-component'
+import MySvgIcon, { svgNames } from '~virtual/svg-component'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const test: SvgName = 'icon-common-icon-add'
+
+// eslint-disable-next-line no-console
+console.log(svgNames)
 
 createApp(App).component(MySvgIcon.name, MySvgIcon).mount('#app')
diff --git a/examples/vue3-vite/typing/svg-component.d.ts b/examples/vue3-vite/typing/svg-component.d.ts
@@ -15,5 +15,7 @@ declare module '~virtual/svg-component' {
   }>>, {
       name: "icon-icon-addUser" | "icon-icon-barCode" | "icon-icon-card2" | "icon-common-icon-add" | "icon-common-icon-add3" | "icon-common-icon-addUser" | "icon-common-icon-addUsers" | "icon-common-icon-addx" | "icon-common-icon-apple" | "icon-common-icon-banner" | "icon-common-logo";
   }>;
+  export const svgNames: ["icon-icon-addUser" , "icon-icon-barCode" , "icon-icon-card2" , "icon-common-icon-add" , "icon-common-icon-add3" , "icon-common-icon-addUser" , "icon-common-icon-addUsers" , "icon-common-icon-addx" , "icon-common-icon-apple" , "icon-common-icon-banner" , "icon-common-logo"];
+  export type SvgName = "icon-icon-addUser" | "icon-icon-barCode" | "icon-icon-card2" | "icon-common-icon-add" | "icon-common-icon-add3" | "icon-common-icon-addUser" | "icon-common-icon-addUsers" | "icon-common-icon-addx" | "icon-common-icon-apple" | "icon-common-icon-banner" | "icon-common-logo";
   export default MySvgIcon;
 }
diff --git a/src/core/generator.ts b/src/core/generator.ts
@@ -24,21 +24,25 @@ export async function genCode(options: Options, usedSvgNames: string[] | string,
     genDts(symbolIds, options, isVueProject)
 
   const hmrCode = `
-    if (import.meta.hot) {
-      var svgDom = document.querySelector('#${svgSpriteDomId}') 
-      import.meta.hot.on("${LOAD_EVENT}", ({svgSymbolHtml}) => {
-        svgDom.innerHTML = svgSymbolHtml
-      })
-
-      import.meta.hot.on("${UPDATE_EVENT}", ({symbolId, newSvgSymbol}) => {
-        var oldSymbolDom = svgDom.querySelector('#' + symbolId)
-        var tempDom = document.createElementNS('${XMLNS}', 'svg');
-        tempDom.innerHTML = newSvgSymbol
-        var newSymbolDom = tempDom.children[0]
-        svgDom.replaceChild(newSymbolDom, oldSymbolDom)
-      })
-    }
-  `
+if (import.meta.hot) {
+  var svgDom = document.querySelector('#${svgSpriteDomId}') 
+  import.meta.hot.on("${LOAD_EVENT}", ({svgSymbolHtml}) => {
+    svgDom.innerHTML = svgSymbolHtml
+  })
+
+  import.meta.hot.on("${UPDATE_EVENT}", ({symbolId, newSvgSymbol}) => {
+    var oldSymbolDom = svgDom.querySelector('#' + symbolId)
+    var tempDom = document.createElementNS('${XMLNS}', 'svg');
+    tempDom.innerHTML = newSvgSymbol
+    var newSymbolDom = tempDom.children[0]
+    svgDom.replaceChild(newSymbolDom, oldSymbolDom)
+  })
+}
+`
+
+  const symbolIdsCode = `
+export const svgNames = ["${[...symbolIds].join('","')}"]
+`
 
   const svgSpriteDomStr = `
     <svg 
@@ -52,6 +56,7 @@ export async function genCode(options: Options, usedSvgNames: string[] | string,
 
   const code = `
     ${componentCode}
+    ${symbolIdsCode}
     ${hmr ? hmrCode : ''}
    `
   return {
@@ -104,17 +109,16 @@ async function genComponent(options: Options, isVueProject: boolean) {
   let code = await compilers[vueVerison](processedTemplate)
 
   code += `
-    \nexport default{
-      name: "${componentName}",
-      props: {
-        name: {
-          type: String,
-          required: true
-        }
-      },
-      render
+\nexport default{
+  name: "${componentName}",
+  props: {
+    name: {
+      type: String,
+      required: true
     }
-  `
+  },
+  render
+}`
   return code
 }
 

diff --git a/src/core/snippets.ts b/src/core/snippets.ts
@@ -26,6 +26,8 @@ declare module '${MODULE_NAME}' {
   }>>, {
       name: "$svg_symbolIds";
   }>;
+  export const svgNames: ["$svg_names"];
+  export type SvgName = "$svg_symbolIds";
   export default $component_name;
 }
 `

diff --git a/src/core/utils.ts b/src/core/utils.ts
@@ -21,6 +21,9 @@ export function replace(dts: string, symbolIds: Set<string>, componentName: stri
   ).replace(
     /\$component_name/g,
     componentName,
+  ).replace(
+    /\$svg_names/g,
+    Array.from(symbolIds).join('" , "'),
   )
 }