From 5fe8c0b4ecd09cfd2c0e1422089e2c603d558ff8 Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Thu, 23 May 2024 01:09:50 +0100
Subject: [PATCH] compiler: repro for unmerged scopes due to intermediates

Repro of a case where we should ideally merge consecutive scopes, but where intermediate temporaries prevent the scopes from merging.

We'd need to reorder instructions in order to merge these.

ghstack-source-id: 4f05672604eeb547fc6c26ef99db6572843ac646
Pull Request resolved: https://github.com/facebook/react/pull/29197
---
 .../compiler/merge-scopes-callback.expect.md  | 75 +++++++++++++++++++
 .../compiler/merge-scopes-callback.js         | 14 ++++
 2 files changed, 89 insertions(+)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.js

diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md
new file mode 100644
index 0000000000..eacff50f88
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+import { useState } from "react";
+
+function Component() {
+  const [state, setState] = useState(0);
+  const onClick = () => {
+    setState((s) => s + 1);
+  };
+  return (
+    <>
+      <span>Count: {state}</span>
+      <button onClick={onClick}>Increment</button>
+    </>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+
+function Component() {
+  const $ = _c(6);
+  const [state, setState] = useState(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setState((s) => s + 1);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[1] !== state) {
+    t1 = <span>Count: {state}</span>;
+    $[1] = state;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = <button onClick={onClick}>Increment</button>;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1) {
+    t3 = (
+      <>
+        {t1}
+        {t2}
+      </>
+    );
+    $[4] = t1;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.js
new file mode 100644
index 0000000000..2775c83ace
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.js
@@ -0,0 +1,14 @@
+import { useState } from "react";
+
+function Component() {
+  const [state, setState] = useState(0);
+  const onClick = () => {
+    setState((s) => s + 1);
+  };
+  return (
+    <>
+      <span>Count: {state}</span>
+      <button onClick={onClick}>Increment</button>
+    </>
+  );
+}