fix: correct children rendering in TSX output (#53)

typicode · May 26, 2024 · 031a74e · 031a74e
1 parent 9c32ec2
commit 031a74e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/src/renderers/__snapshots__/react.test.ts.snap b/src/renderers/__snapshots__/react.test.ts.snap
@@ -9,7 +9,7 @@ import type { PropsWithChildren } from 'hono/jsx'
 type Props = { attr?: 'a' | 'b', attrFooBar?: 'foo-bar', isFoo?: boolean, propFoo?: string, propBar?: string } & JSX.IntrinsicElements['div']
 
 export function Foo({ children, attr, attrFooBar, isFoo, propFoo, propBar, ...props }: PropsWithChildren<Props>) {
-  return (<div {...props} data-attr={attr} data-attr-foo-bar={attrFooBar} data-is-foo={isFoo} style={{ '--prop-foo': propFoo, '--prop-bar': propBar }} class="foo" >\${children}</div>)
+  return (<div {...props} data-attr={attr} data-attr-foo-bar={attrFooBar} data-is-foo={isFoo} style={{ '--prop-foo': propFoo, '--prop-bar': propBar }} class="foo" >{children}</div>)
 }
 "
 `;
@@ -23,7 +23,7 @@ import type { JSX, PropsWithChildren } from 'react'
 type Props = { attr?: 'a' | 'b', attrFooBar?: 'foo-bar', isFoo?: boolean, propFoo?: string, propBar?: string } & JSX.IntrinsicElements['div']
 
 export function Foo({ children, attr, attrFooBar, isFoo, propFoo, propBar, ...props }: PropsWithChildren<Props>) {
-  return (<div {...props} data-attr={attr} data-attr-foo-bar={attrFooBar} data-is-foo={isFoo} style={{ '--prop-foo': propFoo, '--prop-bar': propBar }} className="foo" >\${children}</div>)
+  return (<div {...props} data-attr={attr} data-attr-foo-bar={attrFooBar} data-is-foo={isFoo} style={{ '--prop-foo': propFoo, '--prop-bar': propBar }} className="foo" >{children}</div>)
 }
 "
 `;
@@ -37,7 +37,7 @@ import type { JSX, PropsWithChildren } from 'react'
 type Props = {  } & JSX.IntrinsicElements['div']
 
 export function Foo({ children, ...props }: PropsWithChildren<Props>) {
-  return (<div {...props} className="foo" >\${children}</div>)
+  return (<div {...props} className="foo" >{children}</div>)
 }
 "
 `;

diff --git a/src/renderers/react.ts b/src/renderers/react.ts
@@ -32,11 +32,10 @@ function renderFunction(data: Data, isClass: boolean): string {
   ].join(', ')
 
   return `export function ${pascalCase(data.className)}({ ${args} }: ${hasChildren(data.tag) ? `PropsWithChildren<Props>` : `Props`}) {
-  return (${renderTag(data, '${children}', isClass ? 'class' : 'className')})
+  return (${renderTag(data, '{children}', isClass ? 'class' : 'className')})
 }`
 }
 
-
 export function render(name: string, data: Data, isHono = false): string {
   return `// Generated by MistCSS, do not modify
 import './${name}.mist.css'