experimentalReactChildren flag doesn't map node.class and children keys on client

[jos3ph1205]

Astro Info

Astro                    v5.16.3
Node                     v20.15.0
System                   Windows (x64)
Package Manager          unknown
Output                   static
Adapter                  @astrojs/cloudflare
Integrations             @astrojs/react
                         @astrojs/sitemap

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I’m not entirely sure whether this is intended behavior, but from what I can tell this appears to be missing functionality, or at least a bug.

When experimentalReactChildren=true, classes on children passed into React components are not mapped to className on the client but only on server-side. Additionally, all children appear to be missing key props on the client as well.

There is an existing discussion that touches on this and explains it better than I can from nearly two years ago:
withastro/roadmap#917

What's the expected result?

children logged on client

[
    {
        "type": "span",
        "key": null,
        "props": {
            "class": "title",
            "data-astro-source-file": "/home/projects/bnmijzjyny.github/src/pages/index.astro",
            "data-astro-source-loc": "15:25",
            "children": [
                "Hello"
            ]
        },
        "_owner": null,
        "_store": {}
    },
    {
        "type": "span",
        "key": null,
        "props": {
            "class": "subtitle",
            "data-astro-source-file": "/home/projects/bnmijzjyny.github/src/pages/index.astro",
            "data-astro-source-loc": "16:28",
            "children": [
                "World"
            ]
        },
        "_owner": null,
        "_store": {}
    }
]

Subsequent Client errors:

• Each child in a list should have a "key" prop
• Invalid DOM property 'class.' DId you mean 'className'?

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. 

  <MyReactComponent>
    <div>
      <span
        class="title"
+       data-astro-source-file="/home/projects/bnmijzjyny.github/src/pages/index.astro"
-       data-astro-source-file={null}
+       data-astro-source-loc="15:25"
-       data-astro-source-loc={null}
      >
      <span
        class="subtitle"
+       data-astro-source-file="/home/projects/bnmijzjyny.github/src/pages/index.astro"
-       data-astro-source-file={null}
+       data-astro-source-loc="16:28"
-       data-astro-source-loc={null}
      >

children logged on server (expected on client)

[
  {
    '$$typeof': Symbol(react.transitional.element),
    type: 'span',
    key: '85-0',
    props: {
      'data-astro-source-file': '/home/projects/bnmijzjyny.github/src/pages/index.astro',
      'data-astro-source-loc': '15:25',
      className: 'title',
      children: [Array]
    },
    _owner: null,
    _store: {}
  },
  {
    '$$typeof': Symbol(react.transitional.element),
    type: 'span',
    key: '85-1',
    props: {
      'data-astro-source-file': '/home/projects/bnmijzjyny.github/src/pages/index.astro',
      'data-astro-source-loc': '16:28',
      className: 'subtitle',
      children: [Array]
    },
    _owner: null,
    _store: {}
  }
]

There is a full reproduction of this attached below. You'll need to open the preview in a separate tab to view console logs

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-2mtqsque?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[kedarvartak]

@jos3ph1205 @florian-lefebvre hi, raised a pr. pls check

[jos3ph1205]

@jos3ph1205 @florian-lefebvre hi, raised a pr. pls check

Thanks man, this is great!

[kedarvartak]

hi @florian-lefebvre can you review this?

[florian-lefebvre]

I have other things on my plate, the whole team is more focused towards Astro 6 atm. Someone will have a look when they have time, no worries