-
Notifications
You must be signed in to change notification settings - Fork 46.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
compiler: Add support for ref effects
ghstack-source-id: c534d4943f1433f79afdad7ed2d926589cfdea31 Pull Request resolved: #29733
- Loading branch information
1 parent
d77dd31
commit 9f25e05
Showing
10 changed files
with
535 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
108 changes: 108 additions & 0 deletions
108
...xtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
|
||
## Input | ||
|
||
```javascript | ||
import { useRef } from "react"; | ||
|
||
function Component() { | ||
const ref = useRef(null); | ||
|
||
const setRef = () => { | ||
if (ref.current !== null) { | ||
ref.current = ""; | ||
} | ||
}; | ||
|
||
const onClick = () => { | ||
setRef(); | ||
}; | ||
|
||
return ( | ||
<> | ||
<input ref={ref} /> | ||
<button onClick={onClick} /> | ||
</> | ||
); | ||
} | ||
|
||
export const FIXTURE_ENTRYPOINT = { | ||
fn: Component, | ||
params: [{}], | ||
}; | ||
|
||
``` | ||
|
||
## Code | ||
|
||
```javascript | ||
import { c as _c } from "react/compiler-runtime"; | ||
import { useRef } from "react"; | ||
|
||
function Component() { | ||
const $ = _c(10); | ||
const ref = useRef(null); | ||
let t0; | ||
if ($[0] === Symbol.for("react.memo_cache_sentinel")) { | ||
t0 = () => { | ||
if (ref.current !== null) { | ||
ref.current = ""; | ||
} | ||
}; | ||
$[0] = t0; | ||
} else { | ||
t0 = $[0]; | ||
} | ||
const setRef = t0; | ||
let t1; | ||
if ($[1] !== setRef) { | ||
t1 = () => { | ||
setRef(); | ||
}; | ||
$[1] = setRef; | ||
$[2] = t1; | ||
} else { | ||
t1 = $[2]; | ||
} | ||
const onClick = t1; | ||
let t2; | ||
if ($[3] !== ref) { | ||
t2 = <input ref={ref} />; | ||
$[3] = ref; | ||
$[4] = t2; | ||
} else { | ||
t2 = $[4]; | ||
} | ||
let t3; | ||
if ($[5] !== onClick) { | ||
t3 = <button onClick={onClick} />; | ||
$[5] = onClick; | ||
$[6] = t3; | ||
} else { | ||
t3 = $[6]; | ||
} | ||
let t4; | ||
if ($[7] !== t2 || $[8] !== t3) { | ||
t4 = ( | ||
<> | ||
{t2} | ||
{t3} | ||
</> | ||
); | ||
$[7] = t2; | ||
$[8] = t3; | ||
$[9] = t4; | ||
} else { | ||
t4 = $[9]; | ||
} | ||
return t4; | ||
} | ||
|
||
export const FIXTURE_ENTRYPOINT = { | ||
fn: Component, | ||
params: [{}], | ||
}; | ||
|
||
``` | ||
### Eval output | ||
(kind: ok) <input><button></button> |
27 changes: 27 additions & 0 deletions
27
...src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import { useRef } from "react"; | ||
|
||
function Component() { | ||
const ref = useRef(null); | ||
|
||
const setRef = () => { | ||
if (ref.current !== null) { | ||
ref.current = ""; | ||
} | ||
}; | ||
|
||
const onClick = () => { | ||
setRef(); | ||
}; | ||
|
||
return ( | ||
<> | ||
<input ref={ref} /> | ||
<button onClick={onClick} /> | ||
</> | ||
); | ||
} | ||
|
||
export const FIXTURE_ENTRYPOINT = { | ||
fn: Component, | ||
params: [{}], | ||
}; |
93 changes: 93 additions & 0 deletions
93
...ests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.expect.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
|
||
## Input | ||
|
||
```javascript | ||
import { useRef } from "react"; | ||
|
||
function Component() { | ||
const ref = useRef(null); | ||
|
||
const onClick = () => { | ||
if (ref.current !== null) { | ||
ref.current = ""; | ||
} | ||
}; | ||
|
||
return ( | ||
<> | ||
<input ref={ref} /> | ||
<button onClick={onClick} /> | ||
</> | ||
); | ||
} | ||
|
||
export const FIXTURE_ENTRYPOINT = { | ||
fn: Component, | ||
params: [{}], | ||
}; | ||
|
||
``` | ||
|
||
## Code | ||
|
||
```javascript | ||
import { c as _c } from "react/compiler-runtime"; | ||
import { useRef } from "react"; | ||
|
||
function Component() { | ||
const $ = _c(8); | ||
const ref = useRef(null); | ||
let t0; | ||
if ($[0] === Symbol.for("react.memo_cache_sentinel")) { | ||
t0 = () => { | ||
if (ref.current !== null) { | ||
ref.current = ""; | ||
} | ||
}; | ||
$[0] = t0; | ||
} else { | ||
t0 = $[0]; | ||
} | ||
const onClick = t0; | ||
let t1; | ||
if ($[1] !== ref) { | ||
t1 = <input ref={ref} />; | ||
$[1] = ref; | ||
$[2] = t1; | ||
} else { | ||
t1 = $[2]; | ||
} | ||
let t2; | ||
if ($[3] !== onClick) { | ||
t2 = <button onClick={onClick} />; | ||
$[3] = onClick; | ||
$[4] = t2; | ||
} else { | ||
t2 = $[4]; | ||
} | ||
let t3; | ||
if ($[5] !== t1 || $[6] !== t2) { | ||
t3 = ( | ||
<> | ||
{t1} | ||
{t2} | ||
</> | ||
); | ||
$[5] = t1; | ||
$[6] = t2; | ||
$[7] = t3; | ||
} else { | ||
t3 = $[7]; | ||
} | ||
return t3; | ||
} | ||
|
||
export const FIXTURE_ENTRYPOINT = { | ||
fn: Component, | ||
params: [{}], | ||
}; | ||
|
||
``` | ||
### Eval output | ||
(kind: ok) <input><button></button> |
23 changes: 23 additions & 0 deletions
23
...compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { useRef } from "react"; | ||
|
||
function Component() { | ||
const ref = useRef(null); | ||
|
||
const onClick = () => { | ||
if (ref.current !== null) { | ||
ref.current = ""; | ||
} | ||
}; | ||
|
||
return ( | ||
<> | ||
<input ref={ref} /> | ||
<button onClick={onClick} /> | ||
</> | ||
); | ||
} | ||
|
||
export const FIXTURE_ENTRYPOINT = { | ||
fn: Component, | ||
params: [{}], | ||
}; |
Oops, something went wrong.