diff --git a/src/babel/transformation/transformers/optimisation/react.constant-elements.js b/src/babel/transformation/transformers/optimisation/react.constant-elements.js index f269f63edf..42cd5b8be0 100644 --- a/src/babel/transformation/transformers/optimisation/react.constant-elements.js +++ b/src/babel/transformation/transformers/optimisation/react.constant-elements.js @@ -33,9 +33,11 @@ export function JSXElement(node, parent, scope, file) { var state = { isImmutable: true }; this.traverse(immutabilityVisitor, state); - this.skip(); - if (state.isImmutable) this.hoist(); + if (state.isImmutable) { + this.hoist(); + this.skip(); + } node._hoisted = true; } diff --git a/src/babel/traversal/path/hoister.js b/src/babel/traversal/path/hoister.js index 2ba87bf4c5..6bb4283364 100644 --- a/src/babel/traversal/path/hoister.js +++ b/src/babel/traversal/path/hoister.js @@ -109,6 +109,14 @@ export default class PathHoister { ]) ]); + var parent = this.path.parentPath; + + if (parent.isJSXElement() && this.path.container === parent.node.children) { + // turning the `span` in `
` to an expression so we need to wrap it with + // an expression container + uid = t.jSXExpressionContainer(uid); + } + this.path.replaceWith(uid); } } diff --git a/test/core/fixtures/transformation/optimisation.react.constant-elements/children/actual.js b/test/core/fixtures/transformation/optimisation.react.constant-elements/children/actual.js new file mode 100644 index 0000000000..5c49d53731 --- /dev/null +++ b/test/core/fixtures/transformation/optimisation.react.constant-elements/children/actual.js @@ -0,0 +1,7 @@ +var Foo = React.createClass({ + render: function() { + return
+ +
; + } +}); diff --git a/test/core/fixtures/transformation/optimisation.react.constant-elements/children/expected.js b/test/core/fixtures/transformation/optimisation.react.constant-elements/children/expected.js new file mode 100644 index 0000000000..6f8b7eb554 --- /dev/null +++ b/test/core/fixtures/transformation/optimisation.react.constant-elements/children/expected.js @@ -0,0 +1,11 @@ +"use strict"; + +var _ref = ; + +var Foo = React.createClass({ + render: function render() { + return
+ {_ref} +
; + } +});