diff --git a/packages/babel-plugin-react-jsx/__tests__/TransformJSXToReactCreateElement-test.js b/packages/babel-plugin-react-jsx/__tests__/TransformJSXToReactCreateElement-test.js
deleted file mode 100644
index d8340607faa91..0000000000000
--- a/packages/babel-plugin-react-jsx/__tests__/TransformJSXToReactCreateElement-test.js
+++ /dev/null
@@ -1,392 +0,0 @@
-/**
- * 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(
- 'unknown: Spread children are not supported in React.' +
- '\n' +
- codeFrame.codeFrameColumns(
- code,
- {start: {line: 1, column: 6}, end: {line: 1, column: 19}},
- {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('
+ `,
+ {
+ autoImport: 'namespace',
+ importSource: 'foobar',
+ }
+ )
+ ).toMatchSnapshot();
+ });
+
+ it('import source pragma overrides regular pragma', () => {
+ expect(
+ transform(
+ `/** @jsxImportSource baz */
+ var x =
+ `,
+ {
+ autoImport: 'namespace',
+ importSource: 'foobar',
+ }
+ )
+ ).toMatchSnapshot();
+ });
+
+ it('multiple pragmas work', () => {
+ expect(
+ transform(
+ `/** Some comment here
+ * @jsxImportSource baz
+ * @jsxAutoImport defaultExport
+ */
+ var x =
+ `,
+ {
+ autoImport: 'namespace',
+ importSource: 'foobar',
+ }
+ )
+ ).toMatchSnapshot();
+ });
+
+ it('throws error when sourceType is module and autoImport is require', () => {
+ const code = `var x =
`;
+ expect(() => {
+ transform(code, {
+ autoImport: 'require',
+ });
+ }).toThrow(
+ 'Babel `sourceType` must be set to `script` for autoImport ' +
+ 'to use `require` syntax. See Babel `sourceType` for details.\n' +
+ codeFrame.codeFrameColumns(
+ code,
+ {start: {line: 1, column: 1}, end: {line: 1, column: 28}},
+ {highlightCode: true}
+ )
+ );
+ });
+
+ it('throws error when sourceType is script and autoImport is not require', () => {
+ const code = `var x =
`;
+ expect(() => {
+ transform(
+ code,
+ {
+ autoImport: 'namespace',
+ },
+ {sourceType: 'script'}
+ );
+ }).toThrow(
+ 'Babel `sourceType` must be set to `module` for autoImport ' +
+ 'to use `namespace` syntax. See Babel `sourceType` for details.\n' +
+ codeFrame.codeFrameColumns(
+ code,
+ {start: {line: 1, column: 1}, end: {line: 1, column: 28}},
+ {highlightCode: true}
+ )
+ );
+ });
+
+ it("auto import that doesn't exist should throw error", () => {
+ const code = `var x =
`;
+ expect(() => {
+ transform(code, {
+ autoImport: 'foo',
+ });
+ }).toThrow(
+ 'autoImport must be one of the following: none, require, namespace, defaultExport, namedExports\n' +
+ codeFrame.codeFrameColumns(
+ code,
+ {start: {line: 1, column: 1}, end: {line: 1, column: 28}},
+ {highlightCode: true}
+ )
+ );
+ });
+
+ it('auto import can specify source', () => {
+ expect(
+ transform(`var x =
`, {
+ autoImport: 'namespace',
+ importSource: 'foobar',
+ })
+ ).toMatchSnapshot();
+ });
+
+ it('auto import require', () => {
+ expect(
+ transform(
+ `var x = (
+ <>
+
+
+ );`,
+ {
+ autoImport: 'require',
+ },
+ {
+ sourceType: 'script',
+ }
+ )
+ ).toMatchSnapshot();
+ });
+
+ it('auto import namespace', () => {
+ expect(
+ transform(
+ `var x = (
+ <>
+
+
+ );`,
+ {
+ autoImport: 'namespace',
+ }
+ )
+ ).toMatchSnapshot();
+ });
+
+ it('auto import default', () => {
+ expect(
+ transform(
+ `var x = (
+ <>
+
+
+ );`,
+ {
+ autoImport: 'defaultExport',
+ }
+ )
+ ).toMatchSnapshot();
+ });
+
+ it('auto import named exports', () => {
+ expect(
+ transform(
+ `var x = (
+ <>
+
+
+ );`,
+ {
+ autoImport: 'namedExports',
+ }
+ )
+ ).toMatchSnapshot();
+ });
+
+ it('auto import with no JSX', () => {
+ expect(
+ transform(
+ `var foo = "
"`,
+ {
+ autoImport: 'require',
+ },
+ {
+ sourceType: 'script',
+ }
+ )
+ ).toMatchSnapshot();
+ });
+
+ it('complicated scope require', () => {
+ expect(
+ transform(
+ `
+ const Bar = () => {
+ const Foo = () => {
+ const Component = ({thing, ..._react}) => {
+ if (!thing) {
+ var _react2 = "something useless";
+ var b = _react3();
+ var c = _react5();
+ var jsx = 1;
+ var _jsx = 2;
+ return
;
+ };
+ return
;
+ };
+ return
";`;
+
+exports[`transform react to jsx auto import with react already defined 1`] = `
+import * as _react from "react";
+import * as react from "react";
+var y = react.createElement("div", {
+ foo: 1
+});
+
+var x = _react.jsxs("div", {
+ children: [_react.jsx("div", {}, "1"), _react.jsx("div", {
+ meow: "wolf"
+ }, "2"), _react.jsx("div", {}, "3"), _react.createElement("div", Object.assign({}, props, {
+ key: "4"
+ }))]
+});
+`;
+
+exports[`transform react to jsx complicated scope named exports 1`] = `
+import { jsx as _jsx2 } from "react";
+
+const Bar = function () {
+ const Foo = function () {
+ const Component = function ({
+ thing,
+ ..._react
+ }) {
+ if (!thing) {
+ var _react2 = "something useless";
+
+ var b = _react3();
+
+ var jsx = 1;
+ var _jsx = 2;
+ return _jsx2("div", {});
+ }
+
+ ;
+ return _jsx2("span", {});
+ };
+ };
+};
+`;
+
+exports[`transform react to jsx complicated scope require 1`] = `
+var _react4 = require("react");
+
+const Bar = function () {
+ const Foo = function () {
+ const Component = function ({
+ thing,
+ ..._react
+ }) {
+ if (!thing) {
+ var _react2 = "something useless";
+
+ var b = _react3();
+
+ var c = _react5();
+
+ var jsx = 1;
+ var _jsx = 2;
+ return _react4.jsx("div", {});
+ }
+
+ ;
+ return _react4.jsx("span", {});
+ };
+ };
+};
+`;
+
exports[`transform react to jsx concatenates adjacent string literals 1`] = `
var x = React.jsxs("div", {
children: ["foo", "bar", "baz", React.jsx("div", {
@@ -92,6 +316,27 @@ var x = React.jsxDEV(React.Fragment, {
exports[`transform react to jsx fragments to set keys 1`] = `var x = React.jsx(React.Fragment, {}, "foo");`;
+exports[`transform react to jsx import source pragma overrides regular pragma 1`] = `
+import * as _baz from "baz";
+
+/** @jsxImportSource baz */
+var x = _baz.jsx("div", {
+ children: _baz.jsx("span", {})
+});
+`;
+
+exports[`transform react to jsx multiple pragmas work 1`] = `
+import _default from "baz";
+
+/** Some comment here
+ * @jsxImportSource baz
+ * @jsxAutoImport defaultExport
+ */
+var x = _default.jsx("div", {
+ children: _default.jsx("span", {})
+});
+`;
+
exports[`transform react to jsx nonStatic children 1`] = `
var _jsxFileName = "";
var x = React.jsxDEV("div", {
diff --git a/packages/babel-plugin-react-jsx/package.json b/packages/babel-plugin-react-jsx/package.json
index 41243452d4f17..c33a20e06965b 100644
--- a/packages/babel-plugin-react-jsx/package.json
+++ b/packages/babel-plugin-react-jsx/package.json
@@ -5,8 +5,8 @@
"description": "@babel/plugin-transform-react-jsx",
"main": "index.js",
"dependencies": {
+ "@babel/helper-module-imports": "^7.0.0",
"esutils": "^2.0.0"
-
},
"files": [
"README.md",
diff --git a/packages/babel-plugin-react-jsx/src/TransformJSXToReactBabelPlugin.js b/packages/babel-plugin-react-jsx/src/TransformJSXToReactBabelPlugin.js
index 308fc7116f8c0..2d8ebc8c6ec99 100644
--- a/packages/babel-plugin-react-jsx/src/TransformJSXToReactBabelPlugin.js
+++ b/packages/babel-plugin-react-jsx/src/TransformJSXToReactBabelPlugin.js
@@ -24,6 +24,50 @@
'use strict';
const esutils = require('esutils');
+const {
+ isModule,
+ addNamespace,
+ addNamed,
+ addDefault,
+} = require('@babel/helper-module-imports');
+
+// These are all the valid auto import types (under the config autoImport)
+// that a user can specific
+const IMPORT_TYPES = {
+ none: 'none', // default option. Will not import anything
+ require: 'require', // var _react = require("react");
+ namespace: 'namespace', // import * as _react from "react";
+ defaultExport: 'defaultExport', // import _default from "react";
+ namedExports: 'namedExports', // import { jsx } from "react";
+};
+
+const JSX_AUTO_IMPORT_ANNOTATION_REGEX = /\*?\s*@jsxAutoImport\s+([^\s]+)/;
+const JSX_IMPORT_SOURCE_ANNOTATION_REGEX = /\*?\s*@jsxImportSource\s+([^\s]+)/;
+
+// We want to use React.createElement, even in the case of
+// jsx, for
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, types) {
+ 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 &&
+ types.isJSXAttribute(attr) &&
+ attr.name.name === 'key'
+ ) {
+ return true;
+ } else if (types.isJSXSpreadAttribute(attr)) {
+ seenPropsSpread = true;
+ }
+ }
+ return false;
+}
function helper(babel, opts) {
const {types: t} = babel;
@@ -52,7 +96,7 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
visitor.JSXElement = {
exit(path, file) {
let callExpr;
- if (file.opts.useCreateElement || shouldUseCreateElement(path)) {
+ if (shouldUseCreateElement(path, t)) {
callExpr = buildCreateElementCall(path, file);
} else {
callExpr = buildJSXElementCall(path, file);
@@ -71,12 +115,7 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
'Fragment tags are only supported in React 16 and up.',
);
}
- let callExpr;
- if (file.opts.useCreateElement) {
- callExpr = buildCreateElementFragmentCall(path, file);
- } else {
- callExpr = buildJSXFragmentCall(path, file);
- }
+ let callExpr = buildJSXFragmentCall(path, file);
if (callExpr) {
path.replaceWith(t.inherits(callExpr, path.node));
@@ -147,31 +186,6 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
return t.inherits(t.objectProperty(node.name, value), node);
}
- // We want to use React.createElement, even in the case of
- // jsx, for
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)
@@ -262,6 +276,7 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
if (opts.post) {
opts.post(state, file);
}
+
return (
state.call ||
t.callExpression(
@@ -561,38 +576,6 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
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) {
@@ -623,25 +606,183 @@ module.exports = function(babel) {
},
});
- visitor.Program = {
- enter(path, state) {
- state.set(
- 'oldJSXIdentifier',
- createIdentifierParser('React.createElement'),
+ const createIdentifierName = (path, autoImport, name, importName) => {
+ if (autoImport === IMPORT_TYPES.none) {
+ return `React.${name}`;
+ } else if (autoImport === IMPORT_TYPES.namedExports) {
+ if (importName) {
+ const identifierName = `${importName[name]}`;
+ return identifierName;
+ }
+ } else {
+ return `${importName}.${name}`;
+ }
+ };
+
+ function getImportNames(parentPath, state) {
+ const imports = {};
+ parentPath.traverse({
+ JSXElement(path) {
+ if (shouldUseCreateElement(path, t)) {
+ imports.createElement = true;
+ } else if (path.node.children.length > 1) {
+ const importName = state.development ? 'jsxDEV' : 'jsxs';
+ imports[importName] = true;
+ } else {
+ const importName = state.development ? 'jsxDEV' : 'jsx';
+ imports[importName] = true;
+ }
+ },
+
+ JSXFragment(path) {
+ imports.Fragment = true;
+ },
+ });
+ return imports;
+ }
+
+ function hasJSX(parentPath) {
+ let fileHasJSX = false;
+ parentPath.traverse({
+ JSXElement(path) {
+ fileHasJSX = true;
+ path.stop();
+ },
+
+ JSXFragment(path) {
+ fileHasJSX = true;
+ path.stop();
+ },
+ });
+
+ return fileHasJSX;
+ }
+
+ function addAutoImports(path, state) {
+ if (state.autoImport === IMPORT_TYPES.none) {
+ return;
+ }
+
+ if (IMPORT_TYPES[state.autoImport] === undefined) {
+ throw path.buildCodeFrameError(
+ 'autoImport must be one of the following: ' +
+ Object.keys(IMPORT_TYPES).join(', '),
);
- state.set(
- 'jsxIdentifier',
- createIdentifierParser(
- state.opts.development ? 'React.jsxDEV' : 'React.jsx',
- ),
+ }
+ if (state.autoImport === IMPORT_TYPES.require && isModule(path)) {
+ throw path.buildCodeFrameError(
+ 'Babel `sourceType` must be set to `script` for autoImport ' +
+ 'to use `require` syntax. See Babel `sourceType` for details.',
);
- state.set(
- 'jsxStaticIdentifier',
- createIdentifierParser(
- state.opts.development ? 'React.jsxDEV' : 'React.jsxs',
- ),
+ }
+ if (state.autoImport !== IMPORT_TYPES.require && !isModule(path)) {
+ throw path.buildCodeFrameError(
+ 'Babel `sourceType` must be set to `module` for autoImport to use `' +
+ state.autoImport +
+ '` syntax. See Babel `sourceType` for details.',
);
- state.set('jsxFragIdentifier', createIdentifierParser('React.Fragment'));
+ }
+
+ // import {jsx} from "react";
+ // import {createElement} from "react";
+ if (state.autoImport === IMPORT_TYPES.namedExports) {
+ const imports = getImportNames(path, state);
+ const importMap = {};
+
+ Object.keys(imports).forEach(importName => {
+ importMap[importName] = addNamed(path, importName, state.source).name;
+ });
+
+ return importMap;
+ }
+
+ // add import to file and get the import name
+ let name;
+ if (state.autoImport === IMPORT_TYPES.require) {
+ // var _react = require("react");
+ name = addNamespace(path, state.source, {
+ importedInterop: 'uncompiled',
+ }).name;
+ } else if (state.autoImport === IMPORT_TYPES.namespace) {
+ // import * as _react from "react";
+ name = addNamespace(path, state.source).name;
+ } else if (state.autoImport === IMPORT_TYPES.defaultExport) {
+ // import _default from "react";
+ name = addDefault(path, state.source).name;
+ }
+
+ return name;
+ }
+
+ visitor.Program = {
+ enter(path, state) {
+ if (hasJSX(path)) {
+ let autoImport = state.opts.autoImport || IMPORT_TYPES.none;
+ let source = state.opts.importSource || 'react';
+ const {file} = state;
+
+ if (file.ast.comments) {
+ for (let i = 0; i < file.ast.comments.length; i++) {
+ const comment = file.ast.comments[i];
+ const jsxAutoImportMatches = JSX_AUTO_IMPORT_ANNOTATION_REGEX.exec(
+ comment.value,
+ );
+ if (jsxAutoImportMatches) {
+ autoImport = jsxAutoImportMatches[1];
+ }
+ const jsxImportSourceMatches = JSX_IMPORT_SOURCE_ANNOTATION_REGEX.exec(
+ comment.value,
+ );
+ if (jsxImportSourceMatches) {
+ source = jsxImportSourceMatches[1];
+ }
+ }
+ }
+
+ const importName = addAutoImports(path, {
+ ...state.opts,
+ autoImport,
+ source,
+ });
+
+ state.set(
+ 'oldJSXIdentifier',
+ createIdentifierParser(
+ createIdentifierName(path, autoImport, 'createElement', importName),
+ ),
+ );
+
+ state.set(
+ 'jsxIdentifier',
+ createIdentifierParser(
+ createIdentifierName(
+ path,
+ autoImport,
+ state.opts.development ? 'jsxDEV' : 'jsx',
+ importName,
+ ),
+ ),
+ );
+
+ state.set(
+ 'jsxStaticIdentifier',
+ createIdentifierParser(
+ createIdentifierName(
+ path,
+ autoImport,
+ state.opts.development ? 'jsxDEV' : 'jsxs',
+ importName,
+ ),
+ ),
+ );
+
+ state.set(
+ 'jsxFragIdentifier',
+ createIdentifierParser(
+ createIdentifierName(path, autoImport, 'Fragment', importName),
+ ),
+ );
+ }
},
};