Skip to content

Commit bb95828

Browse files
gregbergegregberge
committed
feat: new "expandProps" option
BREAKING CHANGE: "--no-expand-props" is now replaced by "--expand-props none". You can now specify a position "start" or "end" for "expandProps" property. Closes #170
1 parent b0a3cd0 commit bb95828

10 files changed

Lines changed: 104 additions & 87 deletions

File tree

‎README.md‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -98,26 +98,26 @@ Usage: svgr [options] <file|directory>
9898
9999
Options:
100100
101-
-V, --version output the version number
102-
--config-file <file> specify the path of the svgr config
103-
--no-runtime-config disable runtime config (.svgrrc, .svgo.yml, .prettierrc)
104-
-d, --out-dir <dirname> output files into a directory
105-
--ext <ext> specify a custom file extension (default: "js")
106-
--filename-case <case> specify filename case (pascal, kebab, camel) (default: "pascal")
107-
--icon use "1em" as width and height
108-
--native add react-native support with react-native-svg
109-
--ref forward ref to SVG root element
110-
--no-dimensions remove width and height from root SVG tag
111-
--no-expand-props disable props expanding
112-
--svg-props <property=value> add props to the svg element
113-
--replace-attr-values <old=new> replace an attribute value
114-
--template <file> specify a custom template to use
115-
--title-prop create a title element linked with props
116-
--prettier-config <fileOrJson> Prettier config
117-
--no-prettier disable Prettier
118-
--svgo-config <fileOrJson> SVGO config
119-
--no-svgo disable SVGO
120-
-h, --help output usage information
101+
-V, --version output the version number
102+
--config-file <file> specify the path of the svgr config
103+
--no-runtime-config disable runtime config (".svgrrc", ".svgo.yml", ".prettierrc")
104+
-d, --out-dir <dirname> output files into a directory
105+
--ext <ext> specify a custom file extension (default: "js")
106+
--filename-case <case> specify filename case ("pascal", "kebab", "camel") (default: "pascal")
107+
--icon use "1em" as width and height
108+
--native add react-native support with react-native-svg
109+
--ref forward ref to SVG root element
110+
--no-dimensions remove width and height from root SVG tag
111+
--expand-props [position] disable props expanding ("start", "end", "none") (default: "end")
112+
--svg-props <property=value> add props to the svg element
113+
--replace-attr-values <old=new> replace an attribute value
114+
--template <file> specify a custom template to use
115+
--title-prop create a title element linked with props
116+
--prettier-config <fileOrJson> Prettier config
117+
--no-prettier disable Prettier
118+
--svgo-config <fileOrJson> SVGO config
119+
--no-svgo disable SVGO
120+
-h, --help output usage information
121121
122122
Examples:
123123
svgr --replace-attr-values "#fff=currentColor" icon.svg
@@ -334,11 +334,11 @@ Remove width and height from root SVG tag.
334334

335335
### Expand props
336336

337-
All properties given to component will be forwarded on SVG tag.
337+
All properties given to component will be forwarded on SVG tag. Possible values: `"start"`, `"end"` or `false`.
338338

339-
| Default | CLI Override | API Override |
340-
| ------- | ------------------- | --------------------- |
341-
| `true` | `--no-expand-props` | `expandProps: <bool>` |
339+
| Default | CLI Override | API Override |
340+
| ------- | ---------------- | ----------------------- |
341+
| `end` | `--expand-props` | `expandProps: <string>` |
342342

343343
### Prettier
344344

‎packages/cli/README.md‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,26 +17,26 @@ Usage: svgr [options] <file|directory>
1717
1818
Options:
1919
20-
-V, --version output the version number
21-
--config-file <file> specify the path of the svgr config
22-
--no-runtime-config disable runtime config (.svgrrc, .svgo.yml, .prettierrc)
23-
-d, --out-dir <dirname> output files into a directory
24-
--ext <ext> specify a custom file extension (default: "js")
25-
--filename-case <case> specify filename case (pascal, kebab, camel) (default: "pascal")
26-
--icon use "1em" as width and height
27-
--native add react-native support with react-native-svg
28-
--ref forward ref to SVG root element
29-
--no-dimensions remove width and height from root SVG tag
30-
--no-expand-props disable props expanding
31-
--svg-props <property=value> add props to the svg element
32-
--replace-attr-values <old=new> replace an attribute value
33-
--template <file> specify a custom template to use
34-
--title-prop create a title element linked with props
35-
--prettier-config <fileOrJson> Prettier config
36-
--no-prettier disable Prettier
37-
--svgo-config <fileOrJson> SVGO config
38-
--no-svgo disable SVGO
39-
-h, --help output usage information
20+
-V, --version output the version number
21+
--config-file <file> specify the path of the svgr config
22+
--no-runtime-config disable runtime config (".svgrrc", ".svgo.yml", ".prettierrc")
23+
-d, --out-dir <dirname> output files into a directory
24+
--ext <ext> specify a custom file extension (default: "js")
25+
--filename-case <case> specify filename case ("pascal", "kebab", "camel") (default: "pascal")
26+
--icon use "1em" as width and height
27+
--native add react-native support with react-native-svg
28+
--ref forward ref to SVG root element
29+
--no-dimensions remove width and height from root SVG tag
30+
--expand-props [position] disable props expanding ("start", "end", "none") (default: "end")
31+
--svg-props <property=value> add props to the svg element
32+
--replace-attr-values <old=new> replace an attribute value
33+
--template <file> specify a custom template to use
34+
--title-prop create a title element linked with props
35+
--prettier-config <fileOrJson> Prettier config
36+
--no-prettier disable Prettier
37+
--svgo-config <fileOrJson> SVGO config
38+
--no-svgo disable SVGO
39+
-h, --help output usage information
4040
4141
Examples:
4242
svgr --replace-attr-values "#fff=currentColor" icon.svg

‎packages/cli/src/__snapshots__/index.test.js.snap‎

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,34 @@ Array [
131131
]
132132
`;
133133

134+
exports[`cli should support various args: --expand-props none 1`] = `
135+
"import React from 'react'
136+
137+
const SvgFile = () => (
138+
<svg width={48} height={1}>
139+
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
140+
</svg>
141+
)
142+
143+
export default SvgFile
144+
145+
"
146+
`;
147+
148+
exports[`cli should support various args: --expand-props start 1`] = `
149+
"import React from 'react'
150+
151+
const SvgFile = props => (
152+
<svg {...props} width={48} height={1}>
153+
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
154+
</svg>
155+
)
156+
157+
export default SvgFile
158+
159+
"
160+
`;
161+
134162
exports[`cli should support various args: --icon 1`] = `
135163
"import React from 'react'
136164
@@ -145,11 +173,11 @@ export default SvgFile
145173
"
146174
`;
147175

148-
exports[`cli should support various args: --native --icon 1`] = `
176+
exports[`cli should support various args: --native --expand-props none 1`] = `
149177
"import React from 'react'
150178
import Svg, { Path } from 'react-native-svg'
151-
const SvgFile = props => (
152-
<Svg viewBox=\\"0 0 48 1\\" width=\\"1em\\" height=\\"1em\\" {...props}>
179+
const SvgFile = () => (
180+
<Svg width={48} height={1}>
153181
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
154182
</Svg>
155183
)
@@ -159,11 +187,11 @@ export default SvgFile
159187
"
160188
`;
161189

162-
exports[`cli should support various args: --native --no-expand-props 1`] = `
190+
exports[`cli should support various args: --native --icon 1`] = `
163191
"import React from 'react'
164192
import Svg, { Path } from 'react-native-svg'
165-
const SvgFile = () => (
166-
<Svg width={48} height={1}>
193+
const SvgFile = props => (
194+
<Svg viewBox=\\"0 0 48 1\\" width=\\"1em\\" height=\\"1em\\" {...props}>
167195
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
168196
</Svg>
169197
)
@@ -215,20 +243,6 @@ export default SvgFile
215243
"
216244
`;
217245

218-
exports[`cli should support various args: --no-expand-props 1`] = `
219-
"import React from 'react'
220-
221-
const SvgFile = () => (
222-
<svg width={48} height={1}>
223-
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
224-
</svg>
225-
)
226-
227-
export default SvgFile
228-
229-
"
230-
`;
231-
232246
exports[`cli should support various args: --no-prettier 1`] = `
233247
"import React from 'react'
234248

‎packages/cli/src/index.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,19 +40,22 @@ program
4040
.option('--config-file <file>', 'specify the path of the svgr config')
4141
.option(
4242
'--no-runtime-config',
43-
'disable runtime config (.svgrrc, .svgo.yml, .prettierrc)',
43+
'disable runtime config (".svgrrc", ".svgo.yml", ".prettierrc")',
4444
)
4545
.option('-d, --out-dir <dirname>', 'output files into a directory')
4646
.option('--ext <ext>', 'specify a custom file extension (default: "js")')
4747
.option(
4848
'--filename-case <case>',
49-
'specify filename case (pascal, kebab, camel) (default: "pascal")',
49+
'specify filename case ("pascal", "kebab", "camel") (default: "pascal")',
5050
)
5151
.option('--icon', 'use "1em" as width and height')
5252
.option('--native', 'add react-native support with react-native-svg')
5353
.option('--ref', 'forward ref to SVG root element')
5454
.option('--no-dimensions', 'remove width and height from root SVG tag')
55-
.option('--no-expand-props', 'disable props expanding')
55+
.option(
56+
'--expand-props [position]',
57+
'disable props expanding ("start", "end", "none") (default: "end")',
58+
)
5659
.option(
5760
'--svg-props <property=value>',
5861
'add props to the svg element',
@@ -112,15 +115,18 @@ async function run() {
112115

113116
const config = { ...program }
114117

115-
if (config.expandProps === true) {
116-
delete config.expandProps
118+
if (config.expandProps === 'none') {
119+
config.expandProps = false
117120
}
121+
118122
if (config.dimensions === true) {
119123
delete config.dimensions
120124
}
125+
121126
if (config.svgo === true) {
122127
delete config.svgo
123128
}
129+
124130
if (config.prettier === true) {
125131
delete config.prettier
126132
}

‎packages/cli/src/index.test.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,11 +118,12 @@ describe('cli', () => {
118118

119119
it.each([
120120
['--no-dimensions'],
121-
['--no-expand-props'],
121+
['--expand-props none'],
122+
['--expand-props start'],
122123
['--icon'],
123124
['--native'],
124125
['--native --icon'],
125-
['--native --no-expand-props'],
126+
['--native --expand-props none'],
126127
['--native --ref'],
127128
['--ref'],
128129
['--replace-attr-values "#063855=currentColor"'],

‎packages/core/src/config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import cosmiconfig from 'cosmiconfig'
33
export const DEFAULT_CONFIG = {
44
h2xConfig: null,
55
dimensions: true,
6-
expandProps: true,
6+
expandProps: 'end',
77
icon: false,
88
native: false,
99
prettier: true,

‎packages/core/src/config.test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ describe('config', () => {
4040
expect(config).toMatchInlineSnapshot(`
4141
Object {
4242
"dimensions": false,
43-
"expandProps": true,
43+
"expandProps": "end",
4444
"h2xConfig": null,
4545
"icon": false,
4646
"native": false,
@@ -66,7 +66,7 @@ Object {
6666
expect(config).toMatchInlineSnapshot(`
6767
Object {
6868
"dimensions": true,
69-
"expandProps": true,
69+
"expandProps": "end",
7070
"h2xConfig": null,
7171
"icon": true,
7272
"native": false,
@@ -98,7 +98,7 @@ Object {
9898
expect(config).toMatchInlineSnapshot(`
9999
Object {
100100
"dimensions": true,
101-
"expandProps": true,
101+
"expandProps": "end",
102102
"h2xConfig": null,
103103
"icon": true,
104104
"native": false,
@@ -131,7 +131,7 @@ Object {
131131
expect(config).toMatchInlineSnapshot(`
132132
Object {
133133
"dimensions": true,
134-
"expandProps": true,
134+
"expandProps": "end",
135135
"h2xConfig": null,
136136
"icon": true,
137137
"native": false,

‎packages/core/src/h2x/expandProps.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { JSXAttribute } from 'h2x-plugin-jsx'
22

3-
const expandProps = (place = 'end') => () => ({
3+
const expandProps = (position = 'end') => () => ({
44
visitor: {
55
JSXElement: {
66
enter(path) {
@@ -11,10 +11,10 @@ const expandProps = (place = 'end') => () => ({
1111
const props = new JSXAttribute()
1212
props.name = 'props'
1313
props.spread = true
14-
if (place === 'start') {
14+
if (position === 'start') {
1515
path.node.attributes.unshift(props)
1616
}
17-
if (place === 'end') {
17+
if (position === 'end') {
1818
path.node.attributes.push(props)
1919
}
2020
path.replace(path.node)

‎packages/core/src/plugins/h2x.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,7 @@ function configToPlugins(config) {
2121
if (config.icon) plugins.push(emSize())
2222
if (config.ref) plugins.push(svgRef())
2323
if (config.svgProps) plugins.push(svgProps(config.svgProps))
24-
// TODO remove boolean value in the next major release
25-
if (config.expandProps)
26-
plugins.push(
27-
expandProps(config.expandProps === true ? 'end' : config.expandProps),
28-
)
24+
if (config.expandProps) plugins.push(expandProps(config.expandProps))
2925
if (config.native) plugins.push(toReactNative())
3026
if (config.titleProp) plugins.push(titleProp())
3127
return plugins

‎packages/core/src/templates/reactDomTemplate.test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ describe('reactDomTemplate', () => {
1818
expect(
1919
reactDomTemplate(
2020
'<Svg />',
21-
{ expandProps: true },
21+
{ expandProps: 'end' },
2222
{ componentName: 'Test' },
2323
),
2424
).toMatchSnapshot()
@@ -32,14 +32,14 @@ describe('reactDomTemplate', () => {
3232
expect(
3333
reactDomTemplate(
3434
'<Svg />',
35-
{ titleProp: true, expandProps: true },
35+
{ titleProp: true, expandProps: 'end' },
3636
{ componentName: 'Test' },
3737
),
3838
).toMatchSnapshot()
3939
expect(
4040
reactDomTemplate(
4141
'<Svg />',
42-
{ ref: true, expandProps: true },
42+
{ ref: true, expandProps: 'end' },
4343
{ componentName: 'Test' },
4444
),
4545
).toMatchSnapshot()

0 commit comments

Comments
 (0)
⚡