fix(codegen-ts-react): omit absent view.image meta keys (exactOptionalPropertyTypes-safe)

Explicit `key: undefined` literals in the generated <ImageUpload meta={...}>
object trip TS2375 under exactOptionalPropertyTypes, since ImageMeta declares
each field optional (not `T | undefined`). The image-branch of fieldControlFor
now emits a fragment only for attrs actually present on view.image, so a
partially-attributed image field (e.g. only @store + @aspectratio) no longer
emits `maxEdge: undefined` etc.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NGQ7oSuNcjhsMHWwZzhBwr

Author: dmealing

server/typescript/packages/codegen-ts-react/src/templates/form-file.ts

@@ -393,15 +393,26 @@ ${control}
       );
     }
     if (kind === VIEW_SUBTYPE_IMAGE) {
-      const num = (a: string) => {
-        const v = view?.attr(a);
-        return typeof v === "number" ? String(v) : "undefined";
+      // ImageMeta declares every field optional (not `| undefined`), so under
+      // exactOptionalPropertyTypes an explicit `key: undefined` literal is a
+      // TS2375 error for a consumer's tsconfig. Emit a fragment ONLY for an
+      // attr that is actually present; an absent attr contributes nothing.
+      const numFragment = (attrName: string, key: string): string | undefined => {
+        const v = view?.attr(attrName);
+        return typeof v === "number" ? `${key}: ${v}` : undefined;
       };
-      const accept = view?.attr(VIEW_IMAGE_ATTR_ACCEPT) as string[] | undefined;
-      const acceptLit = accept ? JSON.stringify(accept) : "undefined";
       const store = view?.attr(VIEW_IMAGE_ATTR_STORE);
-      const storeLit = typeof store === "string" ? JSON.stringify(store) : "undefined";
-      const meta = `{ aspectRatio: ${num(VIEW_IMAGE_ATTR_ASPECT_RATIO)}, maxEdge: ${num(VIEW_IMAGE_ATTR_MAX_EDGE)}, store: ${storeLit}, accept: ${acceptLit}, maxBytes: ${num(VIEW_IMAGE_ATTR_MAX_BYTES)} }`;
+      const storeFragment = typeof store === "string" ? `store: ${JSON.stringify(store)}` : undefined;
+      const accept = view?.attr(VIEW_IMAGE_ATTR_ACCEPT);
+      const acceptFragment = Array.isArray(accept) ? `accept: ${JSON.stringify(accept)}` : undefined;
+      const fragments = [
+        numFragment(VIEW_IMAGE_ATTR_ASPECT_RATIO, "aspectRatio"),
+        numFragment(VIEW_IMAGE_ATTR_MAX_EDGE, "maxEdge"),
+        storeFragment,
+        acceptFragment,
+        numFragment(VIEW_IMAGE_ATTR_MAX_BYTES, "maxBytes"),
+      ].filter((f): f is string => f !== undefined);
+      const meta = fragments.length > 0 ? `{ ${fragments.join(", ")} }` : "{}";
       const control = `          <Controller name=${JSON.stringify(name)} control={form.control} render={({ field: f }) => (
             <ImageUpload value={f.value as string | null} onChange={f.onChange} meta={${meta}} />
           )} />`;

server/typescript/packages/codegen-ts-react/test/form-image.test.ts

@@ -12,7 +12,12 @@ import {
 import { renderFormFile } from "../src/templates/form-file.js";
 import { makeRenderContext, buildPkMap, buildRelationMap } from "@metaobjectsdev/codegen-ts";
 
-async function loadModel(): Promise<{ root: MetaRoot; doc: MetaObject; plain: MetaObject }> {
+async function loadModel(): Promise<{
+  root: MetaRoot;
+  doc: MetaObject;
+  plain: MetaObject;
+  partialDoc: MetaObject;
+}> {
   const loader = new MetaDataLoader();
   const { root, errors } = await loader.load([
     new InMemoryStringSource(
@@ -58,6 +63,32 @@ async function loadModel(): Promise<{ root: MetaRoot; doc: MetaObject; plain: Me
                 ],
               },
             },
+            {
+              "object.entity": {
+                name: "PartialDoc",
+                children: [
+                  { "source.rdb": { "@table": "partial_docs" } },
+                  { "field.long": { name: "id" } },
+                  { "identity.primary": { name: "id", "@fields": "id", "@generation": "increment" } },
+                  {
+                    "field.string": {
+                      name: "coverKey",
+                      "@maxLength": 80,
+                      children: [
+                        {
+                          // Only two of the five view.image attrs present —
+                          // exercises the omit-absent-keys path.
+                          "view.image": {
+                            "@store": "photos",
+                            "@aspectRatio": 1.777,
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
           ],
         },
       }),
@@ -67,7 +98,8 @@ async function loadModel(): Promise<{ root: MetaRoot; doc: MetaObject; plain: Me
   if (errors.length > 0) throw new Error(errors.map((e) => e.message).join("; "));
   const doc = root.objects().find((o) => o.name === "Doc")! as MetaObject;
   const plain = root.objects().find((o) => o.name === "Plain")! as MetaObject;
-  return { root, doc, plain };
+  const partialDoc = root.objects().find((o) => o.name === "PartialDoc")! as MetaObject;
+  return { root, doc, plain, partialDoc };
 }
 
 function ctxFor(root: MetaRoot) {
@@ -114,6 +146,23 @@ describe("form controls — view.image dispatch", () => {
     expect(out).toContain("maxBytes: 10485760");
   });
 
+  test("a view.image with only SOME attrs present omits the absent keys (exactOptionalPropertyTypes-safe)", async () => {
+    const { root, partialDoc } = await loadModel();
+    const out = renderFormFile(partialDoc, ctxFor(root));
+    // Present attrs still emit their values.
+    expect(out).toContain('store: "photos"');
+    expect(out).toContain("aspectRatio: 1.777");
+    // Absent attrs contribute NOTHING — no explicit `: undefined` literal
+    // anywhere in the generated form (ImageMeta's fields are optional, not
+    // `T | undefined`, so an explicit undefined is a TS2375 error under
+    // exactOptionalPropertyTypes).
+    expect(out).not.toMatch(/:\s*undefined/);
+    // Absent keys don't appear as keys at all.
+    expect(out).not.toMatch(/\bmaxEdge:/);
+    expect(out).not.toMatch(/\baccept:/);
+    expect(out).not.toMatch(/\bmaxBytes:/);
+  });
+
   test("a non-image entity emits neither the ImageUpload import nor a Controller import (gated)", async () => {
     const { root, plain } = await loadModel();
     const out = renderFormFile(plain, ctxFor(root));