feat(native): log unsupported components

Author: gregberge

src/cli/__snapshots__/index.test.js.snap

@@ -45,6 +45,8 @@ exports[`cli --native 1`] = `
 "import React from \\"react\\";
 import Svg, { Path } from \\"react-native-svg\\";
 
+// SVGR has dropped some elements not supported by react-native-svg: title
+
 const One = props => (
   <Svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
     <Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />

src/h2x/toReactNative.js

@@ -30,15 +30,16 @@ const toReactNative = () => ({
         const component = elementToComponent[path.node.name]
         if (component) {
           path.node.name = component
-          state.reactNativeSvgReplacedComponents = state.reactNativeSvgReplacedComponents || new Set()
+          state.reactNativeSvgReplacedComponents =
+            state.reactNativeSvgReplacedComponents || new Set()
           state.reactNativeSvgReplacedComponents.add(component)
           return
         }
 
         // Remove element if not supported
         if (!componentToElement[path.node.name]) {
           state.unsupportedComponents = state.unsupportedComponents || new Set()
-          state.unsupportedComponents.add(component)
+          state.unsupportedComponents.add(path.node.name)
           path.remove()
         }
       },

src/transforms/wrapIntoNativeComponent.js

@@ -1,13 +1,27 @@
-const componentsToImport = components =>
+const componentsToList = components =>
   [...components].filter(component => component !== 'Svg').join(', ')
 
+const logUnsupportedComponents = components => {
+  if (!components.size) return ''
+  return `
+// SVGR has dropped some elements not supported by react-native-svg: ${componentsToList(
+    components,
+  )}
+`
+}
+
 export default (opts = {}) => (code, state) => {
-  const { reactNativeSvgReplacedComponents = new Set() } = state
+  const {
+    reactNativeSvgReplacedComponents = new Set(),
+    unsupportedComponents = new Set(),
+  } = state
 
   return `import React from 'react'
-  import Svg, { ${componentsToImport(
+  import Svg, { ${componentsToList(
     reactNativeSvgReplacedComponents,
   )} } from 'react-native-svg';
+  ${logUnsupportedComponents(unsupportedComponents)}
+
 
   const ${state.componentName} = (${opts.expandProps ? 'props' : ''}) => ${code}