Regression: requestAnimationFrame called in server environment

[Rich-Harris]

Describe the bug

requestAnimationFrame is called by spring and tweened (via loop) when components are rendered server-side. This makes it impossible to do this sort of thing...

<script>
  import { spring } from 'svelte/motion';

  export let on;

  const x = spring(on ? 100 : 0);
  $: x.set(on ? 100 : 0);
</script>

...because it errors during rendering (since requestAnimationFrame is immediately called).

This was fixed in #2856 but apparently undone in #2994 — @mrkishi, @Conduitry, just want to check this wasn't intentional before I update this?

Severity

Inconvenient

[Conduitry]

It was actually #3016 that changed this. Reintroducing the is_client check sounds reasonable.

[Conduitry]

In particular, it looks like my simplification is at fault here. I guess I didn't realize that the problem wasn't just that referring to rAF on the server was an error, but that we also wanted to be able to cope with calling the raf helper on the server.

This doesn't break any tests:

diff --git a/src/runtime/internal/environment.ts b/src/runtime/internal/environment.ts
index a1d50b55..71233991 100644
--- a/src/runtime/internal/environment.ts
+++ b/src/runtime/internal/environment.ts
@@ -1,10 +1,12 @@
+import { noop } from './utils';
+
 export const is_client = typeof window !== 'undefined';
 
 export let now: () => number = is_client
 	? () => window.performance.now()
 	: () => Date.now();
 
-export let raf = cb => requestAnimationFrame(cb);
+export let raf = is_client ? cb => requestAnimationFrame(cb) : noop;
 
 // used internally for testing
 export function set_now(fn) {