Summary
serializeProps() emits JavaScript backslash escapes inside JSX quoted attributes. An ordinary string containing a double quote produces JSX that esbuild cannot parse.
Steps to reproduce
- Install
@json-render/codegen@0.21.0andesbuild@0.28.2in a fresh consumer. - Run this script.
import { serializeProps } from "@json-render/codegen";
import { transform } from "esbuild";
const attrs = serializeProps({ title: 'Quoted "temperature"' });
console.log(attrs);
await transform(`const result = <div ${attrs} />;`, { loader: "jsx" });Expected behavior
The output compiles as JSX and preserves the original title string, including both quote characters. A regression check should compile and inspect the resulting value.
Actual behavior
The helper returns the following attribute text.
title="Quoted \"temperature\""esbuild rejects it with Unexpected backslash in JSX element. Backslash escaping a quote in a JavaScript string does not make it a valid escape inside a JSX quoted attribute.
Affected area
String prop serialization in packages/codegen/src/serialize.ts.
Runtime or environment
Reproduced with Node v22.23.2, @json-render/codegen 0.21.0, and esbuild 0.28.2. The inspected source revision is fc2a696a50a30cb30c878ab1eb65e102487eea0f.
Evidence
The string serialization branch marks strings as not requiring braces, and serializeProps then emits them as raw quoted JSX attributes. The fresh compilation probe reproduces the parser failure for the public helper.
Impact
Code generators using serializeProps() fail to compile ordinary user-visible labels and titles containing quotes. This is independent of the object-key serialization report in issue #361.
Activity
0No activity yet.