Help creating UI framework integration

[stable eagle]

I'm trying to create an integration for a ui framework that isn't among the existing ones. To start with, I'm not involving the ui framework at all, just trying to get the rendering of components working with vanilla js. (I know astro already supports vanilla js components - but my plan is to get the integration working with vanilla js first, then bring in the actual ui framework)

The docs in this regard are severely lacking (which is fair - it's an uncommon use case), so I've tried to study the existing integrations, and here's a stack-blitz of how far I've come: https://stackblitz.com/edit/stackblitz-starters-qvaebn?file=astro.config.mjs

Basically, there is a server and client renderer. The server-renderer is being run (as I can tell from the console.log), but the markup it returns never ends up on the page. And the client-renderer is never run as far as I can tell.

[stable eagle]

I solved getting the static html rendered on the page. My mistake was returning the markup, when I should have been returning {attrs: {}, html: "<div><h1>.....</div>"} . But the client side renderer is not invoked so the component is not interactive, still.

What is the attrs prop returned from the server-renderer for? I can't find it in the type definitions in "astro/packages/astro/src/@types/astro.ts"

[stable eagle]

It appears the clientEntrypoint isn't even included in the js package sent to the client. I've tried using vite: { optimizeDeps: {include: ['./custom-renderer-client.js']}} but it appears to not do anything.

[gloomy hamlet]

The component is only rendering server side because it needs a client: directive to tell Astro how to hydrate the client side JS https://docs.astro.build/en/reference/directives-reference/#client-directives

[stable eagle]

Aaah of course. Somehow I took for granted that client components would be hydrated by default. Thank you!