Repository: alloy-framework/alloy
Pull request #46 (2024-12-22 22:22:08)

feat: improve `ts.ValueExpression` conversion
This handles two new cases:
1. Strings that have characters that need to be escaped
2. BigInts

github-actions[bot]: <!--chronus-github-change-commenter-->
:x: There is undocummented changes. Run `chronus add` to add a changeset or [click here](https://github.com/TomerAberbach/alloy/new/feat/value-expression?filename=.chronus/changes/feat-value-expression-2024-11-22-22-22-40.md&value=---%0A%23%20Change%20versionKind%20to%20one%20of%3A%20breaking%2C%20feature%2C%20fix%2C%20internal%0AchangeKind%3A%20fix%0Apackages%3A%0A%20%20-%20%22%40alloy-js%2Ftypescript%22%0A---%0A%0Afeat%3A%20improve%20%60ts.ValueExpression%60%20conversion).

**The following packages have changes but are not documented.**
 - :x:`@alloy-js/typescript`

<details>
<summary>Show changes</summary>


</details>

TomerAberbach: I think some of the CI stuff is not related to my change, but I went ahead and at least fixed the formatting thing
pkg-pr-new[bot]: 
[Open in Stackblitz](https://pkg.pr.new/template/3d7f161c-32cf-4bdd-9794-b6a98e68091e)


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

```
npm i https://pkg.pr.new/alloy-framework/alloy/@alloy-js/babel-plugin@46
```

</p></details>
      
    

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

```
npm i https://pkg.pr.new/alloy-framework/alloy/@alloy-js/babel-plugin-jsx-dom-expressions@46
```

</p></details>
      
    

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

```
npm i https://pkg.pr.new/alloy-framework/alloy/@alloy-js/core@46
```

</p></details>
      
    

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

```
npm i https://pkg.pr.new/alloy-framework/alloy/@alloy-js/babel-preset@46
```

</p></details>
      
    

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

```
npm i https://pkg.pr.new/alloy-framework/alloy/@alloy-js/csharp@46
```

</p></details>
      
    

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

```
npm i https://pkg.pr.new/alloy-framework/alloy/@alloy-js/java@46
```

</p></details>
      
    

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

```
npm i https://pkg.pr.new/alloy-framework/alloy/@alloy-js/prettier-plugin-alloy@46
```

</p></details>
      
    

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

```
npm i https://pkg.pr.new/alloy-framework/alloy/@alloy-js/typescript@46
```

</p></details>
      
    

_commit: <a href="https://github.com/alloy-framework/alloy/runs/35624228919"><code>5566704</code></a>_


Patch:
diff --git a/packages/typescript/src/components/ValueExpression.tsx b/packages/typescript/src/components/ValueExpression.tsx
index b70358f..9d98286 100644
--- a/packages/typescript/src/components/ValueExpression.tsx
+++ b/packages/typescript/src/components/ValueExpression.tsx
@@ -14,8 +14,10 @@ export function ValueExpression(props: ValueExpressionProps) {
       return "undefined";
     } else if (typeof jsValue === "number" || typeof jsValue === "boolean") {
       return String(jsValue);
+    } else if (typeof jsValue === "bigint") {
+      return `${jsValue}n`;
     } else if (typeof jsValue === "string") {
-      return `"${jsValue}"`;
+      return JSON.stringify(jsValue);
     } else if (typeof jsValue === "object") {
       if (jsValue === null) {
         return "null";


Test patch:
diff --git a/packages/typescript/test/value-expression.test.tsx b/packages/typescript/test/value-expression.test.tsx
new file mode 100644
index 0000000..31f1b1b
--- /dev/null
+++ b/packages/typescript/test/value-expression.test.tsx
@@ -0,0 +1,39 @@
+import { d } from "@alloy-js/core/testing";
+import { expect, it } from "vitest";
+import { ValueExpression } from "../src/index.js";
+import { toSourceText } from "./utils.jsx";
+
+it.each([
+  [undefined, "undefined"],
+  [null, "null"],
+  [true, "true"],
+  [false, "false"],
+  [42, "42"],
+  [42n, "42n"],
+  ["abc", `"abc"`],
+  ["a\nb\rc\\", `"a\\nb\\rc\\\\"`],
+  [
+    [1, 2, 3],
+    d`
+      [
+        1,
+        2,
+        3
+      ]
+    `,
+  ],
+  [
+    { a: 1, b: 2, c: 3 },
+    d`
+      {
+        a: 1,
+        b: 2,
+        c: 3
+      }
+    `,
+  ],
+])("works - %o => %s", (jsValue, expectedSource) => {
+  expect(toSourceText(<ValueExpression jsValue={jsValue} />)).toBe(
+    expectedSource,
+  );
+});