fix(sdk): accept key on intrinsic elements

cli/test/jsx-key.test.mjs

@@ -0,0 +1,44 @@
+import assert from "node:assert/strict";
+import { spawnSync } from "node:child_process";
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+
+const cli = fileURLToPath(new URL("../dist/index.js", import.meta.url));
+
+function runCli(cwd, ...arguments_) {
+  return spawnSync(process.execPath, [cli, ...arguments_], { cwd, encoding: "utf8" });
+}
+
+function fixture(source) {
+  const root = mkdtempSync(join(tmpdir(), "weaver-jsx-key-"));
+  const initialized = runCli(root, "init", "widget");
+  assert.equal(initialized.status, 0, initialized.stderr);
+  const widget = join(root, "widget");
+  writeFileSync(join(widget, "widget.tsx"), source, "utf8");
+  return { root, widget };
+}
+
+test("check accepts key on mapped intrinsic elements", () => {
+  const { root, widget } = fixture(`import { widget } from "@weaver/sdk";
+const days = ["Mon", "Tue", "Wed"];
+export default widget({ name: "Keyed Cells", size: [320, 200] }, () => (
+  <row class="gap-2">
+    {days.map((day) => (
+      <column key={day} class="w-[40px]">
+        <text key={\`label-\${day}\`} class="text-[11px]">{day}</text>
+        <icon key={\`icon-\${day}\`} name="check" class="size-3" />
+      </column>
+    ))}
+  </row>
+));
+`);
+  try {
+    const checked = runCli(root, "check", widget);
+    assert.equal(checked.status, 0, checked.stderr);
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+});

sdk/index.d.ts

@@ -139,7 +139,17 @@ declare global {
       key?: string | number;
     }
 
-    interface BoxProps {
+    /**
+     * `key` on an intrinsic element. Under `jsx: "react-jsx"` TypeScript
+     * checks a keyed intrinsic's props against `IntrinsicElements[tag]`
+     * directly, so `IntrinsicAttributes` alone does not admit `key` there.
+     * The reconciler reads `key` for positional diffing of mapped children.
+     */
+    interface KeyedProps {
+      key?: string | number;
+    }
+
+    interface BoxProps extends KeyedProps {
       class?: string;
       children?: WidgetChild | WidgetChild[];
     }
@@ -149,14 +159,14 @@ declare global {
       background?: BackgroundGradientStack;
     }
 
-    interface TextProps {
+    interface TextProps extends KeyedProps {
       class?: string;
       children?: string | number | Signal<string | number> | (string | number)[];
     }
 
-    type IconProps =
+    type IconProps = KeyedProps & (
       | { class?: string; name: string; d?: never; viewBox?: never; stroke?: never }
-      | { class?: string; d: string; viewBox?: string; stroke?: number; name?: never };
+      | { class?: string; d: string; viewBox?: string; stroke?: number; name?: never });
 
     interface IntrinsicElements {
       column: GradientBoxProps;

test/all.test.mjs

@@ -10,6 +10,7 @@ import "../cli/test/weave.test.mjs";
 import "../cli/test/pack-boundary.test.mjs";
 import "../cli/test/lowered-budget.test.mjs";
 import "../cli/test/canvas-size.test.mjs";
+import "../cli/test/jsx-key.test.mjs";
 import "../cli/test/visual-bounds.test.mjs";
 import "../cli/test/image-budget.test.mjs";
 import "./windows-gradient-gpu.test.mjs";