Hydration not working when not using self-closing tag

[arggh]

Just starting out with Elderjs, but I ran into a weird issue.

This won't hydrate on the client:

<Map hydrate-client={{}} ></Map>

...but this will:

<Map hydrate-client={{}} />

I'm working with the v0.2.0 template.

[swyxio]

the issue is almost certainly with this regex -

elderjs/src/partialHydration/partialHydration.ts

Line 22 in 88060bc

const hydrateableComponentPattern = /<([a-zA-Z]+)[^>]+hydrate-client={([^]*?})}[^/>]+\/>/gim;

if i think a little bit its understandable why children are not supported - hard to draw the line between what is hydrated and what isnt.

we should add a regex for the non-self-closing case and insert an error if found, should be quite cheap.

[nickreese]

@arggh / @sw-yx Good calls. :)

We will throw an error during rollup in v1 for <Map hydrate-client={{}} ></Map> style components. Adding this functionality now.

[swyxio]

ok nice. just note that people might try to insert children in those components too, so the regex may have to accommodate that (i honestly dont know if this is possible) and optionally give a nice reason why we dont allow children in hydrated components

[nickreese]

@sw-yx

Here is the improved error text:

Elder.js only supports self-closing syntax on hydrated components. This means <Foo /> not <Foo></Foo> or <Foo>Something</Foo>. Offending component: ${offendingCode}. Slots and child components aren't supported during hydration as it would result in huge HTML payloads. If you need this functionality try wrapping the offending component in a parent component without slots or child components and hydrate that.

[swyxio]

love it