Wrap JSXElement in expr container (for JSXAttribute)

compiler/packages/babel-plugin-react-forget/src/ReactiveScopes/CodegenReactiveFunction.ts

@@ -1279,8 +1279,7 @@ function codegenJsxAttribute(
       const innerValue = codegenPlace(cx, attribute.place);
       let value;
       switch (innerValue.type) {
-        case "StringLiteral":
-        case "JSXElement": {
+        case "StringLiteral": {
           value = innerValue;
           break;
         }

compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/jsx-attribute-with-jsx-element-value.expect.md

@@ -0,0 +1,113 @@
+
+## Input
+
+```javascript
+// @flow
+function Component({ items }) {
+  // Per the spec, <Foo value=<>{...}</> /> is valid.
+  // But many tools don't allow fragments as jsx attribute values,
+  // so we ensure not to emit them wrapped in an expression container
+  return items.length > 0 ? (
+    <Foo
+      value={
+        <Bar>
+          {items.map((item) => (
+            <Item key={item.id} item={item} />
+          ))}
+        </Bar>
+      }
+    ></Foo>
+  ) : null;
+}
+
+function Foo({ value }) {
+  return value;
+}
+
+function Bar({ children }) {
+  return <div>{children}</div>;
+}
+
+function Item({ item }) {
+  return <div>{item.name}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ items: [{ id: 1, name: "One!" }] }],
+};
+
+```
+
+## Code
+
+```javascript
+import { unstable_useMemoCache as useMemoCache } from "react";
+function Component(t29) {
+  const $ = useMemoCache(2);
+  const { items } = t29;
+  const c_0 = $[0] !== items;
+  let t0;
+  if (c_0) {
+    t0 =
+      items.length > 0 ? (
+        <Foo
+          value={
+            <Bar>
+              {items.map((item) => (
+                <Item key={item.id} item={item} />
+              ))}
+            </Bar>
+          }
+        />
+      ) : null;
+    $[0] = items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+function Foo(t5) {
+  const { value } = t5;
+  return value;
+}
+
+function Bar(t6) {
+  const $ = useMemoCache(2);
+  const { children } = t6;
+  const c_0 = $[0] !== children;
+  let t0;
+  if (c_0) {
+    t0 = <div>{children}</div>;
+    $[0] = children;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+function Item(t7) {
+  const $ = useMemoCache(2);
+  const { item } = t7;
+  const c_0 = $[0] !== item.name;
+  let t0;
+  if (c_0) {
+    t0 = <div>{item.name}</div>;
+    $[0] = item.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ items: [{ id: 1, name: "One!" }] }],
+};
+
+```
+      

compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/jsx-attribute-with-jsx-element-value.js

@@ -0,0 +1,34 @@
+// @flow
+function Component({ items }) {
+  // Per the spec, <Foo value=<>{...}</> /> is valid.
+  // But many tools don't allow fragments as jsx attribute values,
+  // so we ensure not to emit them wrapped in an expression container
+  return items.length > 0 ? (
+    <Foo
+      value={
+        <Bar>
+          {items.map((item) => (
+            <Item key={item.id} item={item} />
+          ))}
+        </Bar>
+      }
+    ></Foo>
+  ) : null;
+}
+
+function Foo({ value }) {
+  return value;
+}
+
+function Bar({ children }) {
+  return <div>{children}</div>;
+}
+
+function Item({ item }) {
+  return <div>{item.name}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ items: [{ id: 1, name: "One!" }] }],
+};