feat: support GatsbyJS replaceRenderer by hydrating a React element

[BrunnerLivio]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

GatsbyJS added a replaceRenderer lifecycle hook which would be a perfect fit for Stencil! Unfortunately, GatsbyJS only passes a React element to the function. This means the current hydrate.* functions can not be used.

Describe the Use Case

Better support for StencilJS in GatsbyJS. The current solution (gatsby-plugin-stencil) unfortunately does not work nicely with GatsbyJS incremental build features because it does not follow Gatsbys best practices.

An integration with replaceRenderer would fix that!

Describe Preferred Solution

Expose a function like renderToString which can take a React Element as a parameter.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[BrunnerLivio]

It seems like this is the way to go:

const ReactDOMServer = require('react-dom/server')
const hydrate = require('<STENCIL_LIBRARY>/hydrate')

export async function replaceRenderer({ bodyComponent, replaceBodyHTMLString }) {

    const { html, diagnostics = [] } = await hydrate.renderToString(ReactDOMServer.renderToString(bodyComponent), {
        removeHtmlComments: true,
        removeScripts: true,
    })

    diagnostics.forEach((diagnostic) =>
        console.error(
            `error pre-rendering file: ${JSON.stringify(
                diagnostic,
                null,
                "  "
            )}`
        )
    );

    if (html) {
        replaceBodyHTMLString(html)
    }
}

Haven't been able to get it fully working, but I am getting closer