diff --git a/package.json b/package.json
index bdbe2f971076..28cc06d5dda9 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
"packages/*"
],
"devDependencies": {
+ "@babel/plugin-syntax-jsx": "^7.2.0",
"@babel/cli": "^7.0.0",
"@babel/code-frame": "^7.0.0",
"@babel/core": "^7.0.0",
diff --git a/packages/babel-plugin-react-jsx/README.md b/packages/babel-plugin-react-jsx/README.md
new file mode 100644
index 000000000000..3e2858d310c6
--- /dev/null
+++ b/packages/babel-plugin-react-jsx/README.md
@@ -0,0 +1,5 @@
+This package is intended to eventually replace the current `@babel/plugin-transform-react-jsx`, changing the JSX transform from targeting `React.createElement(type, props, children)` to `React.jsx(types, props, key)`.
+
+https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md
+
+**This is experimental and not intended to be used directly.**
diff --git a/packages/babel-plugin-react-jsx/__tests__/TransformJSXToReactCreateElement-test.js b/packages/babel-plugin-react-jsx/__tests__/TransformJSXToReactCreateElement-test.js
new file mode 100644
index 000000000000..6e44eaeaec95
--- /dev/null
+++ b/packages/babel-plugin-react-jsx/__tests__/TransformJSXToReactCreateElement-test.js
@@ -0,0 +1,392 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/* eslint-disable quotes */
+'use strict';
+
+const babel = require('@babel/core');
+const codeFrame = require('@babel/code-frame');
+const {wrap} = require('jest-snapshot-serializer-raw');
+
+function transform(input, options) {
+ return wrap(
+ babel.transform(input, {
+ configFile: false,
+ plugins: [
+ '@babel/plugin-syntax-jsx',
+ '@babel/plugin-transform-arrow-functions',
+ ...(options && options.development
+ ? [
+ '@babel/plugin-transform-react-jsx-source',
+ '@babel/plugin-transform-react-jsx-self',
+ ]
+ : []),
+ [
+ './packages/babel-plugin-react-jsx',
+ {
+ development: __DEV__,
+ useBuiltIns: true,
+ useCreateElement: true,
+ ...options,
+ },
+ ],
+ ],
+ }).code
+ );
+}
+
+describe('transform react to jsx', () => {
+ it('fragment with no children', () => {
+ expect(transform(`var x = <>`)).toMatchSnapshot();
+ });
+
+ it('React.Fragment to set keys and source', () => {
+ expect(
+ transform(`var x =
`, {
+ development: true,
+ })
+ ).toMatchSnapshot();
+ });
+
+ it('should properly handle comments adjacent to children', () => {
+ expect(
+ transform(`
+ var x = (
+
+ {/* A comment at the beginning */}
+ {/* A second comment at the beginning */}
+
+ {/* A nested comment */}
+
+ {/* A sandwiched comment */}
+
+ );
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('adds appropriate new lines when using spread attribute', () => {
+ expect(transform(`
+ foo
+ {"bar"}
+ baz
+
+ buz
+ bang
+
+ qux
+ {null}
+ quack
+
/>`)).toMatchSnapshot();
+ });
+
+ it('should allow js namespacing', () => {
+ expect(transform(`
+ < >
+ <>
+ Hello
+ world
+
+ <>
+ Goodbye
+ world
+
+
+
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('should avoid wrapping in extra parens if not needed', () => {
+ expect(
+ transform(`
+ var x =
+
;
+
+ var x =
+ {props.children}
+
;
+
+ var x =
+ {props.children}
+ ;
+
+ var x =
+ ;
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('should convert simple tags', () => {
+ expect(transform(`var x =
;`)).toMatchSnapshot();
+ });
+
+ it('should convert simple text', () => {
+ expect(transform(`var x = text
;`)).toMatchSnapshot();
+ });
+
+ it('should disallow spread children', () => {
+ let _error;
+ const code = `{...children}
;`;
+ try {
+ transform(code);
+ } catch (error) {
+ _error = error;
+ }
+ expect(_error).toEqual(
+ new SyntaxError(
+ 'undefined: Spread children are not supported in React.' +
+ '\n' +
+ codeFrame.codeFrameColumns(
+ code,
+ {start: {line: 1, column: 6}},
+ {highlightCode: true}
+ )
+ )
+ );
+ });
+
+ it('should escape xhtml jsxattribute', () => {
+ expect(
+ transform(`
+
;
+
;
+
;
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('should escape xhtml jsxtext', () => {
+ /* eslint-disable no-irregular-whitespace */
+ expect(
+ transform(`
+ wow
;
+ wôw
;
+
+ w & w
;
+ w & w
;
+
+ w w
;
+ this should not parse as unicode: \u00a0
;
+ this should parse as nbsp:
;
+ this should parse as unicode: {'\u00a0 '}
;
+
+ w < w
;
+ `)
+ ).toMatchSnapshot();
+ /*eslint-enable */
+ });
+
+ it('should handle attributed elements', () => {
+ expect(
+ transform(`
+ var HelloMessage = React.createClass({
+ render: function() {
+ return Hello {this.props.name}
;
+ }
+ });
+
+ React.render(
+ Sebastian
+
+ } />, mountNode);
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('should handle has own property correctly', () => {
+ expect(
+ transform(`testing ;`)
+ ).toMatchSnapshot();
+ });
+
+ it('should have correct comma in nested children', () => {
+ expect(
+ transform(`
+ var x = ;
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('should insert commas after expressions before whitespace', () => {
+ expect(
+ transform(`
+ var x =
+
+
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('should not add quotes to identifier names', () => {
+ expect(
+ transform(`var e =
;`)).toMatchSnapshot();
+ });
+
+ it('should not strip tags with a single child of nbsp', () => {
+ expect(transform(`
;`)).toMatchSnapshot();
+ });
+
+ it('should properly handle comments between props', () => {
+ expect(
+ transform(`
+ var x = (
+
+
+ );
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('should quote jsx attributes', () => {
+ expect(
+ transform(`Button `)
+ ).toMatchSnapshot();
+ });
+
+ it('should support xml namespaces if flag', () => {
+ expect(
+ transform('
`)).toMatchSnapshot();
+ });
+
+ it('fragments to set keys', () => {
+ expect(
+ transform(`var x =
`, {
+ development: true,
+ })
+ ).toMatchSnapshot();
+ });
+
+ it('nonStatic children', () => {
+ expect(
+ transform(
+ `var x = (
+
+ {[
+ );
+ `,
+ {
+ development: true,
+ }
+ )
+ ).toMatchSnapshot();
+ });
+
+ it('static children', () => {
+ expect(
+ transform(
+ `var x = (
+
+
+ );
+ `,
+ {
+ development: true,
+ }
+ )
+ ).toMatchSnapshot();
+ });
+
+ it('uses jsxDEV instead of jsx in dev mode', () => {
+ expect(
+ transform(`var x = Hi `, {development: true})
+ ).toMatchSnapshot();
+ });
+
+ it('properly passes in source and self', () => {
+ expect(
+ transform(`var x =
;`, {development: true})
+ ).toMatchSnapshot();
+ });
+
+ it('should properly handle potentially null variables', () => {
+ expect(
+ transform(`
+ var foo = null;
+ var x =
;
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('properly handles keys', () => {
+ expect(
+ transform(`var x = (
+
+ );`)
+ ).toMatchSnapshot();
+ });
+
+ it('uses createElement when the key comes after a spread', () => {
+ expect(
+ transform(`var x = (
+
+ );`)
+ ).toMatchSnapshot();
+ });
+
+ it('uses jsx when the key comes before a spread', () => {
+ expect(
+ transform(`var x = (
+
+ );`)
+ ).toMatchSnapshot();
+ });
+
+ it('should properly handle comments adjacent to children', () => {
+ expect(
+ transform(`
+ var x = (
+
+ {/* A comment at the beginning */}
+ {/* A second comment at the beginning */}
+
+ {/* A nested comment */}
+
+ {/* A sandwiched comment */}
+
+ );
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('adds appropriate new lines when using spread attribute', () => {
+ expect(transform(`
+ foo
+ {"bar"}
+ baz
+
+ buz
+ bang
+
+ qux
+ {null}
+ quack
+
/>`)).toMatchSnapshot();
+ });
+
+ it('should allow js namespacing', () => {
+ expect(transform(`
+ < >
+ <>
+ Hello
+ world
+
+ <>
+ Goodbye
+ world
+
+
+
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('should avoid wrapping in extra parens if not needed', () => {
+ expect(
+ transform(`
+ var x =
+
;
+
+ var x =
+ {props.children}
+
;
+
+ var x =
+ {props.children}
+ ;
+
+ var x =
+ ;
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('should convert simple tags', () => {
+ expect(transform(`var x =
;`)).toMatchSnapshot();
+ });
+
+ it('should convert simple text', () => {
+ expect(transform(`var x = text
;`)).toMatchSnapshot();
+ });
+
+ it('should disallow spread children', () => {
+ let _error;
+ const code = `{...children}
;`;
+ try {
+ transform(code);
+ } catch (error) {
+ _error = error;
+ }
+ expect(_error).toEqual(
+ new SyntaxError(
+ 'undefined: Spread children are not supported in React.' +
+ '\n' +
+ codeFrame.codeFrameColumns(
+ code,
+ {start: {line: 1, column: 6}},
+ {highlightCode: true}
+ )
+ )
+ );
+ });
+
+ it('should escape xhtml jsxattribute', () => {
+ expect(
+ transform(`
+
;
+
;
+
;
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('should escape xhtml jsxtext', () => {
+ /* eslint-disable no-irregular-whitespace */
+ expect(
+ transform(`
+ wow
;
+ wôw
;
+
+ w & w
;
+ w & w
;
+
+ w w
;
+ this should not parse as unicode: \u00a0
;
+ this should parse as nbsp:
;
+ this should parse as unicode: {'\u00a0 '}
;
+
+ w < w
;
+ `)
+ ).toMatchSnapshot();
+ /*eslint-enable */
+ });
+
+ it('should handle attributed elements', () => {
+ expect(
+ transform(`
+ var HelloMessage = React.createClass({
+ render: function() {
+ return Hello {this.props.name}
;
+ }
+ });
+
+ React.render(
+ Sebastian
+
+ } />, mountNode);
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('should handle has own property correctly', () => {
+ expect(
+ transform(`testing ;`)
+ ).toMatchSnapshot();
+ });
+
+ it('should have correct comma in nested children', () => {
+ expect(
+ transform(`
+ var x = ;
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('should insert commas after expressions before whitespace', () => {
+ expect(
+ transform(`
+ var x =
+
+
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('should not add quotes to identifier names', () => {
+ expect(
+ transform(`var e =
;`)).toMatchSnapshot();
+ });
+
+ it('should not strip tags with a single child of nbsp', () => {
+ expect(transform(`
;`)).toMatchSnapshot();
+ });
+
+ it('should properly handle comments between props', () => {
+ expect(
+ transform(`
+ var x = (
+
+
+ );
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it('should quote jsx attributes', () => {
+ expect(
+ transform(`Button `)
+ ).toMatchSnapshot();
+ });
+
+ it('should support xml namespaces if flag', () => {
+ expect(
+ transform('
to distinguish it
+ // from
. This is an intermediary
+ // step while we deprecate key spread from props. Afterwards,
+ // we will remove createElement entirely
+ function shouldUseCreateElement(path) {
+ const openingPath = path.get('openingElement');
+ const attributes = openingPath.node.attributes;
+
+ let seenPropsSpread = false;
+ for (let i = 0; i < attributes.length; i++) {
+ const attr = attributes[i];
+ if (
+ seenPropsSpread &&
+ t.isJSXAttribute(attr) &&
+ attr.name.name === 'key'
+ ) {
+ return true;
+ } else if (t.isJSXSpreadAttribute(attr)) {
+ seenPropsSpread = true;
+ }
+ }
+ return false;
+ }
+
+ // Builds JSX into:
+ // Production: React.jsx(type, arguments, key)
+ // Development: React.jsxDEV(type, arguments, key, isStaticChildren, source, self)
+ function buildJSXElementCall(path, file) {
+ if (opts.filter && !opts.filter(path.node, file)) {
+ return;
+ }
+
+ const openingPath = path.get('openingElement');
+ openingPath.parent.children = t.react.buildChildren(openingPath.parent);
+
+ const tagExpr = convertJSXIdentifier(
+ openingPath.node.name,
+ openingPath.node,
+ );
+ const args = [];
+
+ let tagName;
+ if (t.isIdentifier(tagExpr)) {
+ tagName = tagExpr.name;
+ } else if (t.isLiteral(tagExpr)) {
+ tagName = tagExpr.value;
+ }
+
+ const state = {
+ tagExpr: tagExpr,
+ tagName: tagName,
+ args: args,
+ };
+
+ if (opts.pre) {
+ opts.pre(state, file);
+ }
+
+ let attribs = [];
+ let key;
+ let source;
+ let self;
+
+ // for React.jsx, key, __source (dev), and __self (dev) is passed in as
+ // a separate argument rather than in the args object. We go through the
+ // props and filter out these three keywords so we can pass them in
+ // as separate arguments later
+ for (let i = 0; i < openingPath.node.attributes.length; i++) {
+ const attr = openingPath.node.attributes[i];
+ if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
+ if (attr.name.name === 'key') {
+ key = convertAttribute(attr).value;
+ } else if (attr.name.name === '__source') {
+ source = convertAttribute(attr).value;
+ } else if (attr.name.name === '__self') {
+ self = convertAttribute(attr).value;
+ } else {
+ attribs.push(attr);
+ }
+ } else {
+ attribs.push(attr);
+ }
+ }
+
+ if (attribs.length || path.node.children.length) {
+ attribs = buildJSXOpeningElementAttributes(
+ attribs,
+ file,
+ path.node.children,
+ );
+ } else {
+ // attributes should never be null
+ attribs = t.objectExpression([]);
+ }
+
+ args.push(attribs);
+
+ if (!file.opts.development) {
+ if (key !== undefined) {
+ args.push(key);
+ }
+ } else {
+ // isStaticChildren, __source, and __self are only used in development
+ args.push(
+ key === undefined ? t.identifier('undefined') : key,
+ t.booleanLiteral(path.node.children.length > 1),
+ source === undefined ? t.identifier('undefined') : source,
+ self === undefined ? t.identifier('undefined') : self,
+ );
+ }
+
+ if (opts.post) {
+ opts.post(state, file);
+ }
+ return (
+ state.call ||
+ t.callExpression(
+ path.node.children.length > 1 ? state.staticCallee : state.callee,
+ args,
+ )
+ );
+ }
+
+ // Builds props for React.jsx. This function adds children into the props
+ // and ensures that props is always an object
+ function buildJSXOpeningElementAttributes(attribs, file, children) {
+ let _props = [];
+ const objs = [];
+
+ const useBuiltIns = file.opts.useBuiltIns || false;
+ if (typeof useBuiltIns !== 'boolean') {
+ throw new Error(
+ 'transform-react-jsx currently only accepts a boolean option for ' +
+ 'useBuiltIns (defaults to false)',
+ );
+ }
+
+ while (attribs.length) {
+ const prop = attribs.shift();
+ if (t.isJSXSpreadAttribute(prop)) {
+ _props = pushProps(_props, objs);
+ objs.push(prop.argument);
+ } else {
+ _props.push(convertAttribute(prop));
+ }
+ }
+
+ // In React.JSX, children is no longer a separate argument, but passed in
+ // through the argument object
+ if (children && children.length > 0) {
+ if (children.length === 1) {
+ _props.push(t.objectProperty(t.identifier('children'), children[0]));
+ } else {
+ _props.push(
+ t.objectProperty(
+ t.identifier('children'),
+ t.arrayExpression(children),
+ ),
+ );
+ }
+ }
+
+ pushProps(_props, objs);
+
+ if (objs.length === 1) {
+ // only one object
+ if (!t.isObjectExpression(objs[0])) {
+ // if the prop object isn't an object, use Object.assign or _extends
+ // to ensure that the prop will always be an object (as opposed to a variable
+ // that could be null at some point)
+ const expressionHelper = useBuiltIns
+ ? t.memberExpression(t.identifier('Object'), t.identifier('assign'))
+ : file.addHelper('extends');
+
+ attribs = t.callExpression(expressionHelper, [
+ t.objectExpression([]),
+ objs[0],
+ ]);
+ } else {
+ attribs = objs[0];
+ }
+ } else {
+ // looks like we have multiple objects
+ if (!t.isObjectExpression(objs[0])) {
+ objs.unshift(t.objectExpression([]));
+ }
+
+ const expressionHelper = useBuiltIns
+ ? t.memberExpression(t.identifier('Object'), t.identifier('assign'))
+ : file.addHelper('extends');
+
+ // spread it
+ attribs = t.callExpression(expressionHelper, objs);
+ }
+
+ return attribs;
+ }
+
+ // Builds JSX Fragment <> into
+ // Production: React.jsx(type, arguments)
+ // Development: React.jsxDEV(type, { children})
+ function buildJSXFragmentCall(path, file) {
+ if (opts.filter && !opts.filter(path.node, file)) {
+ return;
+ }
+
+ const openingPath = path.get('openingElement');
+ openingPath.parent.children = t.react.buildChildren(openingPath.parent);
+
+ const args = [];
+ const tagName = null;
+ const tagExpr = file.get('jsxFragIdentifier')();
+
+ const state = {
+ tagExpr: tagExpr,
+ tagName: tagName,
+ args: args,
+ };
+
+ if (opts.pre) {
+ opts.pre(state, file);
+ }
+
+ let childrenNode;
+ if (path.node.children.length > 0) {
+ if (path.node.children.length === 1) {
+ childrenNode = path.node.children[0];
+ } else {
+ childrenNode = t.arrayExpression(path.node.children);
+ }
+ }
+
+ args.push(
+ t.objectExpression(
+ childrenNode !== undefined
+ ? [t.objectProperty(t.identifier('children'), childrenNode)]
+ : [],
+ ),
+ );
+
+ if (file.opts.development) {
+ args.push(
+ t.identifier('undefined'),
+ t.booleanLiteral(path.node.children.length > 1),
+ );
+ }
+
+ if (opts.post) {
+ opts.post(state, file);
+ }
+
+ return (
+ state.call ||
+ t.callExpression(
+ path.node.children.length > 1 ? state.staticCallee : state.callee,
+ args,
+ )
+ );
+ }
+
+ // Builds JSX into:
+ // Production: React.createElement(type, arguments, children)
+ // Development: React.createElement(type, arguments, children, source, self)
+ function buildCreateElementCall(path, file) {
+ if (opts.filter && !opts.filter(path.node, file)) {
+ return;
+ }
+
+ const openingPath = path.get('openingElement');
+ openingPath.parent.children = t.react.buildChildren(openingPath.parent);
+
+ const tagExpr = convertJSXIdentifier(
+ openingPath.node.name,
+ openingPath.node,
+ );
+ const args = [];
+
+ let tagName;
+ if (t.isIdentifier(tagExpr)) {
+ tagName = tagExpr.name;
+ } else if (t.isLiteral(tagExpr)) {
+ tagName = tagExpr.value;
+ }
+
+ const state = {
+ tagExpr: tagExpr,
+ tagName: tagName,
+ args: args,
+ };
+
+ if (opts.pre) {
+ opts.pre(state, file);
+ }
+
+ let attribs = openingPath.node.attributes;
+ if (attribs.length) {
+ attribs = buildCreateElementOpeningElementAttributes(attribs, file);
+ } else {
+ attribs = t.nullLiteral();
+ }
+
+ args.push(attribs, ...path.node.children);
+
+ if (opts.post) {
+ opts.post(state, file);
+ }
+
+ return state.call || t.callExpression(state.oldCallee, args);
+ }
+
+ function pushProps(_props, objs) {
+ if (!_props.length) {
+ return _props;
+ }
+
+ objs.push(t.objectExpression(_props));
+ return [];
+ }
+
+ /**
+ * The logic for this is quite terse. It's because we need to
+ * support spread elements. We loop over all attributes,
+ * breaking on spreads, we then push a new object containing
+ * all prior attributes to an array for later processing.
+ */
+ function buildCreateElementOpeningElementAttributes(attribs, file) {
+ let _props = [];
+ const objs = [];
+
+ const useBuiltIns = file.opts.useBuiltIns || false;
+ if (typeof useBuiltIns !== 'boolean') {
+ throw new Error(
+ 'transform-react-jsx currently only accepts a boolean option for ' +
+ 'useBuiltIns (defaults to false)',
+ );
+ }
+
+ while (attribs.length) {
+ const prop = attribs.shift();
+ if (t.isJSXSpreadAttribute(prop)) {
+ _props = pushProps(_props, objs);
+ objs.push(prop.argument);
+ } else {
+ const attr = convertAttribute(prop);
+ _props.push(attr);
+ }
+ }
+
+ pushProps(_props, objs);
+
+ if (objs.length === 1) {
+ // only one object
+ attribs = objs[0];
+ } else {
+ // looks like we have multiple objects
+ if (!t.isObjectExpression(objs[0])) {
+ objs.unshift(t.objectExpression([]));
+ }
+
+ const expressionHelper = useBuiltIns
+ ? t.memberExpression(t.identifier('Object'), t.identifier('assign'))
+ : file.addHelper('extends');
+
+ // spread it
+ attribs = t.callExpression(expressionHelper, objs);
+ }
+
+ return attribs;
+ }
+
+ function buildCreateElementFragmentCall(path, file) {
+ if (opts.filter && !opts.filter(path.node, file)) {
+ return;
+ }
+
+ const openingPath = path.get('openingElement');
+ openingPath.parent.children = t.react.buildChildren(openingPath.parent);
+
+ const args = [];
+ const tagName = null;
+ const tagExpr = file.get('jsxFragIdentifier')();
+
+ const state = {
+ tagExpr: tagExpr,
+ tagName: tagName,
+ args: args,
+ };
+
+ if (opts.pre) {
+ opts.pre(state, file);
+ }
+
+ // no attributes are allowed with <> syntax
+ args.push(t.nullLiteral(), ...path.node.children);
+
+ if (opts.post) {
+ opts.post(state, file);
+ }
+
+ return state.call || t.callExpression(state.oldCallee, args);
+ }
+}
+
+module.exports = function(babel) {
+ const {types: t} = babel;
+
+ const createIdentifierParser = id => () => {
+ return id
+ .split('.')
+ .map(name => t.identifier(name))
+ .reduce((object, property) => t.memberExpression(object, property));
+ };
+
+ const visitor = helper(babel, {
+ pre(state) {
+ const tagName = state.tagName;
+ const args = state.args;
+ if (t.react.isCompatTag(tagName)) {
+ args.push(t.stringLiteral(tagName));
+ } else {
+ args.push(state.tagExpr);
+ }
+ },
+
+ post(state, pass) {
+ state.callee = pass.get('jsxIdentifier')();
+ state.staticCallee = pass.get('jsxStaticIdentifier')();
+ state.oldCallee = pass.get('oldJSXIdentifier')();
+ },
+ });
+
+ visitor.Program = {
+ enter(path, state) {
+ state.set(
+ 'oldJSXIdentifier',
+ createIdentifierParser('React.createElement'),
+ );
+ state.set(
+ 'jsxIdentifier',
+ createIdentifierParser(
+ state.opts.development ? 'React.jsxDEV' : 'React.jsx',
+ ),
+ );
+ state.set(
+ 'jsxStaticIdentifier',
+ createIdentifierParser(
+ state.opts.development ? 'React.jsxDEV' : 'React.jsxs',
+ ),
+ );
+ state.set('jsxFragIdentifier', createIdentifierParser('React.Fragment'));
+ },
+ };
+
+ visitor.JSXAttribute = function(path) {
+ if (t.isJSXElement(path.node.value)) {
+ path.node.value = t.jsxExpressionContainer(path.node.value);
+ }
+ };
+
+ return {
+ name: 'transform-react-jsx',
+ visitor,
+ };
+};
diff --git a/packages/react/src/ReactElement.js b/packages/react/src/ReactElement.js
index 9416a313b964..163ae077f0ac 100644
--- a/packages/react/src/ReactElement.js
+++ b/packages/react/src/ReactElement.js
@@ -179,14 +179,24 @@ export function jsx(type, config, maybeKey) {
let key = null;
let ref = null;
- if (hasValidRef(config)) {
- ref = config.ref;
+ // Currently, key can be spread in as a prop. This causes a potential
+ // issue if key is also explicitly declared (ie.
+ // or
). We want to deprecate key spread,
+ // but as an intermediary step, we will use jsxDEV for everything except
+ //
, because we aren't currently able to tell if
+ // key is explicitly declared to be undefined or not.
+ if (maybeKey !== undefined) {
+ key = '' + maybeKey;
}
if (hasValidKey(config)) {
key = '' + config.key;
}
+ if (hasValidRef(config)) {
+ ref = config.ref;
+ }
+
// Remaining properties are added to a new props object
for (propName in config) {
if (
@@ -197,12 +207,6 @@ export function jsx(type, config, maybeKey) {
}
}
- // intentionally not checking if key was set above
- // this key is higher priority as it's static
- if (maybeKey !== undefined) {
- key = '' + maybeKey;
- }
-
// Resolve default props
if (type && type.defaultProps) {
const defaultProps = type.defaultProps;
@@ -239,14 +243,24 @@ export function jsxDEV(type, config, maybeKey, source, self) {
let key = null;
let ref = null;
- if (hasValidRef(config)) {
- ref = config.ref;
+ // Currently, key can be spread in as a prop. This causes a potential
+ // issue if key is also explicitly declared (ie.
+ // or
). We want to deprecate key spread,
+ // but as an intermediary step, we will use jsxDEV for everything except
+ //
, because we aren't currently able to tell if
+ // key is explicitly declared to be undefined or not.
+ if (maybeKey !== undefined) {
+ key = '' + maybeKey;
}
if (hasValidKey(config)) {
key = '' + config.key;
}
+ if (hasValidRef(config)) {
+ ref = config.ref;
+ }
+
// Remaining properties are added to a new props object
for (propName in config) {
if (
@@ -257,12 +271,6 @@ export function jsxDEV(type, config, maybeKey, source, self) {
}
}
- // intentionally not checking if key was set above
- // this key is higher priority as it's static
- if (maybeKey !== undefined) {
- key = '' + maybeKey;
- }
-
// Resolve default props
if (type && type.defaultProps) {
const defaultProps = type.defaultProps;
diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js
index 6a1626a2e27e..b81fe9c94203 100644
--- a/packages/react/src/ReactElementValidator.js
+++ b/packages/react/src/ReactElementValidator.js
@@ -43,6 +43,8 @@ if (__DEV__) {
propTypesMisspellWarningShown = false;
}
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
function getDeclarationErrorAddendum() {
if (ReactCurrentOwner.current) {
const name = getComponentName(ReactCurrentOwner.current.type);
@@ -334,12 +336,26 @@ export function jsxWithValidation(
// We don't want exception behavior to differ between dev and prod.
// (Rendering will throw with a helpful message and as soon as the type is
// fixed, the key warnings will appear.)
+
if (validType) {
const children = props.children;
if (children !== undefined) {
if (isStaticChildren) {
- for (let i = 0; i < children.length; i++) {
- validateChildKeys(children[i], type);
+ if (Array.isArray(children)) {
+ for (let i = 0; i < children.length; i++) {
+ validateChildKeys(children[i], type);
+ }
+
+ if (Object.freeze) {
+ Object.freeze(children);
+ }
+ } else {
+ warning(
+ false,
+ 'React.jsx: Static children should always be an array. ' +
+ 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +
+ 'Use the Babel transform instead.',
+ );
}
} else {
validateChildKeys(children, type);
@@ -347,7 +363,7 @@ export function jsxWithValidation(
}
}
- if (props.key !== undefined) {
+ if (hasOwnProperty.call(props, 'key')) {
warning(
false,
'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
diff --git a/packages/react/src/__tests__/ReactElementJSX-test.internal.js b/packages/react/src/__tests__/ReactElementJSX-test.internal.js
index db62a2c51ec1..23135d15de8e 100644
--- a/packages/react/src/__tests__/ReactElementJSX-test.internal.js
+++ b/packages/react/src/__tests__/ReactElementJSX-test.internal.js
@@ -215,6 +215,18 @@ describe('ReactElement.jsx', () => {
);
});
+ it('warns when a jsxs is passed something that is not an array', () => {
+ const container = document.createElement('div');
+ expect(() =>
+ ReactDOM.render(React.jsxs('div', {children: 'foo'}, null), container),
+ ).toWarnDev(
+ 'React.jsx: Static children should always be an array. ' +
+ 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +
+ 'Use the Babel transform instead.',
+ {withoutStack: true},
+ );
+ });
+
it('should warn when `key` is being accessed on a host element', () => {
const element = React.jsxs('div', {}, '3');
expect(() => void element.props.key).toWarnDev(