Warn when encountering bind:clientWidth etc during SSR

[Rich-Harris]

Is your feature request related to a problem? Please describe.

When you have a component like this...

<script>
  import SvgChart from './SvgChart.svelte';
  let w;
</script>

<div bind:clientWidth={w}>
  <SvgChart width={w} height={300}/>
</div>

...and try to server-render it, w will be undefined, and anything that depends on it will appear broken. Even if you initialise w, it is unlikely to accurately reflect the eventual DOM, so there will be a flash upon hydration.

Describe the solution you'd like
In general I suspect we want to discourage this sort of thing from happening. If we encounter such a binding at SSR time, we could emit a warning to that effect.

Describe alternatives you've considered
The wrinkle is that you might have a situation like this:

<div bind:clientWidth={w}>
  {#if process.browser}
    <SvgChart width={w} height={300}/>
  {/if}
</div>

In that case, the warning would be undesirable. I'm not sure how to address that, so the alternative would be to do nothing.

How important is this feature to you?
I have coworkers who are very skilled at building charts with d3, but are less familiar with the declarative style, and in particular aren't used to considering how to build charts in such a way that they can be fully server-rendered. An emitted warning would make it possible to catch these situations automatically and offer relevant guidance. I have to imagine my situation isn't totally unique.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.