From f71aa7af82ceae7588526391aeae9b535a4df4e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Sun, 30 Sep 2018 15:11:53 +0200 Subject: [PATCH] feat: always prefix component name with "Svg" Closes #190 --- .../cli/src/__snapshots__/index.test.js.snap | 80 +++++++++---------- .../cli/src/__snapshots__/util.test.js.snap | 8 +- packages/core/src/util.js | 5 +- packages/core/src/util.test.js | 10 ++- .../src/__snapshots__/index.test.js.snap | 16 ++-- .../src/__snapshots__/index.test.js.snap | 12 +-- 6 files changed, 67 insertions(+), 64 deletions(-) diff --git a/packages/cli/src/__snapshots__/index.test.js.snap b/packages/cli/src/__snapshots__/index.test.js.snap index a009dbee..14341800 100644 --- a/packages/cli/src/__snapshots__/index.test.js.snap +++ b/packages/cli/src/__snapshots__/index.test.js.snap @@ -3,7 +3,7 @@ exports[`cli should not override config with cli defaults 1`] = ` "import React from 'react' -const File = () => +const SvgFile = () => Rectangle 5 @@ -27,20 +27,20 @@ const File = () => -export default File +export default SvgFile " `; exports[`cli should support --prettier-config as file 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( ) -export default File +export default SvgFile " `; @@ -48,13 +48,13 @@ export default File exports[`cli should support --prettier-config as json 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( ) -export default File +export default SvgFile " `; @@ -62,14 +62,14 @@ export default File exports[`cli should support --svgo-config as file 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( Rectangle 5 ) -export default File +export default SvgFile " `; @@ -77,14 +77,14 @@ export default File exports[`cli should support --svgo-config as json 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( Rectangle 5 ) -export default File +export default SvgFile " `; @@ -134,13 +134,13 @@ Array [ exports[`cli should support various args: --icon 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( ) -export default File +export default SvgFile " `; @@ -148,13 +148,13 @@ export default File exports[`cli should support various args: --native --icon 1`] = ` "import React from 'react' import Svg, { Path } from 'react-native-svg' -const File = props => ( +const SvgFile = props => ( ) -export default File +export default SvgFile " `; @@ -162,13 +162,13 @@ export default File exports[`cli should support various args: --native --no-expand-props 1`] = ` "import React from 'react' import Svg, { Path } from 'react-native-svg' -const File = () => ( +const SvgFile = () => ( ) -export default File +export default SvgFile " `; @@ -176,13 +176,13 @@ export default File exports[`cli should support various args: --native --ref 1`] = ` "import React from 'react' import Svg, { Path } from 'react-native-svg' -const File = ({ svgRef, ...props }) => ( +const SvgFile = ({ svgRef, ...props }) => ( ) -export default File +export default SvgFile " `; @@ -190,13 +190,13 @@ export default File exports[`cli should support various args: --native 1`] = ` "import React from 'react' import Svg, { Path } from 'react-native-svg' -const File = props => ( +const SvgFile = props => ( ) -export default File +export default SvgFile " `; @@ -204,13 +204,13 @@ export default File exports[`cli should support various args: --no-dimensions 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( ) -export default File +export default SvgFile " `; @@ -218,13 +218,13 @@ export default File exports[`cli should support various args: --no-expand-props 1`] = ` "import React from 'react' -const File = () => ( +const SvgFile = () => ( ) -export default File +export default SvgFile " `; @@ -232,19 +232,19 @@ export default File exports[`cli should support various args: --no-prettier 1`] = ` "import React from 'react' -const File = props => +const SvgFile = props => -export default File +export default SvgFile " `; exports[`cli should support various args: --no-svgo 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( ( ) -export default File +export default SvgFile " `; @@ -284,13 +284,13 @@ export default File exports[`cli should support various args: --ref 1`] = ` "import React from 'react' -const File = ({ svgRef, ...props }) => ( +const SvgFile = ({ svgRef, ...props }) => ( ) -export default File +export default SvgFile " `; @@ -298,13 +298,13 @@ export default File exports[`cli should support various args: --replace-attr-values "#063855=currentColor" 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( ) -export default File +export default SvgFile " `; @@ -312,13 +312,13 @@ export default File exports[`cli should support various args: --svg-attributes "focusable=false" 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( ) -export default File +export default SvgFile " `; @@ -326,13 +326,13 @@ export default File exports[`cli should support various args: --svg-props "hidden={true}" 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( ) -export default File +export default SvgFile " `; @@ -340,14 +340,14 @@ export default File exports[`cli should support various args: --title-prop 1`] = ` "import React from 'react' -const File = ({ title, ...props }) => ( +const SvgFile = ({ title, ...props }) => ( {title} ) -export default File +export default SvgFile " `; @@ -355,13 +355,13 @@ export default File exports[`cli should work with a simple file 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( ) -export default File +export default SvgFile " `; diff --git a/packages/cli/src/__snapshots__/util.test.js.snap b/packages/cli/src/__snapshots__/util.test.js.snap index 4a24f329..d7fc9083 100644 --- a/packages/cli/src/__snapshots__/util.test.js.snap +++ b/packages/cli/src/__snapshots__/util.test.js.snap @@ -3,25 +3,25 @@ exports[`util #convertFile should convert a file 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( ) -export default File +export default SvgFile " `; exports[`util #convertFile should support a custom config path 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( ) -export default File +export default SvgFile " `; diff --git a/packages/core/src/util.js b/packages/core/src/util.js index 08e6b8bf..5c8d431c 100644 --- a/packages/core/src/util.js +++ b/packages/core/src/util.js @@ -3,11 +3,10 @@ import camelcase from 'camelcase' export function getComponentName(state) { if (!state.filePath) return 'SvgComponent' - const componentName = camelcase(path.parse(state.filePath).name, { + const pascalCaseFileName = camelcase(path.parse(state.filePath).name, { pascalCase: true, }) - if (Number.isNaN(parseInt(componentName[0], 10))) return componentName - return `Svg${componentName}` + return `Svg${pascalCaseFileName}` } export function expandState(state) { diff --git a/packages/core/src/util.test.js b/packages/core/src/util.test.js index 06bac834..6a7db690 100644 --- a/packages/core/src/util.test.js +++ b/packages/core/src/util.test.js @@ -4,9 +4,13 @@ describe('util', () => { describe('#getComponentName', () => { it('should transform filePath into a component name', () => { expect(getComponentName({})).toBe('SvgComponent') - expect(getComponentName({ filePath: 'hello.svg' })).toBe('Hello') - expect(getComponentName({ filePath: 'hello-you.svg' })).toBe('HelloYou') - expect(getComponentName({ filePath: 'hello_you.svg' })).toBe('HelloYou') + expect(getComponentName({ filePath: 'hello.svg' })).toBe('SvgHello') + expect(getComponentName({ filePath: 'hello-you.svg' })).toBe( + 'SvgHelloYou', + ) + expect(getComponentName({ filePath: 'hello_you.svg' })).toBe( + 'SvgHelloYou', + ) expect(getComponentName({ filePath: '1_big_svg.svg' })).toBe('Svg1BigSvg') }) }) diff --git a/packages/rollup/src/__snapshots__/index.test.js.snap b/packages/rollup/src/__snapshots__/index.test.js.snap index 3f92f1c9..f57e7412 100644 --- a/packages/rollup/src/__snapshots__/index.test.js.snap +++ b/packages/rollup/src/__snapshots__/index.test.js.snap @@ -13,20 +13,20 @@ React.createElement(\\"path\\", { fillRule: \\"evenodd\\" }); -var File = function File(props) { +var SvgFile = function SvgFile(props) { return React.createElement(\\"svg\\", _extends({ width: 48, height: 1 }, props), _ref); }; -export default File;" +export default SvgFile;" `; exports[`rollup loader should convert file with previousExport of image plugin 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( @@ -36,33 +36,33 @@ var img = new Image() img.src = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSIxcHgiIHZpZXdCb3g9IjAgMCA0OCAxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+UmVjdGFuZ2xlIDU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMTktU2VwYXJhdG9yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTI5LjAwMDAwMCwgLTE1Ni4wMDAwMDApIiBmaWxsPSIjMDYzODU1Ij4KICAgICAgICAgICAgPGcgaWQ9IkNvbnRyb2xzL1NldHRpbmdzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MC4wMDAwMDAsIDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDY0LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQuMDAwMDAwLCA1Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS01IiB4PSIyNSIgeT0iMzYiIHdpZHRoPSI0OCIgaGVpZ2h0PSIxIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=' export default img -export { File as ReactComponent } +export { SvgFile as ReactComponent } " `; exports[`rollup loader should convert file with previousExport of url plugin 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( ) export default 'data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2248px%22%20height%3D%221px%22%20viewBox%3D%220%200%2048%201%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%20%20%20%20%3Ctitle%3ERectangle%205%3C%2Ftitle%3E%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%2219-Separator%22%20transform%3D%22translate%28-129.000000%2C%20-156.000000%29%22%20fill%3D%22%23063855%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Controls%2FSettings%22%20transform%3D%22translate%2880.000000%2C%200.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Content%22%20transform%3D%22translate%280.000000%2C%2064.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%2824.000000%2C%2056.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-5%22%20x%3D%2225%22%20y%3D%2236%22%20width%3D%2248%22%20height%3D%221%22%3E%3C%2Frect%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E' -export { File as ReactComponent } +export { SvgFile as ReactComponent } " `; exports[`rollup loader should convert file without babel 1`] = ` "import React from 'react' -const File = props => ( +const SvgFile = props => ( ) -export default File +export default SvgFile " `; diff --git a/packages/webpack/src/__snapshots__/index.test.js.snap b/packages/webpack/src/__snapshots__/index.test.js.snap index 31bb227c..5290acbf 100644 --- a/packages/webpack/src/__snapshots__/index.test.js.snap +++ b/packages/webpack/src/__snapshots__/index.test.js.snap @@ -3,7 +3,7 @@ exports[`webpack loader should convert file (babel: false) 1`] = ` "import React from 'react'; -const Icon = () => React.createElement(\\"svg\\", { +const SvgIcon = () => React.createElement(\\"svg\\", { width: 88, height: 88 }, React.createElement(\\"g\\", { @@ -16,7 +16,7 @@ const Icon = () => React.createElement(\\"svg\\", { d: \\"M51 37L37 51M51 51L37 37\\" }))); -export default Icon;" +export default SvgIcon;" `; exports[`webpack loader should convert file 1`] = ` @@ -37,11 +37,11 @@ React.createElement(\\"svg\\", { d: \\"M51 37L37 51M51 51L37 37\\" }))); -var Icon = function Icon() { +var SvgIcon = function SvgIcon() { return _ref; }; -export default Icon;" +export default SvgIcon;" `; exports[`webpack loader should support url-loader 1`] = ` @@ -62,10 +62,10 @@ React.createElement(\\"svg\\", { d: \\"M51 37L37 51M51 51L37 37\\" }))); -var Icon = function Icon() { +var SvgIcon = function SvgIcon() { return _ref; }; export default 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODhweCIgaGVpZ2h0PSI4OHB4IiB2aWV3Qm94PSIwIDAgODggODgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ2LjIgKDQ0NDk2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5EaXNtaXNzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkJsb2NrcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+CiAgICAgICAgPGcgaWQ9IkRpc21pc3MiIHN0cm9rZT0iIzA2Mzg1NSIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPHBhdGggZD0iTTUxLDM3IEwzNyw1MSIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik01MSw1MSBMMzcsMzciIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg=='; -export { Icon as ReactComponent };" +export { SvgIcon as ReactComponent };" `;