@typespec/emitter-framework 0.3.0-dev.3 → 0.3.0-dev.5

package/src/typescript/components/union-expression.tsx

@@ -1,7 +1,9 @@
-import { Children, mapJoin } from "@alloy-js/core";
+import * as ay from "@alloy-js/core";
+import { Children } from "@alloy-js/core";
 import * as ts from "@alloy-js/typescript";
-import { Enum, Union } from "@typespec/compiler";
-import { TypeExpression } from "./type-expression.js";
+import { Enum, EnumMember, Union, UnionVariant } from "@typespec/compiler";
+import { $ } from "@typespec/compiler/experimental/typekit";
+import { TypeExpression } from "./type-expression.jsx";
 
 export interface UnionExpressionProps {
   type: Union | Enum;
@@ -9,28 +11,29 @@ export interface UnionExpressionProps {
 }
 
 export function UnionExpression({ type, children }: UnionExpressionProps) {
-  let variants: any[];
+  const items = ($.union.is(type) ? type.variants : type.members) as Map<
+    string,
+    UnionVariant | EnumMember
+  >;
 
-  if (type.kind === "Enum") {
-    variants = mapJoin(
-      type.members,
-      (_, value) => {
-        return <ts.ValueExpression jsValue={value.value ?? value.name} />;
-      },
-      { joiner: " | " },
-    );
-  } else {
-    variants = mapJoin(
-      type.variants,
-      (_, variant) => {
-        return <TypeExpression type={variant.type} />;
-      },
-      { joiner: " | " },
-    );
-  }
+  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} />;
+        }
+      }}
+    </ay.For>
+  );
 
   if (children || (Array.isArray(children) && children.length)) {
-    return <>{variants} {` | ${children}`}</>;
+    return (
+      <>
+        {variants} {` | ${children}`}
+      </>
+    );
   }
 
   return variants;

package/test/typescript/components/enum-declaration.test.tsx

@@ -1,4 +1,4 @@
-import { refkey } from "@alloy-js/core";
+import { List, refkey, StatementList } from "@alloy-js/core";
 import { d } from "@alloy-js/core/testing";
 import { Enum, Union } from "@typespec/compiler";
 import { describe, expect, it } from "vitest";
@@ -61,11 +61,15 @@ describe("Typescript Enum Declaration", () => {
 
     const output = await getEmitOutput(code, (program) => {
       const Foo = program.resolveTypeReference("Foo")[0]! as Enum;
-      return <>
-        <EnumDeclaration type={Foo} />
-        {refkey(Foo)};
-        {refkey(Foo.members.get("one"))};
-      </>;
+      return (
+        <List hardline>
+          <EnumDeclaration type={Foo} />
+          <StatementList>
+            {refkey(Foo)}
+            {refkey(Foo.members.get("one"))}
+          </StatementList>
+        </List>
+      );
     });
 
     expect(output).toBe(d`
@@ -90,11 +94,15 @@ describe("Typescript Enum Declaration", () => {
 
     const output = await getEmitOutput(code, (program) => {
       const Foo = program.resolveTypeReference("Foo")[0]! as Union;
-      return <>
-        <EnumDeclaration type={Foo} />
-        {refkey(Foo)};
-        {refkey(Foo.variants.get("one"))};
-      </>;
+      return (
+        <List hardline>
+          <EnumDeclaration type={Foo} />
+          <StatementList>
+            {refkey(Foo)}
+            {refkey(Foo.variants.get("one"))}
+          </StatementList>
+        </List>
+      );
     });
 
     expect(output).toBe(d`

package/test/typescript/components/interface-declaration.test.tsx

@@ -1,6 +1,6 @@
 import { InterfaceDeclaration } from "../../../src/typescript/components/interface-declaration.js";
 
-import { mapJoin, Output, render } from "@alloy-js/core";
+import { For, List, Output, render } from "@alloy-js/core";
 import { SourceFile } from "@alloy-js/typescript";
 import { Namespace } from "@typespec/compiler";
 import { format } from "prettier";
@@ -25,12 +25,14 @@ describe("Typescript Interface", () => {
 
         const res = render(
           <Output>
-              <SourceFile path="test.ts">
+            <SourceFile path="test.ts">
+              <List hardline>
                 {models.map((model) => (
                   <InterfaceDeclaration export type={model} />
                 ))}
-              </SourceFile>
-            </Output>,
+              </List>
+            </SourceFile>
+          </Output>,
         );
 
         const testFile = res.contents.find((file) => file.path === "test.ts");
@@ -62,12 +64,12 @@ describe("Typescript Interface", () => {
 
         const res = render(
           <Output>
-              <SourceFile path="test.ts">
-                {mapJoin(models, (name, model) => (
-                  <InterfaceDeclaration export  type={model} />
-                ))}
-              </SourceFile>
-            </Output>,
+            <SourceFile path="test.ts">
+              <For each={Array.from(models.values())} hardline>
+                {(model) => <InterfaceDeclaration export type={model} />}
+              </For>
+            </SourceFile>
+          </Output>,
         );
 
         const testFile = res.contents.find((file) => file.path === "test.ts");
@@ -96,12 +98,12 @@ describe("Typescript Interface", () => {
 
         const res = render(
           <Output>
-              <SourceFile path="test.ts">
-                {mapJoin(models, (name, model) => (
-                  <InterfaceDeclaration export  type={model} />
-                ))}
-              </SourceFile>
-            </Output>,
+            <SourceFile path="test.ts">
+              <For each={Array.from(models.values())} hardline>
+                {(model) => <InterfaceDeclaration export type={model} />}
+              </For>
+            </SourceFile>
+          </Output>,
         );
 
         const testFile = res.contents.find((file) => file.path === "test.ts");
@@ -134,12 +136,12 @@ describe("Typescript Interface", () => {
 
         const res = render(
           <Output>
-              <SourceFile path="test.ts">
-                {mapJoin(models, (name, model) => (
-                  <InterfaceDeclaration export type={model} />
-                ))}
-              </SourceFile>
-            </Output>,
+            <SourceFile path="test.ts">
+              <For each={Array.from(models.values())} hardline>
+                {(model) => <InterfaceDeclaration export type={model} />}
+              </For>
+            </SourceFile>
+          </Output>,
         );
 
         const testFile = res.contents.find((file) => file.path === "test.ts");
@@ -182,12 +184,12 @@ describe("Typescript Interface", () => {
 
         const res = render(
           <Output>
-              <SourceFile path="test.ts">
-                {mapJoin(models, (name, model) => (
-                  <InterfaceDeclaration export type={model} />
-                ))}
-              </SourceFile>
-            </Output>,
+            <SourceFile path="test.ts">
+              <For each={Array.from(models.values())} hardline>
+                {(model) => <InterfaceDeclaration export type={model} />}
+              </For>
+            </SourceFile>
+          </Output>,
         );
 
         const testFile = res.contents.find((file) => file.path === "test.ts");
@@ -229,12 +231,12 @@ describe("Typescript Interface", () => {
 
         const res = render(
           <Output>
-              <SourceFile path="test.ts">
-                {models.map((model) => (
-                  <InterfaceDeclaration export type={model} />
-                ))}
-              </SourceFile>
-            </Output>,
+            <SourceFile path="test.ts">
+              {models.map((model) => (
+                <InterfaceDeclaration export type={model} />
+              ))}
+            </SourceFile>
+          </Output>,
         );
 
         const testFile = res.contents.find((file) => file.path === "test.ts");
@@ -276,10 +278,10 @@ describe("Typescript Interface", () => {
 
         const res = render(
           <Output>
-              <SourceFile path="test.ts">
-                <InterfaceDeclaration type={models[0]} />
-              </SourceFile>
-            </Output>,
+            <SourceFile path="test.ts">
+              <InterfaceDeclaration type={models[0]} />
+            </SourceFile>
+          </Output>,
         );
 
         const testFile = res.contents.find((file) => file.path === "test.ts");
@@ -391,8 +393,7 @@ describe("Typescript Interface", () => {
           <Output>
             <SourceFile path="test.ts">
               <InterfaceDeclaration export name="MyOperations" type={models[0]}>
-                customProperty: string; 
-                customMethod(): void;
+                customProperty: string; customMethod(): void;
               </InterfaceDeclaration>
             </SourceFile>
           </Output>,

package/test/typescript/components/member-expression.test.tsx

@@ -1,3 +1,4 @@
+import * as ay from "@alloy-js/core";
 import { d } from "@alloy-js/core/testing";
 import { Enum, Model, Union } from "@typespec/compiler";
 import { describe, expect, it } from "vitest";
@@ -20,10 +21,12 @@ describe("Typescript Enum Member Expression", () => {
     `;
     const output = await getEmitOutput(code, (program) => {
       const Bar = program.resolveTypeReference("Bar")[0]! as Model;
-      return <>
-        <EnumDeclaration type={program.resolveTypeReference("Foo")[0]! as Enum} />
-        <InterfaceDeclaration type={Bar} />
-      </>;
+      return (
+        <ay.List hardline>
+          <EnumDeclaration type={program.resolveTypeReference("Foo")[0]! as Enum} />
+          <InterfaceDeclaration type={Bar} />
+        </ay.List>
+      );
     });
 
     expect(output).toBe(d`
@@ -52,10 +55,12 @@ describe("Typescript Enum Member Expression", () => {
     `;
     const output = await getEmitOutput(code, (program) => {
       const Bar = program.resolveTypeReference("Bar")[0]! as Model;
-      return <>
-        <EnumDeclaration type={program.resolveTypeReference("Foo")[0]! as Enum} />
-        <InterfaceDeclaration type={Bar} />
-      </>;
+      return (
+        <ay.List hardline>
+          <EnumDeclaration type={program.resolveTypeReference("Foo")[0]! as Enum} />
+          <InterfaceDeclaration type={Bar} />
+        </ay.List>
+      );
     });
 
     expect(output).toBe(d`
@@ -86,10 +91,12 @@ describe("Typescript Union Member Expression", () => {
     `;
     const output = await getEmitOutput(code, (program) => {
       const Bar = program.resolveTypeReference("Bar")[0]! as Model;
-      return <>
-        <UnionDeclaration type={program.resolveTypeReference("Foo")[0]! as Union} />
-        <InterfaceDeclaration type={Bar} />
-      </>;
+      return (
+        <ay.List hardline>
+          <UnionDeclaration type={program.resolveTypeReference("Foo")[0]! as Union} />
+          <InterfaceDeclaration type={Bar} />
+        </ay.List>
+      );
     });
 
     expect(output).toBe(d`
@@ -114,10 +121,12 @@ describe("Typescript Union Member Expression", () => {
     `;
     const output = await getEmitOutput(code, (program) => {
       const Bar = program.resolveTypeReference("Bar")[0]! as Model;
-      return <>
-        <UnionDeclaration type={program.resolveTypeReference("Foo")[0]! as Union} />
-        <InterfaceDeclaration type={Bar} />
-      </>;
+      return (
+        <ay.List hardline>
+          <UnionDeclaration type={program.resolveTypeReference("Foo")[0]! as Union} />
+          <InterfaceDeclaration type={Bar} />
+        </ay.List>
+      );
     });
 
     expect(output).toBe(d`

package/test/typescript/components/type-transform.test.tsx

@@ -45,7 +45,12 @@ describe.skip("Typescript Type Transform", () => {
               {code`
                 const wireWidget = {id: "1", birth_year: 1988, color: "blue"};
                 `}
-              const clientWidget = <ModelTransformExpression type={Widget} target="application" itemPath={["wireWidget"]} />
+              const clientWidget ={" "}
+              <ModelTransformExpression
+                type={Widget}
+                target="application"
+                itemPath={["wireWidget"]}
+              />
             </SourceFile>
           </Output>,
         );
@@ -81,7 +86,12 @@ describe.skip("Typescript Type Transform", () => {
               {code`
                 const clientWidget = {id: "1", birthYear: 1988, color: "blue"};
                 `}
-              const wireWidget = <ModelTransformExpression type={Widget} target="transport" itemPath={["clientWidget"]} />
+              const wireWidget ={" "}
+              <ModelTransformExpression
+                type={Widget}
+                target="transport"
+                itemPath={["clientWidget"]}
+              />
             </SourceFile>
           </Output>,
         );
@@ -120,7 +130,12 @@ describe.skip("Typescript Type Transform", () => {
               {code`
                 const wireWidget = {id: "1", birth_date: "1988-04-29T19:30:00Z", color: "blue"};
                 `}
-              const clientWidget = <ModelTransformExpression type={Widget} target="application" itemPath={["wireWidget"]} />
+              const clientWidget ={" "}
+              <ModelTransformExpression
+                type={Widget}
+                target="application"
+                itemPath={["wireWidget"]}
+              />
             </SourceFile>
           </Output>,
         );
@@ -329,7 +344,7 @@ describe.skip("Typescript Type Transform", () => {
             <SourceFile path="test.ts">
               {code`
                 const clientWidget = {id: "1", my_color: "blue"};
-                const wireWidget = ${<TypeTransformCall itemPath={["clientWidget"]} type={Widget} collapse={true} target="transport" />}
+                const wireWidget = ${(<TypeTransformCall itemPath={["clientWidget"]} type={Widget} collapse={true} target="transport" />)}
                 `}
             </SourceFile>
           </Output>,
@@ -366,8 +381,8 @@ describe.skip("Typescript Type Transform", () => {
             <SourceFile path="test.ts">
               {code`
                 const wireWidget = {id: "1", my_color: "blue"};
-                const clientWidget = ${<ts.FunctionCallExpression refkey={getTypeTransformerRefkey(Widget, "application")} args={[<>wireWidget</>]}/>};
-                const wireWidget2 = ${<ts.FunctionCallExpression refkey={getTypeTransformerRefkey(Widget, "transport")} args={["clientWidget"]}/>};
+                const clientWidget = ${(<ts.FunctionCallExpression target={getTypeTransformerRefkey(Widget, "application")} args={[<>wireWidget</>]} />)};
+                const wireWidget2 = ${(<ts.FunctionCallExpression target={getTypeTransformerRefkey(Widget, "transport")} args={["clientWidget"]} />)};
                 `}
             </SourceFile>
           </Output>,

package/test/typescript/components/union-declaration.test.tsx

@@ -13,9 +13,7 @@ describe("Typescript Union Declaration", () => {
       const res = render(
         <Output>
           <SourceFile path="test.ts">
-            <UnionDeclaration name="MyUnion"> 
-              "red" | "blue"
-            </UnionDeclaration>
+            <UnionDeclaration name="MyUnion">"red" | "blue"</UnionDeclaration>
           </SourceFile>
         </Output>,
       );
@@ -105,9 +103,7 @@ describe("Typescript Union Declaration", () => {
         const res = render(
           <Output>
             <SourceFile path="test.ts">
-              <UnionDeclaration type={union}>
-                "three"
-              </UnionDeclaration>
+              <UnionDeclaration type={union}>"three"</UnionDeclaration>
             </SourceFile>
           </Output>,
         );
@@ -135,10 +131,10 @@ describe("Typescript Union Declaration", () => {
 
         const res = render(
           <Output>
-              <SourceFile path="test.ts">
-                let x: <UnionExpression type={union} /> = "one";
-              </SourceFile>
-            </Output>,
+            <SourceFile path="test.ts">
+              let x: <UnionExpression type={union} /> = "one";
+            </SourceFile>
+          </Output>,
         );
 
         const testFile = res.contents.find((file) => file.path === "test.ts");