Skip to content

Commit

Permalink
Warn if outdated JSX transform is detected (#28781)
Browse files Browse the repository at this point in the history
We want to warn if we detect that an app is using an outdated JSX
transform. We can't just warn if `createElement` is called because we
still support `createElement` when it's called manually. We only want to
warn if `createElement` is output by the compiler.

The heuristic is to check for a `__self` prop, which is an optional,
internal prop that older transforms used to pass to `createElement` for
better debugging in development mode.

If `__self` is present, we `console.warn` once with advice to upgrade to
the modern JSX transform. Subsequent elements will not warn.

There's a special case we have to account for: when a static "key" prop
is defined _after_ a spread, the modern JSX transform outputs
`createElement` instead of `jsx`. (This is because with `jsx`, a spread
key always takes precedence over a static key, regardless of the order,
whereas `createElement` respects the order.) To avoid a false positive
warning, we skip the warning whenever a `key` prop is present.

DiffTrain build for commit ed3c65c.
  • Loading branch information
acdlite committed Apr 9, 2024
1 parent d2b1651 commit d71465b
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<1fbc8fa493dfbca4298090a431bfb47d>>
* @generated SignedSource<<832479729fc2cc71c00f35327562558b>>
*/

"use strict";
Expand All @@ -26,7 +26,7 @@ if (__DEV__) {
}
var dynamicFlagsUntyped = require("ReactNativeInternalFeatureFlags");

var ReactVersion = "19.0.0-canary-9ab97ea0";
var ReactVersion = "19.0.0-canary-2b42919c";

// ATTENTION
// When adding new symbols to this file,
Expand Down Expand Up @@ -1306,6 +1306,7 @@ if (__DEV__) {
var specialPropKeyWarningShown;
var specialPropRefWarningShown;
var didWarnAboutStringRefs;
var didWarnAboutOldJSXRuntime;

{
didWarnAboutStringRefs = {};
Expand Down Expand Up @@ -1819,6 +1820,27 @@ if (__DEV__) {
var ref = null;

if (config != null) {
{
if (
!didWarnAboutOldJSXRuntime &&
"__self" in config && // Do not assume this is the result of an oudated JSX transform if key
// is present, because the modern JSX transform sometimes outputs
// createElement to preserve precedence between a static key and a
// spread key. To avoid false positive warnings, we never warn if
// there's a key.
!("key" in config)
) {
didWarnAboutOldJSXRuntime = true;

warn(
"Your app (or one of its dependencies) is using an outdated JSX " +
"transform. Update to the modern JSX transform for " +
"faster performance: " + // TODO: Create a short link for this
"https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html"
);
}
}

if (hasValidRef(config)) {
{
ref = config.ref;
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
3f9e237a2feb74f1fca23b76d9d2e9e1713e2ba1
ed3c65caf042f75fe2fdc2a5e568a9624c6175fb

0 comments on commit d71465b

Please sign in to comment.