Add support for namekeys for Object Properties. (#321)

Author: bterlson

.chronus/changes/ts-namekey-2025-9-14-17-59-57.md

@@ -0,0 +1,7 @@
+---
+changeKind: fix
+packages:
+  - "@alloy-js/typescript"
+---
+
+The PropertyName component properly handles reactive values for its name prop.

.chronus/changes/ts-namekey-2025-9-14-18-0-28.md

@@ -0,0 +1,7 @@
+---
+changeKind: feature
+packages:
+  - "@alloy-js/typescript"
+---
+
+The ObjectProperty component now accepts namekeys.

packages/typescript/src/components/ObjectExpression.tsx

@@ -4,8 +4,10 @@ import {
   computed,
   emitSymbol,
   For,
+  isNamekey,
   Match,
   moveTakenMembersTo,
+  Namekey,
   Refkey,
   Switch,
   takeSymbols,
@@ -83,7 +85,7 @@ export function ObjectExpression(props: ObjectExpressionProps) {
 }
 
 export interface ObjectPropertyProps {
-  name?: string;
+  name?: string | Namekey;
   nameExpression?: Children;
   value?: Children;
   jsValue?: unknown;
@@ -92,22 +94,12 @@ export interface ObjectPropertyProps {
 }
 
 export function ObjectProperty(props: ObjectPropertyProps) {
-  let name;
-  let symbolName = props.name;
-  if (props.name) {
-    const namer = useTSNamePolicy();
-    symbolName = namer.getName(props.name, "object-member-data");
-    name = <PropertyName name={symbolName} />;
-  } else if (props.nameExpression) {
-    name = <>[{props.nameExpression}]</>;
-  } else {
-    throw new Error("ObjectProperty either a name or a nameExpression.");
-  }
-
   let sym = undefined;
-  if (props.refkey && props.name) {
-    sym = createStaticMemberSymbol(symbolName!, {
+
+  if (isNamekey(props.name) || (props.refkey && props.name)) {
+    sym = createStaticMemberSymbol(props.name, {
       refkeys: props.refkey,
+      namePolicy: useTSNamePolicy().for("object-member-data"),
     });
 
     moveTakenMembersTo(sym);
@@ -117,6 +109,18 @@ export function ObjectProperty(props: ObjectPropertyProps) {
     takeSymbols();
   }
 
+  let name: Children;
+  if (sym) {
+    name = <PropertyName name={sym.name} />;
+  } else if (props.name) {
+    // can't be a namekey if we get here
+    name = <PropertyName name={props.name as string} />;
+  } else if (props.nameExpression) {
+    name = <>[{props.nameExpression}]</>;
+  } else {
+    throw new Error("ObjectProperty either a name or a nameExpression.");
+  }
+
   let value;
   if (props.value) {
     value = props.value;

packages/typescript/src/components/PropertyName.tsx

@@ -1,4 +1,4 @@
-import { MemberDeclarationContext, useContext } from "@alloy-js/core";
+import { MemberDeclarationContext, memo, useContext } from "@alloy-js/core";
 import { TSOutputSymbol } from "../symbols/ts-output-symbol.js";
 import { isValidJSIdentifier } from "../utils.js";
 
@@ -23,10 +23,12 @@ export interface PropertyNameProps {
  */
 export function PropertyName(props: PropertyNameProps) {
   if (props.name) {
-    if (props.private) {
-      return "#" + props.name;
-    }
-    return quoteIfNeeded(props.name);
+    return memo(() => {
+      if (props.private) {
+        return "#" + props.name;
+      }
+      return quoteIfNeeded(props.name!);
+    });
   } else {
     const declSymbol = useContext(MemberDeclarationContext) as TSOutputSymbol;
     if (!declSymbol) {

packages/typescript/test/object.test.tsx

@@ -1,7 +1,8 @@
-import { List } from "@alloy-js/core";
+import { List, namekey } from "@alloy-js/core";
 import { d } from "@alloy-js/core/testing";
 import { expect, it } from "vitest";
 import {
+  CommaList,
   ObjectExpression,
   ObjectProperty,
   ObjectSpreadProperty,
@@ -61,3 +62,26 @@ it("Works with both children and jsvalue", () => {
   }
   `);
 });
+
+it("Handles name conflicts and namekeys", () => {
+  const nk1 = namekey("a");
+  const nk2 = namekey("a");
+  const nk3 = namekey("a", { ignoreNameConflict: true });
+
+  const comp = (
+    <ObjectExpression>
+      <CommaList>
+        <ObjectProperty name={nk1} value={3} />
+        <ObjectProperty name={nk2} value={1} />
+        <ObjectProperty name={nk3} value={1} />
+      </CommaList>
+    </ObjectExpression>
+  );
+  expect(toSourceText(comp)).toBe(d`
+    {
+      a: 3,
+      a_2: 1,
+      a: 1,
+    }
+  `);
+});