Is there a good vike+lit example?

[NilsJacobsen]

I'm working on web components build in Lit as a component library. Now I want to use it in my solidjs vike setup. Of course I can just import them on the client but how can I get SSR working.

My approach:

• Tried to make an entire page a lit element default exported the component, named Page.
• Tried to distinguish between Lit and Solid Page in my +onRenderHtml.tsx file. I abused pageProps to detect it because I wasn't able to use instanceof. Maybe there is a better way to do that?
• Then I want to use the render function from @lit-labs/ssr together with the collectResults function to convert the Page component into a string. Problem: The render function needs to get an html template as input, but how can I convert the pageContext.Page into an html template.

In general, the interaction between vike, lit and solid is a bit vaguely. An example or a guide on how to use ssr-rendered web-components would be super helpful.

[brillout]

Another way to do this is to use meta with config inheritence. For example, you can have different hooks that apply to different pages: you can have onRender{Html,Client}() hooks for Solid that apply only to your Solid pages, and onRender{Html,Client}() hooks for Lit that apply only to your Lit pages.

Maybe there is a better way to do that?

Seems like a custom setting could work well here.

• The render function needs to get an html template as input, but how can I convert the pageContext.Page into an html template.

The export { Page } of your +Page.js files are passed as-is, thus your onRender{Html,Client}() hooks can do whatever they want with that value.

[NilsJacobsen]

Do you propose something like that:

That way I can define the same function for different pages in a different way.

The export { Page } of your +Page.js files are passed as-is, thus your onRender{Html,Client}() hooks can do whatever they want with that value.

Alright gonna try to fix that.

[NilsJacobsen]

I guess for hydration I can do the same, right?

[brillout]

Yes that would work, although I ain't sure what the added value would be compared to that:

/pages-lit/+onRenderHtml.ts
/pages-lit/+onRenderClient.ts
/pages-solid/+onRenderHtml.ts
/pages-solid/+onRenderClient.ts