fix: Support default export in functional component

Author: nickmessing

packages/babel-sugar-functional-vue/src/index.js

@@ -18,17 +18,12 @@ const isInMethod = (t, path, parentLimitPath) => {
 }
 
 /**
- * Check if it's a functional componet declarator
+ * Check path has JSX
  * @param t
  * @param path
  * @returns boolean
  */
-const isFunctionalComponentDeclarator = (t, path) => {
-  const firstCharacter = path.get('id.name').node[0]
-  if (firstCharacter < 'A' || firstCharacter > 'Z') {
-    return false
-  }
-
+const hasJSX = (t, path) => {
   let hasJSX = false
 
   path.traverse({
@@ -39,10 +34,41 @@ const isFunctionalComponentDeclarator = (t, path) => {
     },
   })
 
-  if (!hasJSX) {
+  return hasJSX
+}
+
+/**
+ * Check if it's a functional componet declarator
+ * @param t
+ * @param path
+ * @returns boolean
+ */
+const isFunctionalComponentDeclarator = (t, path) => {
+  const firstCharacter = path.get('id.name').node[0]
+  if (firstCharacter < 'A' || firstCharacter > 'Z') {
     return false
   }
-  return true
+
+  return hasJSX(t, path)
+}
+
+/**
+ * Convert arrow function to functional component
+ * @param t
+ * @param path
+ * @param name
+ */
+const convertFunctionalComponent = (t, path, name = null) => {
+  const params = [t.identifier('h'), ...path.node.params]
+  const body = path.node.body
+  const props = [
+    t.objectProperty(t.identifier('functional'), t.booleanLiteral(true)),
+    t.objectProperty(t.identifier('render'), t.arrowFunctionExpression(params, body)),
+  ]
+  if (process.env.NODE_ENV === 'development' && name) {
+    props.unshift(t.objectProperty(t.identifier('name'), t.stringLiteral(name)))
+  }
+  path.replaceWith(t.objectExpression(props))
 }
 
 export default babel => {
@@ -53,6 +79,13 @@ export default babel => {
     visitor: {
       Program(path) {
         path.traverse({
+          ExportDefaultDeclaration(path) {
+            if (!t.isArrowFunctionExpression(path.node.declaration) || !hasJSX(t, path)) {
+              return
+            }
+
+            convertFunctionalComponent(t, path.get('declaration'))
+          },
           VariableDeclaration(path) {
             if (
               path.node.declarations.length !== 1 ||
@@ -69,20 +102,7 @@ export default babel => {
             }
 
             const name = path.node.declarations[0].id.name
-            const params = [t.identifier('h'), ...path.node.declarations[0].init.params]
-            const body = path.node.declarations[0].init.body
-            const isDevEnv = process.env.NODE_ENV === 'development'
-            const props = [
-              t.objectProperty(t.identifier('functional'), t.booleanLiteral(true)),
-              t.objectProperty(t.identifier('render'), t.arrowFunctionExpression(params, body)),
-            ]
-            if (isDevEnv) {
-              props.unshift(t.objectProperty(t.identifier('name'), t.stringLiteral(name)))
-            }
-            path.replaceWith(
-              t.variableDeclaration('const', [t.variableDeclarator(t.identifier(name), t.objectExpression(props))]),
-              [],
-            )
+            convertFunctionalComponent(t, path.get('declarations')[0].get('init'), name)
           },
         })
       },

packages/babel-sugar-functional-vue/test/test.js

@@ -65,6 +65,23 @@ const tests = [
 
 });`,
   },
+  {
+    name: 'Default export',
+    from: `export default ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}</div>`,
+    to: `export default {
+  functional: true,
+  render: (h, {
+    props,
+    listeners
+  }) => <div onClick={listeners.click}>{props.msg}</div>
+};`,
+  },
+  {
+    name: 'Ignore non-arrow function',
+    from: `const a = 2; export default 3`,
+    to: `const a = 2;
+export default 3;`,
+  },
 ]
 
 tests.map(({ name, from, to, NODE_ENV }) => {