fix(hydrate): support style modes in hydrate modules

[christian-bromann]

What is the current behavior?

If a Stencil component uses Style Modes they currently aren't recognised in the hydrate module, e.g. calling renderToString would render the component without any styles. The problem is that Rollup generates a variable scope for the global runtime and the one for the hydrate module which causes modeResolutionChain to be defined twice in the bundle. When calling setMode, it would add a mode to the modeResolutionChain variables defined outside of the hydrate scope, leaving the one inside the hydrate module empty and hence not applying the styles to the component.

What is the new behavior?

I tweaked the rollup config to essentially remove all modeResolutionChain definitions in the bundle and inject on at the beginning of the bundle by uncommenting a statement within the HYDRATE_FACTORY_INTRO. Furthermore I added a mode option to the SerializeDocumentOptions interface to allow setting modes per e.g. renderToString call.

Documentation

Does this introduce a breaking change?

• Yes
• No

Testing

Added an e2e test for this.

Other information

n/a

[tanner-reits]

This is good to go once we get rid of the of the magic strings (i.e. const modeResolutionChain = []; and var modeResolutionChain = [];)

[christian-bromann]

@tanner-reits thanks for the review, applied changes as suggested.

[christian-bromann]

Released in Stencil v4.22.0