feat(native): import only relevant components

Author: gregberge

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

@@ -43,23 +43,7 @@ export default One;
 
 exports[`cli --native 1`] = `
 "import React from \\"react\\";
-import Svg, {
-  Circle,
-  Ellipse,
-  G,
-  LinearGradient,
-  RadialGradient,
-  Line,
-  Path,
-  Polygon,
-  Polyline,
-  Rect,
-  Symbol,
-  Text,
-  Use,
-  Defs,
-  Stop
-} from \\"react-native-svg\\";
+import Svg, { Path } from \\"react-native-svg\\";
 
 const One = props => (
   <Svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>

src/h2x/toReactNative.js

@@ -1,4 +1,4 @@
-const supportedElements = {
+const elementToComponent = {
   svg: 'Svg',
   circle: 'Circle',
   ellipse: 'Ellipse',
@@ -17,18 +17,28 @@ const supportedElements = {
   stop: 'Stop',
 }
 
-const reverse = Object.keys(supportedElements).reduce(
-  (map, key) => ({ ...map, [supportedElements[key]]: key }),
+const componentToElement = Object.keys(elementToComponent).reduce(
+  (map, key) => ({ ...map, [elementToComponent[key]]: key }),
   {},
 )
 
 const toReactNative = () => ({
   visitor: {
     JSXElement: {
-      enter(path) {
-        if (supportedElements[path.node.name]) {
-          path.node.name = supportedElements[path.node.name]
-        } else if (!reverse[path.node.name]) {
+      enter(path, state) {
+        // Replace element by react-native-svg components
+        const component = elementToComponent[path.node.name]
+        if (component) {
+          path.node.name = component
+          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)
           path.remove()
         }
       },

src/index.js

@@ -27,7 +27,6 @@ export {
 
 function expandState(state) {
   const componentName = pascalCase(path.parse(state.filePath).name)
-
   return { ...state, componentName }
 }
 

src/plugins/h2x.js

@@ -1,3 +1,3 @@
 import { transform } from 'h2x-core'
 
-export default (code, opts) => transform(code, opts)
+export default (code, opts, state) => transform(code, { ...opts, state })

src/transforms/wrapIntoNativeComponent.js

@@ -1,22 +1,15 @@
-export default (opts = {}) => (code, state) => `import React from 'react'
-import Svg, {
-    Circle,
-    Ellipse,
-    G,
-    LinearGradient,
-    RadialGradient,
-    Line,
-    Path,
-    Polygon,
-    Polyline,
-    Rect,
-    Symbol,
-    Text,
-    Use,
-    Defs,
-    Stop
-} from 'react-native-svg';
+const componentsToImport = components =>
+  [...components].filter(component => component !== 'Svg').join(', ')
 
-const ${state.componentName} = (${opts.expandProps ? 'props' : ''}) => ${code}
+export default (opts = {}) => (code, state) => {
+  const { reactNativeSvgReplacedComponents = new Set() } = state
 
-export default ${state.componentName}`
+  return `import React from 'react'
+  import Svg, { ${componentsToImport(
+    reactNativeSvgReplacedComponents,
+  )} } from 'react-native-svg';
+
+  const ${state.componentName} = (${opts.expandProps ? 'props' : ''}) => ${code}
+
+  export default ${state.componentName}`
+}