From f008df7f40db34454f7752d72785ad55561b9431 Mon Sep 17 00:00:00 2001 From: meshare <845545348@qq.com> Date: Tue, 23 Jul 2024 23:33:21 +0800 Subject: [PATCH] - Update package.json - Check code --- eslint.config.js | 26 +++-- index.d.ts | 16 +-- package.json | 12 +-- src/cli/generate.ts | 12 +-- src/cli/index.ts | 31 +++--- src/cli/parse.ts | 11 ++- src/component/index.ts | 7 +- src/component/j-icon.ts | 68 ++++++------- test/command.spec.ts | 32 +++--- test/generate.spec.ts | 20 ++-- test/icon.ts | 51 +++++----- test/index.spec.ts | 34 +++---- test/parse.spec.ts | 214 ++++++++++++++++++++-------------------- 13 files changed, 271 insertions(+), 263 deletions(-) diff --git a/eslint.config.js b/eslint.config.js index fcbf16e..aea24d6 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -15,22 +15,34 @@ export default [ quoteProps: 'as-needed', braceStyle: '1tbs' }), + { + files: [ + '**/*.js', + '**/*.ts' + ] + }, { ignores: [ - 'node_modules/**', + 'node_modules/**/', 'dist/**', 'test/template/**' - ], - languageOptions: { - globals: { ...globals.browser, ...globals.nodeBuiltin } - } + ] }, { + languageOptions: { + globals: { + ...globals.browser, + ...globals.nodeBuiltin + } + }, rules: { '@stylistic/jsx-indent': [ 'error', 2 ], '@stylistic/arrow-parens': [ 'warn', 'as-needed' ], - '@stylistic/comma-style': [ 'warn', 'last', { - exceptions: { VariableDeclaration: true } + '@stylistic/indent': [ 'error', 4, { + VariableDeclarator: 'first', + FunctionDeclaration: { parameters: 'first' }, + FunctionExpression: { parameters: 'first' }, + CallExpression: { arguments: 'first' } }], '@stylistic/array-bracket-spacing': [ 'warn', 'always', { singleValue: true, diff --git a/index.d.ts b/index.d.ts index 4a2f9f7..d9bc1af 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,4 +1,4 @@ -import { VNode, VNodeArrayChildren, Plugin, FunctionalComponent, SVGAttributes } from 'vue'; +import { VNode, Plugin, FunctionalComponent, SVGAttributes } from 'vue'; import type { KebabCasedProperties } from 'type-fest'; type Icon = { @@ -15,7 +15,7 @@ type Icon = { /** SVG 元素其他属性, 不包含 viewBox, width, height 属性 */ attributes?: Record; /** 子节点渲染函数 */ - render: () => VNode | VNodeArrayChildren; + render: () => VNode | VNode[]; }; type Option = { @@ -51,15 +51,15 @@ type Option = { type A11yProp = ( - { title: string; 'aria-label'?: never; } - | { title?: never; 'aria-label': string; } - | { title?: never; 'aria-label'?: never; } + { title: string; 'aria-label'?: never } + | { title?: never; 'aria-label': string } + | { title?: never; 'aria-label'?: never } ) & ( - { desc: string; 'aria-description'?: never; } - | { desc?: never; 'aria-description': string; } - | { desc?: never; 'aria-description'?: never; } + { desc: string; 'aria-description'?: never } + | { desc?: never; 'aria-description': string } + | { desc?: never; 'aria-description'?: never } ); /** diff --git a/package.json b/package.json index 003effc..b1e74fc 100644 --- a/package.json +++ b/package.json @@ -16,11 +16,9 @@ "module": "dist/component/index.esm.min.js", "types": "index.d.ts", "exports": { - ".": { - "import": "dist/component/index.esm.min.js", - "browser": "dist/component/index.umd.min.js", - "types": "index.d.ts" - } + "types": "./index.d.ts", + "import": "./dist/component/index.esm.min.js", + "browser": "./dist/component/index.umd.min.js" }, "files": [ "bin", @@ -44,7 +42,9 @@ "access": "public" }, "scripts": { - "prebuild": "rimraf dist", + "clean": "rimraf dist", + "eslint": "eslint . --fix --debug", + "prebuild": "npm run clean && npm run eslint", "build": "rollup -c", "pretest": "npm run build", "test": "vitest run", diff --git a/src/cli/generate.ts b/src/cli/generate.ts index 37f5bd3..4711287 100644 --- a/src/cli/generate.ts +++ b/src/cli/generate.ts @@ -40,10 +40,10 @@ function serializeChild(element: SVGElement, format: Format): string { nodes.push(node); }); - const attrCode = serializeAttribute(element.attributes || {}) - , nodeCode = nodes.length ? `[${nodes.join(', ')}]` : '' - , delimiter = attrCode && nodeCode ? ', ' : '' - , render = format === Format.UNIVERSAL_MODULE ? '_vue.h' : 'h'; + const attrCode = serializeAttribute(element.attributes || {}), + nodeCode = nodes.length ? `[${nodes.join(', ')}]` : '', + delimiter = attrCode && nodeCode ? ', ' : '', + render = format === Format.UNIVERSAL_MODULE ? '_vue.h' : 'h'; return `${render}('${element.nodeName}', ${attrCode}${delimiter}${nodeCode})`; } @@ -86,10 +86,10 @@ function generateUniversalModule(elements: Map): string { }(this, function(_vue) { 'use strict'; ${ - Array.from(elements.entries()) + Array.from(elements.entries()) .map(([ name, element ]) => serializeElement(name, element, Format.UNIVERSAL_MODULE)) .join('\n\n') - } +} return { default: ${defaultExport}, diff --git a/src/cli/index.ts b/src/cli/index.ts index cbefc30..b3c0f75 100644 --- a/src/cli/index.ts +++ b/src/cli/index.ts @@ -3,7 +3,8 @@ import { fileURLToPath } from 'node:url'; import { resolve, dirname } from 'node:path'; import { cwd } from 'node:process'; import chalk from 'chalk'; -import { Command, createCommand } from 'commander'; +import { createCommand } from 'commander'; +import type { Command } from 'commander'; import type { SVGElement } from './parse'; import parse from './parse'; import generate, { Format } from './generate'; @@ -15,8 +16,8 @@ type OptionValue = { name: string; }; -const pkg = JSON.parse(FS.readFileSync(resolve(dirname(fileURLToPath(import.meta.url)), '../../package.json'), 'utf8')) - , formatOptionalValues = [ 'esm', 'umd', 'ts', 'type' ]; +const pkg = JSON.parse(FS.readFileSync(resolve(dirname(fileURLToPath(import.meta.url)), '../../package.json'), 'utf8')), + formatOptionalValues = [ 'esm', 'umd', 'ts', 'type' ]; async function commandAction(options: OptionValue, command: Command): Promise { const formats = options.format @@ -37,18 +38,18 @@ async function commandAction(options: OptionValue, command: Command): Promise { - const paths = loadFile(path) - , elements = new Map(); + const paths = loadFile(path), + elements = new Map(); for (const filePath of paths) { document.body.innerHTML = optimize(readFileSync(filePath, 'utf8'), svgoConfig).data; diff --git a/src/component/index.ts b/src/component/index.ts index dbced3d..1c25969 100644 --- a/src/component/index.ts +++ b/src/component/index.ts @@ -1,7 +1,6 @@ -'use strict'; -import type {Plugin} from 'vue'; -import JIcon, {preset} from './j-icon'; -import type {Icon, Option} from '../../index'; +import type { Plugin } from 'vue'; +import JIcon, { preset } from './j-icon'; +import type { Icon, Option } from '../../index'; /** * Vue plugin install function diff --git a/src/component/j-icon.ts b/src/component/j-icon.ts index 0d2489b..3bcb712 100644 --- a/src/component/j-icon.ts +++ b/src/component/j-icon.ts @@ -1,29 +1,27 @@ -'use strict'; import { h as createElement } from 'vue'; import type { PropType, ComponentPropsOptions, FunctionalComponent } from 'vue'; import IconNotFoundError from './not-found-error'; import type { Icon, _Prop } from '../../index'; -interface Preset { +type Preset = { classes: string[]; prefix: boolean | string; icons: Record; -} +}; const preset: Preset = { classes: [], prefix: false, icons: {} -} - , jIconProp: ComponentPropsOptions<_Prop> = { - icon: {required: true, type: [String, Object] as PropType}, - width: {required: false, type: [Number, String] as PropType}, - height: {required: false, type: [Number, String] as PropType}, - tabindex: {required: false, type: [Number, String] as PropType}, - title: {required: false, type: String}, - ariaLabel: {required: false, type: String}, - desc: {required: false, type: String}, - ariaDescription: {required: false, type: String} +}, jIconProp: ComponentPropsOptions<_Prop> = { + icon: { required: true, type: [ String, Object ] as PropType }, + width: { required: false, type: [ Number, String ] as PropType }, + height: { required: false, type: [ Number, String ] as PropType }, + tabindex: { required: false, type: [ Number, String ] as PropType }, + title: { required: false, type: String }, + ariaLabel: { required: false, type: String }, + desc: { required: false, type: String }, + ariaDescription: { required: false, type: String } }; function generateId(): string { @@ -44,8 +42,8 @@ function findIcon(value: string | Icon): Icon { } function mergeClass(name: string): string[] { - const clazz = [] - , {classes, prefix} = preset; + const clazz = [], + { classes, prefix } = preset; if (classes.length) { clazz.push(...classes); @@ -64,42 +62,41 @@ function mergeClass(name: string): string[] { return clazz; } -const component: FunctionalComponent<_Prop> = (props) => { +const component: FunctionalComponent<_Prop> = props => { if (!props.icon) throw new Error('JIcon: You must pass in attributes for the icon parameter'); - const detail = findIcon(props.icon) - , iconName = typeof props.icon === 'string' ? props.icon : detail.name - , viewBox = detail.viewBox; + const detail = findIcon(props.icon), + iconName = typeof props.icon === 'string' ? props.icon : detail.name, + viewBox = detail.viewBox; if (!Array.isArray(viewBox) || viewBox.length != 4) { throw new Error(`JIcon: The viewBox attribute must be an array and have four elements, icon: ${iconName}`); } - const [width, height] = detail.size || [viewBox[2], viewBox[3]] - , data: Record = { - ...detail.attributes, - class: mergeClass(iconName), - width: props.width || width, - height: props.height || height, - viewBox: viewBox.join(' '), - role: 'img' - }; + const [ width, height ] = detail.size || [ viewBox[2], viewBox[3] ], + data: Record = { + ...detail.attributes, + class: mergeClass(iconName), + width: props.width || width, + height: props.height || height, + viewBox: viewBox.join(' '), + role: 'img' + }; let children = detail.render(); if (!Array.isArray(children)) { - children = [children]; + children = [ children ]; } - let elementId = undefined - , ariaHidden = true; + let elementId = undefined, + ariaHidden = true; if (props.desc) { ariaHidden = false; elementId = generateId(); - const id = elementId + '_desc' - children.unshift(createElement('desc', {id}, props.desc)); + const id = elementId + '_desc'; + children.unshift(createElement('desc', { id }, props.desc)); Reflect.set(data, 'aria-describedby', id); - } else if (props.ariaDescription) { ariaHidden = false; Reflect.set(data, 'aria-description', props.ariaDescription); @@ -110,9 +107,8 @@ const component: FunctionalComponent<_Prop> = (props) => { elementId ??= generateId(); const id = elementId + '_title'; - children.unshift(createElement('title', {id}, props.title)); + children.unshift(createElement('title', { id }, props.title)); Reflect.set(data, 'aria-labelledby', id); - } else if (props.ariaLabel) { ariaHidden = false; Reflect.set(data, 'aria-label', props.ariaLabel); diff --git a/test/command.spec.ts b/test/command.spec.ts index 1aed34f..8d4f849 100644 --- a/test/command.spec.ts +++ b/test/command.spec.ts @@ -25,11 +25,11 @@ describe('j-icon cli command', () => { [ 'ts', 'ts' ], [ 'type', 'd.ts' ] ])('generate file', async (format, suffix) => { - const filename = `index.${suffix}` - , filePath = resolve(cwd(), 'test/generated', filename); + const filename = `index.${suffix}`, + filePath = resolve(cwd(), 'test/generated', filename); - const mkdirSync = vitest.spyOn(FS, 'mkdirSync').mockImplementation(vitest.fn()) - , writeFileSync = vitest.spyOn(FS, 'writeFileSync').mockImplementation(vitest.fn()); + const mkdirSync = vitest.spyOn(FS, 'mkdirSync').mockImplementation(vitest.fn()), + writeFileSync = vitest.spyOn(FS, 'writeFileSync').mockImplementation(vitest.fn()); await command([ 'node', @@ -51,8 +51,8 @@ describe('j-icon cli command', () => { resolve(cwd(), 'test/generated/index.umd.js') ]; - const mkdirSync = vitest.spyOn(FS, 'mkdirSync').mockImplementation(vitest.fn()) - , writeFileSync = vitest.spyOn(FS, 'writeFileSync').mockImplementation(vitest.fn()); + const mkdirSync = vitest.spyOn(FS, 'mkdirSync').mockImplementation(vitest.fn()), + writeFileSync = vitest.spyOn(FS, 'writeFileSync').mockImplementation(vitest.fn()); await command([ 'node', @@ -74,9 +74,9 @@ describe('j-icon cli command', () => { }); it('ignore unknown format', async () => { - const filePaths = [ resolve(cwd(), 'test/generated/index.esm.js') ] - , mkdirSync = vitest.spyOn(FS, 'mkdirSync').mockImplementation(vitest.fn()) - , writeFileSync = vitest.spyOn(FS, 'writeFileSync').mockImplementation(vitest.fn()); + const filePaths = [ resolve(cwd(), 'test/generated/index.esm.js') ], + mkdirSync = vitest.spyOn(FS, 'mkdirSync').mockImplementation(vitest.fn()), + writeFileSync = vitest.spyOn(FS, 'writeFileSync').mockImplementation(vitest.fn()); await command([ 'node', @@ -103,8 +103,8 @@ describe('j-icon cli command', () => { resolve(cwd(), 'test/generated/custom.umd.js') ]; - const mkdirSync = vitest.spyOn(FS, 'mkdirSync').mockImplementation(vitest.fn()) - , writeFileSync = vitest.spyOn(FS, 'writeFileSync').mockImplementation(vitest.fn()); + const mkdirSync = vitest.spyOn(FS, 'mkdirSync').mockImplementation(vitest.fn()), + writeFileSync = vitest.spyOn(FS, 'writeFileSync').mockImplementation(vitest.fn()); await command([ 'node', @@ -127,9 +127,9 @@ describe('j-icon cli command', () => { }); it('multiple input paths', async () => { - const template = FS.readFileSync(resolve(__dirname, 'template/multi-input.esm.js'), 'utf8') - , mkdirSync = vitest.spyOn(FS, 'mkdirSync').mockImplementation(vitest.fn()) - , writeFileSync = vitest.spyOn(FS, 'writeFileSync').mockImplementation(vitest.fn()); + const template = FS.readFileSync(resolve(__dirname, 'template/multi-input.esm.js'), 'utf8'), + mkdirSync = vitest.spyOn(FS, 'mkdirSync').mockImplementation(vitest.fn()), + writeFileSync = vitest.spyOn(FS, 'writeFileSync').mockImplementation(vitest.fn()); await command([ 'node', @@ -140,8 +140,8 @@ describe('j-icon cli command', () => { '-f', 'esm' ]); - const paths: string[] = [] - , codes: string[] = []; + const paths: string[] = [], + codes: string[] = []; for (const args of writeFileSync.mock.calls) { paths.push(args[0] as string); codes.push(args[1] as string); diff --git a/test/generate.spec.ts b/test/generate.spec.ts index c53e281..80c4098 100644 --- a/test/generate.spec.ts +++ b/test/generate.spec.ts @@ -16,31 +16,31 @@ vitest.mock('svgo', async importOriginal => { }; }); -const __dirname = dirname(fileURLToPath(import.meta.url)) - , elements = new Map(Array.from(parse(resolve(__dirname, 'asset')).entries()).sort(([ a ], [ b ]) => a.localeCompare(b))); +const __dirname = dirname(fileURLToPath(import.meta.url)), + elements = new Map(Array.from(parse(resolve(__dirname, 'asset')).entries()).sort(([ a ], [ b ]) => a.localeCompare(b))); describe('j-icon cli generate', () => { it('generate esm code', async () => { - const code = await generate(elements, Format.ECMA_SCRIPT_MODULE) - , template = readFileSync(resolve(__dirname, 'template', 'index.esm.js'), 'utf8'); + const code = await generate(elements, Format.ECMA_SCRIPT_MODULE), + template = readFileSync(resolve(__dirname, 'template', 'index.esm.js'), 'utf8'); expect(code).toBe(await prettierFormat(template, { tabWidth: 4, singleQuote: true, trailingComma: 'none', parser: 'babel' })); }); it('generate umd code', async () => { - const code = await generate(elements, Format.UNIVERSAL_MODULE) - , template = readFileSync(resolve(__dirname, 'template', 'index.umd.js'), 'utf8'); + const code = await generate(elements, Format.UNIVERSAL_MODULE), + template = readFileSync(resolve(__dirname, 'template', 'index.umd.js'), 'utf8'); expect(code).toBe(await prettierFormat(template, { tabWidth: 4, singleQuote: true, trailingComma: 'none', parser: 'babel' })); }); it('generate ts code', async () => { - const code = await generate(elements, Format.TYPESCRIPT) - , template = readFileSync(resolve(__dirname, 'template', 'index.ts'), 'utf8'); + const code = await generate(elements, Format.TYPESCRIPT), + template = readFileSync(resolve(__dirname, 'template', 'index.ts'), 'utf8'); expect(code).toBe(await prettierFormat(template, { tabWidth: 4, singleQuote: true, trailingComma: 'none', parser: 'typescript' })); }); it('generate declare code', async () => { - const code = await generate(elements, Format.DECLARE) - , template = readFileSync(resolve(__dirname, 'template', 'index.d.ts'), 'utf8'); + const code = await generate(elements, Format.DECLARE), + template = readFileSync(resolve(__dirname, 'template', 'index.d.ts'), 'utf8'); expect(code).toBe(template); }); }); diff --git a/test/icon.ts b/test/icon.ts index c2fe655..c946528 100644 --- a/test/icon.ts +++ b/test/icon.ts @@ -1,31 +1,30 @@ -'use strict'; -import {h as createElement} from 'vue'; -import type {Icon} from '../index'; +import { h as createElement } from 'vue'; +import type { Icon } from '../index'; const alert: Icon<16, 16> = { - name: 'alert', - viewBox: [0, 0, 16, 16], - render: () => createElement('path', {'fill-rule': 'evenodd', d: 'M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z'}) - }, - code: Icon<16, 16> = { - name: 'code', - viewBox: [0, 0, 16, 16], - size: [16, 16], - render: () => createElement('path', {'fill-rule': 'evenodd', d: 'M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z'}) - }, - reply: Icon<16, 16> = { - name: 'reply', - viewBox: [0, 0, 16 ,16], - attributes: {xmlns: 'http://www.w3.org/2000/svg'}, - render: () => createElement('path', {'fill-rule': 'evenodd', d: 'M6.78 1.97a.75.75 0 010 1.06L3.81 6h6.44A4.75 4.75 0 0115 10.75v2.5a.75.75 0 01-1.5 0v-2.5a3.25 3.25 0 00-3.25-3.25H3.81l2.97 2.97a.75.75 0 11-1.06 1.06L1.47 7.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0z'}) - }, - x: Icon<16, 16> = { - name: 'x', - viewBox: [0, 0, 16, 16], - size: [16, 16], - attributes: {xmlns: 'http://www.w3.org/2000/svg'}, - render: () => createElement('path', {'fill-rule': 'evenodd', d: 'M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z'}) - }; + name: 'alert', + viewBox: [ 0, 0, 16, 16 ], + render: () => createElement('path', { 'fill-rule': 'evenodd', d: 'M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z' }) +}, + code: Icon<16, 16> = { + name: 'code', + viewBox: [ 0, 0, 16, 16 ], + size: [ 16, 16 ], + render: () => createElement('path', { 'fill-rule': 'evenodd', d: 'M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z' }) + }, + reply: Icon<16, 16> = { + name: 'reply', + viewBox: [ 0, 0, 16, 16 ], + attributes: { xmlns: 'http://www.w3.org/2000/svg' }, + render: () => createElement('path', { 'fill-rule': 'evenodd', d: 'M6.78 1.97a.75.75 0 010 1.06L3.81 6h6.44A4.75 4.75 0 0115 10.75v2.5a.75.75 0 01-1.5 0v-2.5a3.25 3.25 0 00-3.25-3.25H3.81l2.97 2.97a.75.75 0 11-1.06 1.06L1.47 7.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0z' }) + }, + x: Icon<16, 16> = { + name: 'x', + viewBox: [ 0, 0, 16, 16 ], + size: [ 16, 16 ], + attributes: { xmlns: 'http://www.w3.org/2000/svg' }, + render: () => createElement('path', { 'fill-rule': 'evenodd', d: 'M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z' }) + }; export default { reply, x }; export { alert, code, reply, x }; diff --git a/test/index.spec.ts b/test/index.spec.ts index 12d57e6..f26f424 100644 --- a/test/index.spec.ts +++ b/test/index.spec.ts @@ -19,11 +19,11 @@ describe('Vue j-icon component', () => { }); it('custom name', () => { - const name = 'CustomName' - , element = shallowMount(JIcon, { - props: { icon: alert }, - global: { plugins: [[ plugin, { name }]] } - }); + const name = 'CustomName', + element = shallowMount(JIcon, { + props: { icon: alert }, + global: { plugins: [[ plugin, { name }]] } + }); expect(element.vm.$.appContext.app.component(name)).not.toBeUndefined(); }); }); @@ -53,11 +53,11 @@ describe('Vue j-icon component', () => { }); it('custom prefix', () => { - const prefix = 'custom-' - , element = shallowMount(JIcon, { - props: { icon: alert }, - global: { plugins: [[ plugin, { prefix }]] } - }); + const prefix = 'custom-', + element = shallowMount(JIcon, { + props: { icon: alert }, + global: { plugins: [[ plugin, { prefix }]] } + }); expect(element.exists()).toBe(true); expect(element.classes()).toContain(`${prefix}${alert.name}`); @@ -65,11 +65,11 @@ describe('Vue j-icon component', () => { }); it('classes option', () => { - const value = [ '0123456789', '9876543210' ] - , element = shallowMount(JIcon, { - props: { icon: alert }, - global: { plugins: [[ plugin, { classes: [ value ] }]] } - }); + const value = [ '0123456789', '9876543210' ], + element = shallowMount(JIcon, { + props: { icon: alert }, + global: { plugins: [[ plugin, { classes: [ value ] }]] } + }); expect(element.exists()).toBe(true); expect(element.classes()).toEqual(expect.arrayContaining(value)); @@ -217,8 +217,8 @@ describe('Vue j-icon component', () => { describe('event', () => { it('bind event', () => { - const onClick = vitest.fn<[ MouseEvent ], void>() - , element = shallowMount(JIcon, { props: { icon: alert }, attrs: { onClick } }); + const onClick = vitest.fn<[ MouseEvent ], void>(), + element = shallowMount(JIcon, { props: { icon: alert }, attrs: { onClick } }); element.trigger('click'); expect(onClick).toBeCalledTimes(1); diff --git a/test/parse.spec.ts b/test/parse.spec.ts index e38d05b..0c078ce 100644 --- a/test/parse.spec.ts +++ b/test/parse.spec.ts @@ -14,117 +14,117 @@ vitest.mock('svgo', async importOriginal => { }; }); -const __dirname = dirname(fileURLToPath(import.meta.url)) - , dir = resolve(__dirname, 'asset'); +const __dirname = dirname(fileURLToPath(import.meta.url)), + dir = resolve(__dirname, 'asset'); const alertElement: SVGElement = { - nodeName: 'svg', - attributes: { - width: '16', - height: '16', - viewBox: '0 0 16 16' - }, - children: [ - { - nodeName: 'path', - attributes: { - 'fill-rule': 'evenodd', - d: 'M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z' - } - } - ] - } - , archiveElement: SVGElement = { - nodeName: 'svg', - attributes: { - width: '16', - height: '16', - viewBox: '0 0 16 16', - xmlns: 'http://www.w3.org/2000/svg' - }, - children: [ - { - nodeName: 'path', - attributes: { - 'fill-rule': 'evenodd', - d: 'M1.75 2.5a.25.25 0 00-.25.25v1.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-1.5a.25.25 0 00-.25-.25H1.75zM0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v1.5A1.75 1.75 0 0114.25 6H1.75A1.75 1.75 0 010 4.25v-1.5zM1.75 7a.75.75 0 01.75.75v5.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25v-5.5a.75.75 0 111.5 0v5.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25v-5.5A.75.75 0 011.75 7zm4.5 1a.75.75 0 000 1.5h3.5a.75.75 0 100-1.5h-3.5z' - } - } - ] - } - , clockElement: SVGElement = { - nodeName: 'svg', - attributes: { - width: '16', - height: '16', - viewBox: '0 0 16 16', - xmlns: 'http://www.w3.org/2000/svg' - }, - children: [ - { - nodeName: 'path', - attributes: { - 'fill-rule': 'evenodd', - d: 'M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5a.75.75 0 0 1 1.5 0Z' - } - } - ] + nodeName: 'svg', + attributes: { + width: '16', + height: '16', + viewBox: '0 0 16 16' }, - codeElement: SVGElement = { - nodeName: 'svg', - attributes: { - width: '16', - height: '16', - viewBox: '0 0 16 16', - xmlns: 'http://www.w3.org/2000/svg' - }, - children: [ - { - nodeName: 'path', - attributes: { - 'fill-rule': 'evenodd', - d: 'm11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z' - } - } - ] - } - , cloudElement: SVGElement = { - nodeName: 'svg', - attributes: { - width: '16', - height: '16', - viewBox: '0 0 16 16', - xmlns: 'http://www.w3.org/2000/svg' - }, - children: [ - { - nodeName: 'path', - attributes: { - 'fill-rule': 'evenodd', - d: 'M2 7.25A5.225 5.225 0 0 1 7.25 2a5.222 5.222 0 0 1 4.767 3.029A4.472 4.472 0 0 1 16 9.5c0 2.505-1.995 4.5-4.5 4.5h-8A3.474 3.474 0 0 1 0 10.5c0-1.41.809-2.614 2.001-3.17Zm1.54.482a.75.75 0 0 1-.556.832c-.86.22-1.484.987-1.484 1.936 0 1.124.876 2 2 2h8c1.676 0 3-1.324 3-3s-1.324-3-3-3a.75.75 0 0 1-.709-.504A3.72 3.72 0 0 0 7.25 3.5C5.16 3.5 3.5 5.16 3.5 7.25c.002.146.014.292.035.436l.004.036.001.008Z' - } + children: [ + { + nodeName: 'path', + attributes: { + 'fill-rule': 'evenodd', + d: 'M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z' } - ] - } - , zoomOutElement: SVGElement = { - nodeName: 'svg', - attributes: { - width: '16', - height: '16', - viewBox: '0 0 16 16', - xmlns: 'http://www.w3.org/2000/svg' - }, - children: [ - { - nodeName: 'path', - attributes: { d: 'M4.5 6.75h6a.75.75 0 0 1 0 1.5h-6a.75.75 0 0 1 0-1.5Z' } - }, - { - nodeName: 'path', - attributes: { d: 'M0 7.5a7.5 7.5 0 1 1 13.307 4.747l2.473 2.473a.749.749 0 1 1-1.06 1.06l-2.473-2.473A7.5 7.5 0 0 1 0 7.5Zm7.5-6a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z' } - } - ] - }; + } + ] +}, + archiveElement: SVGElement = { + nodeName: 'svg', + attributes: { + width: '16', + height: '16', + viewBox: '0 0 16 16', + xmlns: 'http://www.w3.org/2000/svg' + }, + children: [ + { + nodeName: 'path', + attributes: { + 'fill-rule': 'evenodd', + d: 'M1.75 2.5a.25.25 0 00-.25.25v1.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-1.5a.25.25 0 00-.25-.25H1.75zM0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v1.5A1.75 1.75 0 0114.25 6H1.75A1.75 1.75 0 010 4.25v-1.5zM1.75 7a.75.75 0 01.75.75v5.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25v-5.5a.75.75 0 111.5 0v5.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25v-5.5A.75.75 0 011.75 7zm4.5 1a.75.75 0 000 1.5h3.5a.75.75 0 100-1.5h-3.5z' + } + } + ] + }, + clockElement: SVGElement = { + nodeName: 'svg', + attributes: { + width: '16', + height: '16', + viewBox: '0 0 16 16', + xmlns: 'http://www.w3.org/2000/svg' + }, + children: [ + { + nodeName: 'path', + attributes: { + 'fill-rule': 'evenodd', + d: 'M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5a.75.75 0 0 1 1.5 0Z' + } + } + ] + }, + codeElement: SVGElement = { + nodeName: 'svg', + attributes: { + width: '16', + height: '16', + viewBox: '0 0 16 16', + xmlns: 'http://www.w3.org/2000/svg' + }, + children: [ + { + nodeName: 'path', + attributes: { + 'fill-rule': 'evenodd', + d: 'm11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z' + } + } + ] + }, + cloudElement: SVGElement = { + nodeName: 'svg', + attributes: { + width: '16', + height: '16', + viewBox: '0 0 16 16', + xmlns: 'http://www.w3.org/2000/svg' + }, + children: [ + { + nodeName: 'path', + attributes: { + 'fill-rule': 'evenodd', + d: 'M2 7.25A5.225 5.225 0 0 1 7.25 2a5.222 5.222 0 0 1 4.767 3.029A4.472 4.472 0 0 1 16 9.5c0 2.505-1.995 4.5-4.5 4.5h-8A3.474 3.474 0 0 1 0 10.5c0-1.41.809-2.614 2.001-3.17Zm1.54.482a.75.75 0 0 1-.556.832c-.86.22-1.484.987-1.484 1.936 0 1.124.876 2 2 2h8c1.676 0 3-1.324 3-3s-1.324-3-3-3a.75.75 0 0 1-.709-.504A3.72 3.72 0 0 0 7.25 3.5C5.16 3.5 3.5 5.16 3.5 7.25c.002.146.014.292.035.436l.004.036.001.008Z' + } + } + ] + }, + zoomOutElement: SVGElement = { + nodeName: 'svg', + attributes: { + width: '16', + height: '16', + viewBox: '0 0 16 16', + xmlns: 'http://www.w3.org/2000/svg' + }, + children: [ + { + nodeName: 'path', + attributes: { d: 'M4.5 6.75h6a.75.75 0 0 1 0 1.5h-6a.75.75 0 0 1 0-1.5Z' } + }, + { + nodeName: 'path', + attributes: { d: 'M0 7.5a7.5 7.5 0 1 1 13.307 4.747l2.473 2.473a.749.749 0 1 1-1.06 1.06l-2.473-2.473A7.5 7.5 0 0 1 0 7.5Zm7.5-6a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z' } + } + ] + }; describe('j-icon-cli parse', () => { it('Read a single file', () => {