feat(jsx/precompile): Normalization and stringification of attribute values as renderToString

[usualoma]

fix #3427

The “precompile” process converts attribute values in the same way as the normal renderToString process.
https://github.com/usualoma/hono/blob/fd80df6a0f03876cf6ac2b12b4b7b812c19ca616/src/jsx/base.ts#L180-L227

The author should do the following, if applicable

• Add tests
• Run tests
• bun run format:fix && bun run lint:fix to format the code

[codecov]

Codecov Report

Attention: Patch coverage is 3.22581% with 30 lines in your changes missing coverage. Please review.

Project coverage is 95.50%. Comparing base (dfbd717) to head (4405e69).
Report is 11 commits behind head on main.

Files with missing lines	Patch %	Lines
src/jsx/jsx-runtime.ts	0.00%	30 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3432      +/-   ##
==========================================
- Coverage   95.77%   95.50%   -0.28%     
==========================================
  Files         155      155              
  Lines        9310     9337      +27     
  Branches     2725     2865     +140     
==========================================
  Hits         8917     8917              
- Misses        393      420      +27     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[usualoma]

It'll need some tweaking.

[usualoma]

@yusukebe
Would you please review?

[yusukebe]

Can we create one common function for these lines and https://github.com/usualoma/hono/blob/fd80df6a0f03876cf6ac2b12b4b7b812c19ca616/src/jsx/base.ts#L180-L227 and use it from the both?

Like this, though, I think objectToAttribute is not the best name.

export const objectToAttribute = (key: string, v: any, buffer: any) => {
  if (v === null || v === undefined) {
    return
  }
  if (key === 'style' && typeof v === 'object') {
    // object to style strings
    let styleStr = ''
    styleObjectForEach(v as Record<string, string | number>, (property, value) => {
      if (value != null) {
        styleStr += `${styleStr ? ';' : ''}${property}:${value}`
      }
    })
    escapeToBuffer(styleStr, buffer)
    buffer[0] += '"'
  } else if (typeof v === 'boolean' && booleanAttributes.includes(key)) {
    return buffer
  } else if (typeof v === 'string') {
  // ...
  return buffer
}

[usualoma]

@yusukebe
I also considered making it common, but if it is made common, there will inevitably be overhead for both sides in the following areas.

https://github.com/usualoma/hono/blob/4405e69ae8ab419b2dab36dfd25c605a9c50fca3/src/jsx/base.ts#L202
https://github.com/usualoma/hono/blob/4405e69ae8ab419b2dab36dfd25c605a9c50fca3/src/jsx/base.ts#L205

I don't think it's a big overhead, but I want to be particularly conscious of performance when stringifying JSX, so I want to keep it separate for each implementation for optimization. What do you think?

[yusukebe]

@usualoma

Understood well. Let's go with this. Thank you for spending for considering it!

[yusukebe]

Hey @usualoma

Thank you for the PR. I've left comments!

[usualoma]

Key normalization is done by deno, so processing by hono was removed. 4405e69

[yusukebe]

LGTM!

[yusukebe]

@usualoma

Looks good! Thank you.