cerxes/babel
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add JSX Fragment syntax support (#6552)

Browse Source 
* Add JSX Fragments to babel-types

* Support JSX fragments in the transform-react-jsx plugin

* Add tests JSX fragments

* Update helper-builder and transform plugin documentations for jsx fragment

* Add generator for jsx fragments

* Add test for jsx fragment generator

* Split jsx transform example into normal and fragment examples

* Remove unnecessary fields from ElementState in babel-helper-builder-react-jsx

* inline [skip ci]
This commit is contained in:
Clement Hoang
2017-11-03 07:43:48 -07:00
committed by Henry Zhu
parent 9e2828322e
commit 1a7194a22f
20 changed files with 322 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
packages/babel-plugin-transform-react-jsx/src/index.js
View File

@@ -2,11 +2,23 @@ import jsx from "@babel/plugin-syntax-jsx";
import helper from "@babel/helper-builder-react-jsx";
export default function({ types: t }, options) {
const pragma = options.pragma || "React.createElement";
const throwIfNamespace =
const THROW_IF_NAMESPACE =
options.throwIfNamespace === undefined ? true : !!options.throwIfNamespace;
const PRAGMA_DEFAULT = options.pragma || "React.createElement";
const PRAGMA_FRAG_DEFAULT = options.pragmaFrag || "React.Fragment";
const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
const JSX_FRAG_ANNOTATION_REGEX = /\*?\s*@jsxFrag\s+([^\s]+)/;
// returns a closure that returns an identifier or memberExpression node
// based on the given id
const createIdentifierParser = (id: string) => () => {
return id
.split(".")
.map(name => t.identifier(name))
.reduce((object, property) => t.memberExpression(object, property));
};
const visitor = helper({
pre(state) {
@@ -23,27 +35,49 @@ export default function({ types: t }, options) {
state.callee = pass.get("jsxIdentifier")();
},
throwIfNamespace,
throwIfNamespace: THROW_IF_NAMESPACE,
});
visitor.Program = function(path, state) {
const { file } = state;
visitor.Program = {
enter(path, state) {
const { file } = state;
let id = pragma;
for (const comment of (file.ast.comments: Array<Object>)) {
const matches = JSX_ANNOTATION_REGEX.exec(comment.value);
if (matches) {
id = matches[1];
break;
let pragma = PRAGMA_DEFAULT;
let pragmaFrag = PRAGMA_FRAG_DEFAULT;
let pragmaSet = !!options.pragma;
let pragmaFragSet = !!options.pragmaFrag;
for (const comment of (file.ast.comments: Array<Object>)) {
const jsxMatches = JSX_ANNOTATION_REGEX.exec(comment.value);
if (jsxMatches) {
pragma = jsxMatches[1];
pragmaSet = true;
}
const jsxFragMatches = JSX_FRAG_ANNOTATION_REGEX.exec(comment.value);
if (jsxFragMatches) {
pragmaFrag = jsxFragMatches[1];
pragmaFragSet = true;
}
}
}
state.set("jsxIdentifier", () =>
id
.split(".")
.map(name => t.identifier(name))
.reduce((object, property) => t.memberExpression(object, property)),
);
state.set("jsxIdentifier", createIdentifierParser(pragma));
state.set("jsxFragIdentifier", createIdentifierParser(pragmaFrag));
state.set("usedFragment", false);
state.set("pragmaSet", pragmaSet);
state.set("pragmaFragSet", pragmaFragSet);
},
exit(path, state) {
if (
state.get("pragmaSet") &&
state.get("usedFragment") &&
!state.get("pragmaFragSet")
) {
throw new Error(
"transform-react-jsx: pragma has been set but " +
"pragmafrag has not been set",
);
}
},
};
visitor.JSXAttribute = function(path) {