fix(deno/jsx-precompile): use html() tag function if value is a promi…

…se (#2283)
honojs · Feb 28, 2024 · b4912f3 · b4912f3
1 parent a3d9f13
commit b4912f3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/deno_dist/jsx/jsx-runtime.ts b/deno_dist/jsx/jsx-runtime.ts
@@ -3,5 +3,6 @@ export { jsxDEV as jsxs } from './jsx-dev-runtime.ts'
 
 import { raw, html } from '../helper/html/index.ts'
 export { html as jsxTemplate }
-export const jsxAttr = (name: string, value: string) => raw(name + '="' + html`${value}` + '"')
+export const jsxAttr = (name: string, value: string | Promise<string>) =>
+  typeof value === 'string' ? raw(name + '="' + html`${value}` + '"') : html`${name}="${value}"`
 export const jsxEscape = (value: string) => value
diff --git a/runtime_tests/deno-jsx/jsx.test.tsx b/runtime_tests/deno-jsx/jsx.test.tsx
@@ -1,6 +1,8 @@
 /** @jsxImportSource ../../deno_dist/jsx */
+import { Style, css } from '../../deno_dist/helper/css/index.ts'
 import { Suspense, renderToReadableStream } from '../../deno_dist/jsx/streaming.ts'
 import type { HtmlEscapedString } from '../../deno_dist/utils/html.ts'
+import { resolveCallback, HtmlEscapedCallbackPhase } from '../../deno_dist/utils/html.ts'
 import { assertEquals } from '../deno/deps.ts'
 
 Deno.test('JSX', () => {
@@ -79,3 +81,26 @@ d.replaceWith(c.content)
 </script>`,
   ])
 })
+
+Deno.test('JSX: css', async () => {
+  const className = css`
+    color: red;
+  `
+  const html = (
+    <html>
+      <head>
+        <Style />
+      </head>
+      <body>
+        <div class={className}></div>
+      </body>
+    </html>
+  )
+
+  const awaitedHtml = await html
+  const htmlEscapedString = 'callbacks' in awaitedHtml ? awaitedHtml : await awaitedHtml.toString()
+  assertEquals(
+    await resolveCallback(htmlEscapedString, HtmlEscapedCallbackPhase.Stringify, false, {}),
+    '<html><head><style id="hono-css">.css-3142110215{color:red}</style></head><body><div class="css-3142110215"></div></body></html>'
+  )
+})
diff --git a/src/jsx/jsx-runtime.ts b/src/jsx/jsx-runtime.ts
@@ -3,5 +3,6 @@ export { jsxDEV as jsxs } from './jsx-dev-runtime'
 
 import { raw, html } from '../helper/html'
 export { html as jsxTemplate }
-export const jsxAttr = (name: string, value: string) => raw(name + '="' + html`${value}` + '"')
+export const jsxAttr = (name: string, value: string | Promise<string>) =>
+  typeof value === 'string' ? raw(name + '="' + html`${value}` + '"') : html`${name}="${value}"`
 export const jsxEscape = (value: string) => value