diff --git a/packages/babel-plugin-transform-react-inline-elements/src/index.js b/packages/babel-plugin-transform-react-inline-elements/src/index.js index 93e7564e57..98bccdc51c 100644 --- a/packages/babel-plugin-transform-react-inline-elements/src/index.js +++ b/packages/babel-plugin-transform-react-inline-elements/src/index.js @@ -12,6 +12,13 @@ export default function ({ types: t }) { return t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: name }); } + function getAttributeValue(attr) { + let value = attr.value; + if (!value) return t.identifier("true"); + if (t.isJSXExpressionContainer(value)) value = value.expression; + return value; + } + return { visitor: { JSXElement(path, file) { @@ -33,18 +40,17 @@ export default function ({ types: t }) { } function pushProp(objProps, key, value) { - if (t.isJSXExpressionContainer(value)) value = value.expression; objProps.push(t.objectProperty(key, value)); } // props for (let attr of (open.attributes: Array)) { if (isJSXAttributeOfName(attr, "key")) { - key = attr.value; + key = getAttributeValue(attr); } else { let name = attr.name.name; let propertyKey = t.isValidIdentifier(name) ? t.identifier(name) : t.stringLiteral(name); - pushProp(props.properties, propertyKey, attr.value || t.identifier("true")); + pushProp(props.properties, propertyKey, getAttributeValue(attr)); } } @@ -61,7 +67,7 @@ export default function ({ types: t }) { if (props.properties.length) { props = t.callExpression(file.addHelper("defaultProps"), [defProps, props]); } else { - props = defProps; + props = t.logicalExpression("||", defProps, props); } } diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/component/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/component/expected.js index 1c42c05967..d5eadb5b14 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/component/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/component/expected.js @@ -1 +1 @@ -babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps); \ No newline at end of file +babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps || {}); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/key-computed/actual.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/key-computed/actual.js new file mode 100644 index 0000000000..890ce55647 --- /dev/null +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/key-computed/actual.js @@ -0,0 +1 @@ + diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/key-computed/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/key-computed/expected.js new file mode 100644 index 0000000000..bf6853e7eb --- /dev/null +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/key-computed/expected.js @@ -0,0 +1,3 @@ +babelHelpers.createRawReactElement(Foo, "foo" + "baz", babelHelpers.defaultProps(Foo.defaultProps, { + "data-value": "bar" +})); diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/multiline/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/multiline/expected.js index 1c42c05967..d5eadb5b14 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/multiline/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/multiline/expected.js @@ -1 +1 @@ -babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps); \ No newline at end of file +babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps || {}); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested-components/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested-components/expected.js index 6f84850b3a..61ff4ecd4b 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested-components/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested-components/expected.js @@ -1,4 +1,4 @@ babelHelpers.createRawReactElement(Foo, null, babelHelpers.defaultProps(Foo.defaultProps, { className: "foo", - children: [bar, babelHelpers.createRawReactElement(Baz, "baz", Baz.defaultProps)] + children: [bar, babelHelpers.createRawReactElement(Baz, "baz", Baz.defaultProps || {})] })); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested/expected.js index 105760a00a..3a5eb10f31 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested/expected.js @@ -1,4 +1,4 @@ babelHelpers.createRawReactElement("div", null, { className: "foo", - children: [bar, babelHelpers.createRawReactElement(Baz, "baz", Baz.defaultProps)] + children: [bar, babelHelpers.createRawReactElement(Baz, "baz", Baz.defaultProps || {})] }); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-component/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-component/expected.js index 1c42c05967..d5eadb5b14 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-component/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-component/expected.js @@ -1 +1 @@ -babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps); \ No newline at end of file +babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps || {}); \ No newline at end of file