diff --git a/packages/babel-helper-builder-react-jsx-experimental/package.json b/packages/babel-helper-builder-react-jsx-experimental/package.json
new file mode 100644
index 000000000000..3aa75af64a61
--- /dev/null
+++ b/packages/babel-helper-builder-react-jsx-experimental/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@babel/helper-builder-react-jsx-experimental",
+  "version": "7.8.3",
+  "description": "Helper function to build react jsx",
+  "repository": "https://github.com/babel/babel/tree/master/packages/babel-helper-builder-react-jsx-experimental",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "lib/index.js",
+  "dependencies": {
+    "@babel/helper-module-imports": "^7.8.3",
+    "@babel/types": "^7.8.3",
+    "esutils": "^2.0.0"
+    
+  }
+}
diff --git a/packages/babel-helper-builder-react-jsx-experimental/src/index.js b/packages/babel-helper-builder-react-jsx-experimental/src/index.js
new file mode 100644
index 000000000000..5bd9b55d8b65
--- /dev/null
+++ b/packages/babel-helper-builder-react-jsx-experimental/src/index.js
@@ -0,0 +1,844 @@
+/* eslint-disable @babel/development/no-undefined-identifier */
+import esutils from "esutils";
+import * as t from "@babel/types";
+import { isModule, addNamespace, addNamed } from "@babel/helper-module-imports";
+
+export function helper(babel, options) {
+  const FILE_NAME_VAR = "_jsxFileName";
+
+  const JSX_SOURCE_ANNOTATION_REGEX = /\*?\s*@jsxImportSource\s+([^\s]+)/;
+  const JSX_RUNTIME_ANNOTATION_REGEX = /\*?\s*@jsxRuntime\s+([^\s]+)/;
+  const IMPORT_SOURCE_DEFAULT = options.importSource || "react";
+  const RUNTIME_DEFAULT = options.runtime || "automatic";
+
+  const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
+  const JSX_FRAG_ANNOTATION_REGEX = /\*?\s*@jsxFrag\s+([^\s]+)/;
+  const PRAGMA_DEFAULT = options.pragma || "React.createElement";
+  const PRAGMA_FRAG_DEFAULT = options.pragmaFrag || "React.Fragment";
+
+  const visitor = {};
+
+  visitor.JSXNamespacedName = function(path, state) {
+    const throwIfNamespace =
+      state.opts.throwIfNamespace === undefined
+        ? true
+        : !!state.opts.throwIfNamespace;
+    if (throwIfNamespace) {
+      throw path.buildCodeFrameError(
+        `Namespace tags are not supported by default. React's JSX doesn't support namespace tags. \
+You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
+      );
+    }
+  };
+
+  visitor.JSXSpreadChild = function(path) {
+    throw path.buildCodeFrameError(
+      "Spread children are not supported in React.",
+    );
+  };
+
+  visitor.JSXElement = {
+    exit(path, file) {
+      let callExpr;
+      if (file.get("runtime") === "classic" || shouldUseCreateElement(path)) {
+        callExpr = buildCreateElementCall(path, file);
+      } else {
+        callExpr = buildJSXElementCall(path, file);
+      }
+
+      if (callExpr) {
+        path.replaceWith(t.inherits(callExpr, path.node));
+      }
+    },
+  };
+
+  visitor.JSXFragment = {
+    exit(path, file) {
+      let callExpr;
+      if (file.get("runtime") === "classic") {
+        callExpr = buildCreateElementFragmentCall(path, file);
+      } else {
+        callExpr = buildJSXFragmentCall(path, file);
+      }
+
+      if (callExpr) {
+        path.replaceWith(t.inherits(callExpr, path.node));
+      }
+    },
+  };
+
+  visitor.JSXAttribute = function(path) {
+    if (t.isJSXElement(path.node.value)) {
+      path.node.value = t.jsxExpressionContainer(path.node.value);
+    }
+  };
+
+  visitor.Program = {
+    enter(path, state) {
+      if (hasJSX(path)) {
+        const { file } = state;
+        let runtime = RUNTIME_DEFAULT;
+
+        // For jsx mode
+        let source = IMPORT_SOURCE_DEFAULT;
+
+        // For createElement mode
+        let pragma = PRAGMA_DEFAULT;
+        let pragmaFrag = PRAGMA_FRAG_DEFAULT;
+        let pragmaSet = !!options.pragma;
+        let pragmaFragSet = !!options.pragmaFrag;
+
+        if (file.ast.comments) {
+          for (const comment of (file.ast.comments: Array<Object>)) {
+            const sourceMatches = JSX_SOURCE_ANNOTATION_REGEX.exec(
+              comment.value,
+            );
+            if (sourceMatches) {
+              source = sourceMatches[1];
+            }
+
+            const runtimeMatches = JSX_RUNTIME_ANNOTATION_REGEX.exec(
+              comment.value,
+            );
+            if (runtimeMatches) {
+              runtime = runtimeMatches[1];
+            }
+
+            const jsxMatches = JSX_ANNOTATION_REGEX.exec(comment.value);
+            if (jsxMatches) {
+              pragma = jsxMatches[1];
+              pragmaSet = true;
+            }
+            const jsxFragMatches = JSX_FRAG_ANNOTATION_REGEX.exec(
+              comment.value,
+            );
+            if (jsxFragMatches) {
+              pragmaFrag = jsxFragMatches[1];
+              pragmaFragSet = true;
+            }
+          }
+        }
+
+        state.set("runtime", runtime);
+        if (runtime === "classic") {
+          state.set("createElementIdentifier", createIdentifierParser(pragma));
+          state.set("jsxFragIdentifier", createIdentifierParser(pragmaFrag));
+          state.set("usedFragment", false);
+          state.set("pragmaSet", pragmaSet);
+          state.set("pragmaFragSet", pragmaFragSet);
+        } else if (runtime === "automatic") {
+          const importName = addAutoImports(path, {
+            ...state.opts,
+            source,
+          });
+          state.set(
+            "jsxIdentifier",
+            createIdentifierParser(
+              createIdentifierName(
+                path,
+                options.development ? "jsxDEV" : "jsx",
+                importName,
+              ),
+            ),
+          );
+
+          state.set(
+            "jsxStaticIdentifier",
+            createIdentifierParser(
+              createIdentifierName(
+                path,
+                options.development ? "jsxDEV" : "jsxs",
+                importName,
+              ),
+            ),
+          );
+
+          state.set(
+            "createElementIdentifier",
+            createIdentifierParser(
+              createIdentifierName(path, "createElement", importName),
+            ),
+          );
+
+          state.set(
+            "jsxFragIdentifier",
+            createIdentifierParser(
+              createIdentifierName(path, "Fragment", importName),
+            ),
+          );
+        } else {
+          throw path.buildCodeFrameError(
+            `Runtime must be either "classic" or "automatic".`,
+          );
+        }
+      }
+    },
+
+    exit(path, state) {
+      if (
+        state.get("runtime") === "classic" &&
+        state.get("pragmaSet") &&
+        state.get("usedFragment") &&
+        !state.get("pragmaFragSet")
+      ) {
+        throw new Error(
+          "transform-react-jsx: pragma has been set but " +
+            "pragmaFrag has not been set",
+        );
+      }
+    },
+  };
+
+  return visitor;
+
+  // We want to use React.createElement, even in the case of
+  // jsx, for <div {...props} key={key} /> to distinguish it
+  // from <div key={key} {...props} />. This is an intermediary
+  // step while we deprecate key spread from props. Afterwards,
+  // we will stop using createElement in the transform.
+  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;
+  }
+
+  function createIdentifierName(path, name, importName) {
+    if (isModule(path) && importName) {
+      const identifierName = `${importName[name]}`;
+      return identifierName;
+    } else {
+      return `${importName}.${name}`;
+    }
+  }
+
+  function getImportNames(parentPath) {
+    const imports = {};
+
+    parentPath.traverse({
+      JSXElement(path) {
+        const openingPath = path.get("openingElement");
+        openingPath.parent.children = t.react.buildChildren(openingPath.parent);
+
+        if (shouldUseCreateElement(path)) {
+          imports.createElement = true;
+        } else if (path.node.children.length > 1) {
+          const importName = options.development ? "jsxDEV" : "jsxs";
+          imports[importName] = true;
+        } else {
+          const importName = options.development ? "jsxDEV" : "jsx";
+          imports[importName] = true;
+        }
+      },
+
+      JSXFragment(path) {
+        imports.Fragment = true;
+
+        const openingPath = path.get("openingElement");
+        openingPath.parent.children = t.react.buildChildren(openingPath.parent);
+
+        if (path.node.children.length > 1) {
+          const importName = options.development ? "jsxDEV" : "jsxs";
+          imports[importName] = true;
+        } else {
+          const importName = options.development ? "jsxDEV" : "jsx";
+          imports[importName] = 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 (isModule(path)) {
+      // import {jsx} from "react";
+      // import {createElement} from "react";
+      const imports = getImportNames(path, state);
+      const importMap = {};
+
+      Object.keys(imports).forEach(importName => {
+        importMap[importName] = addNamed(path, importName, state.source).name;
+      });
+
+      return importMap;
+    } else {
+      // var _react = require("react")
+      return addNamespace(path, state.source, {
+        importedInterop: "uncompiled",
+      }).name;
+    }
+  }
+
+  function createIdentifierParser(id) {
+    return () => {
+      return id
+        .split(".")
+        .map(name => t.identifier(name))
+        .reduce((object, property) => t.memberExpression(object, property));
+    };
+  }
+
+  function makeTrace(fileNameIdentifier, lineNumber) {
+    const fileLineLiteral =
+      lineNumber != null ? t.numericLiteral(lineNumber) : t.nullLiteral();
+    const fileNameProperty = t.objectProperty(
+      t.identifier("fileName"),
+      fileNameIdentifier,
+    );
+    const lineNumberProperty = t.objectProperty(
+      t.identifier("lineNumber"),
+      fileLineLiteral,
+    );
+    return t.objectExpression([fileNameProperty, lineNumberProperty]);
+  }
+
+  function makeSource(path, state) {
+    const location = path.get("openingElement").container.openingElement.loc;
+    if (!location) {
+      // the element was generated and doesn't have location information
+      return;
+    }
+
+    if (!state.fileNameIdentifier) {
+      const fileName = state.filename || "";
+
+      const fileNameIdentifier = path.scope.generateUidIdentifier(
+        FILE_NAME_VAR,
+      );
+      const scope = path.hub.getScope();
+      if (scope) {
+        scope.push({
+          id: fileNameIdentifier,
+          init: t.stringLiteral(fileName),
+        });
+      }
+      state.fileNameIdentifier = fileNameIdentifier;
+    }
+
+    return makeTrace(state.fileNameIdentifier, location.start.line);
+  }
+
+  function convertJSXIdentifier(node, parent) {
+    if (t.isJSXIdentifier(node)) {
+      if (node.name === "this" && t.isReferenced(node, parent)) {
+        return t.thisExpression();
+      } else if (esutils.keyword.isIdentifierNameES6(node.name)) {
+        node.type = "Identifier";
+      } else {
+        return t.stringLiteral(node.name);
+      }
+    } else if (t.isJSXMemberExpression(node)) {
+      return t.memberExpression(
+        convertJSXIdentifier(node.object, node),
+        convertJSXIdentifier(node.property, node),
+      );
+    } else if (t.isJSXNamespacedName(node)) {
+      /**
+       * If the flag "throwIfNamespace" is false
+       * print XMLNamespace like string literal
+       */
+      return t.stringLiteral(`${node.namespace.name}:${node.name.name}`);
+    }
+
+    return node;
+  }
+
+  function convertAttributeValue(node) {
+    if (t.isJSXExpressionContainer(node)) {
+      return node.expression;
+    } else {
+      return node;
+    }
+  }
+
+  function convertAttribute(node, duplicateChildren) {
+    let value = convertAttributeValue(node.value || t.booleanLiteral(true));
+
+    if (t.isJSXSpreadAttribute(node)) {
+      return t.spreadElement(node.argument);
+    }
+
+    if (t.isStringLiteral(value) && !t.isJSXExpressionContainer(node.value)) {
+      value.value = value.value.replace(/\n\s+/g, " ");
+
+      // "raw" JSXText should not be used from a StringLiteral because it needs to be escaped.
+      if (value.extra && value.extra.raw) {
+        delete value.extra.raw;
+      }
+    }
+    if (duplicateChildren && duplicateChildren.length > 0) {
+      value = t.sequenceExpression([...duplicateChildren, value]);
+    }
+
+    if (t.isJSXNamespacedName(node.name)) {
+      node.name = t.stringLiteral(
+        node.name.namespace.name + ":" + node.name.name.name,
+      );
+    } else if (esutils.keyword.isIdentifierNameES6(node.name.name)) {
+      node.name.type = "Identifier";
+    } else {
+      node.name = t.stringLiteral(node.name.name);
+    }
+
+    return t.inherits(t.objectProperty(node.name, value), node);
+  }
+
+  // Builds JSX into:
+  // Production: React.jsx(type, arguments, key)
+  // Development: React.jsxDEV(type, arguments, key, isStaticChildren, source, self)
+  function buildJSXElementCall(path, file) {
+    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 (options.pre) {
+      options.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" &&
+          attr.name.name !== "__self"
+        ) {
+          // If someone is still using the __source and __self Babel plugins
+          // filter the results out
+          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 (!options.development) {
+      if (key !== undefined) {
+        args.push(key);
+      }
+    } else {
+      // isStaticChildren, __source, and __self are only used in development
+      // automatically include __source and __self in this plugin
+      // so we can eliminate the need for separate Babel plugins in Babel 8
+      source = makeSource(path, file);
+      self = t.thisExpression();
+      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 (options.post) {
+      options.post(state, file);
+    }
+
+    return (
+      state.call ||
+      t.callExpression(
+        path.node.children.length > 1 ? state.jsxStaticCallee : state.jsxCallee,
+        args,
+      )
+    );
+  }
+
+  function isChildrenProp(prop) {
+    return (
+      t.isJSXAttribute(prop) &&
+      t.isJSXIdentifier(prop.name) &&
+      prop.name.name === "children"
+    );
+  }
+
+  // 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 = [];
+
+    // In order to avoid having duplicate "children" keys, we avoid
+    // pushing the "children" prop if we have actual children. However,
+    // the children prop may have side effects, so to be certain
+    // these side effects are evaluated, we add them to the following prop
+    // as a sequence expression to preserve order. So:
+    // <div children={x++} foo={y}>{child}</div> becomes
+    // React.jsx('div', {foo: (x++, y), children: child});
+    // duplicateChildren contains the extra children prop values.
+    // We need to do this as opposed to
+    // React.jsx('div', {children: x++, foo: y, children: child})
+    // because having duplicate keys in an object causes an error
+    // in an older browser.
+    let duplicateChildren = [];
+
+    const hasChildren = children && children.length > 0;
+
+    while (attribs.length) {
+      const prop = attribs.shift();
+      if (hasChildren && isChildrenProp(prop)) {
+        duplicateChildren.push(convertAttributeValue(prop.value));
+      } else if (t.isJSXSpreadAttribute(prop)) {
+        _props = pushProps(_props, objs);
+        if (duplicateChildren.length > 0) {
+          objs.push(
+            t.sequenceExpression([...duplicateChildren, prop.argument]),
+          );
+          duplicateChildren = [];
+        } else {
+          objs.push(prop.argument);
+        }
+      } else {
+        _props.push(convertAttribute(prop, duplicateChildren));
+        if (duplicateChildren.length > 0) {
+          duplicateChildren = [];
+        }
+      }
+    }
+
+    // In React.JSX, children is no longer a separate argument, but passed in
+    // through the argument object
+    if (hasChildren) {
+      if (children.length === 1) {
+        _props.push(
+          t.objectProperty(
+            t.identifier("children"),
+            duplicateChildren.length > 0
+              ? t.sequenceExpression([...duplicateChildren, children[0]])
+              : children[0],
+          ),
+        );
+      } else {
+        _props.push(
+          t.objectProperty(
+            t.identifier("children"),
+            duplicateChildren.length > 0
+              ? t.sequenceExpression([
+                  ...duplicateChildren,
+                  t.arrayExpression(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 = 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 = 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) {
+    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 (options.pre) {
+      options.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 (options.development) {
+      args.push(
+        t.identifier("undefined"),
+        t.booleanLiteral(path.node.children.length > 1),
+      );
+    }
+
+    if (options.post) {
+      options.post(state, file);
+    }
+
+    return (
+      state.call ||
+      t.callExpression(
+        path.node.children.length > 1 ? state.jsxStaticCallee : state.jsxCallee,
+        args,
+      )
+    );
+  }
+
+  function buildCreateElementFragmentCall(path, file) {
+    if (options.filter && !options.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 (options.pre) {
+      options.pre(state, file);
+    }
+
+    // no attributes are allowed with <> syntax
+    args.push(t.nullLiteral(), ...path.node.children);
+
+    if (options.post) {
+      options.post(state, file);
+    }
+
+    file.set("usedFragment", true);
+    return state.call || t.callExpression(state.createElementCallee, args);
+  }
+
+  // Builds JSX into:
+  // Production: React.createElement(type, arguments, children)
+  // Development: React.createElement(type, arguments, children, source, self)
+  function buildCreateElementCall(path, file) {
+    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 (options.pre) {
+      options.pre(state, file);
+    }
+
+    let attribs = openingPath.node.attributes;
+    // In dev mode we will always have attributes because of __source and __self
+    if (attribs.length || options.development) {
+      attribs = buildCreateElementOpeningElementAttributes(path, attribs, file);
+    } else {
+      attribs = t.nullLiteral();
+    }
+
+    args.push(attribs, ...path.node.children);
+
+    if (options.post) {
+      options.post(state, file);
+    }
+
+    return state.call || t.callExpression(state.createElementCallee, 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(path, attribs, file) {
+    let _props = [];
+    const objs = [];
+
+    // We want source and self to be automatically included in the future
+    // so we can eliminate the need for separate Babel plugins in Babel 8
+    if (options.development) {
+      const source = convertAttribute(
+        t.jsxAttribute(
+          t.jsxIdentifier("__source"),
+          t.jsxExpressionContainer(makeSource(path, file)),
+        ),
+      );
+      _props.push(source);
+      const self = convertAttribute(
+        t.jsxAttribute(
+          t.jsxIdentifier("__self"),
+          t.jsxExpressionContainer(t.thisExpression()),
+        ),
+      );
+      _props.push(self);
+    }
+
+    while (attribs.length) {
+      const prop = attribs.shift();
+      if (t.isJSXSpreadAttribute(prop)) {
+        _props = pushProps(_props, objs);
+        objs.push(prop.argument);
+      } else {
+        // If someone is still using the __source and __self Babel plugins
+        // filter the results out
+        if (
+          t.isJSXAttribute(prop) &&
+          prop.name &&
+          (prop.name.name === "__source" || prop.name.name === "__self")
+        ) {
+          continue;
+        } 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 = file.addHelper("extends");
+
+      // spread it
+      attribs = t.callExpression(expressionHelper, objs);
+    }
+
+    return attribs;
+  }
+}
diff --git a/packages/babel-plugin-transform-react-jsx-development/.npmignore b/packages/babel-plugin-transform-react-jsx-development/.npmignore
new file mode 100644
index 000000000000..f9806945836e
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/.npmignore
@@ -0,0 +1,3 @@
+src
+test
+*.log
diff --git a/packages/babel-plugin-transform-react-jsx-development/package.json b/packages/babel-plugin-transform-react-jsx-development/package.json
new file mode 100644
index 000000000000..62fa8fe8a8a8
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@babel/plugin-transform-react-jsx-development",
+  "version": "7.8.3",
+  "description": "Turn JSX into React function calls in development",
+  "repository": "https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-development",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "lib/index.js",
+  "keywords": [
+    "babel-plugin"
+  ],
+  "dependencies": {
+    "@babel/helper-builder-react-jsx-experimental": "^7.8.3",
+    "@babel/helper-plugin-utils": "^7.8.3",
+    "@babel/plugin-syntax-jsx": "^7.8.3"
+  },
+  "peerDependencies": {
+    "@babel/core": "^7.0.0-0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.3",
+    "@babel/helper-plugin-test-runner": "^7.8.3"
+  }
+}
diff --git a/packages/babel-plugin-transform-react-jsx-development/src/index.js b/packages/babel-plugin-transform-react-jsx-development/src/index.js
new file mode 100644
index 000000000000..6cd76aca38ff
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/src/index.js
@@ -0,0 +1,37 @@
+import jsx from "@babel/plugin-syntax-jsx";
+import { helper } from "@babel/helper-builder-react-jsx-experimental";
+import { declare } from "@babel/helper-plugin-utils";
+import { types as t } from "@babel/core";
+
+export default declare((api, options) => {
+  const visitor = helper(api, {
+    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) {
+      if (pass.get("runtime") === "classic") {
+        state.createElementCallee = pass.get("createElementIdentifier")();
+      } else {
+        state.jsxCallee = pass.get("jsxIdentifier")();
+        state.jsxStaticCallee = pass.get("jsxStaticIdentifier")();
+        state.createElementCallee = pass.get("createElementIdentifier")();
+      }
+    },
+
+    ...options,
+    development: true,
+  });
+
+  return {
+    name: "transform-react-jsx",
+    inherits: jsx,
+    visitor,
+  };
+});
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/auto-import-dev/exec.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/auto-import-dev/exec.js
new file mode 100644
index 000000000000..dac0995db65d
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/auto-import-dev/exec.js
@@ -0,0 +1,51 @@
+var actual = transform(
+  `var x = (
+    <>
+    <div>
+        <div key="1" />
+        <div key="2" meow="wolf" />
+        <div key="3" />
+        <div {...props} key="4" />
+    </div>
+    </>
+  );`,
+  Object.assign({}, opts, { filename: '/fake/path/mock.js' })
+).code;
+
+var expected = 
+`import { createElement as _createElement } from "react";
+import { jsxDEV as _jsxDEV } from "react";
+import { Fragment as _Fragment } from "react";
+var _jsxFileName = "/fake/path/mock.js";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var x = _jsxDEV(_Fragment, {
+  children: _jsxDEV("div", {
+    children: [_jsxDEV("div", {}, "1", false, {
+      fileName: _jsxFileName,
+      lineNumber: 4
+    }, this), _jsxDEV("div", {
+      meow: "wolf"
+    }, "2", false, {
+      fileName: _jsxFileName,
+      lineNumber: 5
+    }, this), _jsxDEV("div", {}, "3", false, {
+      fileName: _jsxFileName,
+      lineNumber: 6
+    }, this), _createElement("div", _extends({
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 7
+      },
+      __self: this
+    }, props, {
+      key: "4"
+    }))]
+  }, undefined, true, {
+    fileName: _jsxFileName,
+    lineNumber: 3
+  }, this)
+}, undefined, false);`;
+
+expect(actual).toBe(expected);
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/auto-import-dev/options.json b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/auto-import-dev/options.json
new file mode 100644
index 000000000000..6eee73c411a2
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/auto-import-dev/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["transform-react-jsx-development"],
+  "sourceType": "module"
+}
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/classic-runtime-with-source-self-plugins/exec.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/classic-runtime-with-source-self-plugins/exec.js
new file mode 100644
index 000000000000..5efe358ce237
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/classic-runtime-with-source-self-plugins/exec.js
@@ -0,0 +1,59 @@
+var actual = transform(
+  `var x = (
+    <>
+    <div>
+        <div key="1" />
+        <div key="2" meow="wolf" />
+        <div key="3" />
+        <div {...props} key="4" />
+    </div>
+    </>
+  );`,
+  Object.assign({}, opts, { filename: '/fake/path/mock.js' })
+).code;
+
+var expected = 
+`var _jsxFileName = "/fake/path/mock.js",
+    _jsxFileName2 = "/fake/path/mock.js";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var x = React.createElement(React.Fragment, null, React.createElement("div", {
+  __source: {
+    fileName: _jsxFileName2,
+    lineNumber: 3
+  },
+  __self: this
+}, React.createElement("div", {
+  __source: {
+    fileName: _jsxFileName2,
+    lineNumber: 4
+  },
+  __self: this,
+  key: "1"
+}), React.createElement("div", {
+  __source: {
+    fileName: _jsxFileName2,
+    lineNumber: 5
+  },
+  __self: this,
+  key: "2",
+  meow: "wolf"
+}), React.createElement("div", {
+  __source: {
+    fileName: _jsxFileName2,
+    lineNumber: 6
+  },
+  __self: this,
+  key: "3"
+}), React.createElement("div", _extends({
+  __source: {
+    fileName: _jsxFileName2,
+    lineNumber: 7
+  },
+  __self: this
+}, props, {
+  key: "4"
+}))));`;
+
+expect(actual).toBe(expected);
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/classic-runtime-with-source-self-plugins/options.json b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/classic-runtime-with-source-self-plugins/options.json
new file mode 100644
index 000000000000..4d3bd274b5ef
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/classic-runtime-with-source-self-plugins/options.json
@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    ["transform-react-jsx-development", { "runtime": "classic" }],
+    "transform-react-jsx-source",
+    "transform-react-jsx-self"
+  ]
+}
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/classic-runtime/exec.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/classic-runtime/exec.js
new file mode 100644
index 000000000000..7b2ae00791f5
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/classic-runtime/exec.js
@@ -0,0 +1,58 @@
+var actual = transform(
+  `var x = (
+    <>
+    <div>
+        <div key="1" />
+        <div key="2" meow="wolf" />
+        <div key="3" />
+        <div {...props} key="4" />
+    </div>
+    </>
+  );`,
+  Object.assign({}, opts, { filename: '/fake/path/mock.js' })
+).code;
+
+var expected = 
+`var _jsxFileName = "/fake/path/mock.js";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var x = React.createElement(React.Fragment, null, React.createElement("div", {
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 3
+  },
+  __self: this
+}, React.createElement("div", {
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 4
+  },
+  __self: this,
+  key: "1"
+}), React.createElement("div", {
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 5
+  },
+  __self: this,
+  key: "2",
+  meow: "wolf"
+}), React.createElement("div", {
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 6
+  },
+  __self: this,
+  key: "3"
+}), React.createElement("div", _extends({
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 7
+  },
+  __self: this
+}, props, {
+  key: "4"
+}))));`;
+
+expect(actual).toBe(expected);
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/classic-runtime/options.json b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/classic-runtime/options.json
new file mode 100644
index 000000000000..802b77806846
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/classic-runtime/options.json
@@ -0,0 +1,3 @@
+{
+  "plugins": [["transform-react-jsx-development", { "runtime": "classic" }]]
+}
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/fragments/exec.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/fragments/exec.js
new file mode 100644
index 000000000000..3162dcc97b5f
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/fragments/exec.js
@@ -0,0 +1,18 @@
+var actual = transform(
+  `var x = <><div /></>;`,
+  Object.assign({}, opts, { filename: '/fake/path/mock.js' })
+).code;
+
+var expected = 
+`var _react = require("react");
+
+var _jsxFileName = "/fake/path/mock.js";
+
+var x = _react.jsxDEV(_react.Fragment, {
+  children: _react.jsxDEV("div", {}, undefined, false, {
+    fileName: _jsxFileName,
+    lineNumber: 1
+  }, this)
+}, undefined, false);`;
+
+expect(actual).toBe(expected);
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/handle-fragments-with-key/exec.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/handle-fragments-with-key/exec.js
new file mode 100644
index 000000000000..796ac34d6c7d
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/handle-fragments-with-key/exec.js
@@ -0,0 +1,16 @@
+var actual = transform(
+  `var x = <React.Fragment key='foo'></React.Fragment>;`,
+  Object.assign({}, opts, { filename: '/fake/path/mock.js' })
+).code;
+
+var expected = 
+`var _react = require("react");
+
+var _jsxFileName = "/fake/path/mock.js";
+
+var x = _react.jsxDEV(React.Fragment, {}, "foo", false, {
+  fileName: _jsxFileName,
+  lineNumber: 1
+}, this);`;
+
+expect(actual).toBe(expected);
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/handle-nonstatic-children/exec.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/handle-nonstatic-children/exec.js
new file mode 100644
index 000000000000..82b2aa7104d6
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/handle-nonstatic-children/exec.js
@@ -0,0 +1,28 @@
+var actual = transform(
+  `var x = (
+    <div>
+        {[<span key={'0'} />, <span key={'1'} />]}
+    </div>
+);`,
+  Object.assign({}, opts, { filename: '/fake/path/mock.js' })
+).code;
+
+var expected = 
+`var _react = require("react");
+
+var _jsxFileName = "/fake/path/mock.js";
+
+var x = _react.jsxDEV("div", {
+  children: [_react.jsxDEV("span", {}, '0', false, {
+    fileName: _jsxFileName,
+    lineNumber: 3
+  }, this), _react.jsxDEV("span", {}, '1', false, {
+    fileName: _jsxFileName,
+    lineNumber: 3
+  }, this)]
+}, undefined, false, {
+  fileName: _jsxFileName,
+  lineNumber: 2
+}, this);`;
+
+expect(actual).toBe(expected);
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/handle-static-children/exec.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/handle-static-children/exec.js
new file mode 100644
index 000000000000..0124c27e67dc
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/handle-static-children/exec.js
@@ -0,0 +1,32 @@
+var actual = transform(
+  `var x = (
+    <div>
+        <span />
+        {[<span key={'0'} />, <span key={'1'} />]}
+    </div>
+);`,
+  Object.assign({}, opts, { filename: '/fake/path/mock.js' })
+).code;
+
+var expected = 
+`var _react = require("react");
+
+var _jsxFileName = "/fake/path/mock.js";
+
+var x = _react.jsxDEV("div", {
+  children: [_react.jsxDEV("span", {}, undefined, false, {
+    fileName: _jsxFileName,
+    lineNumber: 3
+  }, this), [_react.jsxDEV("span", {}, '0', false, {
+    fileName: _jsxFileName,
+    lineNumber: 4
+  }, this), _react.jsxDEV("span", {}, '1', false, {
+    fileName: _jsxFileName,
+    lineNumber: 4
+  }, this)]]
+}, undefined, true, {
+  fileName: _jsxFileName,
+  lineNumber: 2
+}, this);`;
+
+expect(actual).toBe(expected);
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/options.json b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/options.json
new file mode 100644
index 000000000000..10f3a57264bb
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/options.json
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    "external-helpers",
+    "transform-react-jsx-development",
+    "transform-react-display-name",
+    "transform-arrow-functions"
+  ],
+  "os": ["linux", "darwin"]
+}
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/source-and-self-defined/exec.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/source-and-self-defined/exec.js
new file mode 100644
index 000000000000..44fb9d927108
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/source-and-self-defined/exec.js
@@ -0,0 +1,52 @@
+var actual = transform(
+  `var x = (
+    <>
+    <div>
+        <div key="1" />
+        <div key="2" meow="wolf" />
+        <div key="3" />
+        <div {...props} key="4" />
+    </div>
+    </>
+  );`,
+  Object.assign({}, opts, { filename: '/fake/path/mock.js' })
+).code;
+
+var expected = 
+`import { createElement as _createElement } from "react";
+import { jsxDEV as _jsxDEV } from "react";
+import { Fragment as _Fragment } from "react";
+var _jsxFileName = "/fake/path/mock.js",
+    _jsxFileName2 = "/fake/path/mock.js";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var x = _jsxDEV(_Fragment, {
+  children: _jsxDEV("div", {
+    children: [_jsxDEV("div", {}, "1", false, {
+      fileName: _jsxFileName2,
+      lineNumber: 4
+    }, this), _jsxDEV("div", {
+      meow: "wolf"
+    }, "2", false, {
+      fileName: _jsxFileName2,
+      lineNumber: 5
+    }, this), _jsxDEV("div", {}, "3", false, {
+      fileName: _jsxFileName2,
+      lineNumber: 6
+    }, this), _createElement("div", _extends({
+      __source: {
+        fileName: _jsxFileName2,
+        lineNumber: 7
+      },
+      __self: this
+    }, props, {
+      key: "4"
+    }))]
+  }, undefined, true, {
+    fileName: _jsxFileName2,
+    lineNumber: 3
+  }, this)
+}, undefined, false);`;
+
+expect(actual).toBe(expected);
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/source-and-self-defined/options.json b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/source-and-self-defined/options.json
new file mode 100644
index 000000000000..e80a17d8e88d
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/development/source-and-self-defined/options.json
@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    "transform-react-jsx-development",
+    "transform-react-jsx-source",
+    "transform-react-jsx-self"
+  ],
+  "sourceType": "module"
+}
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/index.js b/packages/babel-plugin-transform-react-jsx-development/test/index.js
new file mode 100644
index 000000000000..1b534b8fc64a
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/index.js
@@ -0,0 +1,3 @@
+import runner from "@babel/helper-plugin-test-runner";
+
+runner(__dirname);
diff --git a/packages/babel-plugin-transform-react-jsx/package.json b/packages/babel-plugin-transform-react-jsx/package.json
index efeaaa87b9d3..07dd78aefc39 100644
--- a/packages/babel-plugin-transform-react-jsx/package.json
+++ b/packages/babel-plugin-transform-react-jsx/package.json
@@ -13,6 +13,7 @@
   ],
   "dependencies": {
     "@babel/helper-builder-react-jsx": "^7.8.3",
+    "@babel/helper-builder-react-jsx-experimental": "^7.8.3",
     "@babel/helper-plugin-utils": "^7.8.3",
     "@babel/plugin-syntax-jsx": "^7.8.3"
   },
diff --git a/packages/babel-plugin-transform-react-jsx/src/index.js b/packages/babel-plugin-transform-react-jsx/src/index.js
index a655b30b6972..95cc5a8a30cd 100644
--- a/packages/babel-plugin-transform-react-jsx/src/index.js
+++ b/packages/babel-plugin-transform-react-jsx/src/index.js
@@ -1,100 +1,15 @@
+/* eslint-disable-next-line @babel/development/plugin-name */
+import transformStable from "./transform-stable";
+/* eslint-disable-next-line @babel/development/plugin-name */
+import transformExperimental from "./transform-experimental";
 import { declare } from "@babel/helper-plugin-utils";
-import jsx from "@babel/plugin-syntax-jsx";
-import helper from "@babel/helper-builder-react-jsx";
-import { types as t } from "@babel/core";
 
 export default declare((api, options) => {
-  api.assertVersion(7);
+  const runtime = options.runtime || "classic";
 
-  const THROW_IF_NAMESPACE =
-    options.throwIfNamespace === undefined ? true : !!options.throwIfNamespace;
-
-  const PRAGMA_DEFAULT = options.pragma || "React.createElement";
-  const PRAGMA_FRAG_DEFAULT = options.pragmaFrag || "React.Fragment";
-
-  const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
-  const JSX_FRAG_ANNOTATION_REGEX = /\*?\s*@jsxFrag\s+([^\s]+)/;
-
-  // returns a closure that returns an identifier or memberExpression node
-  // based on the given id
-  const createIdentifierParser = (id: string) => () => {
-    return id
-      .split(".")
-      .map(name => t.identifier(name))
-      .reduce((object, property) => t.memberExpression(object, property));
-  };
-
-  const visitor = helper({
-    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")();
-    },
-
-    throwIfNamespace: THROW_IF_NAMESPACE,
-  });
-
-  visitor.Program = {
-    enter(path, state) {
-      const { file } = state;
-
-      let pragma = PRAGMA_DEFAULT;
-      let pragmaFrag = PRAGMA_FRAG_DEFAULT;
-      let pragmaSet = !!options.pragma;
-      let pragmaFragSet = !!options.pragmaFrag;
-
-      if (file.ast.comments) {
-        for (const comment of (file.ast.comments: Array<Object>)) {
-          const jsxMatches = JSX_ANNOTATION_REGEX.exec(comment.value);
-          if (jsxMatches) {
-            pragma = jsxMatches[1];
-            pragmaSet = true;
-          }
-          const jsxFragMatches = JSX_FRAG_ANNOTATION_REGEX.exec(comment.value);
-          if (jsxFragMatches) {
-            pragmaFrag = jsxFragMatches[1];
-            pragmaFragSet = true;
-          }
-        }
-      }
-
-      state.set("jsxIdentifier", createIdentifierParser(pragma));
-      state.set("jsxFragIdentifier", createIdentifierParser(pragmaFrag));
-      state.set("usedFragment", false);
-      state.set("pragmaSet", pragmaSet);
-      state.set("pragmaFragSet", pragmaFragSet);
-    },
-    exit(path, state) {
-      if (
-        state.get("pragmaSet") &&
-        state.get("usedFragment") &&
-        !state.get("pragmaFragSet")
-      ) {
-        throw new Error(
-          "transform-react-jsx: pragma has been set but " +
-            "pragmaFrag has not been set",
-        );
-      }
-    },
-  };
-
-  visitor.JSXAttribute = function(path) {
-    if (t.isJSXElement(path.node.value)) {
-      path.node.value = t.jsxExpressionContainer(path.node.value);
-    }
-  };
-
-  return {
-    name: "transform-react-jsx",
-    inherits: jsx,
-    visitor,
-  };
+  if (runtime === "classic") {
+    return transformStable(api, options);
+  } else {
+    return transformExperimental(api, options);
+  }
 });
diff --git a/packages/babel-plugin-transform-react-jsx/src/transform-experimental.js b/packages/babel-plugin-transform-react-jsx/src/transform-experimental.js
new file mode 100644
index 000000000000..7044740d7916
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/src/transform-experimental.js
@@ -0,0 +1,37 @@
+import jsx from "@babel/plugin-syntax-jsx";
+import { helper } from "@babel/helper-builder-react-jsx-experimental";
+import { declare } from "@babel/helper-plugin-utils";
+import { types as t } from "@babel/core";
+
+export default declare((api, options) => {
+  const visitor = helper(api, {
+    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) {
+      if (pass.get("runtime") === "classic") {
+        state.createElementCallee = pass.get("createElementIdentifier")();
+      } else {
+        state.jsxCallee = pass.get("jsxIdentifier")();
+        state.jsxStaticCallee = pass.get("jsxStaticIdentifier")();
+        state.createElementCallee = pass.get("createElementIdentifier")();
+      }
+    },
+
+    ...options,
+    development: false,
+  });
+
+  return {
+    name: "transform-react-jsx",
+    inherits: jsx,
+    visitor,
+  };
+});
diff --git a/packages/babel-plugin-transform-react-jsx/src/transform-stable.js b/packages/babel-plugin-transform-react-jsx/src/transform-stable.js
new file mode 100644
index 000000000000..e76d29b034f3
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/src/transform-stable.js
@@ -0,0 +1,98 @@
+import { declare } from "@babel/helper-plugin-utils";
+import jsx from "@babel/plugin-syntax-jsx";
+import helper from "@babel/helper-builder-react-jsx";
+import { types as t } from "@babel/core";
+
+export default declare((api, options) => {
+  const THROW_IF_NAMESPACE =
+    options.throwIfNamespace === undefined ? true : !!options.throwIfNamespace;
+
+  const PRAGMA_DEFAULT = options.pragma || "React.createElement";
+  const PRAGMA_FRAG_DEFAULT = options.pragmaFrag || "React.Fragment";
+
+  const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
+  const JSX_FRAG_ANNOTATION_REGEX = /\*?\s*@jsxFrag\s+([^\s]+)/;
+
+  // returns a closure that returns an identifier or memberExpression node
+  // based on the given id
+  const createIdentifierParser = (id: string) => () => {
+    return id
+      .split(".")
+      .map(name => t.identifier(name))
+      .reduce((object, property) => t.memberExpression(object, property));
+  };
+
+  const visitor = helper({
+    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")();
+    },
+
+    throwIfNamespace: THROW_IF_NAMESPACE,
+  });
+
+  visitor.Program = {
+    enter(path, state) {
+      const { file } = state;
+
+      let pragma = PRAGMA_DEFAULT;
+      let pragmaFrag = PRAGMA_FRAG_DEFAULT;
+      let pragmaSet = !!options.pragma;
+      let pragmaFragSet = !!options.pragmaFrag;
+
+      if (file.ast.comments) {
+        for (const comment of (file.ast.comments: Array<Object>)) {
+          const jsxMatches = JSX_ANNOTATION_REGEX.exec(comment.value);
+          if (jsxMatches) {
+            pragma = jsxMatches[1];
+            pragmaSet = true;
+          }
+          const jsxFragMatches = JSX_FRAG_ANNOTATION_REGEX.exec(comment.value);
+          if (jsxFragMatches) {
+            pragmaFrag = jsxFragMatches[1];
+            pragmaFragSet = true;
+          }
+        }
+      }
+
+      state.set("jsxIdentifier", createIdentifierParser(pragma));
+      state.set("jsxFragIdentifier", createIdentifierParser(pragmaFrag));
+      state.set("usedFragment", false);
+      state.set("pragmaSet", pragmaSet);
+      state.set("pragmaFragSet", pragmaFragSet);
+    },
+    exit(path, state) {
+      if (
+        state.get("pragmaSet") &&
+        state.get("usedFragment") &&
+        !state.get("pragmaFragSet")
+      ) {
+        throw new Error(
+          "transform-react-jsx: pragma has been set but " +
+            "pragmaFrag has not been set",
+        );
+      }
+    },
+  };
+
+  visitor.JSXAttribute = function(path) {
+    if (t.isJSXElement(path.node.value)) {
+      path.node.value = t.jsxExpressionContainer(path.node.value);
+    }
+  };
+
+  return {
+    name: "transform-react-jsx",
+    inherits: jsx,
+    visitor,
+  };
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-module/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-module/input.js
new file mode 100644
index 000000000000..3a24e66a0547
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-module/input.js
@@ -0,0 +1,10 @@
+var x = (
+    <>
+    <div>
+        <div key="1" />
+        <div key="2" meow="wolf" />
+        <div key="3" />
+        <div {...props} key="4" />
+    </div>
+    </>
+);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-module/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-module/options.json
new file mode 100644
index 000000000000..1c3260292f20
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-module/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": [["transform-react-jsx", { "runtime": "automatic" }]],
+  "sourceType": "module"
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-module/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-module/output.mjs
new file mode 100644
index 000000000000..ba2a0cfb6a70
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-module/output.mjs
@@ -0,0 +1,16 @@
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs } from "react";
+import { jsx as _jsx } from "react";
+import { Fragment as _Fragment } from "react";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var x = _jsx(_Fragment, {
+  children: _jsxs("div", {
+    children: [_jsx("div", {}, "1"), _jsx("div", {
+      meow: "wolf"
+    }, "2"), _jsx("div", {}, "3"), _createElement("div", _extends({}, props, {
+      key: "4"
+    }))]
+  })
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-script/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-script/input.js
new file mode 100644
index 000000000000..3a24e66a0547
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-script/input.js
@@ -0,0 +1,10 @@
+var x = (
+    <>
+    <div>
+        <div key="1" />
+        <div key="2" meow="wolf" />
+        <div key="3" />
+        <div {...props} key="4" />
+    </div>
+    </>
+);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-script/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-script/options.json
new file mode 100644
index 000000000000..0ab40c5a69df
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-script/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": [["transform-react-jsx", { "runtime": "automatic" }]],
+  "sourceType": "script"
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-script/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-script/output.js
new file mode 100644
index 000000000000..62415e9d283c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-script/output.js
@@ -0,0 +1,13 @@
+var _react = require("react");
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var x = _react.jsx(_react.Fragment, {
+  children: _react.jsxs("div", {
+    children: [_react.jsx("div", {}, "1"), _react.jsx("div", {
+      meow: "wolf"
+    }, "2"), _react.jsx("div", {}, "3"), _react.createElement("div", _extends({}, props, {
+      key: "4"
+    }))]
+  })
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-module/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-module/input.js
new file mode 100644
index 000000000000..3cbea31e438a
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-module/input.js
@@ -0,0 +1,15 @@
+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 <div />;
+        };
+        return <span />;
+    };
+    }
+}
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-module/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-module/options.json
new file mode 100644
index 000000000000..1c3260292f20
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-module/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": [["transform-react-jsx", { "runtime": "automatic" }]],
+  "sourceType": "module"
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-module/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-module/output.mjs
new file mode 100644
index 000000000000..75b925c5e971
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-module/output.mjs
@@ -0,0 +1,25 @@
+import { jsx as _jsx2 } from "react";
+
+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 _jsx2("div", {});
+      }
+
+      ;
+      return _jsx2("span", {});
+    };
+  };
+};
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-script/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-script/input.js
new file mode 100644
index 000000000000..3cbea31e438a
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-script/input.js
@@ -0,0 +1,15 @@
+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 <div />;
+        };
+        return <span />;
+    };
+    }
+}
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-script/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-script/options.json
new file mode 100644
index 000000000000..0ab40c5a69df
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-script/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": [["transform-react-jsx", { "runtime": "automatic" }]],
+  "sourceType": "script"
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-script/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-script/output.js
new file mode 100644
index 000000000000..a2179da667e6
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-script/output.js
@@ -0,0 +1,25 @@
+var _react4 = require("react");
+
+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 _react4.jsx("div", {});
+      }
+
+      ;
+      return _react4.jsx("span", {});
+    };
+  };
+};
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source-pragma/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source-pragma/input.js
new file mode 100644
index 000000000000..8384da556f8f
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source-pragma/input.js
@@ -0,0 +1,2 @@
+/** @jsxImportSource baz */
+var x = (<div><span /></div>);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source-pragma/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source-pragma/output.mjs
new file mode 100644
index 000000000000..54364fad67a2
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source-pragma/output.mjs
@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "baz";
+
+/** @jsxImportSource baz */
+var x = _jsx("div", {
+  children: _jsx("span", {})
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source/input.js
new file mode 100644
index 000000000000..6a6f1f219c0d
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source/input.js
@@ -0,0 +1 @@
+var x = (<div><span /></div>);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source/options.json
new file mode 100644
index 000000000000..669a4d7c9ab3
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "importSource": "foo", "runtime": "automatic" }]
+  ]
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source/output.mjs
new file mode 100644
index 000000000000..ea36dd2c58c6
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source/output.mjs
@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "foo";
+
+var x = _jsx("div", {
+  children: _jsx("span", {})
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/no-jsx/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/no-jsx/input.js
new file mode 100644
index 000000000000..3ea99257fd41
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/no-jsx/input.js
@@ -0,0 +1 @@
+var foo = "<div></div>";
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/no-jsx/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/no-jsx/output.mjs
new file mode 100644
index 000000000000..9afe2bdf3f51
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/no-jsx/output.mjs
@@ -0,0 +1 @@
+var foo = "<div></div>";
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/options.json
new file mode 100644
index 000000000000..5bb599c8040a
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/options.json
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    [
+      "transform-react-jsx",
+      { "autoImport": "namespace", "runtime": "automatic" }
+    ]
+  ],
+  "sourceType": "module"
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/input.js
new file mode 100644
index 000000000000..bde12661d8ec
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/input.js
@@ -0,0 +1,10 @@
+import * as react from "react";
+var y = react.createElement("div", {foo: 1});
+var x = (
+    <div>
+        <div key="1" />
+        <div key="2" meow="wolf" />
+        <div key="3" />
+        <div {...props} key="4" />
+    </div>
+);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/options.json
new file mode 100644
index 000000000000..350f3e415810
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/options.json
@@ -0,0 +1,3 @@
+{
+  "plugins": [["transform-react-jsx", { "runtime": "automatic" }]]
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/output.mjs
new file mode 100644
index 000000000000..3305ad4e3b6a
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/output.mjs
@@ -0,0 +1,18 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react";
+import { jsxs as _jsxs } from "react";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as react from "react";
+var y = react.createElement("div", {
+  foo: 1
+});
+
+var x = _jsxs("div", {
+  children: [_jsx("div", {}, "1"), _jsx("div", {
+    meow: "wolf"
+  }, "2"), _jsx("div", {}, "3"), _createElement("div", _extends({}, props, {
+    key: "4"
+  }))]
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/.should-properly-handle-comments-adjacent-to-children/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/.should-properly-handle-comments-adjacent-to-children/input.js
new file mode 100644
index 000000000000..412984681eea
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/.should-properly-handle-comments-adjacent-to-children/input.js
@@ -0,0 +1,13 @@
+var x = (
+  <div>
+    {/* A comment at the beginning */}
+    {/* A second comment at the beginning */}
+    <span>
+      {/* A nested comment */}
+    </span>
+    {/* A sandwiched comment */}
+    <br />
+    {/* A comment at the end */}
+    {/* A second comment at the end */}
+  </div>
+);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/adds-appropriate-newlines-when-using-spread-attribute/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/adds-appropriate-newlines-when-using-spread-attribute/input.js
new file mode 100644
index 000000000000..2c800f155830
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/adds-appropriate-newlines-when-using-spread-attribute/input.js
@@ -0,0 +1,3 @@
+<Component
+  {...props}
+  sound="moo" />
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/adds-appropriate-newlines-when-using-spread-attribute/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/adds-appropriate-newlines-when-using-spread-attribute/output.mjs
new file mode 100644
index 000000000000..cdc5b821a93a
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/adds-appropriate-newlines-when-using-spread-attribute/output.mjs
@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react";
+
+_jsx(Component, babelHelpers.extends({}, props, {
+  sound: "moo"
+}));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/arrow-functions/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/arrow-functions/input.js
new file mode 100644
index 000000000000..91f343d34974
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/arrow-functions/input.js
@@ -0,0 +1,7 @@
+var foo = function () {
+  return () => <this />;
+};
+
+var bar = function () {
+  return () => <this.foo />;
+};
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/arrow-functions/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/arrow-functions/output.mjs
new file mode 100644
index 000000000000..5999df618f2f
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/arrow-functions/output.mjs
@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react";
+
+var foo = function () {
+  var _this = this;
+
+  return function () {
+    return _jsx(_this, {});
+  };
+};
+
+var bar = function () {
+  var _this2 = this;
+
+  return function () {
+    return _jsx(_this2.foo, {});
+  };
+};
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/concatenates-adjacent-string-literals/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/concatenates-adjacent-string-literals/input.js
new file mode 100644
index 000000000000..f3f30af04408
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/concatenates-adjacent-string-literals/input.js
@@ -0,0 +1,13 @@
+var x =
+  <div>
+    foo
+    {"bar"}
+    baz
+    <div>
+      buz
+      bang
+    </div>
+    qux
+    {null}
+    quack
+  </div>
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/concatenates-adjacent-string-literals/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/concatenates-adjacent-string-literals/output.mjs
new file mode 100644
index 000000000000..e91bc0d80033
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/concatenates-adjacent-string-literals/output.mjs
@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react";
+import { jsxs as _jsxs } from "react";
+
+var x = _jsxs("div", {
+  children: ["foo", "bar", "baz", _jsx("div", {
+    children: "buz bang"
+  }), "qux", null, "quack"]
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-assignment-expression/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-assignment-expression/input.js
new file mode 100644
index 000000000000..5b06299bc0de
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-assignment-expression/input.js
@@ -0,0 +1,6 @@
+var Component;
+Component = React.createClass({
+  render: function render() {
+  return null;
+  }
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-assignment-expression/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-assignment-expression/output.mjs
new file mode 100644
index 000000000000..12fa356793b9
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-assignment-expression/output.mjs
@@ -0,0 +1,7 @@
+var Component;
+Component = React.createClass({
+  displayName: "Component",
+  render: function render() {
+    return null;
+  }
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-export-default/input.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-export-default/input.mjs
new file mode 100644
index 000000000000..4331da16ef3a
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-export-default/input.mjs
@@ -0,0 +1,5 @@
+export default React.createClass({
+  render: function render() {
+    return null;
+  }
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-export-default/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-export-default/output.mjs
new file mode 100644
index 000000000000..6714246222b9
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-export-default/output.mjs
@@ -0,0 +1,6 @@
+export default React.createClass({
+  displayName: "input",
+  render: function render() {
+    return null;
+  }
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-if-missing/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-if-missing/input.js
new file mode 100644
index 000000000000..73cb1e0d33ff
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-if-missing/input.js
@@ -0,0 +1,13 @@
+var Whateva = React.createClass({
+  displayName: "Whatever",
+  render: function render() {
+    return null;
+  }
+});
+
+var Bar = React.createClass({
+  "displayName": "Ba",
+  render: function render() {
+    return null;
+  }
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-if-missing/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-if-missing/output.mjs
new file mode 100644
index 000000000000..a2bfac0833a1
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-if-missing/output.mjs
@@ -0,0 +1,12 @@
+var Whateva = React.createClass({
+  displayName: "Whatever",
+  render: function render() {
+    return null;
+  }
+});
+var Bar = React.createClass({
+  "displayName": "Ba",
+  render: function render() {
+    return null;
+  }
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-object-declaration/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-object-declaration/input.js
new file mode 100644
index 000000000000..904383aab8a3
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-object-declaration/input.js
@@ -0,0 +1,7 @@
+exports = {
+  Component: React.createClass({
+    render: function render() {
+      return null;
+    }
+  })
+};
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-object-declaration/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-object-declaration/output.mjs
new file mode 100644
index 000000000000..e6565826f5d7
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-object-declaration/output.mjs
@@ -0,0 +1,8 @@
+exports = {
+  Component: React.createClass({
+    displayName: "Component",
+    render: function render() {
+      return null;
+    }
+  })
+};
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-property-assignment/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-property-assignment/input.js
new file mode 100644
index 000000000000..d9d2c1ad6693
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-property-assignment/input.js
@@ -0,0 +1,5 @@
+exports.Component = React.createClass({
+  render: function render() {
+  return null;
+  }
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-property-assignment/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-property-assignment/output.mjs
new file mode 100644
index 000000000000..e08bf5d35d67
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-property-assignment/output.mjs
@@ -0,0 +1,6 @@
+exports.Component = React.createClass({
+  displayName: "Component",
+  render: function render() {
+    return null;
+  }
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-variable-declaration/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-variable-declaration/input.js
new file mode 100644
index 000000000000..1d32784d13f5
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-variable-declaration/input.js
@@ -0,0 +1,5 @@
+var Component = React.createClass({
+  render: function render() {
+    return null;
+  }
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-variable-declaration/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-variable-declaration/output.mjs
new file mode 100644
index 000000000000..d6393b01057e
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-variable-declaration/output.mjs
@@ -0,0 +1,6 @@
+var Component = React.createClass({
+  displayName: "Component",
+  render: function render() {
+    return null;
+  }
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self/input.js
new file mode 100644
index 000000000000..3a24e66a0547
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self/input.js
@@ -0,0 +1,10 @@
+var x = (
+    <>
+    <div>
+        <div key="1" />
+        <div key="2" meow="wolf" />
+        <div key="3" />
+        <div {...props} key="4" />
+    </div>
+    </>
+);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self/options.json
new file mode 100644
index 000000000000..f1c2e7061431
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self/options.json
@@ -0,0 +1,14 @@
+{
+  "plugins": [
+    [
+      "transform-react-jsx",
+      {
+        "autoImport": "namedExports",
+        "runtime": "automatic"
+      }
+    ],
+    "transform-react-jsx-source",
+    "transform-react-jsx-self"
+  ],
+  "sourceType": "module"
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self/output.mjs
new file mode 100644
index 000000000000..1a5051278664
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self/output.mjs
@@ -0,0 +1,17 @@
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs } from "react";
+import { jsx as _jsx } from "react";
+import { Fragment as _Fragment } from "react";
+var _jsxFileName = "<CWD>/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self/input.js";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var x = _jsx(_Fragment, {
+  children: _jsxs("div", {
+    children: [_jsx("div", {}, "1"), _jsx("div", {
+      meow: "wolf"
+    }, "2"), _jsx("div", {}, "3"), _createElement("div", _extends({}, props, {
+      key: "4"
+    }))]
+  })
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/dont-coerce-expression-containers/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/dont-coerce-expression-containers/input.js
new file mode 100644
index 000000000000..c8da55022283
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/dont-coerce-expression-containers/input.js
@@ -0,0 +1,4 @@
+<Text>
+  To get started, edit index.ios.js!!!{"\n"}
+  Press Cmd+R to reload
+</Text>
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/dont-coerce-expression-containers/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/dont-coerce-expression-containers/output.mjs
new file mode 100644
index 000000000000..142da4030e6b
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/dont-coerce-expression-containers/output.mjs
@@ -0,0 +1,5 @@
+import { jsxs as _jsxs } from "react";
+
+_jsxs(Text, {
+  children: ["To get started, edit index.ios.js!!!", "\n", "Press Cmd+R to reload"]
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-key/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-key/input.js
new file mode 100644
index 000000000000..5c4c9c4ca7df
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-key/input.js
@@ -0,0 +1 @@
+var x = <React.Fragment key="foo"></React.Fragment>;
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-key/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-key/output.mjs
new file mode 100644
index 000000000000..3339a39f1fb8
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-key/output.mjs
@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react";
+
+var x = _jsx(React.Fragment, {}, "foo");
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-no-children/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-no-children/input.js
new file mode 100644
index 000000000000..d766356c98c2
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-no-children/input.js
@@ -0,0 +1 @@
+var x = <></>;
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-no-children/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-no-children/output.mjs
new file mode 100644
index 000000000000..4098ad0e1249
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-no-children/output.mjs
@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react";
+import { Fragment as _Fragment } from "react";
+
+var x = _jsx(_Fragment, {});
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments/input.js
new file mode 100644
index 000000000000..d2a2902b8574
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments/input.js
@@ -0,0 +1 @@
+var x = <><div /></>
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments/output.mjs
new file mode 100644
index 000000000000..4669b8ae6f56
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments/output.mjs
@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react";
+import { Fragment as _Fragment } from "react";
+
+var x = _jsx(_Fragment, {
+  children: _jsx("div", {})
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-nonstatic-children/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-nonstatic-children/input.js
new file mode 100644
index 000000000000..e0fab82c495b
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-nonstatic-children/input.js
@@ -0,0 +1,5 @@
+var x = (
+        <div>
+            {[<span key={'0'} />, <span key={'1'} />]}
+        </div>
+);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-nonstatic-children/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-nonstatic-children/output.mjs
new file mode 100644
index 000000000000..70b59d81beb4
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-nonstatic-children/output.mjs
@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react";
+
+var x = _jsx("div", {
+  children: [_jsx("span", {}, '0'), _jsx("span", {}, '1')]
+});
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-static-children/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-static-children/input.js
new file mode 100644
index 000000000000..fbe28fd373c6
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-static-children/input.js
@@ -0,0 +1,6 @@
+var x = (
+    <div>
+        <span />
+        {[<span key={'0'} />, <span key={'1'} />]}
+    </div>
+);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-static-children/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-static-children/output.mjs
new file mode 100644
index 000000000000..772b2cf837bd
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-static-children/output.mjs
@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react";
+import { jsxs as _jsxs } from "react";
+
+var x = _jsxs("div", {
+  children: [_jsx("span", {}), [_jsx("span", {}, '0'), _jsx("span", {}, '1')]]
+});
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/honor-custom-jsx-comment/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/honor-custom-jsx-comment/input.js
new file mode 100644
index 000000000000..69b21ce257a7
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/honor-custom-jsx-comment/input.js
@@ -0,0 +1,6 @@
+<Foo></Foo>;
+
+var profile = <div>
+  <img src="avatar.png" className="profile" />
+  <h3>{[user.firstName, user.lastName].join(" ")}</h3>
+</div>;
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/honor-custom-jsx-comment/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/honor-custom-jsx-comment/output.mjs
new file mode 100644
index 000000000000..a80e4f2c0f76
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/honor-custom-jsx-comment/output.mjs
@@ -0,0 +1,13 @@
+import { jsxs as _jsxs } from "react";
+import { jsx as _jsx } from "react";
+
+_jsx(Foo, {});
+
+var profile = _jsxs("div", {
+  children: [_jsx("img", {
+    src: "avatar.png",
+    className: "profile"
+  }), _jsx("h3", {
+    children: [user.firstName, user.lastName].join(" ")
+  })]
+});
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-with-retainlines-option/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-with-retainlines-option/input.js
new file mode 100644
index 000000000000..1addddeb1500
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-with-retainlines-option/input.js
@@ -0,0 +1 @@
+var div = <div>test</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-with-retainlines-option/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-with-retainlines-option/options.json
new file mode 100644
index 000000000000..97925bbcb61b
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-with-retainlines-option/options.json
@@ -0,0 +1,3 @@
+{
+  "retainLines": true
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-with-retainlines-option/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-with-retainlines-option/output.mjs
new file mode 100644
index 000000000000..fe3c5f8f68a7
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-with-retainlines-option/output.mjs
@@ -0,0 +1 @@
+import { jsx as _jsx } from "react";var div = _jsx("div", { children: "test" });
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-without-retainlines-option/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-without-retainlines-option/input.js
new file mode 100644
index 000000000000..1addddeb1500
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-without-retainlines-option/input.js
@@ -0,0 +1 @@
+var div = <div>test</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-without-retainlines-option/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-without-retainlines-option/output.mjs
new file mode 100644
index 000000000000..84bd126485ca
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-without-retainlines-option/output.mjs
@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react";
+
+var div = _jsx("div", {
+  children: "test"
+});
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/key-undefined-works/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/key-undefined-works/input.js
new file mode 100644
index 000000000000..23d79e4ffb04
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/key-undefined-works/input.js
@@ -0,0 +1,2 @@
+const props = {foo: true};
+var x = (<div {...props} key={undefined}></div>)
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/key-undefined-works/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/key-undefined-works/output.mjs
new file mode 100644
index 000000000000..7e6753282718
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/key-undefined-works/output.mjs
@@ -0,0 +1,8 @@
+import { createElement as _createElement } from "react";
+const props = {
+  foo: true
+};
+
+var x = _createElement("div", babelHelpers.extends({}, props, {
+  key: undefined
+}));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/optimisation.react.constant-elements/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/optimisation.react.constant-elements/input.js
new file mode 100644
index 000000000000..87ccec557d36
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/optimisation.react.constant-elements/input.js
@@ -0,0 +1,17 @@
+class App extends React.Component {
+  render() {
+    const navbarHeader = <div className="navbar-header">
+      <a className="navbar-brand" href="/">
+        <img src="/img/logo/logo-96x36.png" />
+      </a>
+    </div>;
+
+    return <div>
+      <nav className="navbar navbar-default">
+        <div className="container">
+          {navbarHeader}
+        </div>
+      </nav>
+    </div>;
+  }
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/optimisation.react.constant-elements/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/optimisation.react.constant-elements/options.json
new file mode 100644
index 000000000000..35f1579a971d
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/optimisation.react.constant-elements/options.json
@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    "external-helpers",
+    "transform-react-constant-elements",
+    "transform-classes",
+    "syntax-jsx"
+  ]
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/optimisation.react.constant-elements/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/optimisation.react.constant-elements/output.mjs
new file mode 100644
index 000000000000..c6328c392102
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/optimisation.react.constant-elements/output.mjs
@@ -0,0 +1,29 @@
+var _ref = /*#__PURE__*/<div className="navbar-header">
+      <a className="navbar-brand" href="/">
+        <img src="/img/logo/logo-96x36.png" />
+      </a>
+    </div>;
+
+let App = /*#__PURE__*/function (_React$Component) {
+  babelHelpers.inherits(App, _React$Component);
+
+  function App() {
+    babelHelpers.classCallCheck(this, App);
+    return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(App).apply(this, arguments));
+  }
+
+  babelHelpers.createClass(App, [{
+    key: "render",
+    value: function render() {
+      const navbarHeader = _ref;
+      return <div>
+      <nav className="navbar navbar-default">
+        <div className="container">
+          {navbarHeader}
+        </div>
+      </nav>
+    </div>;
+    }
+  }]);
+  return App;
+}(React.Component);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/options.json
new file mode 100644
index 000000000000..8bbe36458205
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/options.json
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    "external-helpers",
+    ["transform-react-jsx", { "runtime": "automatic" }],
+    "transform-react-display-name",
+    "transform-arrow-functions"
+  ],
+  "sourceType": "module"
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-add-quotes-es3/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-add-quotes-es3/input.js
new file mode 100644
index 000000000000..a47734ffb31a
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-add-quotes-es3/input.js
@@ -0,0 +1 @@
+var es3 = <F aaa new const var default foo-bar/>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-add-quotes-es3/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-add-quotes-es3/options.json
new file mode 100644
index 000000000000..05afa82f8856
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-add-quotes-es3/options.json
@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "runtime": "automatic" }],
+    "transform-property-literals"
+  ]
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-add-quotes-es3/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-add-quotes-es3/output.mjs
new file mode 100644
index 000000000000..3b9dd6213aa8
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-add-quotes-es3/output.mjs
@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react";
+
+var es3 = _jsx(F, {
+  aaa: true,
+  "new": true,
+  "const": true,
+  "var": true,
+  "default": true,
+  "foo-bar": true
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-constructor-as-prop/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-constructor-as-prop/input.js
new file mode 100644
index 000000000000..29c24a7630ab
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-constructor-as-prop/input.js
@@ -0,0 +1 @@
+<Component constructor="foo" />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-constructor-as-prop/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-constructor-as-prop/output.mjs
new file mode 100644
index 000000000000..779db9d88b6a
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-constructor-as-prop/output.mjs
@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react";
+
+_jsx(Component, {
+  constructor: "foo"
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-deeper-js-namespacing/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-deeper-js-namespacing/input.js
new file mode 100644
index 000000000000..158b9a9dee08
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-deeper-js-namespacing/input.js
@@ -0,0 +1 @@
+<Namespace.DeepNamespace.Component />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-deeper-js-namespacing/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-deeper-js-namespacing/output.mjs
new file mode 100644
index 000000000000..196915b1d240
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-deeper-js-namespacing/output.mjs
@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react";
+
+_jsx(Namespace.DeepNamespace.Component, {});
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-elements-as-attributes/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-elements-as-attributes/input.js
new file mode 100644
index 000000000000..240f6d37ae05
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-elements-as-attributes/input.js
@@ -0,0 +1 @@
+<div attr=<div /> />
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-elements-as-attributes/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-elements-as-attributes/output.mjs
new file mode 100644
index 000000000000..6955e77f1c60
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-elements-as-attributes/output.mjs
@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react";
+
+_jsx("div", {
+  attr: _jsx("div", {})
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-js-namespacing/blacklist.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-js-namespacing/blacklist.js
new file mode 100644
index 000000000000..980df4572437
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-js-namespacing/blacklist.js
@@ -0,0 +1 @@
+React.createElement(Namespace.Component, null);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-js-namespacing/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-js-namespacing/input.js
new file mode 100644
index 000000000000..6c104620cff4
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-js-namespacing/input.js
@@ -0,0 +1 @@
+<Namespace.Component />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-js-namespacing/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-js-namespacing/output.mjs
new file mode 100644
index 000000000000..d6d6d99ce48a
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-js-namespacing/output.mjs
@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react";
+
+_jsx(Namespace.Component, {});
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-nested-fragments/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-nested-fragments/input.js
new file mode 100644
index 000000000000..73b5cad5588d
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-nested-fragments/input.js
@@ -0,0 +1,12 @@
+<div>
+  <  >
+    <>
+      <span>Hello</span>
+      <span>world</span>
+    </>
+    <>
+      <span>Goodbye</span>
+      <span>world</span>
+    </>
+  </>
+</div>
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-nested-fragments/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-nested-fragments/output.mjs
new file mode 100644
index 000000000000..fe4e5e534a86
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-nested-fragments/output.mjs
@@ -0,0 +1,21 @@
+import { jsxs as _jsxs } from "react";
+import { Fragment as _Fragment } from "react";
+import { jsx as _jsx } from "react";
+
+_jsx("div", {
+  children: _jsxs(_Fragment, {
+    children: [_jsxs(_Fragment, {
+      children: [_jsx("span", {
+        children: "Hello"
+      }), _jsx("span", {
+        children: "world"
+      })]
+    }), _jsxs(_Fragment, {
+      children: [_jsx("span", {
+        children: "Goodbye"
+      }), _jsx("span", {
+        children: "world"
+      })]
+    })]
+  })
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-avoid-wrapping-in-extra-parens-if-not-needed/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-avoid-wrapping-in-extra-parens-if-not-needed/input.js
new file mode 100644
index 000000000000..0304845f88c1
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-avoid-wrapping-in-extra-parens-if-not-needed/input.js
@@ -0,0 +1,15 @@
+var x = <div>
+  <Component />
+</div>;
+
+var x = <div>
+  {props.children}
+</div>;
+
+var x = <Composite>
+  {props.children}
+</Composite>;
+
+var x = <Composite>
+  <Composite2 />
+</Composite>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-avoid-wrapping-in-extra-parens-if-not-needed/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-avoid-wrapping-in-extra-parens-if-not-needed/output.mjs
new file mode 100644
index 000000000000..ebd6e137ef6c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-avoid-wrapping-in-extra-parens-if-not-needed/output.mjs
@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react";
+
+var x = _jsx("div", {
+  children: _jsx(Component, {})
+});
+
+var x = _jsx("div", {
+  children: props.children
+});
+
+var x = _jsx(Composite, {
+  children: props.children
+});
+
+var x = _jsx(Composite, {
+  children: _jsx(Composite2, {})
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-tags/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-tags/input.js
new file mode 100644
index 000000000000..b6d801a6bc26
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-tags/input.js
@@ -0,0 +1 @@
+var x = <div></div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-tags/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-tags/output.mjs
new file mode 100644
index 000000000000..a3f153f96a9c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-tags/output.mjs
@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react";
+
+var x = _jsx("div", {});
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-text/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-text/input.js
new file mode 100644
index 000000000000..42c927f15a90
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-text/input.js
@@ -0,0 +1 @@
+var x = <div>text</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-text/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-text/output.mjs
new file mode 100644
index 000000000000..e2caa7bf0a40
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-text/output.mjs
@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react";
+
+var x = _jsx("div", {
+  children: "text"
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-spread-children/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-spread-children/input.js
new file mode 100644
index 000000000000..6a05e108dc66
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-spread-children/input.js
@@ -0,0 +1 @@
+<div>{...children}</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-spread-children/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-spread-children/options.json
new file mode 100644
index 000000000000..bcb773e34314
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-spread-children/options.json
@@ -0,0 +1,3 @@
+{
+  "throws": "Spread children are not supported in React."
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-xml-namespacing/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-xml-namespacing/input.js
new file mode 100644
index 000000000000..50df717c1267
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-xml-namespacing/input.js
@@ -0,0 +1 @@
+<Namespace:Component />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-xml-namespacing/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-xml-namespacing/options.json
new file mode 100644
index 000000000000..8285c733a003
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-xml-namespacing/options.json
@@ -0,0 +1,3 @@
+{
+  "throws": "Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning."
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-escape-xhtml-jsxattribute/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-escape-xhtml-jsxattribute/input.js
new file mode 100644
index 000000000000..addae3b9f807
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-escape-xhtml-jsxattribute/input.js
@@ -0,0 +1,3 @@
+<div id="wôw" />;
+<div id="\w" />;
+<div id="w &lt; w" />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-escape-xhtml-jsxattribute/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-escape-xhtml-jsxattribute/output.mjs
new file mode 100644
index 000000000000..afe67fbe52df
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-escape-xhtml-jsxattribute/output.mjs
@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react";
+
+_jsx("div", {
+  id: "w\xF4w"
+});
+
+_jsx("div", {
+  id: "\\w"
+});
+
+_jsx("div", {
+  id: "w < w"
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-escape-xhtml-jsxtext/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-escape-xhtml-jsxtext/input.js
new file mode 100644
index 000000000000..2104766109bb
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-escape-xhtml-jsxtext/input.js
@@ -0,0 +1,12 @@
+<div>wow</div>;
+<div>wôw</div>;
+
+<div>w & w</div>;
+<div>w &amp; w</div>;
+
+<div>w &nbsp; w</div>;
+<div>this should not parse as unicode: \u00a0</div>;
+<div>this should parse as nbsp:   </div>;
+<div>this should parse as unicode: {'\u00a0 '}</div>;
+
+<div>w &lt; w</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-escape-xhtml-jsxtext/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-escape-xhtml-jsxtext/output.mjs
new file mode 100644
index 000000000000..a6d94d8ca06f
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-escape-xhtml-jsxtext/output.mjs
@@ -0,0 +1,38 @@
+import { jsxs as _jsxs } from "react";
+import { jsx as _jsx } from "react";
+
+_jsx("div", {
+  children: "wow"
+});
+
+_jsx("div", {
+  children: "w\xF4w"
+});
+
+_jsx("div", {
+  children: "w & w"
+});
+
+_jsx("div", {
+  children: "w & w"
+});
+
+_jsx("div", {
+  children: "w \xA0 w"
+});
+
+_jsx("div", {
+  children: "this should not parse as unicode: \\u00a0"
+});
+
+_jsx("div", {
+  children: "this should parse as nbsp: \xA0 "
+});
+
+_jsxs("div", {
+  children: ["this should parse as unicode: ", '\u00a0 ']
+});
+
+_jsx("div", {
+  children: "w < w"
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-handle-attributed-elements/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-handle-attributed-elements/input.js
new file mode 100644
index 000000000000..e17965916169
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-handle-attributed-elements/input.js
@@ -0,0 +1,11 @@
+var HelloMessage = React.createClass({
+  render: function() {
+    return <div>Hello {this.props.name}</div>;
+  }
+});
+
+React.render(<HelloMessage name={
+  <span>
+    Sebastian
+  </span>
+} />, mountNode);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-handle-attributed-elements/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-handle-attributed-elements/output.mjs
new file mode 100644
index 000000000000..15c15f3f69c6
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-handle-attributed-elements/output.mjs
@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react";
+import { jsxs as _jsxs } from "react";
+var HelloMessage = React.createClass({
+  displayName: "HelloMessage",
+  render: function () {
+    return _jsxs("div", {
+      children: ["Hello ", this.props.name]
+    });
+  }
+});
+React.render(_jsx(HelloMessage, {
+  name: _jsx("span", {
+    children: "Sebastian"
+  })
+}), mountNode);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-handle-has-own-property-correctly/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-handle-has-own-property-correctly/input.js
new file mode 100644
index 000000000000..4d5e8fb63c73
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-handle-has-own-property-correctly/input.js
@@ -0,0 +1 @@
+<hasOwnProperty>testing</hasOwnProperty>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-handle-has-own-property-correctly/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-handle-has-own-property-correctly/output.mjs
new file mode 100644
index 000000000000..6737fd229856
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-handle-has-own-property-correctly/output.mjs
@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react";
+
+_jsx("hasOwnProperty", {
+  children: "testing"
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-have-correct-comma-in-nested-children/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-have-correct-comma-in-nested-children/input.js
new file mode 100644
index 000000000000..fa82e1cd08cb
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-have-correct-comma-in-nested-children/input.js
@@ -0,0 +1,5 @@
+var x = <div>
+  <div><br /></div>
+  <Component>{foo}<br />{bar}</Component>
+  <br />
+</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-have-correct-comma-in-nested-children/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-have-correct-comma-in-nested-children/output.mjs
new file mode 100644
index 000000000000..479446f81e79
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-have-correct-comma-in-nested-children/output.mjs
@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react";
+import { jsxs as _jsxs } from "react";
+
+var x = _jsxs("div", {
+  children: [_jsx("div", {
+    children: _jsx("br", {})
+  }), _jsxs(Component, {
+    children: [foo, _jsx("br", {}), bar]
+  }), _jsx("br", {})]
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-insert-commas-after-expressions-before-whitespace/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-insert-commas-after-expressions-before-whitespace/input.js
new file mode 100644
index 000000000000..92541bbb3554
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-insert-commas-after-expressions-before-whitespace/input.js
@@ -0,0 +1,16 @@
+var x =
+  <div
+    attr1={
+      "foo" + "bar"
+    }
+    attr2={
+      "foo" + "bar" +
+
+      "baz" + "bug"
+    }
+    attr3={
+      "foo" + "bar" +
+      "baz" + "bug"
+    }
+    attr4="baz">
+  </div>
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-insert-commas-after-expressions-before-whitespace/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-insert-commas-after-expressions-before-whitespace/output.mjs
new file mode 100644
index 000000000000..44933b2637b0
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-insert-commas-after-expressions-before-whitespace/output.mjs
@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react";
+
+var x = _jsx("div", {
+  attr1: "foo" + "bar",
+  attr2: "foo" + "bar" + "baz" + "bug",
+  attr3: "foo" + "bar" + "baz" + "bug",
+  attr4: "baz"
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-add-quotes-to-identifier-names/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-add-quotes-to-identifier-names/input.js
new file mode 100644
index 000000000000..44d58a60fecf
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-add-quotes-to-identifier-names/input.js
@@ -0,0 +1 @@
+var e = <F aaa new const var default foo-bar/>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-add-quotes-to-identifier-names/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-add-quotes-to-identifier-names/output.mjs
new file mode 100644
index 000000000000..7c1c8d925303
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-add-quotes-to-identifier-names/output.mjs
@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react";
+
+var e = _jsx(F, {
+  aaa: true,
+  new: true,
+  const: true,
+  var: true,
+  default: true,
+  "foo-bar": true
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-mangle-expressioncontainer-attribute-values/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-mangle-expressioncontainer-attribute-values/input.js
new file mode 100644
index 000000000000..acecaa910f20
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-mangle-expressioncontainer-attribute-values/input.js
@@ -0,0 +1 @@
+<button data-value={"a value\n  with\nnewlines\n   and spaces"}>Button</button>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-mangle-expressioncontainer-attribute-values/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-mangle-expressioncontainer-attribute-values/output.mjs
new file mode 100644
index 000000000000..0685c4b8ad25
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-mangle-expressioncontainer-attribute-values/output.mjs
@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react";
+
+_jsx("button", {
+  "data-value": "a value\n  with\nnewlines\n   and spaces",
+  children: "Button"
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-strip-nbsp-even-coupled-with-other-whitespace/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-strip-nbsp-even-coupled-with-other-whitespace/input.js
new file mode 100644
index 000000000000..38d8acbab545
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-strip-nbsp-even-coupled-with-other-whitespace/input.js
@@ -0,0 +1 @@
+<div>&nbsp; </div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-strip-nbsp-even-coupled-with-other-whitespace/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-strip-nbsp-even-coupled-with-other-whitespace/output.mjs
new file mode 100644
index 000000000000..525901d58f90
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-strip-nbsp-even-coupled-with-other-whitespace/output.mjs
@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react";
+
+_jsx("div", {
+  children: "\xA0 "
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-strip-tags-with-a-single-child-of-nbsp/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-strip-tags-with-a-single-child-of-nbsp/input.js
new file mode 100644
index 000000000000..0e05a7be8d23
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-strip-tags-with-a-single-child-of-nbsp/input.js
@@ -0,0 +1 @@
+<div>&nbsp;</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-strip-tags-with-a-single-child-of-nbsp/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-strip-tags-with-a-single-child-of-nbsp/output.mjs
new file mode 100644
index 000000000000..4b4164d16f9c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-not-strip-tags-with-a-single-child-of-nbsp/output.mjs
@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react";
+
+_jsx("div", {
+  children: "\xA0"
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-comments-between-props/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-comments-between-props/input.js
new file mode 100644
index 000000000000..8b1943e8f683
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-comments-between-props/input.js
@@ -0,0 +1,10 @@
+var x = (
+  <div
+    /* a multi-line
+       comment */
+    attr1="foo">
+    <span // a double-slash comment
+      attr2="bar"
+    />
+  </div>
+);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-comments-between-props/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-comments-between-props/output.mjs
new file mode 100644
index 000000000000..462bda5875fb
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-comments-between-props/output.mjs
@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react";
+
+var x = _jsx("div", {
+  /* a multi-line
+     comment */
+  attr1: "foo",
+  children: _jsx("span", {
+    // a double-slash comment
+    attr2: "bar"
+  })
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-keys/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-keys/input.js
new file mode 100644
index 000000000000..336592502a4b
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-keys/input.js
@@ -0,0 +1,7 @@
+var x = (
+    <div>
+        <div key="1" />
+        <div key="2" meow="wolf" />
+        <div key="3" />
+    </div>
+);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-keys/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-keys/output.mjs
new file mode 100644
index 000000000000..e2abb0d104bb
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-keys/output.mjs
@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react";
+import { jsxs as _jsxs } from "react";
+
+var x = _jsxs("div", {
+  children: [_jsx("div", {}, "1"), _jsx("div", {
+    meow: "wolf"
+  }, "2"), _jsx("div", {}, "3")]
+});
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-null-prop-spread/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-null-prop-spread/input.js
new file mode 100644
index 000000000000..e0b99b87da51
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-null-prop-spread/input.js
@@ -0,0 +1,2 @@
+var foo = null;
+var x = <div {...foo} />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-null-prop-spread/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-null-prop-spread/output.mjs
new file mode 100644
index 000000000000..c166d9c80205
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-properly-handle-null-prop-spread/output.mjs
@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react";
+var foo = null;
+
+var x = _jsx("div", babelHelpers.extends({}, foo));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-quote-jsx-attributes/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-quote-jsx-attributes/input.js
new file mode 100644
index 000000000000..c794650e94a6
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-quote-jsx-attributes/input.js
@@ -0,0 +1 @@
+<button data-value='a value'>Button</button>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-quote-jsx-attributes/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-quote-jsx-attributes/output.mjs
new file mode 100644
index 000000000000..0ec9e6ba712e
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-quote-jsx-attributes/output.mjs
@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react";
+
+_jsx("button", {
+  "data-value": "a value",
+  children: "Button"
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-support-xml-namespaces-if-flag/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-support-xml-namespaces-if-flag/input.js
new file mode 100644
index 000000000000..48d051a95141
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-support-xml-namespaces-if-flag/input.js
@@ -0,0 +1 @@
+<f:image n:attr />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-support-xml-namespaces-if-flag/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-support-xml-namespaces-if-flag/options.json
new file mode 100644
index 000000000000..01032c9b0642
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-support-xml-namespaces-if-flag/options.json
@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    [
+      "transform-react-jsx",
+      {
+        "throwIfNamespace": false,
+        "runtime": "automatic"
+      }
+    ]
+  ]
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-support-xml-namespaces-if-flag/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-support-xml-namespaces-if-flag/output.mjs
new file mode 100644
index 000000000000..12bd955d7739
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-support-xml-namespaces-if-flag/output.mjs
@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react";
+
+_jsx("f:image", {
+  "n:attr": true
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-throw-error-namespaces-if-not-flag/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-throw-error-namespaces-if-not-flag/input.js
new file mode 100644
index 000000000000..4888b2b70588
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-throw-error-namespaces-if-not-flag/input.js
@@ -0,0 +1 @@
+<f:image />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-throw-error-namespaces-if-not-flag/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-throw-error-namespaces-if-not-flag/options.json
new file mode 100644
index 000000000000..46acc703cc5e
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-throw-error-namespaces-if-not-flag/options.json
@@ -0,0 +1,12 @@
+{
+  "plugins": [
+    [
+      "transform-react-jsx",
+      {
+        "throwIfNamespace": true,
+        "runtime": "automatic"
+      }
+    ]
+  ],
+  "throws": "Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning."
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-transform-known-hyphenated-tags/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-transform-known-hyphenated-tags/input.js
new file mode 100644
index 000000000000..1cb54dd68816
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-transform-known-hyphenated-tags/input.js
@@ -0,0 +1 @@
+<font-face />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-transform-known-hyphenated-tags/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-transform-known-hyphenated-tags/output.mjs
new file mode 100644
index 000000000000..7db2550603b9
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-transform-known-hyphenated-tags/output.mjs
@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react";
+
+_jsx("font-face", {});
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-use-createElement-when-key-comes-after-spread/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-use-createElement-when-key-comes-after-spread/input.js
new file mode 100644
index 000000000000..927a4174b6ed
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-use-createElement-when-key-comes-after-spread/input.js
@@ -0,0 +1,3 @@
+var x = (
+    <div {...props} key="1" foo="bar" />
+);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-use-createElement-when-key-comes-after-spread/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-use-createElement-when-key-comes-after-spread/output.mjs
new file mode 100644
index 000000000000..3896b27b8d56
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-use-createElement-when-key-comes-after-spread/output.mjs
@@ -0,0 +1,6 @@
+import { createElement as _createElement } from "react";
+
+var x = _createElement("div", babelHelpers.extends({}, props, {
+  key: "1",
+  foo: "bar"
+}));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-use-jsx-when-key-comes-before-spread/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-use-jsx-when-key-comes-before-spread/input.js
new file mode 100644
index 000000000000..650a8354fe4a
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-use-jsx-when-key-comes-before-spread/input.js
@@ -0,0 +1,3 @@
+var x = (
+    <div key="1" {...props} foo="bar" />
+);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-use-jsx-when-key-comes-before-spread/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-use-jsx-when-key-comes-before-spread/output.mjs
new file mode 100644
index 000000000000..1dc273bb0cba
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-use-jsx-when-key-comes-before-spread/output.mjs
@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react";
+
+var x = _jsx("div", babelHelpers.extends({}, props, {
+  foo: "bar"
+}), "1");
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/wraps-props-in-react-spread-for-last-spread-attributes/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/wraps-props-in-react-spread-for-last-spread-attributes/input.js
new file mode 100644
index 000000000000..ce7fb5b60f9f
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/wraps-props-in-react-spread-for-last-spread-attributes/input.js
@@ -0,0 +1 @@
+<Component y={2} z { ... x } />
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/wraps-props-in-react-spread-for-last-spread-attributes/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/wraps-props-in-react-spread-for-last-spread-attributes/output.mjs
new file mode 100644
index 000000000000..2c71c602085b
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/wraps-props-in-react-spread-for-last-spread-attributes/output.mjs
@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react";
+
+_jsx(Component, babelHelpers.extends({
+  y: 2,
+  z: true
+}, x));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/wraps-props-in-react-spread-for-middle-spread-attributes/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/wraps-props-in-react-spread-for-middle-spread-attributes/input.js
new file mode 100644
index 000000000000..919adaebb41e
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/wraps-props-in-react-spread-for-middle-spread-attributes/input.js
@@ -0,0 +1 @@
+<Component y={2} { ... x } z />
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/wraps-props-in-react-spread-for-middle-spread-attributes/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/wraps-props-in-react-spread-for-middle-spread-attributes/output.mjs
new file mode 100644
index 000000000000..a477f71cdad3
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/wraps-props-in-react-spread-for-middle-spread-attributes/output.mjs
@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react";
+
+_jsx(Component, babelHelpers.extends({
+  y: 2
+}, x, {
+  z: true
+}));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/.should-properly-handle-comments-adjacent-to-children/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/.should-properly-handle-comments-adjacent-to-children/input.js
new file mode 100644
index 000000000000..412984681eea
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/.should-properly-handle-comments-adjacent-to-children/input.js
@@ -0,0 +1,13 @@
+var x = (
+  <div>
+    {/* A comment at the beginning */}
+    {/* A second comment at the beginning */}
+    <span>
+      {/* A nested comment */}
+    </span>
+    {/* A sandwiched comment */}
+    <br />
+    {/* A comment at the end */}
+    {/* A second comment at the end */}
+  </div>
+);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/adds-appropriate-newlines-when-using-spread-attribute/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/adds-appropriate-newlines-when-using-spread-attribute/input.js
new file mode 100644
index 000000000000..e09c3885b741
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/adds-appropriate-newlines-when-using-spread-attribute/input.js
@@ -0,0 +1,4 @@
+/** @jsxRuntime classic */
+<Component
+  {...props}
+  sound="moo" />
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/adds-appropriate-newlines-when-using-spread-attribute/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/adds-appropriate-newlines-when-using-spread-attribute/output.js
new file mode 100644
index 000000000000..7a58810f05c4
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/adds-appropriate-newlines-when-using-spread-attribute/output.js
@@ -0,0 +1,4 @@
+/** @jsxRuntime classic */
+React.createElement(Component, babelHelpers.extends({}, props, {
+  sound: "moo"
+}));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/arrow-functions/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/arrow-functions/input.js
new file mode 100644
index 000000000000..146b5b55bc11
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/arrow-functions/input.js
@@ -0,0 +1,8 @@
+/** @jsxRuntime classic */
+var foo = function () {
+  return () => <this />;
+};
+
+var bar = function () {
+  return () => <this.foo />;
+};
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/arrow-functions/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/arrow-functions/output.js
new file mode 100644
index 000000000000..2319716dfc1e
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/arrow-functions/output.js
@@ -0,0 +1,16 @@
+/** @jsxRuntime classic */
+var foo = function () {
+  var _this = this;
+
+  return function () {
+    return React.createElement(_this, null);
+  };
+};
+
+var bar = function () {
+  var _this2 = this;
+
+  return function () {
+    return React.createElement(_this2.foo, null);
+  };
+};
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/concatenates-adjacent-string-literals/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/concatenates-adjacent-string-literals/input.js
new file mode 100644
index 000000000000..f6bc6c9137cd
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/concatenates-adjacent-string-literals/input.js
@@ -0,0 +1,14 @@
+/** @jsxRuntime classic */
+var x =
+  <div>
+    foo
+    {"bar"}
+    baz
+    <div>
+      buz
+      bang
+    </div>
+    qux
+    {null}
+    quack
+  </div>
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/concatenates-adjacent-string-literals/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/concatenates-adjacent-string-literals/output.js
new file mode 100644
index 000000000000..18a64b8eaa8a
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/concatenates-adjacent-string-literals/output.js
@@ -0,0 +1,2 @@
+/** @jsxRuntime classic */
+var x = React.createElement("div", null, "foo", "bar", "baz", React.createElement("div", null, "buz bang"), "qux", null, "quack");
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/dont-coerce-expression-containers/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/dont-coerce-expression-containers/input.js
new file mode 100644
index 000000000000..94a0cf377be2
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/dont-coerce-expression-containers/input.js
@@ -0,0 +1,6 @@
+/** @jsxRuntime classic */
+
+<Text>
+  To get started, edit index.ios.js!!!{"\n"}
+  Press Cmd+R to reload
+</Text>
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/dont-coerce-expression-containers/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/dont-coerce-expression-containers/output.js
new file mode 100644
index 000000000000..4c34d75664eb
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/dont-coerce-expression-containers/output.js
@@ -0,0 +1,2 @@
+/** @jsxRuntime classic */
+React.createElement(Text, null, "To get started, edit index.ios.js!!!", "\n", "Press Cmd+R to reload");
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment-if-jsx-pragma-option-set/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment-if-jsx-pragma-option-set/input.js
new file mode 100644
index 000000000000..69fe030d073e
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment-if-jsx-pragma-option-set/input.js
@@ -0,0 +1,9 @@
+/** @jsx dom */
+/** @jsxRuntime classic */
+
+<Foo></Foo>;
+
+var profile = <div>
+  <img src="avatar.png" className="profile" />
+  <h3>{[user.firstName, user.lastName].join(" ")}</h3>
+</div>;
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment-if-jsx-pragma-option-set/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment-if-jsx-pragma-option-set/options.json
new file mode 100644
index 000000000000..3ad1bbd803fd
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment-if-jsx-pragma-option-set/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pragma": "foo.bar", "runtime": "automatic" }]
+  ]
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment-if-jsx-pragma-option-set/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment-if-jsx-pragma-option-set/output.js
new file mode 100644
index 000000000000..8a16fa51ad57
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment-if-jsx-pragma-option-set/output.js
@@ -0,0 +1,8 @@
+/** @jsx dom */
+
+/** @jsxRuntime classic */
+dom(Foo, null);
+var profile = dom("div", null, dom("img", {
+  src: "avatar.png",
+  className: "profile"
+}), dom("h3", null, [user.firstName, user.lastName].join(" ")));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment/input.js
new file mode 100644
index 000000000000..69fe030d073e
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment/input.js
@@ -0,0 +1,9 @@
+/** @jsx dom */
+/** @jsxRuntime classic */
+
+<Foo></Foo>;
+
+var profile = <div>
+  <img src="avatar.png" className="profile" />
+  <h3>{[user.firstName, user.lastName].join(" ")}</h3>
+</div>;
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment/output.js
new file mode 100644
index 000000000000..8a16fa51ad57
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-comment/output.js
@@ -0,0 +1,8 @@
+/** @jsx dom */
+
+/** @jsxRuntime classic */
+dom(Foo, null);
+var profile = dom("div", null, dom("img", {
+  src: "avatar.png",
+  className: "profile"
+}), dom("h3", null, [user.firstName, user.lastName].join(" ")));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-pragma-option/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-pragma-option/input.js
new file mode 100644
index 000000000000..3ddd98910aa4
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-pragma-option/input.js
@@ -0,0 +1,8 @@
+/** @jsxRuntime classic */
+
+<Foo></Foo>;
+
+var profile = <div>
+  <img src="avatar.png" className="profile" />
+  <h3>{[user.firstName, user.lastName].join(" ")}</h3>
+</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-pragma-option/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-pragma-option/options.json
new file mode 100644
index 000000000000..b2f377aecdc7
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-pragma-option/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pragma": "dom", "runtime": "automatic" }]
+  ]
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-pragma-option/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-pragma-option/output.js
new file mode 100644
index 000000000000..901d0380b45b
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/honor-custom-jsx-pragma-option/output.js
@@ -0,0 +1,6 @@
+/** @jsxRuntime classic */
+dom(Foo, null);
+var profile = dom("div", null, dom("img", {
+  src: "avatar.png",
+  className: "profile"
+}), dom("h3", null, [user.firstName, user.lastName].join(" ")));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-with-retainlines-option/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-with-retainlines-option/input.js
new file mode 100644
index 000000000000..7925155a5faf
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-with-retainlines-option/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+var div = <div>test</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-with-retainlines-option/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-with-retainlines-option/options.json
new file mode 100644
index 000000000000..97925bbcb61b
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-with-retainlines-option/options.json
@@ -0,0 +1,3 @@
+{
+  "retainLines": true
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-with-retainlines-option/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-with-retainlines-option/output.js
new file mode 100644
index 000000000000..f356827adf0d
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-with-retainlines-option/output.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+var div = React.createElement("div", null, "test");
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-without-retainlines-option/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-without-retainlines-option/input.js
new file mode 100644
index 000000000000..7925155a5faf
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-without-retainlines-option/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+var div = <div>test</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-without-retainlines-option/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-without-retainlines-option/output.js
new file mode 100644
index 000000000000..2833a1567b3c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/jsx-without-retainlines-option/output.js
@@ -0,0 +1,2 @@
+/** @jsxRuntime classic */
+var div = React.createElement("div", null, "test");
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/options.json
new file mode 100644
index 000000000000..a2a30a0fea14
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/options.json
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    "external-helpers",
+    "syntax-jsx",
+    ["transform-react-jsx", { "runtime": "automatic" }],
+    "transform-react-display-name",
+    "transform-arrow-functions"
+  ]
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-add-quotes-es3/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-add-quotes-es3/input.js
new file mode 100644
index 000000000000..85136cce1ea3
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-add-quotes-es3/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+var es3 = <F aaa new const var default foo-bar/>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-add-quotes-es3/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-add-quotes-es3/options.json
new file mode 100644
index 000000000000..05afa82f8856
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-add-quotes-es3/options.json
@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "runtime": "automatic" }],
+    "transform-property-literals"
+  ]
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-add-quotes-es3/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-add-quotes-es3/output.js
new file mode 100644
index 000000000000..cf80f498eee1
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-add-quotes-es3/output.js
@@ -0,0 +1,9 @@
+/** @jsxRuntime classic */
+var es3 = React.createElement(F, {
+  aaa: true,
+  "new": true,
+  "const": true,
+  "var": true,
+  "default": true,
+  "foo-bar": true
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-constructor-as-prop/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-constructor-as-prop/input.js
new file mode 100644
index 000000000000..800405ccf161
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-constructor-as-prop/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<Component constructor="foo" />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-constructor-as-prop/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-constructor-as-prop/output.js
new file mode 100644
index 000000000000..1156e9ad21e5
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-constructor-as-prop/output.js
@@ -0,0 +1,4 @@
+/** @jsxRuntime classic */
+React.createElement(Component, {
+  constructor: "foo"
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-deeper-js-namespacing/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-deeper-js-namespacing/input.js
new file mode 100644
index 000000000000..b1901371c78c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-deeper-js-namespacing/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<Namespace.DeepNamespace.Component />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-deeper-js-namespacing/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-deeper-js-namespacing/output.js
new file mode 100644
index 000000000000..f65f2feac3a1
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-deeper-js-namespacing/output.js
@@ -0,0 +1,2 @@
+/** @jsxRuntime classic */
+React.createElement(Namespace.DeepNamespace.Component, null);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-elements-as-attributes/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-elements-as-attributes/input.js
new file mode 100644
index 000000000000..03e9c398f659
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-elements-as-attributes/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<div attr=<div /> />
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-elements-as-attributes/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-elements-as-attributes/output.js
new file mode 100644
index 000000000000..857f385cb595
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-elements-as-attributes/output.js
@@ -0,0 +1,4 @@
+/** @jsxRuntime classic */
+React.createElement("div", {
+  attr: React.createElement("div", null)
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-js-namespacing/blacklist.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-js-namespacing/blacklist.js
new file mode 100644
index 000000000000..980df4572437
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-js-namespacing/blacklist.js
@@ -0,0 +1 @@
+React.createElement(Namespace.Component, null);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-js-namespacing/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-js-namespacing/input.js
new file mode 100644
index 000000000000..2efe6a4507fe
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-js-namespacing/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<Namespace.Component />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-js-namespacing/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-js-namespacing/output.js
new file mode 100644
index 000000000000..fff105f6d0d2
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-js-namespacing/output.js
@@ -0,0 +1,2 @@
+/** @jsxRuntime classic */
+React.createElement(Namespace.Component, null);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-nested-fragments/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-nested-fragments/input.js
new file mode 100644
index 000000000000..272313559aa0
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-nested-fragments/input.js
@@ -0,0 +1,14 @@
+/** @jsxRuntime classic */
+
+<div>
+  <  >
+    <>
+      <span>Hello</span>
+      <span>world</span>
+    </>
+    <>
+      <span>Goodbye</span>
+      <span>world</span>
+    </>
+  </>
+</div>
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-nested-fragments/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-nested-fragments/output.js
new file mode 100644
index 000000000000..60487d4536f4
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-nested-fragments/output.js
@@ -0,0 +1,2 @@
+/** @jsxRuntime classic */
+React.createElement("div", null, React.createElement(React.Fragment, null, React.createElement(React.Fragment, null, React.createElement("span", null, "Hello"), React.createElement("span", null, "world")), React.createElement(React.Fragment, null, React.createElement("span", null, "Goodbye"), React.createElement("span", null, "world"))));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-no-pragmafrag-if-frag-unused/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-no-pragmafrag-if-frag-unused/input.js
new file mode 100644
index 000000000000..6502862189e8
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-no-pragmafrag-if-frag-unused/input.js
@@ -0,0 +1,4 @@
+/** @jsx dom */
+/** @jsxRuntime classic */
+
+<div>no fragment is used</div>
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-no-pragmafrag-if-frag-unused/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-no-pragmafrag-if-frag-unused/output.js
new file mode 100644
index 000000000000..7bee4e0fd605
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-no-pragmafrag-if-frag-unused/output.js
@@ -0,0 +1,4 @@
+/** @jsx dom */
+
+/** @jsxRuntime classic */
+dom("div", null, "no fragment is used");
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-pragmafrag-and-frag/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-pragmafrag-and-frag/input.js
new file mode 100644
index 000000000000..1935a8d935df
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-pragmafrag-and-frag/input.js
@@ -0,0 +1,5 @@
+/** @jsx dom */
+/** @jsxFrag DomFrag */
+/** @jsxRuntime classic */
+
+<></>
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-pragmafrag-and-frag/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-pragmafrag-and-frag/output.js
new file mode 100644
index 000000000000..3de4670bb103
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-allow-pragmafrag-and-frag/output.js
@@ -0,0 +1,6 @@
+/** @jsx dom */
+
+/** @jsxFrag DomFrag */
+
+/** @jsxRuntime classic */
+dom(DomFrag, null);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-avoid-wrapping-in-extra-parens-if-not-needed/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-avoid-wrapping-in-extra-parens-if-not-needed/input.js
new file mode 100644
index 000000000000..96e5ee53a337
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-avoid-wrapping-in-extra-parens-if-not-needed/input.js
@@ -0,0 +1,17 @@
+/** @jsxRuntime classic */
+
+var x = <div>
+  <Component />
+</div>;
+
+var x = <div>
+  {props.children}
+</div>;
+
+var x = <Composite>
+  {props.children}
+</Composite>;
+
+var x = <Composite>
+  <Composite2 />
+</Composite>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-avoid-wrapping-in-extra-parens-if-not-needed/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-avoid-wrapping-in-extra-parens-if-not-needed/output.js
new file mode 100644
index 000000000000..09e73767482e
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-avoid-wrapping-in-extra-parens-if-not-needed/output.js
@@ -0,0 +1,5 @@
+/** @jsxRuntime classic */
+var x = React.createElement("div", null, React.createElement(Component, null));
+var x = React.createElement("div", null, props.children);
+var x = React.createElement(Composite, null, props.children);
+var x = React.createElement(Composite, null, React.createElement(Composite2, null));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-convert-simple-tags/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-convert-simple-tags/input.js
new file mode 100644
index 000000000000..b44c9df498ad
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-convert-simple-tags/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+var x = <div></div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-convert-simple-tags/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-convert-simple-tags/output.js
new file mode 100644
index 000000000000..381438c5ff9a
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-convert-simple-tags/output.js
@@ -0,0 +1,2 @@
+/** @jsxRuntime classic */
+var x = React.createElement("div", null);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-convert-simple-text/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-convert-simple-text/input.js
new file mode 100644
index 000000000000..58ce60409dff
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-convert-simple-text/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+var x = <div>text</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-convert-simple-text/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-convert-simple-text/output.js
new file mode 100644
index 000000000000..de532be0e81c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-convert-simple-text/output.js
@@ -0,0 +1,2 @@
+/** @jsxRuntime classic */
+var x = React.createElement("div", null, "text");
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-disallow-spread-children/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-disallow-spread-children/input.js
new file mode 100644
index 000000000000..f03824881760
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-disallow-spread-children/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<div>{...children}</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-disallow-spread-children/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-disallow-spread-children/options.json
new file mode 100644
index 000000000000..bcb773e34314
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-disallow-spread-children/options.json
@@ -0,0 +1,3 @@
+{
+  "throws": "Spread children are not supported in React."
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-disallow-xml-namespacing/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-disallow-xml-namespacing/input.js
new file mode 100644
index 000000000000..bf7dfa85e491
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-disallow-xml-namespacing/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<Namespace:Component />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-disallow-xml-namespacing/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-disallow-xml-namespacing/options.json
new file mode 100644
index 000000000000..8285c733a003
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-disallow-xml-namespacing/options.json
@@ -0,0 +1,3 @@
+{
+  "throws": "Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning."
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-escape-xhtml-jsxattribute/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-escape-xhtml-jsxattribute/input.js
new file mode 100644
index 000000000000..e2bf4e81ff6b
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-escape-xhtml-jsxattribute/input.js
@@ -0,0 +1,5 @@
+/** @jsxRuntime classic */
+
+<div id="wôw" />;
+<div id="\w" />;
+<div id="w &lt; w" />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-escape-xhtml-jsxattribute/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-escape-xhtml-jsxattribute/output.js
new file mode 100644
index 000000000000..62d7d5b7b388
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-escape-xhtml-jsxattribute/output.js
@@ -0,0 +1,10 @@
+/** @jsxRuntime classic */
+React.createElement("div", {
+  id: "w\xF4w"
+});
+React.createElement("div", {
+  id: "\\w"
+});
+React.createElement("div", {
+  id: "w < w"
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-escape-xhtml-jsxtext/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-escape-xhtml-jsxtext/input.js
new file mode 100644
index 000000000000..c8ace0874559
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-escape-xhtml-jsxtext/input.js
@@ -0,0 +1,14 @@
+/** @jsxRuntime classic */
+
+<div>wow</div>;
+<div>wôw</div>;
+
+<div>w & w</div>;
+<div>w &amp; w</div>;
+
+<div>w &nbsp; w</div>;
+<div>this should not parse as unicode: \u00a0</div>;
+<div>this should parse as nbsp:   </div>;
+<div>this should parse as unicode: {'\u00a0 '}</div>;
+
+<div>w &lt; w</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-escape-xhtml-jsxtext/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-escape-xhtml-jsxtext/output.js
new file mode 100644
index 000000000000..f454df922d7b
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-escape-xhtml-jsxtext/output.js
@@ -0,0 +1,10 @@
+/** @jsxRuntime classic */
+React.createElement("div", null, "wow");
+React.createElement("div", null, "w\xF4w");
+React.createElement("div", null, "w & w");
+React.createElement("div", null, "w & w");
+React.createElement("div", null, "w \xA0 w");
+React.createElement("div", null, "this should not parse as unicode: \\u00a0");
+React.createElement("div", null, "this should parse as nbsp: \xA0 ");
+React.createElement("div", null, "this should parse as unicode: ", '\u00a0 ');
+React.createElement("div", null, "w < w");
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-handle-attributed-elements/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-handle-attributed-elements/input.js
new file mode 100644
index 000000000000..d98877346313
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-handle-attributed-elements/input.js
@@ -0,0 +1,13 @@
+/** @jsxRuntime classic */
+
+var HelloMessage = React.createClass({
+  render: function() {
+    return <div>Hello {this.props.name}</div>;
+  }
+});
+
+React.render(<HelloMessage name={
+  <span>
+    Sebastian
+  </span>
+} />, mountNode);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-handle-attributed-elements/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-handle-attributed-elements/output.js
new file mode 100644
index 000000000000..1243c0396ccd
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-handle-attributed-elements/output.js
@@ -0,0 +1,10 @@
+/** @jsxRuntime classic */
+var HelloMessage = React.createClass({
+  displayName: "HelloMessage",
+  render: function () {
+    return React.createElement("div", null, "Hello ", this.props.name);
+  }
+});
+React.render(React.createElement(HelloMessage, {
+  name: React.createElement("span", null, "Sebastian")
+}), mountNode);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-handle-has-own-property-correctly/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-handle-has-own-property-correctly/input.js
new file mode 100644
index 000000000000..ae52aae15dc4
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-handle-has-own-property-correctly/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<hasOwnProperty>testing</hasOwnProperty>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-handle-has-own-property-correctly/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-handle-has-own-property-correctly/output.js
new file mode 100644
index 000000000000..6712b7d9ed02
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-handle-has-own-property-correctly/output.js
@@ -0,0 +1,2 @@
+/** @jsxRuntime classic */
+React.createElement("hasOwnProperty", null, "testing");
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-have-correct-comma-in-nested-children/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-have-correct-comma-in-nested-children/input.js
new file mode 100644
index 000000000000..e52b86a63c72
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-have-correct-comma-in-nested-children/input.js
@@ -0,0 +1,7 @@
+/** @jsxRuntime classic */
+
+var x = <div>
+  <div><br /></div>
+  <Component>{foo}<br />{bar}</Component>
+  <br />
+</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-have-correct-comma-in-nested-children/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-have-correct-comma-in-nested-children/output.js
new file mode 100644
index 000000000000..dbf0abc89047
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-have-correct-comma-in-nested-children/output.js
@@ -0,0 +1,2 @@
+/** @jsxRuntime classic */
+var x = React.createElement("div", null, React.createElement("div", null, React.createElement("br", null)), React.createElement(Component, null, foo, React.createElement("br", null), bar), React.createElement("br", null));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-insert-commas-after-expressions-before-whitespace/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-insert-commas-after-expressions-before-whitespace/input.js
new file mode 100644
index 000000000000..0ae0d87be78c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-insert-commas-after-expressions-before-whitespace/input.js
@@ -0,0 +1,18 @@
+/** @jsxRuntime classic */
+
+var x =
+  <div
+    attr1={
+      "foo" + "bar"
+    }
+    attr2={
+      "foo" + "bar" +
+
+      "baz" + "bug"
+    }
+    attr3={
+      "foo" + "bar" +
+      "baz" + "bug"
+    }
+    attr4="baz">
+  </div>
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-insert-commas-after-expressions-before-whitespace/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-insert-commas-after-expressions-before-whitespace/output.js
new file mode 100644
index 000000000000..6b74708096a6
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-insert-commas-after-expressions-before-whitespace/output.js
@@ -0,0 +1,7 @@
+/** @jsxRuntime classic */
+var x = React.createElement("div", {
+  attr1: "foo" + "bar",
+  attr2: "foo" + "bar" + "baz" + "bug",
+  attr3: "foo" + "bar" + "baz" + "bug",
+  attr4: "baz"
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-add-quotes-to-identifier-names/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-add-quotes-to-identifier-names/input.js
new file mode 100644
index 000000000000..46d290d40ab8
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-add-quotes-to-identifier-names/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+var e = <F aaa new const var default foo-bar/>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-add-quotes-to-identifier-names/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-add-quotes-to-identifier-names/output.js
new file mode 100644
index 000000000000..316e48957b6c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-add-quotes-to-identifier-names/output.js
@@ -0,0 +1,9 @@
+/** @jsxRuntime classic */
+var e = React.createElement(F, {
+  aaa: true,
+  new: true,
+  const: true,
+  var: true,
+  default: true,
+  "foo-bar": true
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-mangle-expressioncontainer-attribute-values/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-mangle-expressioncontainer-attribute-values/input.js
new file mode 100644
index 000000000000..ae5c7e9ea9c9
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-mangle-expressioncontainer-attribute-values/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<button data-value={"a value\n  with\nnewlines\n   and spaces"}>Button</button>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-mangle-expressioncontainer-attribute-values/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-mangle-expressioncontainer-attribute-values/output.js
new file mode 100644
index 000000000000..f4b00c31146c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-mangle-expressioncontainer-attribute-values/output.js
@@ -0,0 +1,4 @@
+/** @jsxRuntime classic */
+React.createElement("button", {
+  "data-value": "a value\n  with\nnewlines\n   and spaces"
+}, "Button");
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-strip-nbsp-even-coupled-with-other-whitespace/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-strip-nbsp-even-coupled-with-other-whitespace/input.js
new file mode 100644
index 000000000000..789953ea0edb
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-strip-nbsp-even-coupled-with-other-whitespace/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<div>&nbsp; </div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-strip-nbsp-even-coupled-with-other-whitespace/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-strip-nbsp-even-coupled-with-other-whitespace/output.js
new file mode 100644
index 000000000000..4d0d07b3472b
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-strip-nbsp-even-coupled-with-other-whitespace/output.js
@@ -0,0 +1,2 @@
+/** @jsxRuntime classic */
+React.createElement("div", null, "\xA0 ");
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-strip-tags-with-a-single-child-of-nbsp/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-strip-tags-with-a-single-child-of-nbsp/input.js
new file mode 100644
index 000000000000..f6f9afef7293
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-strip-tags-with-a-single-child-of-nbsp/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<div>&nbsp;</div>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-strip-tags-with-a-single-child-of-nbsp/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-strip-tags-with-a-single-child-of-nbsp/output.js
new file mode 100644
index 000000000000..bddba3c73600
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-not-strip-tags-with-a-single-child-of-nbsp/output.js
@@ -0,0 +1,2 @@
+/** @jsxRuntime classic */
+React.createElement("div", null, "\xA0");
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-properly-handle-comments-between-props/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-properly-handle-comments-between-props/input.js
new file mode 100644
index 000000000000..2e3a655a52d3
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-properly-handle-comments-between-props/input.js
@@ -0,0 +1,12 @@
+/** @jsxRuntime classic */
+
+var x = (
+  <div
+    /* a multi-line
+       comment */
+    attr1="foo">
+    <span // a double-slash comment
+      attr2="bar"
+    />
+  </div>
+);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-properly-handle-comments-between-props/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-properly-handle-comments-between-props/output.js
new file mode 100644
index 000000000000..3b70990d4a13
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-properly-handle-comments-between-props/output.js
@@ -0,0 +1,9 @@
+/** @jsxRuntime classic */
+var x = React.createElement("div", {
+  /* a multi-line
+     comment */
+  attr1: "foo"
+}, React.createElement("span", {
+  // a double-slash comment
+  attr2: "bar"
+}));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-quote-jsx-attributes/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-quote-jsx-attributes/input.js
new file mode 100644
index 000000000000..399eddb8b475
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-quote-jsx-attributes/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<button data-value='a value'>Button</button>;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-quote-jsx-attributes/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-quote-jsx-attributes/output.js
new file mode 100644
index 000000000000..3c85b458caf8
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-quote-jsx-attributes/output.js
@@ -0,0 +1,4 @@
+/** @jsxRuntime classic */
+React.createElement("button", {
+  "data-value": "a value"
+}, "Button");
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-support-xml-namespaces-if-flag/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-support-xml-namespaces-if-flag/input.js
new file mode 100644
index 000000000000..c5de49d37618
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-support-xml-namespaces-if-flag/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<f:image n:attr />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-support-xml-namespaces-if-flag/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-support-xml-namespaces-if-flag/options.json
new file mode 100644
index 000000000000..c5af191ffe67
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-support-xml-namespaces-if-flag/options.json
@@ -0,0 +1,12 @@
+{
+  "plugins": [
+    [
+      "transform-react-jsx",
+      {
+        "pragma": "h",
+        "throwIfNamespace": false,
+        "runtime": "automatic"
+      }
+    ]
+  ]
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-support-xml-namespaces-if-flag/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-support-xml-namespaces-if-flag/output.js
new file mode 100644
index 000000000000..4ffc02d7cded
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-support-xml-namespaces-if-flag/output.js
@@ -0,0 +1,4 @@
+/** @jsxRuntime classic */
+h("f:image", {
+  "n:attr": true
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-throw-error-namespaces-if-not-flag/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-throw-error-namespaces-if-not-flag/input.js
new file mode 100644
index 000000000000..2734035ec061
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-throw-error-namespaces-if-not-flag/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<f:image />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-throw-error-namespaces-if-not-flag/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-throw-error-namespaces-if-not-flag/options.json
new file mode 100644
index 000000000000..261ae7727779
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-throw-error-namespaces-if-not-flag/options.json
@@ -0,0 +1,12 @@
+{
+  "plugins": [
+    [
+      "transform-react-jsx",
+      {
+        "pragma": "h",
+        "throwIfNamespace": true
+      }
+    ]
+  ],
+  "throws": "Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning."
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-transform-known-hyphenated-tags/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-transform-known-hyphenated-tags/input.js
new file mode 100644
index 000000000000..65294a1b6c43
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-transform-known-hyphenated-tags/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<font-face />;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-transform-known-hyphenated-tags/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-transform-known-hyphenated-tags/output.js
new file mode 100644
index 000000000000..fba27cd6176d
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/should-transform-known-hyphenated-tags/output.js
@@ -0,0 +1,2 @@
+/** @jsxRuntime classic */
+React.createElement("font-face", null);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/throw-if-pragma-set-but-not-pragmafrag-and-frag-used/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/throw-if-pragma-set-but-not-pragmafrag-and-frag-used/input.js
new file mode 100644
index 000000000000..c361fa6b7ab3
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/throw-if-pragma-set-but-not-pragmafrag-and-frag-used/input.js
@@ -0,0 +1,5 @@
+/** @jsx dom */
+/** @jsxRuntime classic */
+
+
+<></>
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/throw-if-pragma-set-but-not-pragmafrag-and-frag-used/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/throw-if-pragma-set-but-not-pragmafrag-and-frag-used/options.json
new file mode 100644
index 000000000000..1bfb659b3c98
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/throw-if-pragma-set-but-not-pragmafrag-and-frag-used/options.json
@@ -0,0 +1,3 @@
+{
+  "throws": "transform-react-jsx: pragma has been set but pragmaFrag has not been set"
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-first-spread-attributes/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-first-spread-attributes/input.js
new file mode 100644
index 000000000000..e9ada7436fca
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-first-spread-attributes/input.js
@@ -0,0 +1,4 @@
+/** @jsxRuntime classic */
+
+<Component { ... x } y
+={2 } z />
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-first-spread-attributes/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-first-spread-attributes/output.js
new file mode 100644
index 000000000000..b4c57a3e7697
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-first-spread-attributes/output.js
@@ -0,0 +1,5 @@
+/** @jsxRuntime classic */
+React.createElement(Component, babelHelpers.extends({}, x, {
+  y: 2,
+  z: true
+}));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-last-spread-attributes/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-last-spread-attributes/input.js
new file mode 100644
index 000000000000..547ac8c77303
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-last-spread-attributes/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<Component y={2} z { ... x } />
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-last-spread-attributes/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-last-spread-attributes/output.js
new file mode 100644
index 000000000000..09c373f8a7e2
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-last-spread-attributes/output.js
@@ -0,0 +1,5 @@
+/** @jsxRuntime classic */
+React.createElement(Component, babelHelpers.extends({
+  y: 2,
+  z: true
+}, x));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-middle-spread-attributes/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-middle-spread-attributes/input.js
new file mode 100644
index 000000000000..592896ed5627
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-middle-spread-attributes/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+<Component y={2} { ... x } z />
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-middle-spread-attributes/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-middle-spread-attributes/output.js
new file mode 100644
index 000000000000..228e2fd177b0
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/wraps-props-in-react-spread-for-middle-spread-attributes/output.js
@@ -0,0 +1,6 @@
+/** @jsxRuntime classic */
+React.createElement(Component, babelHelpers.extends({
+  y: 2
+}, x, {
+  z: true
+}));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/classic/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/classic/input.js
new file mode 100644
index 000000000000..6a6f1f219c0d
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/classic/input.js
@@ -0,0 +1 @@
+var x = (<div><span /></div>);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/classic/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/classic/options.json
new file mode 100644
index 000000000000..d160ab6860bc
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/classic/options.json
@@ -0,0 +1,3 @@
+{
+  "plugins": [["transform-react-jsx", { "runtime": "classic" }]]
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/classic/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/classic/output.js
new file mode 100644
index 000000000000..0e2ff2c53ccd
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/classic/output.js
@@ -0,0 +1 @@
+var x = React.createElement("div", null, React.createElement("span", null));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/defaults-to-classic/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/defaults-to-classic/input.js
new file mode 100644
index 000000000000..6a6f1f219c0d
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/defaults-to-classic/input.js
@@ -0,0 +1 @@
+var x = (<div><span /></div>);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/defaults-to-classic/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/defaults-to-classic/options.json
new file mode 100644
index 000000000000..4f654b820699
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/defaults-to-classic/options.json
@@ -0,0 +1,3 @@
+{
+  "plugins": ["transform-react-jsx"]
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/defaults-to-classic/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/defaults-to-classic/output.js
new file mode 100644
index 000000000000..0e2ff2c53ccd
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/defaults-to-classic/output.js
@@ -0,0 +1 @@
+var x = React.createElement("div", null, React.createElement("span", null));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/invalid-runtime/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/invalid-runtime/input.js
new file mode 100644
index 000000000000..6a6f1f219c0d
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/invalid-runtime/input.js
@@ -0,0 +1 @@
+var x = (<div><span /></div>);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/invalid-runtime/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/invalid-runtime/options.json
new file mode 100644
index 000000000000..2fb8c2b01d57
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/invalid-runtime/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": [["transform-react-jsx", { "runtime": "invalidOption" }]],
+  "throws": "Runtime must be either \"classic\" or \"automatic\"."
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/pragma-runtime-classsic/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/pragma-runtime-classsic/input.js
new file mode 100644
index 000000000000..0b5717e407b4
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/pragma-runtime-classsic/input.js
@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+
+var x = (<div><span /></div>);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/pragma-runtime-classsic/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/pragma-runtime-classsic/options.json
new file mode 100644
index 000000000000..e963e89a9c2c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/pragma-runtime-classsic/options.json
@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    [
+      "transform-react-jsx",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ]
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/pragma-runtime-classsic/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/pragma-runtime-classsic/output.js
new file mode 100644
index 000000000000..6858ec824019
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/pragma-runtime-classsic/output.js
@@ -0,0 +1,2 @@
+/** @jsxRuntime classic */
+var x = React.createElement("div", null, React.createElement("span", null));
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/runtime-automatic/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/runtime-automatic/input.js
new file mode 100644
index 000000000000..6a6f1f219c0d
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/runtime-automatic/input.js
@@ -0,0 +1 @@
+var x = (<div><span /></div>);
\ No newline at end of file
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/runtime-automatic/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/runtime-automatic/options.json
new file mode 100644
index 000000000000..e963e89a9c2c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/runtime-automatic/options.json
@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    [
+      "transform-react-jsx",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ]
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/runtime-automatic/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/runtime-automatic/output.js
new file mode 100644
index 000000000000..b3fb7b6b6fd1
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/runtime-automatic/output.js
@@ -0,0 +1,5 @@
+var _react = require("react");
+
+var x = _react.jsx("div", {
+  children: _react.jsx("span", {})
+});