shuffle things around

index.js

@@ -1,7 +1,7 @@
 export {
 	onMount,
 	onDestroy,
-	beforeRender,
-	afterRender,
+	beforeUpdate,
+	afterUpdate,
 	createEventDispatcher
 } from './internal.js';

src/compile/render-dom/index.ts

@@ -133,6 +133,7 @@ export default function dom(
 
 		const debug_name = `<${component.customElement ? component.tag : name}>`;
 		const not_equal = component.options.immutable ? `@not_equal` : `@safe_not_equal`;
+		let dev_props_check;
 
 		if (component.options.dev) {
 			// TODO check no uunexpected props were passed, as well as
@@ -142,17 +143,14 @@ export default function dom(
 				.filter(name => !component.initialised_declarations.has(name));
 
 			if (expected.length) {
-				body.push(deindent`
-					$$checkProps() {
+				dev_props_check = deindent`
 					const state = this.$$.get();
 					${expected.map(name => deindent`
 
 					if (state.${name} === undefined) {
 						console.warn("${debug_name} was created without expected data property '${name}'");
-						}
-						`)}
-					}
-				`);
+					}`)}
+				`;
 			}
 		}
 
@@ -180,7 +178,7 @@ export default function dom(
 		});
 
 		builder.addBlock(deindent`
-			function $$create_fragment(${component.alias('component')}, ctx) {
+			function create_fragment(${component.alias('component')}, ctx) {
 				${block.getContents()}
 			}
 
@@ -188,7 +186,7 @@ export default function dom(
 
 			${component.fully_hoisted.length > 0 && component.fully_hoisted.join('\n\n')}
 
-			function $$init($$self, $$make_dirty) {
+			function define($$self, $$make_dirty) {
 				${should_add_css &&
 				`if (!document.getElementById("${component.stylesheet.id}-style")) @add_css();`}
 
@@ -206,7 +204,10 @@ export default function dom(
 
 			class ${name} extends ${superclass} {
 				constructor(options) {
-					super(options, $$init, $$create_fragment, ${not_equal});
+					super(${options.dev && `options`});
+					@init(this, options, define, create_fragment, ${not_equal});
+
+					${dev_props_check}
 				}
 
 				${body.join('\n\n')}

src/internal/Component.js

@@ -9,7 +9,9 @@ export function bind(component, name, callback) {
 	callback(component.$$.get()[name]);
 }
 
-export function mount_component({ $$: { fragment }}, target, anchor, hydrate) {
+export function mount_component(component, target, anchor, hydrate) {
+	const { fragment, refs, inject_refs, on_mount, on_destroy, after_render } = component.$$;
+
 	if (hydrate) {
 		fragment.l(children(target));
 		fragment.m(target, anchor); // TODO can we avoid moving DOM?
@@ -18,24 +20,24 @@ export function mount_component({ $$: { fragment }}, target, anchor, hydrate) {
 		fragment[fragment.i ? 'i' : 'm'](target, anchor);
 	}
 
-	component.$$.inject_refs(component.$$.refs);
+	inject_refs(refs);
 
 	// onMount happens after the initial afterUpdate. Because
 	// afterUpdate callbacks happen in reverse order (inner first)
 	// we schedule onMount callbacks before afterUpdate callbacks
 	add_render_callback(() => {
-		const onDestroy = component.$$.on_mount.map(run).filter(is_function);
-		if (component.$$.on_destroy) {
-			component.$$.on_destroy.push(...onDestroy);
+		const new_on_destroy = on_mount.map(run).filter(is_function);
+		if (on_destroy) {
+			on_destroy.push(...new_on_destroy);
 		} else {
 			// Edge case — component was destroyed immediately,
 			// most likely as a result of a binding initialising
-			run_all(onDestroy);
+			run_all(new_on_destroy);
 		}
 		component.$$.on_mount = [];
 	});
 
-	component.$$.after_render.forEach(add_render_callback);
+	after_render.forEach(add_render_callback);
 }
 
 function destroy(component, detach) {
@@ -58,12 +60,11 @@ function make_dirty(component, key) {
 	component.$$.dirty[key] = true;
 }
 
-export class $$Component {
-	constructor(options, init, create_fragment, not_equal) {
+export function init(component, options, define, create_fragment, not_equal) {
 	const previous_component = current_component;
-		set_current_component(this);
+	set_current_component(component);
 
-		this.$$ = {
+	component.$$ = {
 		fragment: null,
 
 		// state
@@ -87,21 +88,21 @@ export class $$Component {
 		binding_groups: []
 	};
 
-		init(this, key => {
-			make_dirty(this, key);
-			if (this.$$.bound[key]) this.$$.bound[key](this.$$.get()[key]);
+	define(component, key => {
+		make_dirty(component, key);
+		if (component.$$.bound[key]) component.$$.bound[key](component.$$.get()[key]);
 	});
 
 	if (options.props) {
-			this.$$.set(options.props);
+		component.$$.set(options.props);
 	}
 
-		run_all(this.$$.before_render);
-		this.$$.fragment = create_fragment(this, this.$$.get());
+	run_all(component.$$.before_render);
+	component.$$.fragment = create_fragment(component, component.$$.get());
 
 	if (options.target) {
 		intro.enabled = !!options.intro;
-			mount_component(this, options.target, options.anchor, options.hydrate);
+		mount_component(component, options.target, options.anchor, options.hydrate);
 		flush();
 		intro.enabled = true;
 	}
@@ -109,6 +110,7 @@ export class $$Component {
 	set_current_component(previous_component);
 }
 
+export class $$Component {
 	$destroy() {
 		destroy(this, true);
 		this.$destroy = noop;
@@ -141,8 +143,7 @@ export class $$ComponentDev extends $$Component {
 			throw new Error(`'target' is a required option`);
 		}
 
-		super(...arguments);
-		this.$$checkProps();
+		super();
 	}
 
 	$destroy() {
@@ -151,8 +152,4 @@ export class $$ComponentDev extends $$Component {
 			console.warn(`Component was already destroyed`);
 		};
 	}
-
-	$$checkProps() {
-		// noop by default
-	}
 }

test/runtime/samples/after-render-prevents-loop/main.html

@@ -1,10 +1,10 @@
 <script>
-	import { afterRender } from 'svelte';
+	import { afterUpdate } from 'svelte';
 
 	export let value;
 	let mirror;
 
-	afterRender(() => {
+	afterUpdate(() => {
 		mirror = value;
 	});
 </script>

test/runtime/samples/after-render-triggers-update/main.html

@@ -1,12 +1,12 @@
 <script>
-	import { afterRender } from 'svelte';
+	import { afterUpdate } from 'svelte';
 
 	export let a;
 	export let b;
 
 	export let value;
 
-	afterRender(() => {
+	afterUpdate(() => {
 		b.textContent = a.textContent;
 	});
 </script>

test/runtime/samples/before-render-chain/Item.html

@@ -1,10 +1,10 @@
 <script>
-	import { beforeRender } from 'svelte';
+	import { beforeUpdate } from 'svelte';
 
 	export let item;
 	export let foo = 'XX';
 
-	beforeRender(() => {
+	beforeUpdate(() => {
 		foo = item;
 	});
 </script>

test/runtime/samples/before-render-prevents-loop/main.html

@@ -1,10 +1,10 @@
 <script>
-	import { beforeRender } from 'svelte';
+	import { beforeUpdate } from 'svelte';
 
 	export let value;
 	let mirror;
 
-	beforeRender(() => {
+	beforeUpdate(() => {
 		mirror = value;
 	});
 </script>

test/runtime/samples/component-binding-deep-b/main.html

@@ -1,5 +1,5 @@
 <script>
-	import { beforeRender } from 'svelte';
+	import { beforeUpdate } from 'svelte';
 
 	import Editor from './Editor.html';
 	import ComponentSelector from './ComponentSelector.html';
@@ -10,7 +10,7 @@
 
 	let previouslySelectedComponent;
 
-	beforeRender(() => {
+	beforeUpdate(() => {
 		components.forEach(component => {
 			if (component === selectedComponent) return;
 			component.compiled = component.source.toUpperCase();

test/runtime/samples/flush-before-bindings/main.html

@@ -1,11 +1,11 @@
 <script>
-	import { beforeRender } from 'svelte';
+	import { beforeUpdate } from 'svelte';
 	import Nested from './Nested.html';
 
 	export let snapshots;
 	export let visibleThings = [];
 
-	beforeRender(() => {
+	beforeUpdate(() => {
 		if (!snapshots) {
 			// first run
 			snapshots = [];

test/runtime/samples/immutable-nested/Nested.html

@@ -1,5 +1,5 @@
 <script>
-	import { beforeRender, onMount } from 'svelte';
+	import { beforeUpdate, onMount } from 'svelte';
 
 	let mounted;
 	export let count = 0;
@@ -9,7 +9,7 @@
 		mounted = true;
 	});
 
-	beforeRender(() => {
+	beforeUpdate(() => {
 		if (mounted) count += 1;
 	});
 </script>

test/runtime/samples/lifecycle-render-order/_config.js

@@ -5,9 +5,9 @@ export default {
 
 	test({ assert, component, target }) {
 		assert.deepEqual(order, [
-			'beforeRender',
+			'beforeUpdate',
 			'render',
-			'afterRender',
+			'afterUpdate',
 			'onMount'
 		]);
 

test/runtime/samples/lifecycle-render-order/main.html

@@ -1,5 +1,5 @@
 <script>
-	import { onMount, beforeRender, afterRender } from 'svelte';
+	import { onMount, beforeUpdate, afterUpdate } from 'svelte';
 
 	import order from './order.js';
 
@@ -8,12 +8,12 @@
 		return x;
 	}
 
-	beforeRender(() => {
-		order.push('beforeRender');
+	beforeUpdate(() => {
+		order.push('beforeUpdate');
 	});
 
-	afterRender(() => {
-		order.push('afterRender');
+	afterUpdate(() => {
+		order.push('afterUpdate');
 	});
 
 	onMount(() => {

test/runtime/samples/set-in-onstate-dedupes-renders/Widget.html

@@ -1,10 +1,10 @@
 <script>
-	import { beforeRender } from 'svelte';
+	import { beforeUpdate } from 'svelte';
 
 	export let foo;
 	export let bar;
 
-	beforeRender(() => {
+	beforeUpdate(() => {
 		if (foo.x !== bar.x) {
 			throw new Error('mismatch');
 		}

test/runtime/samples/set-in-onstate-dedupes-renders/main.html

@@ -1,12 +1,12 @@
 <script>
-	import { beforeRender } from 'svelte';
+	import { beforeUpdate } from 'svelte';
 
 	import Widget from './Widget.html';
 
 	export let foo = { x: 1 };
 	export let bar = { x: 1 };
 
-	beforeRender(() => {
+	beforeUpdate(() => {
 		bar = foo;
 	});
 </script>

test/runtime/samples/set-in-onstate/main.html

@@ -1,10 +1,10 @@
 <script>
-	import { beforeRender } from 'svelte';
+	import { beforeUpdate } from 'svelte';
 
 	export let foo = 1;
 	export let bar;
 
-	beforeRender(() => {
+	beforeUpdate(() => {
 		bar = foo * 2;
 	});
 </script>

test/stats/samples/hooks/_config.js

@@ -4,7 +4,7 @@ export default {
 			oncreate: true,
 			onDestroy: false,
 			onstate: false,
-			afterRender: false
+			afterUpdate: false
 		});
 	}
 };

test/validator/samples/onstate-arrow-no-this/input.html

@@ -1,5 +1,5 @@
 <script>
-	import { beforeRender } from 'svelte';
+	import { beforeUpdate } from 'svelte';
 
-	beforeRender(() => console.log('updating'));
+	beforeUpdate(() => console.log('updating'));
 </script>

test/validator/samples/onupdate-arrow-no-this/input.html

@@ -1,5 +1,5 @@
 <script>
-	import { afterRender } from 'svelte';
+	import { afterUpdate } from 'svelte';
 
-	afterRender(() => console.log('updating'));
+	afterUpdate(() => console.log('updating'));
 </script>

test/validator/samples/onupdate-arrow-this/errors.json

@@ -1,6 +1,6 @@
 [{
-	"code": "invalid-afterRender-property",
-	"message": "'afterRender' should be a function expression, not an arrow function expression",
+	"code": "invalid-afterUpdate-property",
+	"message": "'afterUpdate' should be a function expression, not an arrow function expression",
 	"pos": 29,
 	"start": {
 		"line": 3,

test/validator/samples/onupdate-arrow-this/input.html

@@ -1,6 +1,6 @@
 <script>
 	export default {
-		afterRender: () => {
+		afterUpdate: () => {
 			this.set({ a: 1 });
 		}
 	};