feat: allow to spread props at the start (#166)

The use case is flow which warns about inexact spread. My template looks
like this and I need to spread props before any other prop.

```js
const template = (code, options, state) => `
// @flow
// Generated from ${state.filePath}

import * as React from "react";

type Props = {
  size?: string | number,
  fill?: string
};

const style = {
  display: "block",
  flex: "0 0 auto",
};

export const ${state.componentName} = ({ size, fill, ...props }: Props) => {
  return (
    ${code}
  );
};
`;

```

Author: TrySound

packages/core/src/__snapshots__/convert.test.js.snap

@@ -21,6 +21,27 @@ export default SvgComponent
 "
 `;
 
+exports[`convert config should support options { expandProps: 'start' } 1`] = `
+"import React from 'react'
+
+const SvgComponent = props => (
+  <svg {...props} width={88} height={88}>
+    <g
+      stroke=\\"#063855\\"
+      strokeWidth={2}
+      fill=\\"none\\"
+      fillRule=\\"evenodd\\"
+      strokeLinecap=\\"square\\"
+    >
+      <path d=\\"M51 37L37 51M51 51L37 37\\" />
+    </g>
+  </svg>
+)
+
+export default SvgComponent
+"
+`;
+
 exports[`convert config should support options { expandProps: false } 1`] = `
 "import React from 'react'
 

packages/core/src/convert.test.js

@@ -212,6 +212,7 @@ describe('convert', () => {
     const configs = [
       [{ dimensions: false }],
       [{ expandProps: false }],
+      [{ expandProps: 'start' }],
       [{ icon: true }],
       [{ native: true }],
       [{ native: true, icon: true }],

packages/core/src/h2x/__snapshots__/expandProps.test.js.snap

@@ -1,7 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`expandProps should expand props 1`] = `
-"<svg {...props}>
+exports[`expandProps should expand props at the start with option 1`] = `
+"<svg {...props} width={10} height={10}>
+  <g stroke=\\"#063855\\" strokeWidth={2} />
+</svg>
+"
+`;
+
+exports[`expandProps should expand props in the end by default 1`] = `
+"<svg width={10} height={10} {...props}>
+  <g stroke=\\"#063855\\" strokeWidth={2} />
+</svg>
+"
+`;
+
+exports[`expandProps should expand props in the end with option 1`] = `
+"<svg width={10} height={10} {...props}>
   <g stroke=\\"#063855\\" strokeWidth={2} />
 </svg>
 "

packages/core/src/h2x/expandProps.js

@@ -1,6 +1,6 @@
 import { JSXAttribute } from 'h2x-plugin-jsx'
 
-const expandProps = () => () => ({
+const expandProps = (place = 'end') => () => ({
   visitor: {
     JSXElement: {
       enter(path) {
@@ -11,7 +11,12 @@ const expandProps = () => () => ({
           const props = new JSXAttribute()
           props.name = 'props'
           props.spread = true
-          path.node.attributes.push(props)
+          if (place === 'start') {
+            path.node.attributes.unshift(props)
+          }
+          if (place === 'end') {
+            path.node.attributes.push(props)
+          }
           path.replace(path.node)
         }
       },

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

@@ -3,14 +3,36 @@ import { transform } from 'h2x-core'
 import expandProps from './expandProps'
 
 describe('expandProps', () => {
-  it('should expand props', () => {
+  it('should expand props in the end by default', () => {
     const result = transform(
-      `<svg>
+      `<svg width="10" height="10">
         <g stroke="#063855" stroke-width="2" />
       </svg>`,
       { plugins: [jsx, expandProps()] },
     )
 
     expect(result).toMatchSnapshot()
   })
+
+  it('should expand props in the end with option', () => {
+    const result = transform(
+      `<svg width="10" height="10">
+        <g stroke="#063855" stroke-width="2" />
+      </svg>`,
+      { plugins: [jsx, expandProps('end')] },
+    )
+
+    expect(result).toMatchSnapshot()
+  })
+
+  it('should expand props at the start with option', () => {
+    const result = transform(
+      `<svg width="10" height="10">
+        <g stroke="#063855" stroke-width="2" />
+      </svg>`,
+      { plugins: [jsx, expandProps('start')] },
+    )
+
+    expect(result).toMatchSnapshot()
+  })
 })

packages/core/src/plugins/h2x.js

@@ -27,7 +27,11 @@ function configToPlugins(config) {
   if (config.icon) plugins.push(emSize())
   if (config.ref) plugins.push(svgRef())
   if (config.svgAttributes) plugins.push(svgAttributes(config.svgAttributes))
-  if (config.expandProps) plugins.push(expandProps())
+  // TODO remove boolean value in the next major release
+  if (config.expandProps)
+    plugins.push(
+      expandProps(config.expandProps === true ? 'end' : config.expandProps),
+    )
   if (config.native) plugins.push(toReactNative())
   if (config.titleProp) plugins.push(titleProp())
   return plugins