OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2026-01-15 12:15:22 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

[compiler] Visit nested scopes in pruned scopes in PromoteUsedTemporaries

Browse Source 
While debugging #30536 I happened to notice that the bug only reproduced
when there was interleaving scopes, and observed that an unpruned scope
nested inside of a pruned one was not being visited by
CollectPromotableTemporaries, which keeps track of which identifiers
should be promoted later. Therefore when actually promoting temporaries
we were skipping over the identifiers in children of pruned scopes

ghstack-source-id: d805f62f22
Pull Request resolved: https://github.com/facebook/react/pull/30537
This commit is contained in:
Lauren Tan
2024-07-30 16:55:41 -04:00
parent edfaa99f01
commit d06196c1cd
5 changed files with 104 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PromoteUsedTemporaries.ts
View File

@@ -138,6 +138,7 @@ class CollectPromotableTemporaries extends ReactiveFunctionVisitor<State> {
usedOutsideScope: false,
});
}
this.visitBlock(scopeBlock.instructions, state);
}
override visitScope(scopeBlock: ReactiveScopeBlock, state: State): void {

107
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-renaming-jsx-tag-lowercase.expect.md
View File

@@ -1,107 +0,0 @@
## Input
```javascript
import {Stringify, identity, useIdentity} from 'shared-runtime';
/**
* Currently, we're passing a lower-case jsx tag `t0`.
* We should either reorder Stringify or rename the local to `T0`.
*
* See evaluator error:
* Found differences in evaluator results
* Non-forget (expected):
* (kind: ok) <div>{"value":{}}</div><div>{"value":{}}</div>
* Forget:
* (kind: ok) <t1 value="[object Object]"></t1><div>{"value":{}}</div>
* logs: ['Warning: The tag <%s> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.%s','t1']
*/
function Foo({}) {
const x = {};
const y = {};
useIdentity(0);
return (
<>
<Stringify value={identity(y)} />
<Stringify value={identity(x)} />
</>
);
}
export const FIXTURE_ENTRYPOINT = {
fn: Foo,
params: [{}],
};
```
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { Stringify, identity, useIdentity } from "shared-runtime";
/**
* Currently, we're passing a lower-case jsx tag `t0`.
* We should either reorder Stringify or rename the local to `T0`.
*
* See evaluator error:
* Found differences in evaluator results
* Non-forget (expected):
* (kind: ok) <div>{"value":{}}</div><div>{"value":{}}</div>
* Forget:
* (kind: ok) <t1 value="[object Object]"></t1><div>{"value":{}}</div>
* logs: ['Warning: The tag <%s> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.%s','t1']
*/
function Foo(t0) {
const $ = _c(9);
const x = {};
const y = {};
useIdentity(0);
const t1 = Stringify;
const t2 = identity(y);
let t3;
if ($[0] !== t1 || $[1] !== t2) {
t3 = <t1 value={t2} />;
$[0] = t1;
$[1] = t2;
$[2] = t3;
} else {
t3 = $[2];
}
const T0 = Stringify;
const t4 = identity(x);
let t5;
if ($[3] !== T0 || $[4] !== t4) {
t5 = <T0 value={t4} />;
$[3] = T0;
$[4] = t4;
$[5] = t5;
} else {
t5 = $[5];
}
let t6;
if ($[6] !== t3 || $[7] !== t5) {
t6 = (
<>
{t3}
{t5}
</>
);
$[6] = t3;
$[7] = t5;
$[8] = t6;
} else {
t6 = $[8];
}
return t6;
}
export const FIXTURE_ENTRYPOINT = {
fn: Foo,
params: [{}],
};
```

30
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-renaming-jsx-tag-lowercase.tsx
View File

@@ -1,30 +0,0 @@
import {Stringify, identity, useIdentity} from 'shared-runtime';
/**
* Currently, we're passing a lower-case jsx tag `t0`.
* We should either reorder Stringify or rename the local to `T0`.
*
* See evaluator error:
* Found differences in evaluator results
* Non-forget (expected):
* (kind: ok) <div>{"value":{}}</div><div>{"value":{}}</div>
* Forget:
* (kind: ok) <t1 value="[object Object]"></t1><div>{"value":{}}</div>
* logs: ['Warning: The tag <%s> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.%s','t1']
*/
function Foo({}) {
const x = {};
const y = {};
useIdentity(0);
return (
<>
<Stringify value={identity(y)} />
<Stringify value={identity(x)} />
</>
);
}
export const FIXTURE_ENTRYPOINT = {
fn: Foo,
params: [{}],
};

85
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/renaming-jsx-tag-lowercase.expect.md Normal file
View File

@@ -0,0 +1,85 @@
## Input
```javascript
import {Stringify, identity, useIdentity} from 'shared-runtime';
function Foo({}) {
const x = {};
const y = {};
useIdentity(0);
return (
<>
<Stringify value={identity(y)} />
<Stringify value={identity(x)} />
</>
);
}
export const FIXTURE_ENTRYPOINT = {
fn: Foo,
params: [{}],
};
```
## Code
```javascript
import { c as _c } from "react/compiler-runtime";
import { Stringify, identity, useIdentity } from "shared-runtime";
function Foo(t0) {
const $ = _c(9);
const x = {};
const y = {};
useIdentity(0);
const T0 = Stringify;
const t1 = identity(y);
let t2;
if ($[0] !== T0 || $[1] !== t1) {
t2 = <T0 value={t1} />;
$[0] = T0;
$[1] = t1;
$[2] = t2;
} else {
t2 = $[2];
}
const T1 = Stringify;
const t3 = identity(x);
let t4;
if ($[3] !== T1 || $[4] !== t3) {
t4 = <T1 value={t3} />;
$[3] = T1;
$[4] = t3;
$[5] = t4;
} else {
t4 = $[5];
}
let t5;
if ($[6] !== t2 || $[7] !== t4) {
t5 = (
<>
{t2}
{t4}
</>
);
$[6] = t2;
$[7] = t4;
$[8] = t5;
} else {
t5 = $[8];
}
return t5;
}
export const FIXTURE_ENTRYPOINT = {
fn: Foo,
params: [{}],
};
```
### Eval output
(kind: ok) <div>{"value":{}}</div><div>{"value":{}}</div>

18
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/renaming-jsx-tag-lowercase.tsx Normal file
View File

@@ -0,0 +1,18 @@
import {Stringify, identity, useIdentity} from 'shared-runtime';
function Foo({}) {
const x = {};
const y = {};
useIdentity(0);
return (
<>
<Stringify value={identity(y)} />
<Stringify value={identity(x)} />
</>
);
}
export const FIXTURE_ENTRYPOINT = {
fn: Foo,
params: [{}],
};