@typespec/emitter-framework 0.6.0-dev.2 → 0.6.0-dev.4

package/dist/test/typescript/components/function-expression.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"function-expression.test.d.ts","sourceRoot":"","sources":["../../../../test/typescript/components/function-expression.test.tsx"],"names":[],"mappings":""}

package/dist/test/typescript/components/function-type.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=function-type.test.d.ts.map

package/dist/test/typescript/components/function-type.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"function-type.test.d.ts","sourceRoot":"","sources":["../../../../test/typescript/components/function-type.test.tsx"],"names":[],"mappings":""}

package/dist/test/typescript/components/interface-method.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interface-method.test.d.ts.map

package/dist/test/typescript/components/interface-method.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface-method.test.d.ts","sourceRoot":"","sources":["../../../../test/typescript/components/interface-method.test.tsx"],"names":[],"mappings":""}

package/dist/test/utils.d.ts

@@ -1,4 +1,5 @@
-import { Children } from "@alloy-js/core";
+import { Children, OutputDirectory } from "@alloy-js/core";
 import { Program } from "@typespec/compiler";
-export declare function getEmitOutput(tspCode: string, cb: (program: Program) => Children): Promise<string | (import("@alloy-js/core").OutputDirectory | import("@alloy-js/core").OutputFile)[]>;
+export declare function getEmitOutput(tspCode: string, cb: (program: Program) => Children): Promise<string | (OutputDirectory | import("@alloy-js/core").OutputFile)[]>;
+export declare function assertFileContents(res: OutputDirectory, contents: string): void;
 //# sourceMappingURL=utils.d.ts.map

package/dist/test/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../test/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAU,MAAM,gBAAgB,CAAC;AAGlD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAG7C,wBAAsB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,QAAQ,wGAOtF"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../test/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAU,MAAM,gBAAgB,CAAC;AAGnE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAI7C,wBAAsB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,QAAQ,+EAOtF;AAED,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,QAIxE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typespec/emitter-framework",
-  "version": "0.6.0-dev.2",
+  "version": "0.6.0-dev.4",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -19,16 +19,16 @@
   "license": "MIT",
   "description": "",
   "peerDependencies": {
-    "@alloy-js/core": "^0.10.0",
-    "@alloy-js/typescript": "^0.10.0",
+    "@alloy-js/core": "^0.11.0",
+    "@alloy-js/typescript": "^0.11.0",
     "@typespec/compiler": "^1.0.0-rc.0",
     "@typespec/http": "^1.0.0-rc.0",
     "@typespec/rest": "^0.68.0 || >=0.69.0-dev <0.69.0"
   },
   "devDependencies": {
     "@alloy-js/babel-preset": "^0.2.0",
-    "@alloy-js/core": "^0.10.0",
-    "@alloy-js/typescript": "^0.10.0",
+    "@alloy-js/core": "^0.11.0",
+    "@alloy-js/typescript": "^0.11.0",
     "@babel/cli": "^7.24.8",
     "@babel/core": "^7.26.10",
     "@rollup/plugin-babel": "^6.0.4",

package/src/typescript/components/arrow-function.tsx

@@ -0,0 +1,39 @@
+import { splitProps } from "@alloy-js/core/jsx-runtime";
+import * as ts from "@alloy-js/typescript";
+import { Operation } from "@typespec/compiler";
+import { buildParameterDescriptors, getReturnType } from "../utils/operation.js";
+import { TypeExpression } from "./type-expression.jsx";
+
+export interface ArrowFunctionProps extends ts.ArrowFunctionProps {
+  type?: Operation;
+  /**
+   * Where the parameters from passed to the `parameters` prop should be placed
+   * relative the ones created from the T`ypeSpec operation.
+   */
+  parametersMode?: "prepend" | "append" | "replace";
+}
+
+/**
+ * A TypeScript arrow function. Pass the `type` prop to create the arrow
+ * function by converting from a TypeSpec Operation. Any other props provided
+ * will take precedence.
+ */
+export function ArrowFunction(props: Readonly<ArrowFunctionProps>) {
+  const [efProps, updateProps, forwardProps] = splitProps(
+    props,
+    ["type"],
+    ["returnType", "parameters"],
+  );
+
+  if (!efProps.type) {
+    return <ts.ArrowFunction {...forwardProps} {...updateProps} />;
+  }
+
+  const returnType = props.returnType ?? <TypeExpression type={getReturnType(efProps.type)} />;
+  const allParameters = buildParameterDescriptors(efProps.type.parameters, {
+    params: props.parameters,
+    mode: props.parametersMode,
+  });
+
+  return <ts.ArrowFunction {...forwardProps} returnType={returnType} parameters={allParameters} />;
+}

package/src/typescript/components/function-declaration.tsx

@@ -15,10 +15,13 @@ export type FunctionDeclarationProps =
   | FunctionDeclarationPropsWithType
   | ts.FunctionDeclarationProps;
 
+/**
+ * A TypeScript function declaration. Pass the `type` prop to create the
+ * function declaration by converting from a TypeSpec Operation. Any other props
+ * provided will take precedence.
+ */
 export function FunctionDeclaration(props: FunctionDeclarationProps) {
   if (!isTypedFunctionDeclarationProps(props)) {
-    if (!props.name) {
-    }
     return <ts.FunctionDeclaration {...props} />;
   }
 

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

@@ -0,0 +1,41 @@
+import { splitProps } from "@alloy-js/core/jsx-runtime";
+import * as ts from "@alloy-js/typescript";
+import { Operation } from "@typespec/compiler";
+import { buildParameterDescriptors, getReturnType } from "../utils/operation.js";
+import { TypeExpression } from "./type-expression.jsx";
+
+export interface FunctionExpressionProps extends ts.FunctionExpressionProps {
+  type?: Operation;
+  /**
+   * Where the parameters from passed to the `parameters` prop should be placed
+   * relative the ones created from the TypeSpec operation.
+   */
+  parametersMode?: "prepend" | "append" | "replace";
+}
+
+/**
+ * A TypeScript function expression. Pass the `type` prop to create the
+ * function expression by converting from a TypeSpec Operation. Any other props
+ * provided will take precedence.
+ */
+export function FunctionExpression(props: Readonly<FunctionExpressionProps>) {
+  const [efProps, updateProps, forwardProps] = splitProps(
+    props,
+    ["type"],
+    ["returnType", "parameters"],
+  );
+
+  if (!efProps.type) {
+    return <ts.FunctionExpression {...forwardProps} {...updateProps} />;
+  }
+
+  const returnType = props.returnType ?? <TypeExpression type={getReturnType(efProps.type)} />;
+  const allParameters = buildParameterDescriptors(efProps.type.parameters, {
+    params: props.parameters,
+    mode: props.parametersMode,
+  });
+
+  return (
+    <ts.FunctionExpression {...forwardProps} returnType={returnType} parameters={allParameters} />
+  );
+}

package/src/typescript/components/function-type.tsx

@@ -0,0 +1,38 @@
+import { splitProps } from "@alloy-js/core/jsx-runtime";
+import * as ts from "@alloy-js/typescript";
+import { Operation } from "@typespec/compiler";
+import { buildParameterDescriptors, getReturnType } from "../utils/operation.js";
+import { TypeExpression } from "./type-expression.jsx";
+
+export interface FunctionTypeProps extends ts.FunctionTypeProps {
+  type?: Operation;
+  /**
+   * Where the parameters from passed to the `parameters` prop should be placed
+   * relative the ones created from the TypeSpec operation.
+   */
+  parametersMode?: "prepend" | "append" | "replace";
+}
+/**
+ * A TypeScript function type. Pass the `type` prop to create the function type
+ * by converting from a TypeSpec Operation. Any other props provided will take
+ * precedence.
+ */
+export function FunctionType(props: Readonly<FunctionTypeProps>) {
+  const [efProps, updateProps, forwardProps] = splitProps(
+    props,
+    ["type"],
+    ["returnType", "parameters"],
+  );
+
+  if (!efProps.type) {
+    return <ts.FunctionType {...forwardProps} {...updateProps} />;
+  }
+
+  const returnType = props.returnType ?? <TypeExpression type={getReturnType(efProps.type)} />;
+  const allParameters = buildParameterDescriptors(efProps.type.parameters, {
+    params: props.parameters,
+    mode: props.parametersMode,
+  });
+
+  return <ts.FunctionType {...forwardProps} returnType={returnType} parameters={allParameters} />;
+}

package/src/typescript/components/index.ts

@@ -1,10 +1,16 @@
+export * from "./array-expression.jsx";
+export * from "./arrow-function.jsx";
 export * from "./class-method.js";
 export * from "./function-declaration.js";
+export * from "./function-expression.js";
+export * from "./function-type.js";
 export * from "./interface-declaration.js";
 export * from "./interface-member.js";
+export * from "./interface-method.js";
 export * from "./static-serializers.js";
 export * from "./type-declaration.js";
 export * from "./type-expression.js";
 export * from "./type-transform.js";
 export * from "./union-declaration.js";
 export * from "./union-expression.js";
+export * from "./value-expression.js";

package/src/typescript/components/interface-member.tsx

@@ -1,9 +1,8 @@
-import * as ay from "@alloy-js/core";
 import * as ts from "@alloy-js/typescript";
 import { isNeverType, ModelProperty, Operation } from "@typespec/compiler";
 import { $ } from "@typespec/compiler/experimental/typekit";
 import { getHttpPart } from "@typespec/http";
-import { FunctionDeclaration } from "./function-declaration.js";
+import { InterfaceMethod } from "./interface-method.jsx";
 import { TypeExpression } from "./type-expression.js";
 
 export interface InterfaceMemberProps {
@@ -36,22 +35,6 @@ export function InterfaceMember(props: InterfaceMemberProps) {
   }
 
   if ($.operation.is(props.type)) {
-    const returnType = <TypeExpression type={props.type.returnType} />;
-    const params = (
-      <ay.Scope>
-        <FunctionDeclaration.Parameters type={props.type.parameters} />
-      </ay.Scope>
-    );
-
-    return (
-      <ts.InterfaceMember
-        name={name}
-        type={
-          <>
-            ({params}) =&gt {returnType}
-          </>
-        }
-      />
-    );
+    return <InterfaceMethod type={props.type} />;
   }
 }

package/src/typescript/components/interface-method.tsx

@@ -0,0 +1,50 @@
+import { splitProps } from "@alloy-js/core/jsx-runtime";
+import * as ts from "@alloy-js/typescript";
+import { Operation } from "@typespec/compiler";
+import { buildParameterDescriptors, getReturnType } from "../utils/operation.js";
+import { TypeExpression } from "./type-expression.jsx";
+
+export interface InterfaceMethodPropsWithType extends Omit<ts.InterfaceMethodProps, "name"> {
+  type: Operation;
+  name?: string;
+  parametersMode?: "prepend" | "append" | "replace";
+}
+
+export type InterfaceMethodProps = InterfaceMethodPropsWithType | ts.InterfaceMethodProps;
+
+/**
+ * A TypeScript interface method. Pass the `type` prop to create the
+ * method by converting from a TypeSpec Operation. Any other props
+ * provided will take precedence.
+ */
+export function InterfaceMethod(props: Readonly<InterfaceMethodProps>) {
+  const isTypeSpecTyped = "type" in props;
+  if (!isTypeSpecTyped) {
+    return <ts.InterfaceMethod {...props} />;
+  }
+
+  const [efProps, updateProps, forwardProps] = splitProps(
+    props,
+    ["type"],
+    ["returnType", "parameters"],
+  );
+
+  const name = props.name
+    ? props.name
+    : ts.useTSNamePolicy().getName(efProps.type.name, "function");
+  const returnType = props.returnType ?? <TypeExpression type={getReturnType(efProps.type)} />;
+  const allParameters = buildParameterDescriptors(efProps.type.parameters, {
+    params: props.parameters,
+    mode: props.parametersMode,
+  });
+
+  return (
+    <ts.InterfaceMethod
+      {...forwardProps}
+      name={name}
+      returnType={returnType}
+      parameters={allParameters}
+      {...updateProps}
+    />
+  );
+}

package/src/typescript/components/type-alias-declaration.tsx

@@ -1,23 +1,29 @@
 import { refkey as getRefkey } from "@alloy-js/core";
 import * as ts from "@alloy-js/typescript";
-import { Scalar } from "@typespec/compiler";
+import { Type } from "@typespec/compiler";
 import { $ } from "@typespec/compiler/experimental/typekit";
 import { reportDiagnostic } from "../../lib.js";
 import { TypeExpression } from "./type-expression.jsx";
 
 export interface TypedAliasDeclarationProps extends Omit<ts.TypeDeclarationProps, "name"> {
-  type: Scalar;
+  type: Type;
   name?: string;
 }
 
 export type TypeAliasDeclarationProps = TypedAliasDeclarationProps | ts.TypeDeclarationProps;
 
+/**
+ * Create a TypeScript type alias declaration. Pass the `type` prop to emit the
+ * type alias as the provided TypeSpec type.
+ */
 export function TypeAliasDeclaration(props: TypeAliasDeclarationProps) {
   if (!isTypedAliasDeclarationProps(props)) {
     return <ts.TypeDeclaration {...props}>{props.children}</ts.TypeDeclaration>;
   }
 
-  const originalName = props.name ?? props.type.name;
+  const originalName =
+    props.name ??
+    ("name" in props.type && typeof props.type.name === "string" ? props.type.name : "");
 
   if (!originalName || originalName === "") {
     reportDiagnostic($.program, { code: "type-declaration-missing-name", target: props.type });
@@ -26,7 +32,7 @@ export function TypeAliasDeclaration(props: TypeAliasDeclarationProps) {
   const name = ts.useTSNamePolicy().getName(originalName, "type");
   return (
     <ts.TypeDeclaration {...props} name={name} refkey={props.refkey ?? getRefkey(props.type)}>
-      <TypeExpression type={props.type} />
+      <TypeExpression type={props.type} noReference />
       {props.children}
     </ts.TypeDeclaration>
   );

package/src/typescript/components/type-declaration.tsx

@@ -27,5 +27,7 @@ export function TypeDeclaration(props: TypeDeclarationProps) {
       return <EnumDeclaration type={type} {...restProps} />;
     case "Scalar":
       return <TypeAliasDeclaration type={type} {...restProps} />;
+    case "Operation":
+      return <TypeAliasDeclaration type={type} {...restProps} />;
   }
 }

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

@@ -5,17 +5,25 @@ import { $ } from "@typespec/compiler/experimental/typekit";
 import "@typespec/http/experimental/typekit";
 import { reportTypescriptDiagnostic } from "../../typescript/lib.js";
 import { ArrayExpression } from "./array-expression.js";
+import { FunctionType } from "./function-type.js";
 import { InterfaceExpression } from "./interface-declaration.js";
 import { RecordExpression } from "./record-expression.js";
 import { UnionExpression } from "./union-expression.js";
 
 export interface TypeExpressionProps {
   type: Type;
+
+  /**
+   * Whether to disallow references. Setting this will force the type to be
+   * emitted inline, even if it is a declaration that would otherwise be
+   * referenced.
+   */
+  noReference?: boolean;
 }
 
 export function TypeExpression(props: TypeExpressionProps) {
   const type = $.httpPart.unpack(props.type);
-  if (isDeclaration(type)) {
+  if (!props.noReference && isDeclaration(type)) {
     // todo: probably need abstraction around deciding what's a declaration in the output
     // (it may not correspond to things which are declarations in TypeSpec?)
     return <Reference refkey={refkey(type)} />;
@@ -64,7 +72,8 @@ export function TypeExpression(props: TypeExpressionProps) {
       }
 
       return <InterfaceExpression type={type} />;
-
+    case "Operation":
+      return <FunctionType type={type} />;
     default:
       reportTypescriptDiagnostic($.program, { code: "typescript-unsupported-type", target: type });
       return "any";

package/test/typescript/components/arrow-function.test.tsx

@@ -0,0 +1,85 @@
+import { Output, render } from "@alloy-js/core";
+import { d } from "@alloy-js/core/testing";
+import { SourceFile } from "@alloy-js/typescript";
+import { Operation } from "@typespec/compiler";
+import { BasicTestRunner } from "@typespec/compiler/testing";
+import { beforeEach, describe, it } from "vitest";
+import { ArrowFunction } from "../../../src/typescript/components/arrow-function.jsx";
+import { assertFileContents } from "../../utils.js";
+import { createEmitterFrameworkTestRunner } from "../test-host.js";
+
+describe("arrow functions with a `type` prop", () => {
+  let runner: BasicTestRunner;
+
+  beforeEach(async () => {
+    runner = await createEmitterFrameworkTestRunner();
+  });
+
+  it("creates a function", async () => {
+    const { getName } = (await runner.compile(`
+      @test op getName(id: string): string;
+    `)) as { getName: Operation };
+
+    const res = render(
+      <Output>
+        <SourceFile path="test.ts">
+          <ArrowFunction type={getName}>console.log("Hello!");</ArrowFunction>
+        </SourceFile>
+      </Output>,
+    );
+
+    assertFileContents(
+      res,
+      d`
+        (id: string): string => {
+          console.log("Hello!");
+        }
+      `,
+    );
+  });
+
+  it("creates an async function", async () => {
+    const { getName } = (await runner.compile(`
+      @test op getName(id: string): string;
+    `)) as { getName: Operation };
+
+    const res = render(
+      <Output>
+        <SourceFile path="test.ts">
+          <ArrowFunction async type={getName} />
+        </SourceFile>
+      </Output>,
+    );
+
+    assertFileContents(
+      res,
+      d`
+        async (id: string): Promise<string> => {}
+      `,
+    );
+  });
+
+  it("can append extra parameters with raw params provided", async () => {
+    const { getName } = (await runner.compile(`
+      @test op getName(id: string): string;
+    `)) as { getName: Operation };
+
+    const res = render(
+      <Output>
+        <SourceFile path="test.ts">
+          <ArrowFunction
+            type={getName}
+            parameters={[{ name: "additionalParam", type: "number" }]}
+          />
+        </SourceFile>
+      </Output>,
+    );
+
+    assertFileContents(
+      res,
+      d`
+        (additionalParam: number, id: string): string => {}
+      `,
+    );
+  });
+});

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

@@ -0,0 +1,85 @@
+import { Output, render } from "@alloy-js/core";
+import { d } from "@alloy-js/core/testing";
+import { SourceFile } from "@alloy-js/typescript";
+import { Operation } from "@typespec/compiler";
+import { BasicTestRunner } from "@typespec/compiler/testing";
+import { beforeEach, describe, it } from "vitest";
+import { FunctionExpression } from "../../../src/typescript/components/function-expression.jsx";
+import { assertFileContents } from "../../utils.js";
+import { createEmitterFrameworkTestRunner } from "../test-host.js";
+
+describe("function expressions with a `type` prop", () => {
+  let runner: BasicTestRunner;
+
+  beforeEach(async () => {
+    runner = await createEmitterFrameworkTestRunner();
+  });
+
+  it("creates a function", async () => {
+    const { getName } = (await runner.compile(`
+      @test op getName(id: string): string;
+    `)) as { getName: Operation };
+
+    const res = render(
+      <Output>
+        <SourceFile path="test.ts">
+          <FunctionExpression type={getName}>console.log("Hello!");</FunctionExpression>
+        </SourceFile>
+      </Output>,
+    );
+
+    assertFileContents(
+      res,
+      d`
+        function (id: string): string {
+          console.log("Hello!");
+        }
+      `,
+    );
+  });
+
+  it("creates an async function", async () => {
+    const { getName } = (await runner.compile(`
+      @test op getName(id: string): string;
+    `)) as { getName: Operation };
+
+    const res = render(
+      <Output>
+        <SourceFile path="test.ts">
+          <FunctionExpression async type={getName} />
+        </SourceFile>
+      </Output>,
+    );
+
+    assertFileContents(
+      res,
+      d`
+        async function (id: string): Promise<string> {}
+      `,
+    );
+  });
+
+  it("can append extra parameters with raw params provided", async () => {
+    const { getName } = (await runner.compile(`
+      @test op getName(id: string): string;
+    `)) as { getName: Operation };
+
+    const res = render(
+      <Output>
+        <SourceFile path="test.ts">
+          <FunctionExpression
+            type={getName}
+            parameters={[{ name: "additionalParam", type: "number" }]}
+          />
+        </SourceFile>
+      </Output>,
+    );
+
+    assertFileContents(
+      res,
+      d`
+        function (additionalParam: number, id: string): string {}
+      `,
+    );
+  });
+});

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

@@ -0,0 +1,80 @@
+import { Output, render } from "@alloy-js/core";
+import { d } from "@alloy-js/core/testing";
+import { SourceFile } from "@alloy-js/typescript";
+import { Operation } from "@typespec/compiler";
+import { BasicTestRunner } from "@typespec/compiler/testing";
+import { beforeEach, describe, it } from "vitest";
+import { FunctionType } from "../../../src/typescript/index.js";
+import { assertFileContents } from "../../utils.js";
+import { createEmitterFrameworkTestRunner } from "../test-host.js";
+
+describe("function types with a `type` prop", () => {
+  let runner: BasicTestRunner;
+
+  beforeEach(async () => {
+    runner = await createEmitterFrameworkTestRunner();
+  });
+
+  it("creates a function type", async () => {
+    const { getName } = (await runner.compile(`
+      @test op getName(id: string): string;
+    `)) as { getName: Operation };
+
+    const res = render(
+      <Output>
+        <SourceFile path="test.ts">
+          <FunctionType type={getName} />
+        </SourceFile>
+      </Output>,
+    );
+
+    assertFileContents(
+      res,
+      d`
+        (id: string) => string
+      `,
+    );
+  });
+
+  it("creates an async function type", async () => {
+    const { getName } = (await runner.compile(`
+      @test op getName(id: string): string;
+    `)) as { getName: Operation };
+
+    const res = render(
+      <Output>
+        <SourceFile path="test.ts">
+          <FunctionType async type={getName} />
+        </SourceFile>
+      </Output>,
+    );
+
+    assertFileContents(
+      res,
+      d`
+        (id: string) => Promise<string>
+      `,
+    );
+  });
+
+  it("can append extra parameters with raw params provided", async () => {
+    const { getName } = (await runner.compile(`
+      @test op getName(id: string): string;
+    `)) as { getName: Operation };
+
+    const res = render(
+      <Output>
+        <SourceFile path="test.ts">
+          <FunctionType type={getName} parameters={[{ name: "additionalParam", type: "number" }]} />
+        </SourceFile>
+      </Output>,
+    );
+
+    assertFileContents(
+      res,
+      d`
+        (additionalParam: number, id: string) => string
+      `,
+    );
+  });
+});