fix(codegen): preserve string values in generated JSX

apps/web/content/docs/api/codegen.mdx

@@ -72,7 +72,7 @@ function serializePropValue(
 
 // Examples
 serializePropValue("hello")
-// { value: '"hello"', needsBraces: false }
+// { value: '"hello"', needsBraces: true }
 
 serializePropValue(42)
 // { value: '42', needsBraces: true }
@@ -93,7 +93,7 @@ function serializeProps(
 
 // Example
 serializeProps({ title: 'Dashboard', columns: 3, disabled: true })
-// 'title="Dashboard" columns={3} disabled'
+// 'title={"Dashboard"} columns={3} disabled'
 ```
 
 ### escapeString

apps/web/tests/fixtures/docs-baseline.json

@@ -191,9 +191,9 @@
       "title": "@json-render/codegen",
       "metadataTitle": "@json-render/codegen API | json-render",
       "prefix": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/codegen\")\n\n# @json-render/codegen\n",
-      "sourceSha256": "ffe7c5b39084d393a6706d18cf40c8b5b0fa654d46bc89771f6e6a3a79102be5",
-      "bodySha256": "89f627bc21e5fafae1e498d9e9369a93b30f9b24eb4539dac5d69ac03e61b180",
-      "markdownSha256": "3ecfc1393d0538ac49c34e0daf5c95aa716238f0dad4b711871d6f82fefe66eb",
+      "sourceSha256": "93f839b115c34b5579839fa41ddf213e4686d67e24848f441b3f207e5d06aa2e",
+      "bodySha256": "2cf9c68336610d0172ba0861d4a1be2c4135eafb2eaa443c95145a7641d4d6de",
+      "markdownSha256": "0339143131892d7312249f256afc6f4b3a290ec7e0e6a209438d90d6b9d351ad",
       "headings": [
         {
           "title": "Tree Traversal",

packages/codegen/README.md

@@ -44,7 +44,7 @@ import { serializePropValue, serializeProps, escapeString } from '@json-render/c
 
 // Serialize a single value
 serializePropValue("hello");
-// { value: '"hello"', needsBraces: false }
+// { value: '"hello"', needsBraces: true }
 
 serializePropValue(42);
 // { value: '42', needsBraces: true }
@@ -54,7 +54,7 @@ serializePropValue({ $state: '/user/name' });
 
 // Serialize props for JSX
 serializeProps({ title: "Dashboard", columns: 3, disabled: true });
-// 'title="Dashboard" columns={3} disabled'
+// 'title={"Dashboard"} columns={3} disabled'
 ```
 
 ### Types

packages/codegen/src/serialize.test.ts

@@ -0,0 +1,49 @@
+import ts from "typescript";
+import { describe, expect, it } from "vitest";
+import { serializeProps } from "./serialize";
+
+describe("serializeProps", () => {
+  it.each(["single", "double"] as const)(
+    "preserves strings in compiled JSX with %s quotes",
+    (quotes) => {
+      for (const title of [
+        'Quoted "temperature"',
+        "It's ready",
+        "line\nnext\r\n\ttab",
+        "C:\\temp\\",
+        "&amp; <tag>",
+        "",
+      ]) {
+        const { outputText, diagnostics } = ts.transpileModule(
+          `const result = <div ${serializeProps({ title }, { quotes })} />;`,
+          {
+            fileName: "generated.tsx",
+            reportDiagnostics: true,
+            compilerOptions: {
+              jsx: ts.JsxEmit.React,
+              jsxFactory: "h",
+              target: ts.ScriptTarget.ES2022,
+            },
+          },
+        );
+        expect(diagnostics).toEqual([]);
+        const props = new Function("h", `${outputText}\nreturn result;`)(
+          (_tag: string, values: Record<string, unknown>) => values,
+        );
+        expect(props.title).toBe(title);
+      }
+    },
+  );
+
+  it("keeps boolean shorthand and skips nullish props", () => {
+    expect(
+      serializeProps({
+        disabled: true,
+        hidden: false,
+        count: 2,
+        missing: undefined,
+        empty: null,
+      }),
+    ).toBe("disabled hidden={false} count={2}");
+  });
+});

packages/codegen/src/serialize.ts

@@ -56,7 +56,7 @@ export function serializePropValue(
   if (typeof value === "string") {
     return {
       value: `${q}${escapeString(value, opts.quotes)}${q}`,
-      needsBraces: false,
+      needsBraces: true,
     };
   }
 

skills/codegen/SKILL.md

@@ -53,14 +53,14 @@ import {
 
 // Serialize a single value
 serializePropValue("hello");
-// { value: '"hello"', needsBraces: false }
+// { value: '"hello"', needsBraces: true }
 
 serializePropValue({ $state: "/user/name" });
 // { value: '{ $state: "/user/name" }', needsBraces: true }
 
 // Serialize props for JSX
 serializeProps({ title: "Dashboard", columns: 3, disabled: true });
-// 'title="Dashboard" columns={3} disabled'
+// 'title={"Dashboard"} columns={3} disabled'
 
 // Escape strings for code
 escapeString('hello "world"');