Skip to content

Commit d71465b

Browse files
committed
Warn if outdated JSX transform is detected (#28781)
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.
1 parent d2b1651 commit d71465b

File tree

2 files changed

+25
-3
lines changed
  • compiled-rn/facebook-fbsource/xplat/js

2 files changed

+25
-3
lines changed

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<1fbc8fa493dfbca4298090a431bfb47d>>
10+
* @generated SignedSource<<832479729fc2cc71c00f35327562558b>>
1111
*/
1212

1313
"use strict";
@@ -26,7 +26,7 @@ if (__DEV__) {
2626
}
2727
var dynamicFlagsUntyped = require("ReactNativeInternalFeatureFlags");
2828

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

3131
// ATTENTION
3232
// When adding new symbols to this file,
@@ -1306,6 +1306,7 @@ if (__DEV__) {
13061306
var specialPropKeyWarningShown;
13071307
var specialPropRefWarningShown;
13081308
var didWarnAboutStringRefs;
1309+
var didWarnAboutOldJSXRuntime;
13091310

13101311
{
13111312
didWarnAboutStringRefs = {};
@@ -1819,6 +1820,27 @@ if (__DEV__) {
18191820
var ref = null;
18201821

18211822
if (config != null) {
1823+
{
1824+
if (
1825+
!didWarnAboutOldJSXRuntime &&
1826+
"__self" in config && // Do not assume this is the result of an oudated JSX transform if key
1827+
// is present, because the modern JSX transform sometimes outputs
1828+
// createElement to preserve precedence between a static key and a
1829+
// spread key. To avoid false positive warnings, we never warn if
1830+
// there's a key.
1831+
!("key" in config)
1832+
) {
1833+
didWarnAboutOldJSXRuntime = true;
1834+
1835+
warn(
1836+
"Your app (or one of its dependencies) is using an outdated JSX " +
1837+
"transform. Update to the modern JSX transform for " +
1838+
"faster performance: " + // TODO: Create a short link for this
1839+
"https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html"
1840+
);
1841+
}
1842+
}
1843+
18221844
if (hasValidRef(config)) {
18231845
{
18241846
ref = config.ref;
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
3f9e237a2feb74f1fca23b76d9d2e9e1713e2ba1
1+
ed3c65caf042f75fe2fdc2a5e568a9624c6175fb

0 commit comments

Comments
 (0)