From bb95828df9d30133a2396d88fc2f1ca99f9fe8f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Sun, 30 Sep 2018 20:05:44 +0200 Subject: [PATCH] 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 --- README.md | 48 ++++++++--------- packages/cli/README.md | 40 +++++++------- .../cli/src/__snapshots__/index.test.js.snap | 54 ++++++++++++------- packages/cli/src/index.js | 16 ++++-- packages/cli/src/index.test.js | 5 +- packages/core/src/config.js | 2 +- packages/core/src/config.test.js | 8 +-- packages/core/src/h2x/expandProps.js | 6 +-- packages/core/src/plugins/h2x.js | 6 +-- .../src/templates/reactDomTemplate.test.js | 6 +-- 10 files changed, 104 insertions(+), 87 deletions(-) diff --git a/README.md b/README.md index 4ed5aaea..14805d23 100644 --- a/README.md +++ b/README.md @@ -98,26 +98,26 @@ Usage: svgr [options] Options: - -V, --version output the version number - --config-file specify the path of the svgr config - --no-runtime-config disable runtime config (.svgrrc, .svgo.yml, .prettierrc) - -d, --out-dir output files into a directory - --ext specify a custom file extension (default: "js") - --filename-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 add props to the svg element - --replace-attr-values replace an attribute value - --template specify a custom template to use - --title-prop create a title element linked with props - --prettier-config Prettier config - --no-prettier disable Prettier - --svgo-config SVGO config - --no-svgo disable SVGO - -h, --help output usage information + -V, --version output the version number + --config-file specify the path of the svgr config + --no-runtime-config disable runtime config (".svgrrc", ".svgo.yml", ".prettierrc") + -d, --out-dir output files into a directory + --ext specify a custom file extension (default: "js") + --filename-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 add props to the svg element + --replace-attr-values replace an attribute value + --template specify a custom template to use + --title-prop create a title element linked with props + --prettier-config Prettier config + --no-prettier disable Prettier + --svgo-config 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: ` | +| Default | CLI Override | API Override | +| ------- | ---------------- | ----------------------- | +| `end` | `--expand-props` | `expandProps: ` | ### Prettier diff --git a/packages/cli/README.md b/packages/cli/README.md index c17460f2..027a92cc 100644 --- a/packages/cli/README.md +++ b/packages/cli/README.md @@ -17,26 +17,26 @@ Usage: svgr [options] Options: - -V, --version output the version number - --config-file specify the path of the svgr config - --no-runtime-config disable runtime config (.svgrrc, .svgo.yml, .prettierrc) - -d, --out-dir output files into a directory - --ext specify a custom file extension (default: "js") - --filename-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 add props to the svg element - --replace-attr-values replace an attribute value - --template specify a custom template to use - --title-prop create a title element linked with props - --prettier-config Prettier config - --no-prettier disable Prettier - --svgo-config SVGO config - --no-svgo disable SVGO - -h, --help output usage information + -V, --version output the version number + --config-file specify the path of the svgr config + --no-runtime-config disable runtime config (".svgrrc", ".svgo.yml", ".prettierrc") + -d, --out-dir output files into a directory + --ext specify a custom file extension (default: "js") + --filename-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 add props to the svg element + --replace-attr-values replace an attribute value + --template specify a custom template to use + --title-prop create a title element linked with props + --prettier-config Prettier config + --no-prettier disable Prettier + --svgo-config 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 index 71e3d4b7..173e7354 100644 --- 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 = () => ( + + + +) + +export default SvgFile + +" +`; + +exports[`cli should support various args: --expand-props start 1`] = ` +"import React from 'react' + +const SvgFile = props => ( + + + +) + +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 => ( - +const SvgFile = () => ( + ) @@ -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 = () => ( - +const SvgFile = props => ( + ) @@ -215,20 +243,6 @@ export default SvgFile " `; -exports[`cli should support various args: --no-expand-props 1`] = ` -"import React from 'react' - -const SvgFile = () => ( - - - -) - -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 index f3e88dac..23600848 100644 --- a/packages/cli/src/index.js +++ b/packages/cli/src/index.js @@ -40,19 +40,22 @@ program .option('--config-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 ', 'output files into a directory') .option('--ext ', 'specify a custom file extension (default: "js")') .option( '--filename-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 ', '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 index a588ea7b..98700aec 100644 --- 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 index 3ea736df..439e325f 100644 --- 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 index 90f92038..89c64c40 100644 --- 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 index 085f783b..11e26d4b 100644 --- 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 index 2cec58fa..13dce5e8 100644 --- 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 index 3e73120f..3ec63fd4 100644 --- a/packages/core/src/templates/reactDomTemplate.test.js +++ b/packages/core/src/templates/reactDomTemplate.test.js @@ -18,7 +18,7 @@ describe('reactDomTemplate', () => { expect( reactDomTemplate( '', - { expandProps: true }, + { expandProps: 'end' }, { componentName: 'Test' }, ), ).toMatchSnapshot() @@ -32,14 +32,14 @@ describe('reactDomTemplate', () => { expect( reactDomTemplate( '', - { titleProp: true, expandProps: true }, + { titleProp: true, expandProps: 'end' }, { componentName: 'Test' }, ), ).toMatchSnapshot() expect( reactDomTemplate( '', - { ref: true, expandProps: true }, + { ref: true, expandProps: 'end' }, { componentName: 'Test' }, ), ).toMatchSnapshot()