>} />`);
+ });
});
diff --git a/src/options.js b/src/options.js
index 160d925f5..ccb4a331f 100644
--- a/src/options.js
+++ b/src/options.js
@@ -9,6 +9,7 @@ export type Options = {|
functionValue: Function,
tabStop: number,
useBooleanShorthandSyntax: boolean,
+ useFragmentShortSyntax: boolean,
sortProps: boolean,
maxInlineAttributesLineLength?: number,
diff --git a/src/parser/parseReactElement.js b/src/parser/parseReactElement.js
index 377c41fbe..7b991bd65 100644
--- a/src/parser/parseReactElement.js
+++ b/src/parser/parseReactElement.js
@@ -1,14 +1,17 @@
/* @flow */
-import React, { type Element as ReactElement } from 'react';
+import React, { type Element as ReactElement, Fragment } from 'react';
import type { Options } from './../options';
import {
createStringTreeNode,
createNumberTreeNode,
createReactElementTreeNode,
+ createReactFragmentTreeNode,
} from './../tree';
import type { TreeNode } from './../tree';
+const supportFragment = Boolean(Fragment);
+
const getReactElementDisplayName = (element: ReactElement<*>): string =>
element.type.displayName ||
element.type.name || // function name
@@ -68,6 +71,10 @@ const parseReactElement = (
.filter(onlyMeaningfulChildren)
.map(child => parseReactElement(child, options));
+ if (supportFragment && element.type === Fragment) {
+ return createReactFragmentTreeNode(key, childrens);
+ }
+
return createReactElementTreeNode(
displayName,
props,
diff --git a/src/parser/parseReactElement.spec.js b/src/parser/parseReactElement.spec.js
index 3c5ff220f..a30188849 100644
--- a/src/parser/parseReactElement.spec.js
+++ b/src/parser/parseReactElement.spec.js
@@ -1,6 +1,6 @@
/* @flow */
-import React from 'react';
+import React, { Fragment } from 'react';
import parseReactElement from './parseReactElement';
const options = {};
@@ -151,4 +151,35 @@ describe('parseReactElement', () => {
childrens: [],
});
});
+
+ it('should parse a react fragment', () => {
+ expect(
+ parseReactElement(
+
+
+
+ ,
+ options
+ )
+ ).toEqual({
+ type: 'ReactFragment',
+ key: 'foo',
+ childrens: [
+ {
+ type: 'ReactElement',
+ displayName: 'div',
+ defaultProps: {},
+ props: {},
+ childrens: [],
+ },
+ {
+ type: 'ReactElement',
+ displayName: 'div',
+ defaultProps: {},
+ props: {},
+ childrens: [],
+ },
+ ],
+ });
+ });
});
diff --git a/src/tree.js b/src/tree.js
index f7f1d3b30..efbf254af 100644
--- a/src/tree.js
+++ b/src/tree.js
@@ -1,6 +1,8 @@
/* @flow */
/* eslint-disable no-use-before-define */
+import type { Key } from 'react';
+
type PropsType = { [key: string]: any };
type DefaultPropsType = { [key: string]: any };
@@ -22,7 +24,17 @@ export type ReactElementTreeNode = {|
childrens: TreeNode[],
|};
-export type TreeNode = StringTreeNode | NumberTreeNode | ReactElementTreeNode;
+export type ReactFragmentTreeNode = {|
+ type: 'ReactFragment',
+ key: ?Key,
+ childrens: TreeNode[],
+|};
+
+export type TreeNode =
+ | StringTreeNode
+ | NumberTreeNode
+ | ReactElementTreeNode
+ | ReactFragmentTreeNode;
export const createStringTreeNode = (value: string): StringTreeNode => ({
type: 'string',
@@ -46,3 +58,12 @@ export const createReactElementTreeNode = (
defaultProps,
childrens,
});
+
+export const createReactFragmentTreeNode = (
+ key: ?Key,
+ childrens: TreeNode[]
+): ReactFragmentTreeNode => ({
+ type: 'ReactFragment',
+ key,
+ childrens,
+});
diff --git a/src/tree.spec.js b/src/tree.spec.js
index 451eb447b..febf01823 100644
--- a/src/tree.spec.js
+++ b/src/tree.spec.js
@@ -4,6 +4,7 @@ import {
createStringTreeNode,
createNumberTreeNode,
createReactElementTreeNode,
+ createReactFragmentTreeNode,
} from './tree';
describe('createStringTreeNode', () => {
@@ -39,3 +40,13 @@ describe('createReactElementTreeNode', () => {
});
});
});
+
+describe('createReactFragmentTreeNode', () => {
+ it('generate a react fragment typed node payload', () => {
+ expect(createReactFragmentTreeNode('foo', ['abc'])).toEqual({
+ type: 'ReactFragment',
+ key: 'foo',
+ childrens: ['abc'],
+ });
+ });
+});