diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts index 995b3caa2890a..fd04bf43c2950 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts @@ -431,6 +431,9 @@ addObject(BUILTIN_SHAPES, BuiltInMixedReadonlyId, [ ["*", { kind: "Object", shapeId: BuiltInMixedReadonlyId }], ]); +addObject(BUILTIN_SHAPES, BuiltInJsxId, []); +addObject(BUILTIN_SHAPES, BuiltInFunctionId, []); + export const DefaultMutatingHook = addHook( BUILTIN_SHAPES, { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-to-string.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-to-string.expect.md new file mode 100644 index 0000000000000..192c16048bdd5 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-to-string.expect.md @@ -0,0 +1,61 @@ + +## Input + +```javascript +import fbt from "fbt"; + +function Component(props) { + const element = ( + + Hello {props.name} + + ); + return element.toString(); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ name: "Jason" }], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import fbt from "fbt"; + +function Component(props) { + const $ = _c(4); + let t0; + if ($[0] !== props.name) { + t0 = fbt._("Hello {user name}", [fbt._param("user name", props.name)], { + hk: "2zEDKF", + }); + $[0] = props.name; + $[1] = t0; + } else { + t0 = $[1]; + } + const element = t0; + let t1; + if ($[2] !== element) { + t1 = element.toString(); + $[2] = element; + $[3] = t1; + } else { + t1 = $[3]; + } + return t1; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ name: "Jason" }], +}; + +``` + +### Eval output +(kind: ok) "Hello Jason" \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-to-string.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-to-string.js new file mode 100644 index 0000000000000..3475a3262dd83 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-to-string.js @@ -0,0 +1,15 @@ +import fbt from "fbt"; + +function Component(props) { + const element = ( + + Hello {props.name} + + ); + return element.toString(); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ name: "Jason" }], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call-mutating.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call-mutating.expect.md new file mode 100644 index 0000000000000..86060212bc8f0 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call-mutating.expect.md @@ -0,0 +1,92 @@ + +## Input + +```javascript +import { useMemo } from "react"; +import { ValidateMemoization } from "shared-runtime"; + +function Component(props) { + const a = useMemo(() => { + const a = []; + const f = function () { + a.push(props.name); + }; + f.call(); + return a; + }, [props.name]); + return ; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ name: "Jason" }], + sequentialRenders: [ + { name: "Lauren" }, + { name: "Lauren" }, + { name: "Jason" }, + ], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { useMemo } from "react"; +import { ValidateMemoization } from "shared-runtime"; + +function Component(props) { + const $ = _c(7); + let t0; + let a; + if ($[0] !== props.name) { + a = []; + const f = function () { + a.push(props.name); + }; + + f.call(); + $[0] = props.name; + $[1] = a; + } else { + a = $[1]; + } + t0 = a; + const a_0 = t0; + let t1; + if ($[2] !== props.name) { + t1 = [props.name]; + $[2] = props.name; + $[3] = t1; + } else { + t1 = $[3]; + } + let t2; + if ($[4] !== t1 || $[5] !== a_0) { + t2 = ; + $[4] = t1; + $[5] = a_0; + $[6] = t2; + } else { + t2 = $[6]; + } + return t2; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ name: "Jason" }], + sequentialRenders: [ + { name: "Lauren" }, + { name: "Lauren" }, + { name: "Jason" }, + ], +}; + +``` + +### Eval output +(kind: ok)
{"inputs":["Lauren"],"output":["Lauren"]}
+
{"inputs":["Lauren"],"output":["Lauren"]}
+
{"inputs":["Jason"],"output":["Jason"]}
\ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call-mutating.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call-mutating.js new file mode 100644 index 0000000000000..2988e3e36c078 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call-mutating.js @@ -0,0 +1,24 @@ +import { useMemo } from "react"; +import { ValidateMemoization } from "shared-runtime"; + +function Component(props) { + const a = useMemo(() => { + const a = []; + const f = function () { + a.push(props.name); + }; + f.call(); + return a; + }, [props.name]); + return ; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ name: "Jason" }], + sequentialRenders: [ + { name: "Lauren" }, + { name: "Lauren" }, + { name: "Jason" }, + ], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call.expect.md new file mode 100644 index 0000000000000..c9d46853f981a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call.expect.md @@ -0,0 +1,55 @@ + +## Input + +```javascript +function Component(props) { + const f = function () { + return
{props.name}
; + }; + return f.call(); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ name: "Jason" }], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +function Component(props) { + const $ = _c(4); + let t0; + if ($[0] !== props.name) { + t0 = function () { + return
{props.name}
; + }; + $[0] = props.name; + $[1] = t0; + } else { + t0 = $[1]; + } + const f = t0; + let t1; + if ($[2] !== f) { + t1 = f.call(); + $[2] = f; + $[3] = t1; + } else { + t1 = $[3]; + } + return t1; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ name: "Jason" }], +}; + +``` + +### Eval output +(kind: ok)
Jason
\ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call.js new file mode 100644 index 0000000000000..6a5e1ad9221a6 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call.js @@ -0,0 +1,11 @@ +function Component(props) { + const f = function () { + return
{props.name}
; + }; + return f.call(); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ name: "Jason" }], +};