feat: improve ts.ValueExpression conversion

.vscode/launch.json

@@ -13,10 +13,7 @@
       "console": "internalConsole",
       "outputCapture": "std",
       "autoAttachChildProcesses": true,
-      "outFiles": [
-        "${workspaceFolder}/**/*.(m|c|)js",
-        "!**/node_modules/**"
-      ],
+      "outFiles": ["${workspaceFolder}/**/*.(m|c|)js", "!**/node_modules/**"],
       "smartStep": true,
       "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
       "cwd": "${workspaceFolder}"
@@ -35,7 +32,7 @@
       "autoAttachChildProcesses": true,
       "env": {
         "FORCE_COLOR": "3"
-      },
+      }
     }
   ]
 }

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";

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,
+  );
+});