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

Use a helper function for React "inlining"

Browse Source 
Either due to lower parsing costs or better type inference, this seems
to perform better than direct object inlining. (All along, the main win
was skipping a loop through props, not avoiding a function call.)
This commit is contained in:
Ben Alpert
2015-11-10 21:10:06 -08:00
parent 3f41023e02
commit 3cad287233
19 changed files with 68 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/babel-plugin-transform-react-inline-elements/src/index.js
View File

@@ -24,7 +24,6 @@ export default function ({ types: t }) {
// init
let isComponent = true;
let props = t.objectExpression([]);
let obj = t.objectExpression([]);
let key = t.nullLiteral();
let type = open.name;
@@ -33,10 +32,6 @@ export default function ({ types: t }) {
isComponent = false;
}
function pushElemProp(key, value) {
pushProp(obj.properties, t.identifier(key), value);
}
function pushProp(objProps, key, value) {
if (t.isJSXExpressionContainer(value)) value = value.expression;
objProps.push(t.objectProperty(key, value));
@@ -70,16 +65,8 @@ export default function ({ types: t }) {
}
}
// metadata
pushElemProp("$$typeof", file.addHelper("typeofReactElement"));
pushElemProp("type", type);
pushElemProp("key", key);
pushElemProp("ref", t.nullLiteral());
pushElemProp("props", props);
pushElemProp("_owner", t.nullLiteral());
path.replaceWith(obj);
let el = t.callExpression(file.addHelper("createRawReactElement"), [type, key, props]);
path.replaceWith(el);
}
}
};