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
gregberge · Sep 30, 2018 · bb95828 · bb95828
1 parent b0a3cd0
commit bb95828
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -98,26 +98,26 @@ Usage: svgr [options] <file|directory>
 
 Options:
 
-  -V, --version                      output the version number
-  --config-file <file>               specify the path of the svgr config
-  --no-runtime-config                disable runtime config (.svgrrc, .svgo.yml, .prettierrc)
-  -d, --out-dir <dirname>            output files into a directory
-  --ext <ext>                        specify a custom file extension (default: "js")
-  --filename-case <case>             specify filename case (pascal, kebab, camel) (default: "pascal")
-  --icon                             use "1em" as width and height
-  --native                           add react-native support with react-native-svg
-  --ref                              forward ref to SVG root element
-  --no-dimensions                    remove width and height from root SVG tag
-  --no-expand-props                  disable props expanding
-  --svg-props <property=value>       add props to the svg element
-  --replace-attr-values <old=new>    replace an attribute value
-  --template <file>                  specify a custom template to use
-  --title-prop                       create a title element linked with props
-  --prettier-config <fileOrJson>     Prettier config
-  --no-prettier                      disable Prettier
-  --svgo-config <fileOrJson>         SVGO config
-  --no-svgo                          disable SVGO
-  -h, --help                         output usage information
+  -V, --version                    output the version number
+  --config-file <file>             specify the path of the svgr config
+  --no-runtime-config              disable runtime config (".svgrrc", ".svgo.yml", ".prettierrc")
+  -d, --out-dir <dirname>          output files into a directory
+  --ext <ext>                      specify a custom file extension (default: "js")
+  --filename-case <case>           specify filename case ("pascal", "kebab", "camel") (default: "pascal")
+  --icon                           use "1em" as width and height
+  --native                         add react-native support with react-native-svg
+  --ref                            forward ref to SVG root element
+  --no-dimensions                  remove width and height from root SVG tag
+  --expand-props [position]        disable props expanding ("start", "end", "none") (default: "end")
+  --svg-props <property=value>     add props to the svg element
+  --replace-attr-values <old=new>  replace an attribute value
+  --template <file>                specify a custom template to use
+  --title-prop                     create a title element linked with props
+  --prettier-config <fileOrJson>   Prettier config
+  --no-prettier                    disable Prettier
+  --svgo-config <fileOrJson>       SVGO config
+  --no-svgo                        disable SVGO
+  -h, --help                       output usage information
 
   Examples:
     svgr --replace-attr-values "#fff=currentColor" icon.svg
@@ -334,11 +334,11 @@ Remove width and height from root SVG tag.
 
 ### Expand props
 
-All properties given to component will be forwarded on SVG tag.
+All properties given to component will be forwarded on SVG tag. Possible values: `"start"`, `"end"` or `false`.
 
-| Default | CLI Override        | API Override          |
-| ------- | ------------------- | --------------------- |
-| `true`  | `--no-expand-props` | `expandProps: <bool>` |
+| Default | CLI Override     | API Override            |
+| ------- | ---------------- | ----------------------- |
+| `end`   | `--expand-props` | `expandProps: <string>` |
 
 ### Prettier
 

diff --git a/packages/cli/README.md b/packages/cli/README.md
@@ -17,26 +17,26 @@ Usage: svgr [options] <file|directory>
 
 Options:
 
-  -V, --version                      output the version number
-  --config-file <file>               specify the path of the svgr config
-  --no-runtime-config                disable runtime config (.svgrrc, .svgo.yml, .prettierrc)
-  -d, --out-dir <dirname>            output files into a directory
-  --ext <ext>                        specify a custom file extension (default: "js")
-  --filename-case <case>             specify filename case (pascal, kebab, camel) (default: "pascal")
-  --icon                             use "1em" as width and height
-  --native                           add react-native support with react-native-svg
-  --ref                              forward ref to SVG root element
-  --no-dimensions                    remove width and height from root SVG tag
-  --no-expand-props                  disable props expanding
-  --svg-props <property=value>       add props to the svg element
-  --replace-attr-values <old=new>    replace an attribute value
-  --template <file>                  specify a custom template to use
-  --title-prop                       create a title element linked with props
-  --prettier-config <fileOrJson>     Prettier config
-  --no-prettier                      disable Prettier
-  --svgo-config <fileOrJson>         SVGO config
-  --no-svgo                          disable SVGO
-  -h, --help                         output usage information
+  -V, --version                    output the version number
+  --config-file <file>             specify the path of the svgr config
+  --no-runtime-config              disable runtime config (".svgrrc", ".svgo.yml", ".prettierrc")
+  -d, --out-dir <dirname>          output files into a directory
+  --ext <ext>                      specify a custom file extension (default: "js")
+  --filename-case <case>           specify filename case ("pascal", "kebab", "camel") (default: "pascal")
+  --icon                           use "1em" as width and height
+  --native                         add react-native support with react-native-svg
+  --ref                            forward ref to SVG root element
+  --no-dimensions                  remove width and height from root SVG tag
+  --expand-props [position]        disable props expanding ("start", "end", "none") (default: "end")
+  --svg-props <property=value>     add props to the svg element
+  --replace-attr-values <old=new>  replace an attribute value
+  --template <file>                specify a custom template to use
+  --title-prop                     create a title element linked with props
+  --prettier-config <fileOrJson>   Prettier config
+  --no-prettier                    disable Prettier
+  --svgo-config <fileOrJson>       SVGO config
+  --no-svgo                        disable SVGO
+  -h, --help                       output usage information
 
   Examples:
     svgr --replace-attr-values "#fff=currentColor" icon.svg

diff --git a/packages/cli/src/__snapshots__/index.test.js.snap b/packages/cli/src/__snapshots__/index.test.js.snap
@@ -131,6 +131,34 @@ Array [
 ]
 `;
 
+exports[`cli should support various args: --expand-props none 1`] = `
+"import React from 'react'
+
+const SvgFile = () => (
+  <svg width={48} height={1}>
+    <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
+  </svg>
+)
+
+export default SvgFile
+
+"
+`;
+
+exports[`cli should support various args: --expand-props start 1`] = `
+"import React from 'react'
+
+const SvgFile = props => (
+  <svg {...props} width={48} height={1}>
+    <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
+  </svg>
+)
+
+export default SvgFile
+
+"
+`;
+
 exports[`cli should support various args: --icon 1`] = `
 "import React from 'react'
 
@@ -145,11 +173,11 @@ export default SvgFile
 "
 `;
 
-exports[`cli should support various args: --native --icon 1`] = `
+exports[`cli should support various args: --native --expand-props none 1`] = `
 "import React from 'react'
 import Svg, { Path } from 'react-native-svg'
-const SvgFile = props => (
-  <Svg viewBox=\\"0 0 48 1\\" width=\\"1em\\" height=\\"1em\\" {...props}>
+const SvgFile = () => (
+  <Svg width={48} height={1}>
     <Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </Svg>
 )
@@ -159,11 +187,11 @@ export default SvgFile
 "
 `;
 
-exports[`cli should support various args: --native --no-expand-props 1`] = `
+exports[`cli should support various args: --native --icon 1`] = `
 "import React from 'react'
 import Svg, { Path } from 'react-native-svg'
-const SvgFile = () => (
-  <Svg width={48} height={1}>
+const SvgFile = props => (
+  <Svg viewBox=\\"0 0 48 1\\" width=\\"1em\\" height=\\"1em\\" {...props}>
     <Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </Svg>
 )
@@ -215,20 +243,6 @@ export default SvgFile
 "
 `;
 
-exports[`cli should support various args: --no-expand-props 1`] = `
-"import React from 'react'
-
-const SvgFile = () => (
-  <svg width={48} height={1}>
-    <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
-  </svg>
-)
-
-export default SvgFile
-
-"
-`;
-
 exports[`cli should support various args: --no-prettier 1`] = `
 "import React from 'react'
 

diff --git a/packages/cli/src/index.js b/packages/cli/src/index.js
@@ -40,19 +40,22 @@ program
   .option('--config-file <file>', 'specify the path of the svgr config')
   .option(
     '--no-runtime-config',
-    'disable runtime config (.svgrrc, .svgo.yml, .prettierrc)',
+    'disable runtime config (".svgrrc", ".svgo.yml", ".prettierrc")',
   )
   .option('-d, --out-dir <dirname>', 'output files into a directory')
   .option('--ext <ext>', 'specify a custom file extension (default: "js")')
   .option(
     '--filename-case <case>',
-    'specify filename case (pascal, kebab, camel) (default: "pascal")',
+    'specify filename case ("pascal", "kebab", "camel") (default: "pascal")',
   )
   .option('--icon', 'use "1em" as width and height')
   .option('--native', 'add react-native support with react-native-svg')
   .option('--ref', 'forward ref to SVG root element')
   .option('--no-dimensions', 'remove width and height from root SVG tag')
-  .option('--no-expand-props', 'disable props expanding')
+  .option(
+    '--expand-props [position]',
+    'disable props expanding ("start", "end", "none") (default: "end")',
+  )
   .option(
     '--svg-props <property=value>',
     'add props to the svg element',
@@ -112,15 +115,18 @@ async function run() {
 
   const config = { ...program }
 
-  if (config.expandProps === true) {
-    delete config.expandProps
+  if (config.expandProps === 'none') {
+    config.expandProps = false
   }
+
   if (config.dimensions === true) {
     delete config.dimensions
   }
+
   if (config.svgo === true) {
     delete config.svgo
   }
+
   if (config.prettier === true) {
     delete config.prettier
   }

diff --git a/packages/cli/src/index.test.js b/packages/cli/src/index.test.js
@@ -118,11 +118,12 @@ describe('cli', () => {
 
   it.each([
     ['--no-dimensions'],
-    ['--no-expand-props'],
+    ['--expand-props none'],
+    ['--expand-props start'],
     ['--icon'],
     ['--native'],
     ['--native --icon'],
-    ['--native --no-expand-props'],
+    ['--native --expand-props none'],
     ['--native --ref'],
     ['--ref'],
     ['--replace-attr-values "#063855=currentColor"'],

diff --git a/packages/core/src/config.js b/packages/core/src/config.js
@@ -3,7 +3,7 @@ import cosmiconfig from 'cosmiconfig'
 export const DEFAULT_CONFIG = {
   h2xConfig: null,
   dimensions: true,
-  expandProps: true,
+  expandProps: 'end',
   icon: false,
   native: false,
   prettier: true,

diff --git a/packages/core/src/config.test.js b/packages/core/src/config.test.js
@@ -40,7 +40,7 @@ describe('config', () => {
       expect(config).toMatchInlineSnapshot(`
 Object {
   "dimensions": false,
-  "expandProps": true,
+  "expandProps": "end",
   "h2xConfig": null,
   "icon": false,
   "native": false,
@@ -66,7 +66,7 @@ Object {
       expect(config).toMatchInlineSnapshot(`
 Object {
   "dimensions": true,
-  "expandProps": true,
+  "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
   "native": false,
@@ -98,7 +98,7 @@ Object {
       expect(config).toMatchInlineSnapshot(`
 Object {
   "dimensions": true,
-  "expandProps": true,
+  "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
   "native": false,
@@ -131,7 +131,7 @@ Object {
       expect(config).toMatchInlineSnapshot(`
 Object {
   "dimensions": true,
-  "expandProps": true,
+  "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
   "native": false,

diff --git a/packages/core/src/h2x/expandProps.js b/packages/core/src/h2x/expandProps.js
@@ -1,6 +1,6 @@
 import { JSXAttribute } from 'h2x-plugin-jsx'
 
-const expandProps = (place = 'end') => () => ({
+const expandProps = (position = 'end') => () => ({
   visitor: {
     JSXElement: {
       enter(path) {
@@ -11,10 +11,10 @@ const expandProps = (place = 'end') => () => ({
           const props = new JSXAttribute()
           props.name = 'props'
           props.spread = true
-          if (place === 'start') {
+          if (position === 'start') {
             path.node.attributes.unshift(props)
           }
-          if (place === 'end') {
+          if (position === 'end') {
             path.node.attributes.push(props)
           }
           path.replace(path.node)

diff --git a/packages/core/src/plugins/h2x.js b/packages/core/src/plugins/h2x.js
@@ -21,11 +21,7 @@ function configToPlugins(config) {
   if (config.icon) plugins.push(emSize())
   if (config.ref) plugins.push(svgRef())
   if (config.svgProps) plugins.push(svgProps(config.svgProps))
-  // TODO remove boolean value in the next major release
-  if (config.expandProps)
-    plugins.push(
-      expandProps(config.expandProps === true ? 'end' : config.expandProps),
-    )
+  if (config.expandProps) plugins.push(expandProps(config.expandProps))
   if (config.native) plugins.push(toReactNative())
   if (config.titleProp) plugins.push(titleProp())
   return plugins

diff --git a/packages/core/src/templates/reactDomTemplate.test.js b/packages/core/src/templates/reactDomTemplate.test.js
@@ -18,7 +18,7 @@ describe('reactDomTemplate', () => {
     expect(
       reactDomTemplate(
         '<Svg />',
-        { expandProps: true },
+        { expandProps: 'end' },
         { componentName: 'Test' },
       ),
     ).toMatchSnapshot()
@@ -32,14 +32,14 @@ describe('reactDomTemplate', () => {
     expect(
       reactDomTemplate(
         '<Svg />',
-        { titleProp: true, expandProps: true },
+        { titleProp: true, expandProps: 'end' },
         { componentName: 'Test' },
       ),
     ).toMatchSnapshot()
     expect(
       reactDomTemplate(
         '<Svg />',
-        { ref: true, expandProps: true },
+        { ref: true, expandProps: 'end' },
         { componentName: 'Test' },
       ),
     ).toMatchSnapshot()