chore: use mosaic consistently

[lottamus]

Element's HttpOperation Request parameters component is using Mosaic's spacing but JSV is not. This results in a 1px difference between the parameters and the body section. This hurts my eyeballs. 🙈

https://github.com/stoplightio/elements/blob/350e46ae4facb93c42997dd97cd57be98b947b88/packages/elements-core/src/components/Docs/HttpOperation/Parameters.tsx#L38

Thus I took it upon myself to use Mosaic consistently within this lib.

[P0lip]

We didn't use mosaic for a reason.
#113
Have you confirmed the perf issues are no longer apparent?

[marbemac]

FWIW, on my macbook rendering the stress test storybook.. I don't know where those numbers were coming from in #113...

master

defaultExpandedDepth = 2, around ~145ms:

defaultExpandedDepth = 5, around ~540ms:

this PR

defaultExpandedDepth = 2, around ~200ms (1.37x):

defaultExpandedDepth = 5, around ~930ms (1.38x):

---

IMHO the stress test example with expanded depth of 5 is not a use case we need to serve 🤷‍♂️. We don't ever (or should not, right?) set default expand depth to larger than 2, which means realistically we'll never be rendering anything close to the second example above.

145ms versus 200ms for a stress test style use case is not a huge deal IMHO.

[P0lip]

145ms versus 200ms for a stress test style use case is not a huge deal IMHO.

I will admit that to me the 1.37x slowdown is a notable one, particularly if we speak of tens or hundreds of ms and take into account the fact we usually don't render JSV alone, but a whole docs page that has its own set of accompanying components.
The UI library that, in this very case, brings nothing but styling and no extra functionality on its own shouldn't introduce any meaningful overhead and this is clearly not the case here.
I'll leave the call to you all, but I'd say we shouldn't keep the status quo and not change anything.

60ms equals almost 4 frames.

---

To be clear - not saying Mosaic is bad or anything. It's a neat library, I'm just not really convinced we should be trying to make use of it at all costs where we clearly take a perf hit here that could have been avoided.

[marbemac]

What's in place now just isn't really a good option - I guess we could look for another way that doesn't involve mosaic, buttt.. 🤷‍♂️. JSV IS using mosaic right now, just a "private" API from mosaic (hardcoded classnames that come from mosaic css).

Check this out though:

• Some adjustments to the JSV to render a few less wrapper elements that were not needed
• https://github.com/stoplightio/mosaic/pull/313 (as I said a million times, I am/was almost certain that "Box" / "forwardRef" were not the culprits)

With the two changes above (I yalc'd that mosaic PR into JSV), the perf is basically the same as on main branch:

[Nezteb]

With the new mosaic memoization this is 👌.

[stoplight-bot]

🎉 This PR is included in version 4.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀