Fix fragments and components in arguments

Author: mkmarek

examples/Assets/Resources/components/component-preview.jsx

@@ -1,12 +1,18 @@
 import React from 'react';
 
+const ComponentWithHeader = ({ header, component }) => <>
+    {header}
+    {component}
+</>
+
 export default function ComponentPreview() {
     return (
         <scrollview style={{ backgroundColor: '#173e54' }}>
-            Box:
-            <box style={{ color: '#000000' }}>
-                Some content in the box
-            </box>
+            <ComponentWithHeader header="Box" component={
+                <box style={{ color: '#000000' }}>
+                    Some content in the box
+                </box>
+            }/>
 
             Button:
             <button text="Some button text" />

packages/babel-transform/src/TransformJSXToReactBabelPlugin.js

@@ -71,12 +71,12 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
           'Fragment tags are only supported in React 16 and up.',
         );
       }
-      let callExpr;
-      if (file.opts.useCreateElement) {
-        callExpr = buildCreateElementFragmentCall(path, file);
-      } else {
-        callExpr = buildJSXFragmentCall(path, file);
-      }
+      let callExpr = buildCreateElementFragmentCall(path, file);
+      // if (file.opts.useCreateElement) {
+      //   callExpr = buildCreateElementFragmentCall(path, file);
+      // } else {
+      //   callExpr = buildJSXFragmentCall(path, file);
+      // }
 
       if (callExpr) {
         path.replaceWith(t.inherits(callExpr, path.node));

packages/babel-transform/src/babel.js

@@ -85,6 +85,13 @@ const types = {
     },
     isJSXEmptyExpression(node) {
         return node && node.type === 'JSXEmptyExpression';
+    },
+    nullLiteral() {
+        return {
+            type: 'Literal',
+            value: null,
+            raw: 'null'
+        };
     }
 }
 

packages/babel-transform/src/jsx-visitor.js

@@ -52,6 +52,16 @@ function sanitizeVisitor(visitor, findAncestor) {
 						} else {
 							ancestor.right = replacement;
 						}
+					} else if (ancestor.type === 'JSXExpressionContainer') {
+						ancestor.expression = replacement;
+					} else if (ancestor.type === 'JSXFragment') {
+						const index = ancestor.children.indexOf(node);
+
+						if (index < 0) {
+							throw new Error(`No argument found to replace in JSXFragment`)
+						}
+
+						ancestor.children[index] = replacement;
 					} else {
 						console.log(JSON.stringify(ancestor));
 						throw new Error(`Unknown ${ancestor.type} element in replaceWith`)