Skip to content

Commit 8be5dcb

Browse files
yujeong-jeonyujeong-jeon
authored
Merge pull request #124 from NaverPayDev/feature/123
[eslint-plugins] Remove empty props check
2 parents 0ca6c81 + 9079f0c commit 8be5dcb

File tree

8 files changed

+164
-12
lines changed

8 files changed

+164
-12
lines changed

‎.changeset/khaki-mammals-retire.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@naverpay/eslint-plugin": patch
3+
---
4+
5+
[eslint-plugins] Remove empty props check
6+
7+
PR: [[eslint-plugins] Remove empty props check](https://github.com/NaverPayDev/code-style/pull/124)

‎packages/eslint-plugin/lib/constants/test-data.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -956,3 +956,105 @@ export const EXPORT_DEFAULT_함수형_컴포넌트 = {
956956
/>
957957
</svg>`,
958958
}
959+
960+
export const EMPTY_PROPS_COMPONENT = {
961+
컴포넌트_코드: `import React from 'react'
962+
import * as CSS from 'csstype'
963+
964+
export default function IconExample() {
965+
return (
966+
<svg width="100%" height="100%" viewBox="0 0 9 18" style="">
967+
<path
968+
fill="none"
969+
fillRule="evenodd"
970+
stroke="#000"
971+
strokeLinejoin="round"
972+
d="M8.521 0L0.5 8.021 8.521 16"
973+
transform="translate(0 1)"
974+
/>
975+
</svg>
976+
)
977+
}`,
978+
PROPS: {},
979+
PROPS_없는_SVG_코드: `<svg width="100%" height="100%" viewBox="0 0 9 18" style="">
980+
<path
981+
fill="none"
982+
fillRule="evenodd"
983+
stroke="#000"
984+
strokeLinejoin="round"
985+
d="M8.521 0L0.5 8.021 8.521 16"
986+
transform="translate(0 1)"
987+
/>
988+
</svg>`,
989+
/**
990+
* props가 없는 경우 동적으로 변경되는 값이 없으므로 그대로 유지
991+
*/
992+
완료된_SVG_코드: `<svg width="100%" height="100%" viewBox="0 0 9 18">
993+
<path
994+
fill="none"
995+
fillRule="evenodd"
996+
stroke="#000"
997+
strokeLinejoin="round"
998+
d="M8.521 0L0.5 8.021 8.521 16"
999+
transform="translate(0 1)"
1000+
/>
1001+
</svg>`,
1002+
}
1003+
1004+
export const EMPTY_CONTAINER_COMPONENT = {
1005+
컴포넌트_코드: `import React from 'react'
1006+
import * as CSS from 'csstype'
1007+
1008+
export default function IconExample() {
1009+
return (
1010+
<svg width="100%" height="100%" viewBox="0 0 9 18" style="">
1011+
<g>
1012+
<g>
1013+
<path
1014+
fill="none"
1015+
fillRule="evenodd"
1016+
stroke="#000"
1017+
strokeLinejoin="round"
1018+
d="M8.521 0L0.5 8.021 8.521 16"
1019+
transform="translate(0 1)"
1020+
/>
1021+
</g>
1022+
</g>
1023+
<path />
1024+
<path />
1025+
<path />
1026+
</svg>
1027+
)
1028+
}`,
1029+
PROPS: {},
1030+
PROPS_없는_SVG_코드: `<svg width="100%" height="100%" viewBox="0 0 9 18" style="">
1031+
<g>
1032+
<g>
1033+
<path
1034+
fill="none"
1035+
fillRule="evenodd"
1036+
stroke="#000"
1037+
strokeLinejoin="round"
1038+
d="M8.521 0L0.5 8.021 8.521 16"
1039+
transform="translate(0 1)"
1040+
/>
1041+
</g>
1042+
</g>
1043+
<path />
1044+
<path />
1045+
<path />
1046+
</svg>`,
1047+
/**
1048+
* props가 없는 경우 동적으로 변경되는 값이 없으므로 그대로 유지
1049+
*/
1050+
완료된_SVG_코드: `<svg width="100%" height="100%" viewBox="0 0 9 18">
1051+
<path
1052+
fill="none"
1053+
fillRule="evenodd"
1054+
stroke="#000"
1055+
strokeLinejoin="round"
1056+
d="M8.521 0L0.5 8.021 8.521 16"
1057+
transform="translate(0 1)"
1058+
/>
1059+
</svg>`,
1060+
}

‎packages/eslint-plugin/lib/rules/optimize-svg-components.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import {getJSXElement, getImportDeclarations, extractComponentProps} from '@naverpay/ast-parser'
1+
import {getJSXElement, getImportDeclarations} from '@naverpay/ast-parser'
22
import {minimatch} from 'minimatch'
33

44
import {SVG_OPTIMIZED_COMMENT_CONTENT} from '../constants/index.js'
55
import {findSpecificImportDeclaration, hasSpecificReturnStatement, getAllComments} from '../utils/astParser.js'
6-
import {isEmpty} from '../utils/index.js'
76
import {
87
insertCustomImport,
98
svgoOptimize,
@@ -26,12 +25,11 @@ const svgValidator = (context, globalScope) => {
2625
findSpecificImportDeclaration(importDeclarations, {
2726
from: 'styled-components',
2827
})
29-
const props = hasClassNames ? null : extractComponentProps(globalScope.block)
3028
const comments = getAllComments(context)
3129

3230
const isOptimizedAlready = comments.some(({value}) => value.includes(SVG_OPTIMIZED_COMMENT_CONTENT))
3331

34-
return !isEmpty(props) && !hasClassNames && !isOptimizedAlready
32+
return !hasClassNames && !isOptimizedAlready
3533
}
3634

3735
const includeHangul = (sourceCode, node) => {

‎packages/eslint-plugin/lib/utils/index.js‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎packages/eslint-plugin/lib/utils/svg/props.test.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
STYLE_OBJECT를_포함한_컴포넌트,
1212
함수형_컴포넌트,
1313
EXPORT_DEFAULT_함수형_컴포넌트,
14+
EMPTY_PROPS_COMPONENT,
15+
EMPTY_CONTAINER_COMPONENT,
1416
} from '../../constants/test-data'
1517
import {trimAll} from '../string'
1618
import {extractPropsFromLiteralCode} from './props'
@@ -35,6 +37,8 @@ describe('extractComponentProps', () => {
3537
[STYLE_OBJECT를_포함한_컴포넌트.컴포넌트_코드, STYLE_OBJECT를_포함한_컴포넌트.PROPS],
3638
[함수형_컴포넌트.컴포넌트_코드, 함수형_컴포넌트.PROPS],
3739
[EXPORT_DEFAULT_함수형_컴포넌트.컴포넌트_코드, EXPORT_DEFAULT_함수형_컴포넌트.PROPS],
40+
[EMPTY_PROPS_COMPONENT.컴포넌트_코드, EMPTY_PROPS_COMPONENT.PROPS],
41+
[EMPTY_CONTAINER_COMPONENT.컴포넌트_코드, EMPTY_CONTAINER_COMPONENT.PROPS],
3842
])('ast tree에서 props를 추출한다.', (code, expectedProps) => {
3943
const scope = parseCode(code)
4044

‎packages/eslint-plugin/lib/utils/svg/transform.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,32 @@ export function insertCustomImport({fixer, scope, context}) {
134134
return result
135135
}
136136

137+
/**
138+
* @description
139+
*
140+
* svgo 플러그인 중, path 요소를 제어하는 플러그인은 과한 최적화 진행하므로 본 플러그인의 의도와 불일치
141+
*
142+
* (사전 테스트에서 svg 이모지의 형상이 달라지는 현상 발생)
143+
*
144+
* 따라서 path 요소를 제거하는 플러그인을 추가하여, d 속성이 없는 path 요소만을 제거
145+
*/
146+
const removeEmptyPaths = {
147+
name: 'removeEmptyPaths',
148+
fn: () => {
149+
return {
150+
element: {
151+
enter: (node, parentNode) => {
152+
// path 요소이면서 d 속성이 없거나 빈 경우
153+
if (node.name === 'path' && (!node.attributes.d || node.attributes.d.trim() === '')) {
154+
// 부모에서 이 노드를 제거
155+
parentNode.children = parentNode.children.filter((child) => child !== node)
156+
}
157+
},
158+
},
159+
}
160+
},
161+
}
162+
137163
/**
138164
* @typedef NextSvgContent
139165
* @type {object}
@@ -160,6 +186,10 @@ export const svgoOptimize = ({svgCode, props, exceptAttr}) => {
160186
attrs: 'g',
161187
},
162188
},
189+
{
190+
name: 'removeEmptyAttrs',
191+
active: true,
192+
},
163193
{
164194
name: 'collapseGroups',
165195
active: true,
@@ -172,6 +202,7 @@ export const svgoOptimize = ({svgCode, props, exceptAttr}) => {
172202
name: 'mergePaths',
173203
active: true,
174204
},
205+
removeEmptyPaths,
175206
],
176207
multipass: false,
177208
})

‎packages/eslint-plugin/lib/utils/svg/transform.test.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import {
99
PROPS_변수_컴포넌트,
1010
함수형_컴포넌트,
1111
EXPORT_DEFAULT_함수형_컴포넌트,
12+
EMPTY_PROPS_COMPONENT,
13+
EMPTY_CONTAINER_COMPONENT,
1214
} from '../../constants/test-data'
1315
import {trimAll} from '../string'
1416
import {svgoOptimize} from './transform'
@@ -95,6 +97,20 @@ describe('transform', () => {
9597
EXPORT_DEFAULT_함수형_컴포넌트.완료된_SVG_코드,
9698
undefined,
9799
],
100+
[
101+
'EMPTY_PROPS_COMPONENT',
102+
EMPTY_PROPS_COMPONENT.PROPS_없는_SVG_코드,
103+
EMPTY_PROPS_COMPONENT.PROPS,
104+
EMPTY_PROPS_COMPONENT.완료된_SVG_코드,
105+
undefined,
106+
],
107+
[
108+
'EMPTY_CONTAINER_COMPONENT',
109+
EMPTY_CONTAINER_COMPONENT.PROPS_없는_SVG_코드,
110+
EMPTY_CONTAINER_COMPONENT.PROPS,
111+
EMPTY_CONTAINER_COMPONENT.완료된_SVG_코드,
112+
undefined,
113+
],
98114
])('[%s] 정상적으로 svg transformation을 수행한다.', (_, svgCode, props, result, exceptAttr) => {
99115
const data = svgoOptimize({svgCode, props, exceptAttr})
100116

‎packages/eslint-plugin/lib/utils/svg/validator.test.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import {extractComponentProps, parseToAST, getImportDeclarations} from '@naverpay/ast-parser'
1+
import {parseToAST, getImportDeclarations} from '@naverpay/ast-parser'
22
import {describe, test, expect} from 'vitest'
33

4-
import {isEmpty} from '..'
54
import {SVG_OPTIMIZED_COMMENT_CONTENT} from '../../constants'
65
import {findSpecificImportDeclaration} from '../astParser'
76

@@ -34,13 +33,12 @@ const svgValidator = (globalScope) => {
3433
findSpecificImportDeclaration(importDeclarations, {
3534
from: 'styled-components',
3635
})
37-
const props = hasClassNames ? null : extractComponentProps(globalScope.block)
3836

3937
const comments = globalScope.comments
4038

4139
const isOptimizedAlready = comments.some(({value}) => value.includes(SVG_OPTIMIZED_COMMENT_CONTENT))
4240

43-
return !isEmpty(props) && !hasClassNames && !isOptimizedAlready
41+
return !hasClassNames && !isOptimizedAlready
4442
}
4543

4644
describe('svgValidator', () => {

0 commit comments

Comments
 (0)