[emitter-framework] Render discriminated unions correctly (microsoft#7369)

This pull request enhances the handling of discriminated unions in the
`@typespec/emitter-framework` package. It introduces new rendering logic
for discriminated unions, updates existing components to support these
changes, and improves test coverage to validate the new functionality.

### Enhancements to discriminated union rendering:

* Added new rendering logic for discriminated unions, including support
for "object" and "none" envelope styles, through the `ObjectEnvelope`
and `NoneEnvelope` functions in `union-expression.tsx`. These handle
different discriminator configurations and ensure proper rendering of
union variants.
[[1]](diffhunk://#diff-400029c681b8e2281a1bde7777af749a18d635dcf9ddaa4a6c9cb1bd86301fe7L22-R27)
[[2]](diffhunk://#diff-400029c681b8e2281a1bde7777af749a18d635dcf9ddaa4a6c9cb1bd86301fe7R38-R127)

### Updates to existing components:

* Modified the `InterfaceBody` component in `interface-declaration.tsx`
to include a semicolon when rendering type members, ensuring consistency
with TypeScript syntax. Found in passing and validated via the new tests


### Improvements to test coverage:

* Refactored and expanded tests in `union-declaration.test.tsx` using
the new testing patterns

Fixes microsoft#7174

Author: maorleger

.chronus/changes/discriminated-union-ef-2025-4-15-22-11-29.md

@@ -0,0 +1,7 @@
+---
+changeKind: fix
+packages:
+  - "@typespec/emitter-framework"
+---
+
+Render discriminated unions correctly

packages/emitter-framework/src/typescript/components/interface-declaration.tsx

@@ -154,7 +154,7 @@ function InterfaceBody(props: TypedInterfaceDeclarationProps): Children {
 
   return (
     <>
-      <ay.For each={validTypeMembers} line {...enderProp}>
+      <ay.For each={validTypeMembers} semicolon line {...enderProp}>
         {(typeMember) => {
           return <InterfaceMember type={typeMember} />;
         }}

packages/emitter-framework/src/typescript/components/union-expression.tsx

@@ -1,8 +1,9 @@
 import * as ay from "@alloy-js/core";
 import { Children } from "@alloy-js/core";
 import * as ts from "@alloy-js/typescript";
-import { Enum, EnumMember, Union, UnionVariant } from "@typespec/compiler";
+import { compilerAssert, Enum, EnumMember, Union, UnionVariant } from "@typespec/compiler";
 import { useTsp } from "../../core/context/tsp-context.js";
+import { efRefkey } from "../utils/refkey.js";
 import { TypeExpression } from "./type-expression.jsx";
 
 export interface UnionExpressionProps {
@@ -19,11 +20,30 @@ export function UnionExpression({ type, children }: UnionExpressionProps) {
 
   const variants = (
     <ay.For joiner={" | "} each={items}>
-      {(_, value) => {
-        if ($.enumMember.is(value)) {
-          return <ts.ValueExpression jsValue={value.value ?? value.name} />;
-        } else {
-          return <TypeExpression type={value.type} />;
+      {(_, type) => {
+        if ($.enumMember.is(type)) {
+          return <ts.ValueExpression jsValue={type.value ?? type.name} />;
+        }
+
+        const discriminatedUnion = $.union.getDiscriminatedUnion(type.union);
+        switch (discriminatedUnion?.options.envelope) {
+          case "object":
+            return (
+              <ObjectEnvelope
+                discriminatorPropertyName={discriminatedUnion.options.discriminatorPropertyName}
+                envelopePropertyName={discriminatedUnion.options.envelopePropertyName}
+                type={type}
+              />
+            );
+          case "none":
+            return (
+              <NoneEnvelope
+                discriminatorPropertyName={discriminatedUnion.options.discriminatorPropertyName}
+                type={type}
+              />
+            );
+          default:
+            return <TypeExpression type={type.type} />;
         }
       }}
     </ay.For>
@@ -32,10 +52,83 @@ export function UnionExpression({ type, children }: UnionExpressionProps) {
   if (children || (Array.isArray(children) && children.length)) {
     return (
       <>
-        {variants} {` | ${children}`}
+        {variants} {`| ${children}`}
       </>
     );
   }
 
   return variants;
 }
+
+interface ObjectEnvelopeProps {
+  type: UnionVariant;
+  discriminatorPropertyName: string;
+  envelopePropertyName: string;
+}
+
+/**
+ * Renders a discriminated union with "object" envelope style
+ * where model properties are nested inside an envelope
+ */
+function ObjectEnvelope(props: ObjectEnvelopeProps) {
+  const { $ } = useTsp();
+
+  const envelope = $.model.create({
+    properties: {
+      [props.discriminatorPropertyName]: $.modelProperty.create({
+        name: props.discriminatorPropertyName,
+        type: $.literal.createString(props.type.name as string),
+      }),
+      [props.envelopePropertyName]: $.modelProperty.create({
+        name: props.envelopePropertyName,
+        type: props.type.type,
+      }),
+    },
+  });
+
+  return <TypeExpression type={envelope} />;
+}
+
+interface NoneEnvelopeProps {
+  type: UnionVariant;
+  discriminatorPropertyName: string;
+}
+
+/**
+ * Renders a discriminated union with "none" envelope style
+ * where discriminator property sits alongside model properties
+ */
+function NoneEnvelope(props: NoneEnvelopeProps) {
+  const { $ } = useTsp();
+
+  compilerAssert(
+    $.model.is(props.type.type),
+    "Expected all union variants to be models when using a discriminated union with no envelope",
+  );
+
+  // Render anonymous models as a set of properties + the discriminator
+  if ($.model.isExpresion(props.type.type)) {
+    const model = $.model.create({
+      properties: {
+        [props.discriminatorPropertyName]: $.modelProperty.create({
+          name: props.discriminatorPropertyName,
+          type: $.literal.createString(props.type.name as string),
+        }),
+        ...Object.fromEntries(props.type.type.properties),
+      },
+    });
+    return <TypeExpression type={model} />;
+  }
+
+  return (
+    <ay.List joiner={" & "}>
+      <ts.ObjectExpression>
+        <ts.ObjectProperty
+          name={props.discriminatorPropertyName}
+          value={<ts.ValueExpression jsValue={props.type.name} />}
+        />
+      </ts.ObjectExpression>
+      <>{efRefkey(props.type.type)}</>
+    </ay.List>
+  );
+}