add jsx-runtime and jsx-dev-runtime (facebook#18299)

This PR adds the jsx-runtime and jsx-dev-runtime modules for the JSX
Babel Plugin. WWW still relies on jsx/jsxs/jsxDEV from the "react"
module, so once we refactor the code to point to the runtime modules we
will remove jsx/jsxs/jsxDEV from the "react" module.

packages/react/index.classic.fb.js

@@ -50,8 +50,5 @@ export {
   DEPRECATED_createResponder,
   // enableScopeAPI
   unstable_createScope,
-  // enableJSXTransformAPI
-  jsx,
-  jsxs,
-  jsxDEV,
 } from './src/React';
+export {jsx, jsxs, jsxDEV} from './src/jsx/ReactJSX';

packages/react/index.experimental.js

@@ -45,8 +45,5 @@ export {
   unstable_withSuspenseConfig,
   // enableBlocksAPI
   block,
-  // enableJSXTransformAPI
-  jsx,
-  jsxs,
-  jsxDEV,
 } from './src/React';
+export {jsx, jsxs, jsxDEV} from './src/jsx/ReactJSX';

packages/react/index.js

@@ -76,7 +76,5 @@ export {
   DEPRECATED_createResponder,
   unstable_createFundamental,
   unstable_createScope,
-  jsx,
-  jsxs,
-  jsxDEV,
 } from './src/React';
+export {jsx, jsxs, jsxDEV} from './src/jsx/ReactJSX';

packages/react/index.modern.fb.js

@@ -49,8 +49,5 @@ export {
   DEPRECATED_createResponder,
   // enableScopeAPI
   unstable_createScope,
-  // enableJSXTransformAPI
-  jsx,
-  jsxs,
-  jsxDEV,
 } from './src/React';
+export {jsx, jsxs, jsxDEV} from './src/jsx/ReactJSX';

packages/react/jsx-dev-runtime.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {Fragment, jsxDEV} from './src/jsx/ReactJSX';

packages/react/jsx-runtime.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+export {Fragment, jsx, jsxs} from './src/jsx/ReactJSX';

packages/react/npm/jsx-dev-runtime.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-dev-runtime.production.min.js');
+} else {
+  module.exports = require('./cjs/react-jsx-dev-runtime.development.js');
+}

packages/react/npm/jsx-runtime.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-runtime.production.min.js');
+} else {
+  module.exports = require('./cjs/react-jsx-runtime.development.js');
+}

packages/react/package.json

@@ -14,7 +14,9 @@
     "build-info.json",
     "index.js",
     "cjs/",
-    "umd/"
+    "umd/",
+    "jsx-runtime.js",
+    "jsx-dev-runtime.js"
   ],
   "main": "index.js",
   "repository": {

packages/react/src/React.js

@@ -24,7 +24,6 @@ import {
   createFactory as createFactoryProd,
   cloneElement as cloneElementProd,
   isValidElement,
-  jsx as jsxProd,
 } from './ReactElement';
 import {createContext} from './ReactContext';
 import {lazy} from './ReactLazy';
@@ -52,9 +51,6 @@ import {
   createElementWithValidation,
   createFactoryWithValidation,
   cloneElementWithValidation,
-  jsxWithValidation,
-  jsxWithValidationStatic,
-  jsxWithValidationDynamic,
 } from './ReactElementValidator';
 import createMutableSource from './createMutableSource';
 import ReactSharedInternals from './ReactSharedInternals';
@@ -67,12 +63,6 @@ const createElement = __DEV__ ? createElementWithValidation : createElementProd;
 const cloneElement = __DEV__ ? cloneElementWithValidation : cloneElementProd;
 const createFactory = __DEV__ ? createFactoryWithValidation : createFactoryProd;
 
-const jsxDEV = __DEV__ ? jsxWithValidation : undefined;
-const jsx = __DEV__ ? jsxWithValidationDynamic : jsxProd;
-// we may want to special case jsxs internally to take advantage of static children.
-// for now we can ship identical prod functions
-const jsxs = __DEV__ ? jsxWithValidationStatic : jsxProd;
-
 const Children = {
   map,
   forEach,
@@ -127,9 +117,4 @@ export {
   createFundamental as unstable_createFundamental,
   // enableScopeAPI
   createScope as unstable_createScope,
-  // enableJSXTransformAPI
-  jsx,
-  jsxs,
-  // TODO: jsxDEV should not be exposed as a name. We might want to move it to a different entry point.
-  jsxDEV,
 };

packages/react/src/ReactDebugCurrentFrame.js

@@ -23,6 +23,13 @@ export function setCurrentlyValidatingElement(element: null | ReactElement) {
 }
 
 if (__DEV__) {
+  ReactDebugCurrentFrame.setCurrentlyValidatingElement = function(
+    element: null | ReactElement,
+  ) {
+    if (__DEV__) {
+      currentlyValidatingElement = element;
+    }
+  };
   // Stack implementation injected by the current renderer.
   ReactDebugCurrentFrame.getCurrentStack = (null: null | (() => string));
 

packages/react/src/ReactElementValidator.js

@@ -21,16 +21,10 @@ import {
   REACT_FRAGMENT_TYPE,
   REACT_ELEMENT_TYPE,
 } from 'shared/ReactSymbols';
-import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags';
 import checkPropTypes from 'shared/checkPropTypes';
 
 import ReactCurrentOwner from './ReactCurrentOwner';
-import {
-  isValidElement,
-  createElement,
-  cloneElement,
-  jsxDEV,
-} from './ReactElement';
+import {isValidElement, createElement, cloneElement} from './ReactElement';
 import {setCurrentlyValidatingElement} from './ReactDebugCurrentFrame';
 
 let propTypesMisspellWarningShown;
@@ -39,8 +33,6 @@ if (__DEV__) {
   propTypesMisspellWarningShown = false;
 }
 
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
 function getDeclarationErrorAddendum() {
   if (ReactCurrentOwner.current) {
     const name = getComponentName(ReactCurrentOwner.current.type);
@@ -261,137 +253,6 @@ function validateFragmentProps(fragment) {
   }
 }
 
-export function jsxWithValidation(
-  type,
-  props,
-  key,
-  isStaticChildren,
-  source,
-  self,
-) {
-  const validType = isValidElementType(type);
-
-  // We warn in this case but don't throw. We expect the element creation to
-  // succeed and there will likely be errors in render.
-  if (!validType) {
-    let info = '';
-    if (
-      type === undefined ||
-      (typeof type === 'object' &&
-        type !== null &&
-        Object.keys(type).length === 0)
-    ) {
-      info +=
-        ' You likely forgot to export your component from the file ' +
-        "it's defined in, or you might have mixed up default and named imports.";
-    }
-
-    const sourceInfo = getSourceInfoErrorAddendum(source);
-    if (sourceInfo) {
-      info += sourceInfo;
-    } else {
-      info += getDeclarationErrorAddendum();
-    }
-
-    let typeString;
-    if (type === null) {
-      typeString = 'null';
-    } else if (Array.isArray(type)) {
-      typeString = 'array';
-    } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
-      typeString = `<${getComponentName(type.type) || 'Unknown'} />`;
-      info =
-        ' Did you accidentally export a JSX literal instead of a component?';
-    } else {
-      typeString = typeof type;
-    }
-
-    if (__DEV__) {
-      console.error(
-        'React.jsx: type is invalid -- expected a string (for ' +
-          'built-in components) or a class/function (for composite ' +
-          'components) but got: %s.%s',
-        typeString,
-        info,
-      );
-    }
-  }
-
-  const element = jsxDEV(type, props, key, source, self);
-
-  // The result can be nullish if a mock or a custom function is used.
-  // TODO: Drop this when these are no longer allowed as the type argument.
-  if (element == null) {
-    return element;
-  }
-
-  // Skip key warning if the type isn't valid since our key validation logic
-  // doesn't expect a non-string/function type and can throw confusing errors.
-  // We don't want exception behavior to differ between dev and prod.
-  // (Rendering will throw with a helpful message and as soon as the type is
-  // fixed, the key warnings will appear.)
-
-  if (validType) {
-    const children = props.children;
-    if (children !== undefined) {
-      if (isStaticChildren) {
-        if (Array.isArray(children)) {
-          for (let i = 0; i < children.length; i++) {
-            validateChildKeys(children[i], type);
-          }
-
-          if (Object.freeze) {
-            Object.freeze(children);
-          }
-        } else {
-          if (__DEV__) {
-            console.error(
-              'React.jsx: Static children should always be an array. ' +
-                'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +
-                'Use the Babel transform instead.',
-            );
-          }
-        }
-      } else {
-        validateChildKeys(children, type);
-      }
-    }
-  }
-
-  if (__DEV__) {
-    if (warnAboutSpreadingKeyToJSX) {
-      if (hasOwnProperty.call(props, 'key')) {
-        console.error(
-          'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
-            'Explicitly pass a key after spreading props in your JSX call. ' +
-            'E.g. <%s {...props} key={key} />',
-          getComponentName(type) || 'ComponentName',
-        );
-      }
-    }
-  }
-
-  if (type === REACT_FRAGMENT_TYPE) {
-    validateFragmentProps(element);
-  } else {
-    validatePropTypes(element);
-  }
-
-  return element;
-}
-
-// These two functions exist to still get child warnings in dev
-// even with the prod transform. This means that jsxDEV is purely
-// opt-in behavior for better messages but that we won't stop
-// giving you warnings if you use production apis.
-export function jsxWithValidationStatic(type, props, key) {
-  return jsxWithValidation(type, props, key, true);
-}
-
-export function jsxWithValidationDynamic(type, props, key) {
-  return jsxWithValidation(type, props, key, false);
-}
-
 export function createElementWithValidation(type, props, children) {
   const validType = isValidElementType(type);