[playground] Fixes #31331

compiler/apps/playground/README.md

@@ -26,6 +26,13 @@ $ npm run dev
 $ yarn
 ```
 
+## Testing
+```sh
+# Install playwright browser binaries
+$ npx playwright install --with-deps
+# Run tests
+$ yarn test
+```
 ## Deployment
 
 This project has been deployed using Vercel. Vercel does the exact same thing as we would

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/function-scope-no-directive-arrow-function-expression-output.txt

@@ -0,0 +1,20 @@
+function anonymous_1() {
+  "use no memo";
+  const Avatar = () => {
+    return <div>Avatar Content</div>;
+  };
+  const MemoizedAvatar = React.memo(Avatar);
+  const Bio = () => {
+    const handleBioUpdate = () => {
+      console.log("Bio updated");
+    };
+    return <div onClick={handleBioUpdate}>Bio Content</div>;
+  };
+  const MemoizedBio = React.memo(Bio);
+  return (
+    <div>
+      <MemoizedAvatar />
+      <MemoizedBio />
+    </div>
+  );
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/function-scope-use-memo-arrow-function-expression-output.txt

@@ -0,0 +1,32 @@
+function anonymous_1() {
+  "use memo";
+  const $ = _c(3);
+  const Chart = _temp2;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = React.memo(Chart);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const MemoizedChart = t0;
+  const Graph = _temp3;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = React.memo(Graph);
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const MemoizedGraph = t1;
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = (
+      <div>
+        <MemoizedChart />
+        <MemoizedGraph />
+      </div>
+    );
+    $[2] = t2;
+  } else {
+    t2 = $[2];

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/function-scope-use-memo-function-declaration-output.txt

@@ -0,0 +1,32 @@
+function App() {
+  "use memo";
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const Sidebar = function Sidebar() {
+      const handleToggle = _temp;
+      return <aside onClick={handleToggle}>Sidebar Content</
+          aside>;
+    };
+    t0 = React.memo(Sidebar);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const MemoizedSidebar = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    const Content = function Content() {
+      return <main>Main Content</main>;
+    };
+    t1 = React.memo(Content);
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const MemoizedContent = t1;
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = (
+      <div>
+        <MemoizedSidebar />

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/function-scope-use-no-memo-function-declaration-output.txt

@@ -0,0 +1,32 @@
+function Settings() {
+  "use memo";
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = function Preferences() {
+      const handleSave = _temp;
+      return <div onClick={handleSave}>Preferences Content</
+          div>;
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const Preferences = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = function Notifications() {
+      return <div>Notifications Settings</div>;
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const Notifications = t1;
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = (
+      <div>
+        <Preferences />
+        <Notifications />
+      </div>

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/function-scope-use-no-memo-function-expression-output.txt

@@ -0,0 +1,18 @@
+function anonymous_1() {
+  "use no memo";
+  const Widget = function () {
+    const handleExpand = () => {
+      console.log("Widget expanded");
+    };
+    return <div onClick={handleExpand}>Widget Content</div>;
+  };
+  const Panel = function () {
+    return <section>Panel Information</section>;
+  };
+  return (
+    <div>
+      <Widget />
+      <Panel />
+    </div>
+  );
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-memo-output.txt

@@ -0,0 +1,15 @@
+function anonymous_1() {
+  const $ = _c(1);
+  const handleClick = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <h1 onClick={handleClick}>Welcome to the App!</h1>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  console.log("Header clicked");
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-no-memo-function-expression-output.txt

@@ -0,0 +1,3 @@
+function anonymous_1() {
+  return <aside>Sidebar Information</aside>;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-no-memo-output.txt

@@ -0,0 +1,7 @@
+function anonymous_1() {
+  const handleMouseOver = () => {
+    console.log("Footer hovered");
+  };
+  return <footer onMouseOver={handleMouseOver}>Footer 
+      Information</footer>;
+}