fix: escape manufacturerPartNumber safely in generated TSX (closes #552)

lib/websafe/convert-to-typescript-component/generate-typescript-component.ts

@@ -4,6 +4,21 @@ import { getPolarizedPinMetadata } from "../../utils/get-polarized-pin-metadata"
 import { generateFootprintTsx } from "../generate-footprint-tsx"
 import { inferPinAttributes } from "./infer-pin-attributes"
 
+/**
+ * Renders a string as a JSX attribute. Values that are safe to place inside
+ * a plain double-quoted JSX attribute (no quotes, backslashes, or JSX
+ * expression braces) keep the existing `attr="value"` form so we don't
+ * needlessly churn output. Anything else falls back to a JSX expression
+ * container with a properly escaped JS string literal, since JSX quoted
+ * attributes do not interpret JavaScript escape sequences.
+ */
+const renderJsxStringAttr = (attrName: string, value: string): string => {
+  if (/^[^"\\{}]*$/.test(value)) {
+    return `${attrName}="${value}"`
+  }
+  return `${attrName}={${JSON.stringify(value)}}`
+}
+
 export type GeneratedComponentType =
   | "chip"
   | "diode"
@@ -171,7 +186,7 @@ export const ${componentName} = (props: DiodeProps) => {
 ${polarizedPinLabelsProp}\
 ${symbolProp}\
       supplierPartNumbers={${JSON.stringify(supplierPartNumbers, null, "  ")}}
-      manufacturerPartNumber="${manufacturerPartNumber}"
+      ${renderJsxStringAttr("manufacturerPartNumber", manufacturerPartNumber)}
       footprint={${footprintTsx}}
       ${
         objUrl || stepUrl
@@ -201,7 +216,7 @@ export const ${componentName} = (props: LedProps) => {
 ${polarizedPinLabelsProp}\
 ${symbolProp}\
       supplierPartNumbers={${JSON.stringify(supplierPartNumbers, null, "  ")}}
-      manufacturerPartNumber="${manufacturerPartNumber}"
+      ${renderJsxStringAttr("manufacturerPartNumber", manufacturerPartNumber)}
       footprint={${footprintTsx}}
       ${
         objUrl || stepUrl
@@ -234,7 +249,7 @@ export const ${componentName} = (props: PushButtonProps<typeof pinLabels>) => {
       pinLabels={pinLabels}
 ${symbolProp}\
       supplierPartNumbers={${JSON.stringify(supplierPartNumbers, null, "  ")}}
-      manufacturerPartNumber="${manufacturerPartNumber}"
+      ${renderJsxStringAttr("manufacturerPartNumber", manufacturerPartNumber)}
       footprint={${footprintTsx}}
       ${
         objUrl || stepUrl
@@ -267,7 +282,7 @@ export const ${componentName} = (props: SwitchProps) => {
       pinLabels={pinLabels}
 ${symbolProp}\
       supplierPartNumbers={${JSON.stringify(supplierPartNumbers, null, "  ")}}
-      manufacturerPartNumber="${manufacturerPartNumber}"
+      ${renderJsxStringAttr("manufacturerPartNumber", manufacturerPartNumber)}
       footprint={${footprintTsx}}
       ${
         objUrl || stepUrl
@@ -303,7 +318,7 @@ ${capacitorPolarizedPinLabelsProp}\
 ${polarizedProp}\
 ${symbolProp}\
       supplierPartNumbers={${JSON.stringify(supplierPartNumbers, null, "  ")}}
-      manufacturerPartNumber="${manufacturerPartNumber}"
+      ${renderJsxStringAttr("manufacturerPartNumber", manufacturerPartNumber)}
       footprint={${footprintTsx}}
       ${
         objUrl || stepUrl
@@ -336,7 +351,7 @@ export const ${componentName} = (props: Omit<ResistorProps, "resistance">) => {
       resistance=${JSON.stringify(resistance)}
 ${symbolProp}\
       supplierPartNumbers={${JSON.stringify(supplierPartNumbers, null, "  ")}}
-      manufacturerPartNumber="${manufacturerPartNumber}"
+      ${renderJsxStringAttr("manufacturerPartNumber", manufacturerPartNumber)}
       footprint={${footprintTsx}}
       ${
         objUrl || stepUrl
@@ -365,7 +380,7 @@ export const ${componentName} = (props: Omit<InductorProps, "inductance">) => {
     <inductor
       inductance=${JSON.stringify(inductance)}
       supplierPartNumbers={${JSON.stringify(supplierPartNumbers, null, "  ")}}
-      manufacturerPartNumber="${manufacturerPartNumber}"
+      ${renderJsxStringAttr("manufacturerPartNumber", manufacturerPartNumber)}
       footprint={${footprintTsx}}
       ${
         objUrl || stepUrl
@@ -400,7 +415,7 @@ export const ${componentName} = (props: ImportedCrystalProps) => {
       frequency=${JSON.stringify(crystalFrequency)}
       pinVariant=${JSON.stringify(crystalPinVariant)}
       supplierPartNumbers={${JSON.stringify(supplierPartNumbers, null, "  ")}}
-      manufacturerPartNumber="${manufacturerPartNumber}"
+      ${renderJsxStringAttr("manufacturerPartNumber", manufacturerPartNumber)}
       footprint={${footprintTsx}}
       ${
         objUrl || stepUrl
@@ -429,7 +444,7 @@ export const ${componentName} = (props: ConnectorProps) => {
     <connector
       pinLabels={pinLabels}
       supplierPartNumbers={${JSON.stringify(supplierPartNumbers, null, "  ")}}
-      manufacturerPartNumber="${manufacturerPartNumber}"
+      ${renderJsxStringAttr("manufacturerPartNumber", manufacturerPartNumber)}
       footprint={${footprintTsx}}
       ${
         objUrl || stepUrl
@@ -461,7 +476,7 @@ ${pinAttributesProp}\
 ${symbolProp}\
 ${schPinArrangementProp}\
       supplierPartNumbers={${JSON.stringify(supplierPartNumbers, null, "  ")}}
-      manufacturerPartNumber="${manufacturerPartNumber}"
+      ${renderJsxStringAttr("manufacturerPartNumber", manufacturerPartNumber)}
       footprint={${footprintTsx}}
       ${
         objUrl || stepUrl

tests/convert-to-ts/manufacturer-part-number-quote.test.ts

@@ -0,0 +1,33 @@
+import { expect, it } from "bun:test"
+import ts from "typescript"
+import { EasyEdaJsonSchema } from "lib/schemas/easy-eda-json-schema"
+import { convertBetterEasyToTsx } from "lib/websafe/convert-to-typescript-component"
+import c1046RawEasy from "../assets/C1046.raweasy.json"
+
+const getSyntaxErrors = (code: string): string[] => {
+  const sourceFile = ts.createSourceFile(
+    "component.tsx",
+    code,
+    ts.ScriptTarget.Latest,
+    false,
+    ts.ScriptKind.TSX,
+  )
+  // biome-ignore lint/suspicious/noExplicitAny: internal TS API not in public types
+  const parseDiagnostics = (sourceFile as any).parseDiagnostics as
+    | { messageText: string | ts.DiagnosticMessageChain }[]
+    | undefined
+  return (parseDiagnostics ?? []).map((diagnostic) =>
+    ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n"),
+  )
+}
+
+it("emits valid, correctly-escaped TSX when the manufacturer part number contains a double quote", async () => {
+  const payload = structuredClone(c1046RawEasy) as any
+  payload.dataStr.head.c_para["Manufacturer Part"] = 'ABC"DEF'
+
+  const betterEasy = EasyEdaJsonSchema.parse(payload)
+  const result = await convertBetterEasyToTsx({ betterEasy })
+
+  expect(getSyntaxErrors(result)).toEqual([])
+  expect(result).toContain('manufacturerPartNumber={"ABC\\"DEF"}')
+})