Show warnings of problematic page structure with hydration bugs?

Ideas and Feedback
1

I see a lot of cases where a page renders perfectly in Plasmic, but not on target for various reasons

  1. Invalid use of tags, e.g. people putting tags inside a

    tag — fails everywhere

  2. Use of tags / functionality not available on older systems – working on issues now where
    ◦ On OSX Catalina / Safari, some pages are completely broken
    ◦ On OSX Big-Sur some links are blue when they should be black
    It would be great with hints about:
  3. What you are doing here is broken, and will not work – error message
  4. What you are doing here will not work on older browsers
    a. Here you should give more info… How old? How big of an issue is it
    b. You should also probably allow people to define compatibility targets:
    i. MUST work on: (list of OS / Browser version where the site MUST be picture perfect compared to plasmic)
    ii. SHOULD work on: (list of OS / Browser versions where slight issues are ok
    iii. NICE to work on (… slight breakage is ok, but we want to know about it
    Would also be nice with a feature to hide certain functionality in cases where functionality is not supported…
    • I.e. similar to variants… However only useful if feature detection and hiding can be done in pure CSS, since we server-side render everything and usually don’t hydrate (because of speed)
2

@yang one more request here:
• Would be great with a warning for things that need hydration to render properly (configurable warning on/off)
◦ We have cases where people do content-overrides for e.g.

in screen variants, and this only works if the page is hydrated
◦ Similarly, if someone does a component setting override in a screen variant, this also only works if the page is hydrated