don't re-wrap when or unless in derive

Author: mathpirate

packages/ts-transformers/src/transformers/opaque-ref/helpers.ts

@@ -247,11 +247,14 @@ export function createComputedCallForExpression(
 ): ts.Expression | undefined {
   if (plan.entries.length === 0) return undefined;
 
-  // Don't wrap expressions that are already derive or computed calls
+  // Don't wrap expressions that are already derive, computed, when, or unless calls
+  // These are already reactive and wrapping them would create unnecessary nesting
   if (ts.isCallExpression(expression)) {
     const callKind = detectCallKind(expression, context.checker);
     if (
       callKind?.kind === "derive" ||
+      callKind?.kind === "when" ||
+      callKind?.kind === "unless" ||
       (callKind?.kind === "builder" && callKind.builderName === "computed")
     ) {
       return undefined;

packages/ts-transformers/test/fixtures/jsx-expressions/map-nested-conditional-no-name.expected.tsx

@@ -410,24 +410,7 @@ export default recipe(false as const satisfies __ctHelpers.JSONSchema, {
                     }
                 }
             } as const satisfies __ctHelpers.JSONSchema, ({ element: item, params: {} }) => (<div>
-                {__ctHelpers.derive({
-                type: "object",
-                properties: {
-                    item: {
-                        type: "object",
-                        properties: {
-                            name: {
-                                type: "string",
-                                asOpaque: true
-                            }
-                        },
-                        required: ["name"]
-                    }
-                },
-                required: ["item"]
-            } as const satisfies __ctHelpers.JSONSchema, true as const satisfies __ctHelpers.JSONSchema, { item: {
-                    name: item.name
-                } }, ({ item }) => __ctHelpers.when({
+                {__ctHelpers.when({
                 type: "string",
                 asOpaque: true
             } as const satisfies __ctHelpers.JSONSchema, {
@@ -596,7 +579,7 @@ export default recipe(false as const satisfies __ctHelpers.JSONSchema, {
                         }
                     }
                 }
-            } as const satisfies __ctHelpers.JSONSchema, item.name, <span>{item.name}</span>))}
+            } as const satisfies __ctHelpers.JSONSchema, item.name, <span>{item.name}</span>)}
               </div>)), {})}
           </div>)}
       </div>),

packages/ts-transformers/test/fixtures/jsx-expressions/map-nested-conditional.expected.tsx

@@ -410,24 +410,7 @@ export default recipe(false as const satisfies __ctHelpers.JSONSchema, {
                     }
                 }
             } as const satisfies __ctHelpers.JSONSchema, ({ element: item, params: {} }) => (<div>
-                {__ctHelpers.derive({
-                type: "object",
-                properties: {
-                    item: {
-                        type: "object",
-                        properties: {
-                            name: {
-                                type: "string",
-                                asOpaque: true
-                            }
-                        },
-                        required: ["name"]
-                    }
-                },
-                required: ["item"]
-            } as const satisfies __ctHelpers.JSONSchema, true as const satisfies __ctHelpers.JSONSchema, { item: {
-                    name: item.name
-                } }, ({ item }) => __ctHelpers.when({
+                {__ctHelpers.when({
                 type: "string",
                 asOpaque: true
             } as const satisfies __ctHelpers.JSONSchema, {
@@ -596,7 +579,7 @@ export default recipe(false as const satisfies __ctHelpers.JSONSchema, {
                         }
                     }
                 }
-            } as const satisfies __ctHelpers.JSONSchema, item.name, <span>{item.name}</span>))}
+            } as const satisfies __ctHelpers.JSONSchema, item.name, <span>{item.name}</span>)}
               </div>)), {})}
           </div>)}
       </div>),