rename onmount,ondestroy,onprops,onupdate to onMount,onDestroy,beforeRender,afterRender

index.js

@@ -1,3 +1,7 @@
-import { onprops, onmount, onupdate, ondestroy, createEventDispatcher } from './internal.js';
-
-export { onprops, onmount, onupdate, ondestroy, createEventDispatcher };
+export {
+	onMount,
+	onDestroy,
+	beforeRender,
+	afterRender,
+	createEventDispatcher
+} from './internal.js';

src/Stats.ts

@@ -99,9 +99,9 @@ export default class Stats {
 		// TODO
 		const hooks: Record<string, boolean> = component && {
 			oncreate: false,
-			ondestroy: false,
+			onDestroy: false,
 			onstate: false,
-			onupdate: false
+			afterRender: false
 		};
 
 		return {

src/internal/Component.js

@@ -5,10 +5,10 @@ import { blankObject } from './utils.js';
 
 export class $$Component {
 	constructor(options) {
-		this.$$onprops = [];
-		this.$$onmount = [];
-		this.$$onupdate = [];
-		this.$$ondestroy = [];
+		this.$$beforeRender = [];
+		this.$$onMount = [];
+		this.$$afterRender = [];
+		this.$$onDestroy = [];
 
 		this.$$bindings = blankObject();
 		this.$$callbacks = blankObject();
@@ -60,8 +60,6 @@ export class $$Component {
 	$set(values) {
 		if (this.$$) {
 			this.$$.inject_props(values);
-			run_all(this.$$onprops); // TODO should this be deferred until the update?
-
 			for (const key in values) this.$$make_dirty(key);
 		}
 	}
@@ -74,10 +72,10 @@ export class $$Component {
 	$$destroy(detach) {
 		if (this.$$) {
 			this.$$fragment.d(detach);
-			run_all(this.$$ondestroy);
+			run_all(this.$$onDestroy);
 
 			// TODO null out other refs
-			this.$$ondestroy = this.$$fragment = this.$$ = null;
+			this.$$onDestroy = this.$$fragment = this.$$ = null;
 		}
 	}
 
@@ -90,19 +88,21 @@ export class $$Component {
 	}
 
 	$$mount(target, anchor) {
+		run_all(this.$$beforeRender);
 		this.$$fragment.c();
 		this.$$fragment[this.$$fragment.i ? 'i' : 'm'](target, anchor);
 		this.$$.inject_refs(this.$$refs);
 
-		const ondestroy = this.$$onmount.map(fn => fn()).filter(Boolean);
-		this.$$ondestroy.push(...ondestroy);
-		this.$$onmount = [];
+		const onDestroy = this.$$onMount.map(fn => fn()).filter(Boolean);
+		this.$$onDestroy.push(...onDestroy);
+		this.$$onMount = [];
 	}
 
 	$$update() {
+		run_all(this.$$beforeRender);
 		this.$$fragment.p(this.$$dirty, this.$$.get_state());
 		this.$$.inject_refs(this.$$refs);
-		run_all(this.$$onupdate);
+		run_all(this.$$afterRender);
 		this.$$dirty = null;
 	}
 }

src/internal/await-block.js

@@ -33,7 +33,7 @@ export function handlePromise(promise, info) {
 
 			// TODO is some of this redundant?
 			info.component.$$.inject_refs(info.component.$$refs);
-			run_all(info.component.$$onupdate);
+			run_all(info.component.$$afterRender);
 			flush();
 		}
 

src/internal/lifecycle.js

@@ -4,20 +4,20 @@ export function set_current_component(component) {
 	current_component = component;
 }
 
-export function onprops(fn) {
-	current_component.$$onprops.push(fn);
+export function beforeRender(fn) {
+	current_component.$$beforeRender.push(fn);
 }
 
-export function onmount(fn) {
-	current_component.$$onmount.push(fn);
+export function onMount(fn) {
+	current_component.$$onMount.push(fn);
 }
 
-export function onupdate(fn) {
-	current_component.$$onupdate.push(fn);
+export function afterRender(fn) {
+	current_component.$$afterRender.push(fn);
 }
 
-export function ondestroy(fn) {
-	current_component.$$ondestroy.push(fn);
+export function onDestroy(fn) {
+	current_component.$$onDestroy.push(fn);
 }
 
 export function createEventDispatcher() {

test/cli/samples/sourcemap-inline/src/Main.html

@@ -1,7 +1,7 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
-	onmount(() => {
+	onMount(() => {
 		console.log('here');
 	});
 </script>

test/cli/samples/sourcemap/src/Main.html

@@ -1,7 +1,7 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
-	onmount(() => {
+	onMount(() => {
 		console.log('here');
 	});
 </script>

test/custom-elements/samples/oncreate/main.html

@@ -1,11 +1,11 @@
 <svelte:meta tag="my-app"/>
 
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	export let wasCreated;
 
-	onmount(() => {
+	onMount(() => {
 		wasCreated = true;
 	});
 </script>

test/js/samples/deconflict-globals/input.html

@@ -1,9 +1,9 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	export let foo = 'bar';
 
-	onmount(() => {
+	onMount(() => {
 		alert(JSON.stringify(data()));
 	});
 </script>

test/js/samples/ssr-no-oncreate-etc/input.html

@@ -5,14 +5,14 @@
 </script>
 
 <script>
-	import { ondestroy, onmount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 
-	onmount(() => {
+	onMount(() => {
 		console.log('oncreate');
 	});
 
-	ondestroy(() => {
-		console.log('ondestroy');
+	onDestroy(() => {
+		console.log('onDestroy');
 	});
 
 	function foo() {

test/runtime/samples/await-component-oncreate/Foo.html

@@ -1,10 +1,10 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	export let value;
 	let called = false;
 
-	onmount(() => {
+	onMount(() => {
 		called = true;
 	});
 </script>

test/runtime/samples/bindings-before-oncreate/One.html

@@ -1,11 +1,11 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 	import Two from './Two.html';
 
 	export let snapshot;
 	export let foo;
 
-	onmount(() => {
+	onMount(() => {
 		snapshot = foo;
 	});
 </script>

test/runtime/samples/component-binding-blowback-b/Nested.html

@@ -1,5 +1,5 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	let id;
 
@@ -10,7 +10,7 @@
 		'id-3': 'three'
 	};
 
-	onmount(() => {
+	onMount(() => {
 		value = initialValues[id];
 	});
 </script>

test/runtime/samples/component-binding-blowback-c/Nested.html

@@ -1,5 +1,5 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	export let id;
 
@@ -10,7 +10,7 @@
 		'id-3': 'three'
 	};
 
-	onmount(() => {
+	onMount(() => {
 		value = initialValues[id];
 	});
 </script>

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

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

test/runtime/samples/component-ref/Widget.html

@@ -1,9 +1,9 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	export let isWidget;
 
-	onmount(() => {
+	onMount(() => {
 		isWidget = true;
 	});
 </script>

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

@@ -1,9 +1,9 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	export let isVisible;
 
-	onmount(() => {
+	onMount(() => {
 		isVisible = true;
 	});
 </script>

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

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

test/runtime/samples/lifecycle-events/main.html

@@ -1,13 +1,13 @@
 <script>
-	import { ondestroy, onmount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 
 	export let events;
 
-	onmount(() => {
+	onMount(() => {
 		events = ['create'];
 	});
 
-	ondestroy(() => {
+	onDestroy(() => {
 		events.push('destroy');
 	});
 </script>

test/runtime/samples/observe-deferred/main.html

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

test/runtime/samples/oncreate-async-arrow-block/main.html

@@ -1,7 +1,7 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
-	onmount(async () => {
+	onMount(async () => {
 		await 123
 	});
 </script>

test/runtime/samples/oncreate-async-arrow/main.html

@@ -1,5 +1,5 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
-	onmount(async () => await 123);
+	onMount(async () => await 123);
 </script>

test/runtime/samples/oncreate-async/main.html

@@ -1,7 +1,7 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
-	onmount(async () => {
+	onMount(async () => {
 		await 123
 	});
 </script>

test/runtime/samples/oncreate-sibling-order/Nested.html

@@ -1,11 +1,11 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	import result from './result.js';
 
 	export let name;
 
-	onmount(() => {
+	onMount(() => {
 		result.push(`oncreate ${name}`);
 	});
 </script>

test/runtime/samples/ondestroy-before-cleanup/Top.html

@@ -1,10 +1,10 @@
 <script>
-	import { ondestroy } from 'svelte';
+	import { onDestroy } from 'svelte';
 
 	export let element;
 	export let refOnDestroy;
 
-	ondestroy(() => {
+	onDestroy(() => {
 		refOnDestroy = element;
 	});
 </script>

test/runtime/samples/onrender-chain/Item.html

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

test/runtime/samples/onrender-fires-when-ready-nested/Widget.html

@@ -1,11 +1,11 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	export let x;
 
 	export let inDocument;
 
-	onmount(() => {
+	onMount(() => {
 		inDocument = document.contains(x);
 	});
 </script>

test/runtime/samples/onrender-fires-when-ready/Widget.html

@@ -1,11 +1,11 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	export let x;
 
 	export let inDocument;
 
-	onmount(() => {
+	onMount(() => {
 		inDocument = document.contains(x);
 	});
 </script>

test/runtime/samples/onstate-before-oncreate/main.html

@@ -1,20 +1,20 @@
 <script>
-	import { onmount, onprops, onupdate } from 'svelte';
+	import { onMount, beforeRender, afterRender } from 'svelte';
 
 	export let onstateRanBeforeOncreate;
 	export let onupdateRanBeforeOncreate;
 	let onpropsRan;
 	let onupdateRan;
 
-	onprops(() => {
+	beforeRender(() => {
 		onstateRan = true;
 	});
 
-	onupdate(() => {
+	afterRender(() => {
 		onupdateRan = true;
 	});
 
-	onmount(() => {
+	onMount(() => {
 		onpropsRanBeforeOncreate = onpropsRan;
 		onupdateRanBeforeOncreate = onupdateRan;
 	});

test/runtime/samples/onstate-before-render/_config.js

@@ -5,10 +5,10 @@ export default {
 
 	test(assert, component, target) {
 		assert.deepEqual(order, [
-			'onprops',
+			'beforeRender',
 			'render',
 			'oncreate',
-			'onupdate'
+			'afterRender'
 		]);
 
 		order.length = 0;

test/runtime/samples/onstate-before-render/main.html

@@ -1,5 +1,5 @@
 <script>
-	import { onmount, onprops, onupdate } from 'svelte';
+	import { onMount, beforeRender, afterRender } from 'svelte';
 
 	import order from './order.js';
 
@@ -8,15 +8,15 @@
 		return x;
 	}
 
-	onprops(() => {
-		order.push('onprops');
+	beforeRender(() => {
+		order.push('beforeRender');
 	});
 
-	onupdate(() => {
-		order.push('onupdate');
+	afterRender(() => {
+		order.push('afterRender');
 	});
 
-	onmount(() => {
+	onMount(() => {
 		order.push('oncreate');
 	});
 </script>

test/runtime/samples/onstate/main.html

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

test/runtime/samples/onupdate/main.html

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

test/runtime/samples/options/main.html

@@ -1,9 +1,9 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	export let text;
 
-	onmount(() => {
+	onMount(() => {
 		text = this.options.text;
 	});
 </script>

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

@@ -1,9 +1,9 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	export let foo = 1;
 
-	onmount(() => {
+	onMount(() => {
 		foo = 2;
 	});
 </script>

test/runtime/samples/set-in-ondestroy/_config.js

@@ -1,26 +0,0 @@
-export default {
-	'skip-ssr': true,
-
-	props: {
-		foo: 1
-	},
-
-	test(assert, component) {
-		const values = [];
-		let valueOnDestroy;
-
-		component.$on('destroy', () => {
-			component.foo = 2;
-			valueOnDestroy = component.foo;
-		});
-
-		component.$on('state', ({ current }) => {
-			values.push(current.foo);
-		});
-
-		component.$destroy();
-
-		assert.deepEqual(values, [2]);
-		assert.equal(valueOnDestroy, 2);
-	}
-};

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

@@ -1 +0,0 @@
-empty

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

@@ -1,10 +1,10 @@
 <script>
-	import { onprops } from 'svelte';
+	import { beforeRender } from 'svelte';
 
 	export let foo;
 	export let bar;
 
-	onprops(() => {
+	beforeRender(() => {
 		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 { onprops } from 'svelte';
+	import { beforeRender } from 'svelte';
 
 	import Widget from './Widget.html';
 
 	export let foo = { x: 1 };
 	export let bar = { x: 1 };
 
-	onprops(() => {
+	beforeRender(() => {
 		bar = foo;
 	});
 </script>

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

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

test/runtime/samples/set-undefined-attr/main.html

@@ -1,10 +1,10 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	export let foo = 1;
 	export let bar;
 
-	onmount(() => {
+	onMount(() => {
 		foo = undefined;
 	});
 </script>

test/runtime/samples/transition-js-events/main.html

@@ -2,7 +2,7 @@
      Perhaps add on:introend etc on the elements? -->
 
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	// [svelte-upgrade suggestion]
 	// manually refactor all references to __this
@@ -20,7 +20,7 @@
 		};
 	}
 
-	onmount(() => {
+	onMount(() => {
 		__this.intros = [];
 		__this.outros = [];
 		__this.introCount = 0;

test/setup.js

@@ -17,12 +17,12 @@ require.extensions['.js'] = function(module, filename) {
 			exports.push(name);
 			return `${type} ${name}`;
 		})
-		.replace(/^export \{([^}]+)\}/gm, (match, names) => {
+		.replace(/^export \{([^}]+)\}(?: from ['"]([^'"]+)['"];?)?/gm, (match, names, source) => {
 			names.split(',').filter(Boolean).forEach(name => {
 				exports.push(name);
 			});
 
-			return '';
+			return source ? `const { ${names} } = require("${source}");` : '';
 		})
 		.replace(/^export function (\w+)/gm, 'exports.$1 = function $1');
 

test/sourcemaps/samples/script/input.html

@@ -1,7 +1,7 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
-	onmount(() => {
+	onMount(() => {
 		console.log(42);
 	});
 </script>

test/stats/samples/hooks/_config.js

@@ -2,9 +2,9 @@ export default {
 	test(assert, stats) {
 		assert.deepEqual(stats.hooks, {
 			oncreate: true,
-			ondestroy: false,
+			onDestroy: false,
 			onstate: false,
-			onupdate: false
+			afterRender: false
 		});
 	}
 };

test/stats/samples/hooks/input.html

@@ -1,7 +1,7 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
-	onmount(() => {
+	onMount(() => {
 		console.log('creating');
 	});
 </script>

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

@@ -1,5 +1,5 @@
 <script>
-	import { onmount } from 'svelte';
+	import { onMount } from 'svelte';
 
-	onmount(() => console.log( 'rendering' ));
+	onMount(() => console.log( 'rendering' ));
 </script>

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

@@ -1,5 +1,5 @@
 <script>
-	import { ondestroy } from 'svelte';
+	import { onDestroy } from 'svelte';
 
-	ondestroy(() => console.log( 'tearing down' ));
+	onDestroy(() => console.log( 'tearing down' ));
 </script>

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 [{
-	"code": "invalid-onupdate-property",
-	"message": "'onupdate' should be a function expression, not an arrow function expression",
+	"code": "invalid-afterRender-property",
+	"message": "'afterRender' 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 {
-		onupdate: () => {
+		afterRender: () => {
 			this.set({ a: 1 });
 		}
 	};