Repository: alloy-framework/alloy
Pull request #17 (2024-09-03 23:25:59)

Add TypeScript component for FunctionCallExpression

pkg-pr-new[bot]: 
[Open in Stackblitz](https://pkg.pr.new/template/653d6734-f05a-4756-b972-46f3c601ad14)


<details><summary><b>@alloy-js/babel-plugin-alloy</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/@alloy-js/babel-plugin-alloy@17
```

</p></details>
      
    

<details><summary><b>babel-preset-alloy</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/babel-preset-alloy@17
```

</p></details>
      
    

<details><summary><b>@alloy-js/core</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/@alloy-js/core@17
```

</p></details>
      
    

<details><summary><b>@alloy-js/java</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/@alloy-js/java@17
```

</p></details>
      
    

<details><summary><b>@alloy-js/babel-plugin-jsx-dom-expressions</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/@alloy-js/babel-plugin-jsx-dom-expressions@17
```

</p></details>
      
    

<details><summary><b>@alloy-js/prettier-plugin-alloy</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/@alloy-js/prettier-plugin-alloy@17
```

</p></details>
      
    

<details><summary><b>@alloy-js/typescript</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/@alloy-js/typescript@17
```

</p></details>
      
    

_commit: <a href="https://github.com/alloy-framework/alloy/runs/29640266390"><code>61a5e4f</code></a>_


Patch:
diff --git a/packages/typescript/src/components/FunctionCallExpression.tsx b/packages/typescript/src/components/FunctionCallExpression.tsx
new file mode 100644
index 0000000..3c92841
--- /dev/null
+++ b/packages/typescript/src/components/FunctionCallExpression.tsx
@@ -0,0 +1,15 @@
+import { Children, mapJoin, Refkey } from "@alloy-js/core";
+import { Reference } from "./Reference.js";
+
+export interface FunctionCallExpressionProps {
+  refkey: Refkey;
+  args?: Children[];
+}
+export function FunctionCallExpression(props: FunctionCallExpressionProps) {
+  const args = props.args && props.args.length ?
+    mapJoin(props.args, (arg) => arg, { joiner: ", " })
+  : null;
+  return <>
+        <Reference refkey={props.refkey} />({args});
+    </>;
+}
diff --git a/packages/typescript/src/components/FunctionDeclaration.tsx b/packages/typescript/src/components/FunctionDeclaration.tsx
index 8ab38b1..960f9dc 100644
--- a/packages/typescript/src/components/FunctionDeclaration.tsx
+++ b/packages/typescript/src/components/FunctionDeclaration.tsx
@@ -110,7 +110,7 @@ FunctionDeclaration.Parameters = taggedComponent(
 
           return <>{namePolicy.getName(sym.name, "parameter")}: {descriptor.type}</>;
         },
-        { joiner: "," },
+        { joiner: ", " },
       );
     } else {
       value = undefined;
diff --git a/packages/typescript/src/components/index.ts b/packages/typescript/src/components/index.ts
index fc48ba8..0d19466 100644
--- a/packages/typescript/src/components/index.ts
+++ b/packages/typescript/src/components/index.ts
@@ -2,9 +2,10 @@ export * from "./ArrayExpression.js";
 export * from "./BarrelFile.js";
 export * from "./Block.js";
 export * from "./Declaration.js";
-export * from "./EnumDeclaration.jsx";
-export * from "./EnumMember.jsx";
+export * from "./EnumDeclaration.js";
+export * from "./EnumMember.js";
 export * from "./ExportStatement.js";
+export * from "./FunctionCallExpression.js";
 export * from "./FunctionDeclaration.js";
 export * from "./ImportStatement.js";
 export * from "./Interface.js";


Test patch:
diff --git a/packages/typescript/test/function-call-expression.test.tsx b/packages/typescript/test/function-call-expression.test.tsx
new file mode 100644
index 0000000..af51b98
--- /dev/null
+++ b/packages/typescript/test/function-call-expression.test.tsx
@@ -0,0 +1,49 @@
+import { Output, refkey, render } from "@alloy-js/core";
+import { it } from "vitest";
+import {
+  FunctionCallExpression,
+  FunctionDeclaration,
+  PackageDirectory,
+  SourceFile,
+  VarDeclaration,
+} from "../../typescript/src/index.js";
+import { assertFileContents } from "./utils.js";
+
+it("can declare and call a function with parameters", () => {
+  const functionRefkey = refkey();
+  const res = render(
+    <Output>
+        <PackageDirectory path="." name="test" version="1.0.0">
+          <SourceFile path="index.ts">
+            <VarDeclaration name="foo" value={`"Foo"`} const />
+            <FunctionDeclaration refkey={functionRefkey} name="bar" parameters={{"foo?": "string", "baz?": "number"}} >
+                const message = foo ? foo : "Hello, World!";
+                console.log(message);
+                if(baz) console.log(baz)
+            </FunctionDeclaration>
+            <FunctionCallExpression refkey={functionRefkey} args={[`"Hello!"`]} />
+            <FunctionCallExpression refkey={functionRefkey} />
+            <FunctionCallExpression refkey={functionRefkey} args={[<>"Hello {<>World</>}!"</>]} />
+            <FunctionCallExpression refkey={functionRefkey} args={[<>"Hey there!"</>]} />
+            <FunctionCallExpression refkey={functionRefkey} args={[<>"Hello World"</>, <>12345</>]} />
+          </SourceFile>
+        </PackageDirectory>
+      </Output>,
+  );
+
+  assertFileContents(res, {
+    "index.ts": `
+        const foo = "Foo";
+        function bar(foo?: string, baz?: number) {
+          const message = foo ? foo : "Hello, World!";
+          console.log(message);
+          if(baz) console.log(baz)
+        }
+        bar("Hello!");
+        bar();
+        bar("Hello World!");
+        bar("Hey there!");
+        bar("Hello World", 12345);
+      `,
+  });
+});