Merge pull request #1988 from sveltejs/gh-1976

add nextTick lifecycle function - fixes #1976

index.mjs

@@ -3,5 +3,6 @@ export {
 	onDestroy,
 	beforeUpdate,
 	afterUpdate,
+	nextTick,
 	createEventDispatcher
 } from './internal';

src/internal/Component.js

@@ -1,4 +1,4 @@
-import { add_render_callback, flush, intros, schedule_update } from './scheduler.js';
+import { add_render_callback, flush, intros, schedule_update, dirty_components } from './scheduler.js';
 import { current_component, set_current_component } from './lifecycle.js'
 import { is_function, run, run_all, noop } from './utils.js';
 import { blankObject } from './utils.js';
@@ -46,7 +46,8 @@ function destroy(component, detach) {
 
 function make_dirty(component, key) {
 	if (!component.$$.dirty) {
-		schedule_update(component);
+		dirty_components.push(component);
+		schedule_update();
 		component.$$.dirty = {};
 	}
 	component.$$.dirty[key] = true;

src/internal/scheduler.js

@@ -1,15 +1,13 @@
 import { run_all } from './utils.js';
 
-let update_scheduled = false;
+export let dirty_components = [];
+export const intros = { enabled: false };
 
-let dirty_components = [];
+let update_scheduled = false;
 const binding_callbacks = [];
 const render_callbacks = [];
 
-export const intros = { enabled: false };
+export function schedule_update() {
-
-export function schedule_update(component) {
-	dirty_components.push(component);
 	if (!update_scheduled) {
 		update_scheduled = true;
 		queue_microtask(flush);
@@ -20,6 +18,11 @@ export function add_render_callback(fn) {
 	render_callbacks.push(fn);
 }
 
+export function nextTick(fn) {
+	add_render_callback(fn);
+	schedule_update();
+}
+
 export function add_binding_callback(fn) {
 	binding_callbacks.push(fn);
 }

test/runtime/samples/lifecycle-next-tick/_config.js

@@ -0,0 +1,30 @@
+export default {
+	async test({ assert, component, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(click);
+		assert.deepEqual(component.snapshots, [
+			'before 0',
+			'after 1'
+		]);
+
+		await buttons[0].dispatchEvent(click);
+		assert.deepEqual(component.snapshots, [
+			'before 0',
+			'after 1',
+			'before 1',
+			'after 2'
+		]);
+
+		await buttons[1].dispatchEvent(click);
+		assert.deepEqual(component.snapshots, [
+			'before 0',
+			'after 1',
+			'before 1',
+			'after 2',
+			'before 2',
+			'after 2'
+		]);
+	}
+};

test/runtime/samples/lifecycle-next-tick/main.html

@@ -0,0 +1,24 @@
+<script>
+	import { nextTick } from 'svelte';
+
+	export let snapshots = [];
+
+	let count = 0;
+	let buttons = [];
+
+	function increment() {
+		count += 1;
+		log();
+	}
+
+	function log() {
+		snapshots.push(`before ${buttons[0].textContent}`);
+
+		nextTick(() => {
+			snapshots.push(`after ${buttons[0].textContent}`);
+		});
+	}
+</script>
+
+<button bind:this={buttons[0]} on:click={increment}>{count}</button>
+<button bind:this={buttons[1]} on:click={log}>{count}</button>