ensure spring works server-side = fixes #2773

Author: Rich-Harris

src/internal/animations.js

@@ -1,4 +1,4 @@
-import { identity as linear, noop } from './utils.js';
+import { identity as linear, noop, now } from './utils.js';
 import { loop } from './loop.js';
 import { create_rule, delete_rule } from './style_manager.js';
 
@@ -12,7 +12,7 @@ export function create_animation(node, from, fn, params) {
 		delay = 0,
 		duration = 300,
 		easing = linear,
-		start: start_time = window.performance.now() + delay,
+		start: start_time = now() + delay,
 		end = start_time + duration,
 		tick = noop,
 		css

src/internal/loop.js

@@ -1,9 +1,11 @@
+import { now } from './utils.js';
+
 const tasks = new Set();
 let running = false;
 
 function run_tasks() {
 	tasks.forEach(task => {
-		if (!task[0](window.performance.now())) {
+		if (!task[0](now())) {
 			tasks.delete(task);
 			task[1]();
 		}

src/internal/transitions.js

@@ -1,4 +1,4 @@
-import { identity as linear, noop, run_all } from './utils.js';
+import { identity as linear, noop, now, run_all } from './utils.js';
 import { loop } from './loop.js';
 import { create_rule, delete_rule } from './style_manager.js';
 import { custom_event } from './dom.js';
@@ -63,7 +63,7 @@ export function create_in_transition(node, fn, params) {
 		if (css) animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);
 		tick(0, 1);
 
-		const start_time = window.performance.now() + delay;
+		const start_time = now() + delay;
 		const end_time = start_time + duration;
 
 		if (task) task.abort();
@@ -136,7 +136,7 @@ export function create_out_transition(node, fn, params) {
 
 		if (css) animation_name = create_rule(node, 1, 0, duration, delay, easing, css);
 
-		const start_time = window.performance.now() + delay;
+		const start_time = now() + delay;
 		const end_time = start_time + duration;
 
 		loop(now => {
@@ -224,7 +224,7 @@ export function create_bidirectional_transition(node, fn, params, intro) {
 		} = config;
 
 		const program = {
-			start: window.performance.now() + delay,
+			start: now() + delay,
 			b
 		};
 

src/internal/utils.js

@@ -79,3 +79,12 @@ export function exclude_internal_props(props) {
 	for (const k in props) if (k[0] !== '$') result[k] = props[k];
 	return result;
 }
+
+export let now = typeof window !== 'undefined'
+	? () => window.performance.now()
+	: () => Date.now();
+
+// used internally for testing
+export function set_now(fn) {
+	now = fn;
+}

src/motion/spring.js

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store'; // eslint-disable-line import/no-unresolved
-import { loop } from 'svelte/internal'; // eslint-disable-line import/no-unresolved
+import { loop, now } from 'svelte/internal'; // eslint-disable-line import/no-unresolved
 import { is_date } from './utils.js';
 
 function tick_spring(ctx, last_value, current_value, target_value) {
@@ -51,7 +51,7 @@ export function spring(value, opts = {}) {
 
 		if (opts.hard || (spring.stiffness >= 1 && spring.damping >= 1)) {
 			cancel_task = true; // cancel any running animation
-			last_time = window.performance.now();
+			last_time = now();
 			last_value = value;
 			store.set(value = target_value);
 			return new Promise(f => f()); // fulfil immediately
@@ -62,7 +62,7 @@ export function spring(value, opts = {}) {
 		}
 
 		if (!task) {
-			last_time = window.performance.now();
+			last_time = now();
 			cancel_task = false;
 
 			task = loop(now => {

src/motion/tweened.js

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store'; // eslint-disable-line import/no-unresolved
-import { assign, loop } from 'svelte/internal'; // eslint-disable-line import/no-unresolved
+import { assign, loop, now } from 'svelte/internal'; // eslint-disable-line import/no-unresolved
 import { linear } from 'svelte/easing'; // eslint-disable-line import/no-unresolved
 import { is_date } from './utils.js';
 
@@ -73,7 +73,7 @@ export function tweened(value, defaults = {}) {
 			interpolate = get_interpolator
 		} = assign(assign({}, defaults), opts);
 
-		const start = window.performance.now() + delay;
+		const start = now() + delay;
 		let fn;
 
 		task = loop(now => {

test/runtime/index.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 } from "../../internal.js";
+import { clear_loops, set_now } from "../../internal.js";
 
 import {
 	showOutput,
@@ -100,7 +100,7 @@ describe("runtime", () => {
 							if (raf.callback) raf.callback();
 						}
 					};
-					window.performance.now = () => raf.time;
+					set_now(() => raf.time);
 					global.requestAnimationFrame = cb => {
 						let called = false;
 						raf.callback = () => {

test/runtime/samples/spring/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: `<p>0</p>`
+}

test/runtime/samples/spring/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { spring } from 'svelte/motion';
+
+	const x = spring(0);
+	x.set(1);
+</script>
+
+<p>{$x}</p>

test/server-side-rendering/index.js

@@ -102,6 +102,8 @@ describe("ssr", () => {
 					delete require.cache[file];
 				});
 
+			delete global.window;
+
 			const compileOptions = Object.assign({ sveltePath }, config.compileOptions, {
 				generate: 'ssr'
 			});