From fd765cd6ec90ad28dd279ac569fcd3ad3da323f8 Mon Sep 17 00:00:00 2001 From: Vben Date: Sun, 7 Mar 2021 16:02:06 +0800 Subject: [PATCH] feat: export vite-plugin-svg-icons/client --- .eslintignore | 1 + README.md | 7 +++++++ README.zh_CN.md | 7 +++++++ cliend.d.ts | 4 ++++ example/src/main.ts | 4 ++++ package.json | 3 ++- src/constants.ts | 1 + src/index.ts | 46 ++++++++++++++++++++++++++++++++++----------- 8 files changed, 61 insertions(+), 12 deletions(-) create mode 100644 cliend.d.ts diff --git a/.eslintignore b/.eslintignore index de4d1f0..ce97cfd 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,3 @@ dist node_modules +example diff --git a/README.md b/README.md index 4aeedf2..49f06a8 100644 --- a/README.md +++ b/README.md @@ -127,6 +127,13 @@ Here the svg sprite map has been generated React is used in the same way. Just modify the component to Jsx component +### Get all SymbolId + +```ts +import ids from 'vite-plugin-svg-icons/client'; +// => ['icon-icon1','icon-icon2','icon-icon3'] +``` + ### Options | Parameter | Type | Default | Description | diff --git a/README.zh_CN.md b/README.zh_CN.md index 4fd8f0e..8b1bda2 100644 --- a/README.zh_CN.md +++ b/README.zh_CN.md @@ -127,6 +127,13 @@ import 'vite-plugin-svg-icons/register'; React 使用方式一样。只需修改组件为 Jsx 组件即可 +### 获取所有 SymbolId + +```ts +import ids from 'vite-plugin-svg-icons/client'; +// => ['icon-icon1','icon-icon2','icon-icon3'] +``` + ### 配置说明 | 参数 | 类型 | 默认值 | 说明 | diff --git a/cliend.d.ts b/cliend.d.ts new file mode 100644 index 0000000..413aa80 --- /dev/null +++ b/cliend.d.ts @@ -0,0 +1,4 @@ +declare module 'vite-plugin-svg-icons/client' { + const result: string[]; + export default result; +} diff --git a/example/src/main.ts b/example/src/main.ts index 0195ba1..3bd7dd4 100644 --- a/example/src/main.ts +++ b/example/src/main.ts @@ -3,6 +3,10 @@ import App from './App.vue'; import 'vite-plugin-svg-icons/register'; +import allKeys from 'vite-plugin-svg-icons/client'; + +console.log(allKeys); + const app = createApp(App); app.mount('#app'); diff --git a/package.json b/package.json index ddf253f..92bdbfa 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "author": "Vben", "files": [ "dist", - "index.d.ts" + "register.d.ts", + "client.d.ts" ], "scripts": { "dev": "npm run build -- --watch", diff --git a/src/constants.ts b/src/constants.ts index 0e98505..317e793 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,3 +1,4 @@ export const SVG_ICONS_NAME = 'vite-plugin-svg-icons/register'; +export const SVG_ICONS_CLIENT = 'vite-plugin-svg-icons/client'; export const SVG_DOM_ID = '__svg__icons__dom__' + new Date().getTime() + '__'; diff --git a/src/index.ts b/src/index.ts index 2da1a52..ade55a1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -9,7 +9,7 @@ import { optimize } from 'svgo'; import fs from 'fs-extra'; import path from 'path'; import { debug as Debug } from 'debug'; -import { SVG_DOM_ID, SVG_ICONS_NAME } from './constants'; +import { SVG_DOM_ID, SVG_ICONS_CLIENT, SVG_ICONS_NAME } from './constants'; import { normalizePath } from 'vite'; // @ts-ignore import SVGCompiler from 'svg-baker'; @@ -37,6 +37,7 @@ interface FileStats { relativeName: string; mtimeMs?: number; code: string; + symbolId?: string; } export default (opt: ViteSvgIconsPlugin): Plugin => { @@ -68,25 +69,41 @@ export default (opt: ViteSvgIconsPlugin): Plugin => { debug('resolvedConfig:', resolvedConfig); }, resolveId(importee) { - if (importee === SVG_ICONS_NAME) { + if (importee === SVG_ICONS_NAME || importee === SVG_ICONS_CLIENT) { return importee; } return null; }, async load(id) { - if (id === SVG_ICONS_NAME && isBuild) { - return await createModuleCode(cache, svgoOptions as SvgoOptions, options); + const isRegister = id === SVG_ICONS_NAME; + const isClient = id === SVG_ICONS_CLIENT; + if (isBuild && (isRegister || isClient)) { + const { code, idSet } = await createModuleCode(cache, svgoOptions as SvgoOptions, options); + if (isRegister) { + return code; + } + if (isClient) { + return idSet; + } } return null; }, configureServer: ({ middlewares }) => { middlewares.use(async (req, res, next) => { - const url = req.url!; - if (normalizePath(url) === `/@id/${SVG_ICONS_NAME}`) { + const url = normalizePath(req.url!); + const registerId = `/@id/${SVG_ICONS_NAME}`; + const clientId = `/@id/${SVG_ICONS_CLIENT}`; + if ([clientId, registerId].includes(url)) { res.setHeader('Content-Type', 'application/javascript'); res.setHeader('Cache-Control', 'no-cache'); - const content = await createModuleCode(cache, svgoOptions as SvgoOptions, options); + const { code, idSet } = await createModuleCode( + cache, + svgoOptions as SvgoOptions, + options + ); + const content = url === registerId ? code : idSet; + res.setHeader('Etag', getEtag(content, { weak: true })); res.statusCode = 200; res.end(content); @@ -103,7 +120,7 @@ export async function createModuleCode( svgoOptions: SvgoOptions, options: ViteSvgIconsPlugin ) { - const insertHtml = await compilerIcons(cache, svgoOptions, options); + const { insertHtml, idSet } = await compilerIcons(cache, svgoOptions, options); const code = ` document.addEventListener('DOMContentLoaded', () => { let body = document.body; @@ -117,7 +134,10 @@ export async function createModuleCode( body.insertBefore(svgDom, body.firstChild); }); `; - return `${code}\nexport default {}`; + return { + code: `${code}\nexport default {}`, + idSet: `export default ${JSON.stringify(Array.from(idSet))}`, + }; } /** @@ -133,6 +153,7 @@ export async function compilerIcons( const { iconDirs } = options; let insertHtml = ''; + const idSet = new Set(); for (const dir of iconDirs) { const svgFilsStats = fg.sync('**/*.svg', { cwd: dir, stats: true, absolute: true }); @@ -148,6 +169,7 @@ export async function compilerIcons( relativeName = normalizePath(path).replace(normalizePath(dir + '/'), ''); symbolId = createSymbolId(relativeName, options); svgSymbol = await compilerIcon(path, symbolId, svgOptions); + idSet.add(symbolId); }; if (cacheStat) { @@ -155,6 +177,8 @@ export async function compilerIcons( await getSymbol(); } else { svgSymbol = cacheStat.code; + symbolId = cacheStat.symbolId; + symbolId && idSet.add(symbolId); } } else { await getSymbol(); @@ -165,12 +189,12 @@ export async function compilerIcons( mtimeMs, relativeName, code: svgSymbol, + symbolId, }); insertHtml += `${svgSymbol || ''}`; } } - - return insertHtml; + return { insertHtml, idSet }; } export async function compilerIcon(