Merge pull request #2856 from sveltejs/raf

treat requestAnimationFrame as a noop on the server

Author: Rich-Harris

package-lock.json

@@ -461,7 +461,7 @@ export default class ElementWrapper extends Wrapper {
 					function ${handler}() {
 						${animation_frame && deindent`
 						cancelAnimationFrame(${animation_frame});
-						if (!${this.var}.paused) ${animation_frame} = requestAnimationFrame(${handler});`}
+						if (!${this.var}.paused) ${animation_frame} = @raf(${handler});`}
 						${needs_lock && `${lock} = true;`}
 						ctx.${handler}.call(${this.var}${contextual_dependencies.size > 0 ? ', ctx' : ''});
 					}

src/compile/render-dom/wrappers/Element/index.ts

@@ -1,4 +1,4 @@
-import { now } from './utils.js';
+import { now, raf } from './utils.js';
 
 const tasks = new Set();
 let running = false;
@@ -12,7 +12,7 @@ function run_tasks() {
 	});
 
 	running = tasks.size > 0;
-	if (running) requestAnimationFrame(run_tasks);
+	if (running) raf(run_tasks);
 }
 
 export function clear_loops() {
@@ -26,7 +26,7 @@ export function loop(fn) {
 
 	if (!running) {
 		running = true;
-		requestAnimationFrame(run_tasks);
+		raf(run_tasks);
 	}
 
 	return {

src/internal/loop.js

@@ -1,4 +1,5 @@
 import { element } from './dom.js';
+import { raf } from './utils.js';
 
 let stylesheet;
 let active = 0;
@@ -56,7 +57,7 @@ export function delete_rule(node, name) {
 }
 
 export function clear_rules() {
-	requestAnimationFrame(() => {
+	raf(() => {
 		if (active) return;
 		let i = stylesheet.cssRules.length;
 		while (i--) stylesheet.deleteRule(i);

src/internal/style_manager.js

@@ -80,11 +80,19 @@ export function exclude_internal_props(props) {
 	return result;
 }
 
-export let now = typeof window !== 'undefined'
+const is_client = typeof window !== 'undefined';
+
+export let now = is_client
 	? () => window.performance.now()
 	: () => Date.now();
 
+export let raf = is_client ? requestAnimationFrame : noop;
+
 // used internally for testing
 export function set_now(fn) {
 	now = fn;
+}
+
+export function set_raf(fn) {
+	raf = fn;
 }

src/internal/utils.js

@@ -53,4 +53,4 @@ class Component extends SvelteComponentDev {
 	}
 }
 
-export default Component;
+export default Component;

test/js/samples/debug-hoisted/expected.js

@@ -8,6 +8,7 @@ import {
 	insert,
 	listen,
 	noop,
+	raf,
 	run_all,
 	safe_not_equal,
 	time_ranges_to_array
@@ -18,7 +19,7 @@ function create_fragment(ctx) {
 
 	function audio_timeupdate_handler() {
 		cancelAnimationFrame(audio_animationframe);
-		if (!audio.paused) audio_animationframe = requestAnimationFrame(audio_timeupdate_handler);
+		if (!audio.paused) audio_animationframe = raf(audio_timeupdate_handler);
 		audio_updating = true;
 		ctx.audio_timeupdate_handler.call(audio);
 	}

test/js/samples/media-bindings/expected.js

@@ -3,7 +3,7 @@ import * as path from "path";
 import * as fs from "fs";
 import { rollup } from 'rollup';
 import * as virtual from 'rollup-plugin-virtual';
-import { clear_loops, set_now } from "../../internal.js";
+import { clear_loops, set_now, set_raf } from "../../internal.js";
 
 import {
 	showOutput,
@@ -101,15 +101,15 @@ describe("runtime", () => {
 						}
 					};
 					set_now(() => raf.time);
-					global.requestAnimationFrame = cb => {
+					set_raf(cb => {
 						let called = false;
 						raf.callback = () => {
 							if (!called) {
 								called = true;
 								cb();
 							}
 						};
-					};
+					});
 
 					try {
 						mod = require(`./samples/${dir}/main.svelte`);