Skip to content

Commit

Permalink
[compiler][be] Playground now compiles entire program
Browse files Browse the repository at this point in the history
Compiler playground now runs the entire program through `babel-plugin-react-compiler` instead of a custom pipeline which previously duplicated function inference logic from `Program.ts`. In addition, the playground output reflects the tranformed file (instead of a "virtual file" of manually concatenated functions).

This helps with the following:
- Reduce potential discrepencies between playground and babel plugin behavior. See attached fixture output for an example where we previously diverged.
- Let playground users see compiler-inserted imports (e.g. `_c` or `useFire`)

This also helps us repurpose playground into a more general tool for compiler-users instead of just for compiler engineers.
- imports and other functions are preserved.
  We differentiate between imports and globals in many cases (e.g. `inferEffectDeps`), so it may be misleading to omit imports in printed output
- playground now shows other program-changing behavior like position of outlined functions and hoisted declarations
- emitted compiled functions do not need synthetic names
  • Loading branch information
mofeiZ committed Dec 16, 2024
1 parent 031230d commit 8b1ea56
Show file tree
Hide file tree
Showing 17 changed files with 235 additions and 336 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
function TestComponent(t0) {
import { c as _c } from "react/compiler-runtime";
export default function TestComponent(t0) {
const $ = _c(2);
const { x } = t0;
let t1;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
function MyApp() {
import { c as _c } from "react/compiler-runtime";
export default function MyApp() {
const $ = _c(1);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
function TestComponent(t0) {
"use memo";
import { c as _c } from "react/compiler-runtime";
export default function TestComponent(t0) {
const $ = _c(2);
const { x } = t0;
let t1;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
function TestComponent({ x }) {
"use no memo";
export default function TestComponent({ x }) {
return <Button>{x}</Button>;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
"use no memo";
function TestComponent({ x }) {
"use memo";
return <Button>{x}</Button>;
}
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { c as _c } from "react/compiler-runtime";
function TestComponent(t0) {
"use memo";
const $ = _c(2);
Expand All @@ -12,7 +13,7 @@ function TestComponent(t0) {
}
return t1;
}
function anonymous_1(t0) {
const TestComponent2 = (t0) => {
"use memo";
const $ = _c(2);
const { x } = t0;
Expand All @@ -25,4 +26,4 @@ function anonymous_1(t0) {
t1 = $[1];
}
return t1;
}
};
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
function anonymous_1() {
const TestComponent = function () {
"use no memo";
return <Button>{x}</Button>;
}
function anonymous_3({ x }) {
};
const TestComponent2 = ({ x }) => {
"use no memo";
return <Button>{x}</Button>;
}
};
2 changes: 1 addition & 1 deletion compiler/apps/playground/__tests__/e2e/page.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const TestComponent2 = ({ x }) => {
};`,
},
{
name: 'function-scope-beats-module-scope',
name: 'todo-function-scope-does-not-beat-module-scope',
input: `
'use no memo';
function TestComponent({ x }) {
Expand Down
Loading

0 comments on commit 8b1ea56

Please sign in to comment.