single function as children should keep it

Author: Jokcy

.gitignore

@@ -103,4 +103,7 @@ dist
 # TernJS port file
 .tern-port
 
+# vscode config
+.vscode
+
 dist

packages/babel-plugin-jsx/src/transform-vue-jsx.ts

@@ -13,6 +13,7 @@ import {
   parseDirectives,
   isFragment,
   walksScope,
+  isSingleFunctionChild
 } from './utils';
 import { PatchFlags, PatchFlagNames } from './patchFlags';
 import { State, ExcludesBoolean } from './';
@@ -405,26 +406,32 @@ const transformJSXElement = (
     ));
   }
 
+  const isSingleFunctionChildren: Boolean = isSingleFunctionChild(path.get('children'))
+
   // @ts-ignore
   const createVNode = t.callExpression(createIdentifier(state, usePatchFlag ? 'createVNode' : 'h'), [
     tag,
     // @ts-ignore
     compatibleProps ? t.callExpression(state.get('compatibleProps'), [props]) : props,
-    (children.length || slots) ? (
-      isComponent
-        ? t.objectExpression([
-            !!children.length && t.objectProperty(
-              t.identifier('default'),
-              t.arrowFunctionExpression([], t.arrayExpression(children))
-            ),
-            ...(slots ? (
-              t.isObjectExpression(slots)
-                ? (slots as any as t.ObjectExpression).properties
-                : [t.spreadElement(slots as any)]
-            ) : [])
-          ].filter(Boolean as any as ExcludesBoolean))
-        : t.arrayExpression(children)
-    ) : t.nullLiteral(),
+    isSingleFunctionChildren
+      ?
+      children[0]
+      :
+      (children.length || slots) ? (
+        isComponent
+          ? t.objectExpression([
+              !!children.length && t.objectProperty(
+                t.identifier('default'),
+                t.arrowFunctionExpression([], t.arrayExpression(children))
+              ),
+              ...(slots ? (
+                t.isObjectExpression(slots)
+                  ? (slots as any as t.ObjectExpression).properties
+                  : [t.spreadElement(slots as any)]
+              ) : [])
+            ].filter(Boolean as any as ExcludesBoolean))
+          : t.arrayExpression(children)
+      ) : t.nullLiteral(),
     !!patchFlag && usePatchFlag && (
       useOptimate
         ? t.addComment(t.numericLiteral(patchFlag), 'trailing', ` ${flagNames} `, false)

packages/babel-plugin-jsx/src/utils.ts

@@ -281,6 +281,37 @@ const walksScope = (path: NodePath, name: string) => {
   }
 }
 
+const isSingleFunctionChild = (paths: NodePath<
+  t.JSXText
+    | t.JSXExpressionContainer
+    | t.JSXSpreadChild
+    | t.JSXElement
+    | t.JSXFragment
+  >[],) => {
+    if (paths.length !== 1) return false
+    if (t.isJSXExpressionContainer(paths[0])) {
+      let p = paths[0].get('expression')
+      if (t.isArrowFunctionExpression(p) || t.isFunctionExpression(p)) return true
+      if (t.isIdentifier(p)) {
+        const ip = p as NodePath<t.Identifier>
+        const node = ip.node
+        if (ip.scope.hasBinding(node.name)) {
+          const binding = ip.scope.getBinding(node.name)
+          if (binding) {
+            // TODO: if binding still a variableDeclarator
+            const bp = binding.path
+            const dt = bp.get('declarations').find((xp) => t.isVariableDeclarator(xp) && ((xp.node as t.VariableDeclarator).id as t.Identifier).name === node.name)
+            const init = dt && dt.get('init')
+            console.log(t.isFunctionExpression(init), t.isArrowFunctionExpression(init))
+            return t.isFunctionExpression(init) || t.isArrowFunctionExpression(init)
+          }
+        }
+        return ip.scope.hasBinding(node.name) && (t.isFunctionExpression(ip.scope.bindings[0]) || t.isArrowFunctionExpression(ip.scope.bindings[0]))
+      }
+    }
+    return false
+  }
+
 export {
   createIdentifier,
   isDirective,
@@ -294,4 +325,5 @@ export {
   parseDirectives,
   isFragment,
   walksScope,
+  isSingleFunctionChild
 };

packages/babel-plugin-jsx/test/index.test.js

@@ -306,6 +306,40 @@ describe('slots', () => {
 
     expect(wrapper.html()).toBe('<div>foo</div>');
   });
+
+  test('pass only single function as children should keep it', () => {
+    const A = (_, { slots }) => (
+      <div>
+        {slots.default()}
+      </div>
+    );
+
+    const wrapper = mount({
+      setup() {
+        return () => <A>{() => 'foo'}</A>;
+      },
+    });
+
+    expect(wrapper.html()).toBe('<div>foo</div>');
+  });
+
+  test('pass only single variable of function should keep it', () => {
+    const A = (_, { slots }) => (
+      <div>
+        {slots.default()}
+      </div>
+    );
+
+    const renderA = () => 'foo';
+
+    const wrapper = mount({
+      setup() {
+        return () => <A>{renderA}</A>;
+      },
+    });
+
+    expect(wrapper.html()).toBe('<div>foo</div>');
+  });
 });
 
 describe('PatchFlags', () => {