#379

fix(codegen): quoted string props produce invalid JSX

Opencoygeekopened 1mo ago

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

  1. Install @json-render/codegen@0.21.0 and esbuild@0.28.2 in a fresh consumer.
  2. 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

0

No activity yet.