Inlined media match

[theKashey]

The current solution is great, but not great-great for server side - while reactive approach is good for SPA, adaptive might be a better choice for SSR.

Actually - this is not a good idea to ship two different code variants, but - sometimes there is no choice

Idea:

• add a flag to Matcher, to wrap every media result with media guard, which would display such result in case of media match
• add a flag to Matcher, to return more than than(up to all) result. That would lead to adaptive layout.
• add a flag to Matcher, for else condition, displaying provided failback if the main condition is not met.
• (bonus) measure branches size, and warn if too many data got rendered.

<Matcher
 adaptive
 mobile="mobile"
 tablet="tablet"
>
// probably some user-provided className should be set to the adaptive div.
<div class='media-adaptive-mobile'>mobile</div>
<div class='media-adaptive-tablet'>tablet</div>

<Matcher
 failback={<div className="failback-div"/>}
 mobile="mobile"
 tablet="tablet"
>
// 
<div class='media-adaptive-mobile'>mobile</div>
<div class='media-adaptive-not-mobile'><div className="failback-div"/></div>

Then - failback-div could use standard responsive things do adapt placeholder for a right media, untill hydration.

That would make media matcher SSR friendly for the cases of client-side javascript disabled, or just lower TTI.