Input
import {identity} from 'shared-runtime';
function Component(statusName) {
// status is local, text is a scope declaration
const {status, text} = foo(statusName);
// color is local, font is a scope declaration
const {color, font} = getStyles(status);
// bg is a declaration
const bg = identity(color);
return (
<div className={bg}>
<span className={font}>{[text]}</span>
</div>
);
}
function foo(name) {
return {
status: `<status>`,
text: `${name}!`,
};
}
function getStyles(status) {
return {
font: 'comic-sans',
color: '#657b83',
};
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: ['Sathya'],
};
Code
import { c as _c } from "react/compiler-runtime";
import { identity } from "shared-runtime";
function Component(statusName) {
const $ = _c(12);
let font;
let t0;
let text;
if ($[0] !== statusName) {
const { status, text: t1 } = foo(statusName);
text = t1;
const { color, font: t2 } = getStyles(status);
font = t2;
t0 = identity(color);
$[0] = statusName;
$[1] = font;
$[2] = t0;
$[3] = text;
} else {
font = $[1];
t0 = $[2];
text = $[3];
}
const bg = t0;
let t1;
if ($[4] !== text) {
t1 = [text];
$[4] = text;
$[5] = t1;
} else {
t1 = $[5];
}
let t2;
if ($[6] !== font || $[7] !== t1) {
t2 = <span className={font}>{t1}</span>;
$[6] = font;
$[7] = t1;
$[8] = t2;
} else {
t2 = $[8];
}
let t3;
if ($[9] !== bg || $[10] !== t2) {
t3 = <div className={bg}>{t2}</div>;
$[9] = bg;
$[10] = t2;
$[11] = t3;
} else {
t3 = $[11];
}
return t3;
}
function foo(name) {
const $ = _c(2);
const t0 = `${name}!`;
let t1;
if ($[0] !== t0) {
t1 = { status: `<status>`, text: t0 };
$[0] = t0;
$[1] = t1;
} else {
t1 = $[1];
}
return t1;
}
function getStyles(status) {
const $ = _c(1);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = { font: "comic-sans", color: "#657b83" };
$[0] = t0;
} else {
t0 = $[0];
}
return t0;
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: ["Sathya"],
};
Eval output
(kind: ok)
Sathya!