Hydrate App: Can't pass JSON to component in renderToString method (SSR)

[guidoknoll]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

When using the renderToString method of the hydrate app it's not possible to pass json to a component for initialization.

Expected behavior:

It should be possible to pass objects/json to a component during server side rendering.

Steps to reproduce:

Related code:

As shown below i would pass a config object to my widget component but this does not work with the tsx syntax in the node environment. Alternatively it should be possible to include complex attributes to the renderToString function.

   const renderedHtml = await stencil.renderToString(
        `<widget config='{}'></widget>`
        , {
            removeBooleanAttributeQuotes: true,
            prettyHtml: true,
            constrainTimeouts: false,
            runtimeLogging: true,
            timeout: 3000,
            maxHydrateCount: 700
        }
    );
    res.send(renderedHtml.html);

Other information:

[sajTempler]

It would be great to have it implemented, for now passing stringified object to the component looks awkward in output html (especially when the config object in above example is somehow complex)

[sajTempler]

similar to #1691

[sajTempler]

@guidoknoll You can take a look at my simple example on how to get this working without passing the string as prop:

https://github.com/sajTempler/stencil-ssr

[christian-bromann]

This will be possible with #5792 where you can do this:

    const { html } = await renderToString(`<another-car-detail car=${JSON.stringify(vento)}></another-car-detail>`, {
      serializeShadowRoot: true,
      fullDocument: false,
    });

I will go ahead and close the issue. Please comment on the PR for any feedback. Thank you!