Skip to content

Commit

Permalink
feat: use new default template with function
Browse files Browse the repository at this point in the history
  • Loading branch information
@gregberge
gregberge committed Dec 18, 2019
1 parent 0d3aedb commit 86e0723
Show file tree
Hide file tree
Showing 10 changed files with 670 additions and 536 deletions.
4 changes: 3 additions & 1 deletion packages/babel-plugin-transform-svg-component/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ function defaultTemplate(
{ imports, componentName, props, jsx, exports },
) {
return template.ast`${imports}
const ${componentName} = (${props}) => ${jsx}
function ${componentName}(${props}) {
return ${jsx};
}
${exports}
`
}
Expand Down
66 changes: 37 additions & 29 deletions packages/babel-plugin-transform-svg-component/src/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,14 @@ describe('plugin', () => {
state: { componentName: 'SvgComponent' },
})
expect(code).toMatchInlineSnapshot(`
"import React from \\"react\\";
"import React from \\"react\\";
const SvgComponent = () => <svg><div /></svg>;
function SvgComponent() {
return <svg><div /></svg>;
}
export default SvgComponent;"
`)
export default SvgComponent;"
`)
})

it('should add import for react-native-svg', () => {
Expand All @@ -30,13 +32,15 @@ export default SvgComponent;"
native: true,
})
expect(code).toMatchInlineSnapshot(`
"import React from \\"react\\";
import Svg from \\"react-native-svg\\";
"import React from \\"react\\";
import Svg from \\"react-native-svg\\";
const SvgComponent = () => <svg><div /></svg>;
function SvgComponent() {
return <svg><div /></svg>;
}
export default SvgComponent;"
`)
export default SvgComponent;"
`)
})

it('should import for expo', () => {
Expand All @@ -45,13 +49,15 @@ export default SvgComponent;"
native: { expo: true },
})
expect(code).toMatchInlineSnapshot(`
"import React from \\"react\\";
import \\"expo\\";
"import React from \\"react\\";
import \\"expo\\";
const SvgComponent = () => <svg><div /></svg>;
function SvgComponent() {
return <svg><div /></svg>;
}
export default SvgComponent;"
`)
export default SvgComponent;"
`)
})

it('should support custom template', () => {
Expand All @@ -67,12 +73,12 @@ export default SvgComponent;"
state: { componentName: 'SvgComponent' },
})
expect(code).toMatchInlineSnapshot(`
"import React from 'react';
"import React from 'react';
const MyComponent = () => <svg><div /></svg>;
const MyComponent = () => <svg><div /></svg>;
export default MyComponent;"
`)
export default MyComponent;"
`)
})

it('should support custom typescript template', () => {
Expand All @@ -88,12 +94,12 @@ export default MyComponent;"
state: { componentName: 'SvgComponent' },
})
expect(code).toMatchInlineSnapshot(`
"import * as React from 'react';
"import * as React from 'react';
const MyComponent = (props: React.SVGProps<SVGSVGElement>) => <svg><div /></svg>;
const MyComponent = (props: React.SVGProps<SVGSVGElement>) => <svg><div /></svg>;
export default MyComponent;"
`)
export default MyComponent;"
`)
})

it('should handle template that does not return an array', () => {
Expand All @@ -110,14 +116,16 @@ export default MyComponent;"
ref: true,
})
expect(code).toMatchInlineSnapshot(`
"import React from \\"react\\";
"import React from \\"react\\";
const SvgComponent = ({
svgRef
}) => <svg><div /></svg>;
function SvgComponent({
svgRef
}) {
return <svg><div /></svg>;
}
const ForwardRef = React.forwardRef((props, ref) => <SvgComponent svgRef={ref} {...props} />);
export default ForwardRef;"
`)
const ForwardRef = React.forwardRef((props, ref) => <SvgComponent svgRef={ref} {...props} />);
export default ForwardRef;"
`)
})
})
106 changes: 60 additions & 46 deletions packages/babel-preset/src/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,14 @@ describe('preset', () => {
},
}),
).toMatchInlineSnapshot(`
"import React from \\"react\\";
const SvgComponent = () => <svg foo=\\"bar\\" x={y} />;
export default SvgComponent;"
`)
"import React from \\"react\\";
function SvgComponent() {
return <svg foo=\\"bar\\" x={y} />;
}
export default SvgComponent;"
`)
})

it('should handle native expo option', () => {
Expand All @@ -41,13 +43,15 @@ describe('preset', () => {
},
}),
).toMatchInlineSnapshot(`
"import React from \\"react\\";
import { Svg } from \\"expo\\";
const SvgComponent = () => <Svg><Svg.G><Svg.Path d=\\"M0 0h48v1H0z\\" /></Svg.G></Svg>;
export default SvgComponent;"
`)
"import React from \\"react\\";
import { Svg } from \\"expo\\";
function SvgComponent() {
return <Svg><Svg.G><Svg.Path d=\\"M0 0h48v1H0z\\" /></Svg.G></Svg>;
}
export default SvgComponent;"
`)
})

it('should handle titleProp', () => {
Expand All @@ -59,14 +63,16 @@ describe('preset', () => {
},
}),
).toMatchInlineSnapshot(`
"import React from \\"react\\";
const SvgComponent = ({
title
}) => <svg>{title ? <title>{title}</title> : null}</svg>;
export default SvgComponent;"
`)
"import React from \\"react\\";
function SvgComponent({
title
}) {
return <svg>{title ? <title>{title}</title> : null}</svg>;
}
export default SvgComponent;"
`)
})
it('should handle titleProp and fallback on existing title', () => {
// testing when existing title has string as chilren
Expand All @@ -78,14 +84,16 @@ describe('preset', () => {
},
}),
).toMatchInlineSnapshot(`
"import React from \\"react\\";
const SvgComponent = ({
title
}) => <svg>{title === undefined ? <title>Hello</title> : title ? <title>{title}</title> : null}</svg>;
export default SvgComponent;"
`)
"import React from \\"react\\";
function SvgComponent({
title
}) {
return <svg>{title === undefined ? <title>Hello</title> : title ? <title>{title}</title> : null}</svg>;
}
export default SvgComponent;"
`)
// testing when existing title has JSXExpression as children
expect(
testPreset(`<svg><title>{"Hello"}</title></svg>`, {
Expand All @@ -95,14 +103,16 @@ describe('preset', () => {
},
}),
).toMatchInlineSnapshot(`
"import React from \\"react\\";
const SvgComponent = ({
title
}) => <svg>{title === undefined ? <title>{\\"Hello\\"}</title> : title ? <title>{title}</title> : null}</svg>;
export default SvgComponent;"
`)
"import React from \\"react\\";
function SvgComponent({
title
}) {
return <svg>{title === undefined ? <title>{\\"Hello\\"}</title> : title ? <title>{title}</title> : null}</svg>;
}
export default SvgComponent;"
`)
})

it('should handle replaceAttrValues', () => {
Expand All @@ -117,12 +127,14 @@ describe('preset', () => {
},
}),
).toMatchInlineSnapshot(`
"import React from \\"react\\";
const SvgComponent = () => <svg a=\\"black\\" b={props.white} />;
export default SvgComponent;"
`)
"import React from \\"react\\";
function SvgComponent() {
return <svg a=\\"black\\" b={props.white} />;
}
export default SvgComponent;"
`)
})

it('should handle expandProps & icon & dimensions', () => {
Expand All @@ -137,9 +149,11 @@ describe('preset', () => {
}),
).toMatchInlineSnapshot(`
"import React from \\"react\\";
const SvgComponent = props => <svg a=\\"#000\\" b=\\"#fff\\" width=\\"1em\\" height=\\"1em\\" {...props} />;
function SvgComponent(props) {
return <svg a=\\"#000\\" b=\\"#fff\\" width=\\"1em\\" height=\\"1em\\" {...props} />;
}
export default SvgComponent;"
`)
})
Expand Down
Loading

0 comments on commit 86e0723

Please sign in to comment.