feat: support fragment

README.md

@@ -138,6 +138,17 @@ const App = {
 
 In Vue3, the children of KeepAlive and Teleport components will not be built as `slots`, so you can use them as in the template:
 
+## Fragment
+
+Since Vue3 supports multiple root elements, so we need to support `Fragment`:
+
+```html
+<>
+  <p>foo</p>
+  <div>bar</div>
+</>
+```
+
 ## Optimization mode
 
 `Vue3` makes full use of compile-time information to generate `PatchFlags` for runtime update performance improvement, `vue-next-jsx` behaves as `Vue3 Compiler` after enabling **optimization mode**.

src/buildCreateVNode.ts

@@ -321,7 +321,10 @@ function processJSXAttrValue(value: bt.JSXAttribute['value']) {
   }
 }
 
-function buildChildren(children: bt.JSXElement['children'], state: State) {
+export function buildChildren(
+  children: bt.JSXElement['children'],
+  state: State
+) {
   return bt.arrayExpression(
     children
       .map((child) => {

src/buildFragment.ts

@@ -0,0 +1,17 @@
+import * as bt from '@babel/types'
+import { NodePath } from '@babel/traverse'
+import { State } from './main'
+import { buildChildren } from './buildCreateVNode'
+
+export function buildFragment(
+  jsxElementPath: NodePath<bt.JSXFragment>,
+  state: State
+) {
+  const createVNode = state.visitorContext.addHelper('createVNode')
+  const Fragment = state.visitorContext.addHelper('Fragment')
+  return bt.callExpression(createVNode, [
+    Fragment,
+    bt.nullLiteral(),
+    buildChildren(jsxElementPath.node.children, state)
+  ])
+}

src/main.ts

@@ -2,6 +2,7 @@ import jsx from '@babel/plugin-syntax-jsx'
 import * as bt from '@babel/types'
 import { Visitor, NodePath } from '@babel/traverse'
 import { buildCreateVNodeCall } from './buildCreateVNode'
+import { buildFragment } from './buildFragment'
 
 export interface Options {
   optimizate?: boolean
@@ -94,6 +95,12 @@ export default function VueNextJSX() {
           state.opts = { ...defaultOptions, ...state.opts }
           path.replaceWith(buildCreateVNodeCall(path, state))
         }
+      },
+      JSXFragment: {
+        exit(path: NodePath<bt.JSXFragment>, state: State) {
+          state.opts = { ...defaultOptions, ...state.opts }
+          path.replaceWith(buildFragment(path, state))
+        }
       }
     } as Visitor
   }

tests/__snapshots__/fragment.spec.ts.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Fragment <> 1`] = `
+"import { createVNode, Fragment } from \\"vue\\";
+const el = createVNode(Fragment, null, [createVNode(\\"p\\")]);"
+`;

tests/fragment.spec.ts

@@ -0,0 +1,14 @@
+import { transformWithPlugin } from './utils'
+
+describe('Fragment', () => {
+  test('<>', () => {
+    const code = `
+      const el = (
+        <>
+          <p></p>
+        </>
+      )
+    `
+    transformWithPlugin(code)
+  })
+})