update css tests

update custom-elements tests

update hydration tests

update js tests

update some tests

update some tests

update some tests

update some tests

update some tests

update some tests

update some tests

update some tests

update some tests

update some tests

update some tests

update some tests

update some tests

update some tests

update some tests

update some tests

test/css/samples/omit-scoping-attribute-class-dynamic/input.html

@@ -1,3 +1,7 @@
+<script>
+	export let unknown = 'whatever';
+</script>
+
 <p class='{unknown}'>this is styled</p>
 <p class='bar'>this is unstyled</p>
 
@@ -6,13 +10,3 @@
 		color: red;
 	}
 </style>
-
-<script>
-	export default {
-		data () {
-			return {
-				unknown: 'whatever'
-			};
-		}
-	};
-</script>

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

@@ -1,13 +1,11 @@
-<p>{foo}</p>
+<svelte:meta tag="custom-element"/>
 
 <script>
-	export default {
-		tag: 'custom-element',
-
-		methods: {
-			updateFoo(value) {
-				this.foo = value;
-			}
+	export function updateFoo(value) {
+		foo = value;
 	}
-	};
+
+	export let foo;
 </script>
+
+<p>{foo}</p>

test/custom-elements/samples/escaped-css/main.html

@@ -1,3 +1,5 @@
+<svelte:meta tag="custom-element"/>
+
 <span class='icon'></span>
 
 <style>
@@ -5,9 +7,3 @@
 		content: '\ff'
 	}
 </style>
-
-<script>
-	export default {
-		tag: 'custom-element'
-	};
-</script>

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

@@ -1,3 +1,5 @@
+<svelte:meta tag="custom-element"/>
+
 <div>
 	<slot>
 		<p>default fallback content</p>
@@ -7,9 +9,3 @@
 		<p>foo fallback content</p>
 	</slot>
 </div>
-
-<script>
-	export default {
-		tag: 'custom-element'
-	};
-</script>

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

@@ -1,7 +1,7 @@
-<h1>Hello {name}!</h1>
+<svelte:meta tag="custom-element"/>
 
 <script>
-	export default {
-		tag: 'custom-element'
-	};
+	export let name;
 </script>
+
+<h1>Hello {name}!</h1>

test/custom-elements/samples/nested/Counter.html

@@ -1,13 +1,7 @@
-<button on:click='set({ count: count + 1 })'>count: {count}</button>
+<svelte:meta tag="my-counter"/>
 
 <script>
-	export default {
-		tag: 'my-counter',
-
-		data() {
-			return {
-				count: 0
-			};
-		}
-	};
+	export let count = 0;
 </script>
+
+<button on:click='{() => count += 1}'>count: {count}</button>

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

@@ -1,12 +1,10 @@
-<Counter bind:count/>
-<p>clicked {count} times</p>
+<svelte:meta tag="my-app"/>
 
 <script>
 	import Counter from './Counter.html';
 
-	export default {
-		tag: 'my-app',
-
-		components: { Counter }
-	};
+	export let count;
 </script>
+
+<Counter bind:count/>
+<p>clicked {count} times</p>

test/custom-elements/samples/new-styled/main.html

@@ -1,3 +1,5 @@
+<svelte:meta tag="custom-element"/>
+
 <p>styled</p>
 
 <style>
@@ -5,9 +7,3 @@
 		color: red;
 	}
 </style>
-
-<script>
-	export default {
-		tag: 'custom-element'
-	};
-</script>

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

@@ -1,7 +1,7 @@
-<h1>Hello {name}!</h1>
+<svelte:meta tag="custom-element"/>
 
 <script>
-	export default {
-		tag: 'custom-element'
-	};
+	export let name;
 </script>
+
+<h1>Hello {name}!</h1>

test/custom-elements/samples/no-missing-prop-warnings/main.html

@@ -1,8 +1,9 @@
-<p>foo: {foo}</p>
-<p>bar: {bar}</p>
+<svelte:meta tag="my-app"/>
 
 <script>
-	export default {
-		tag: 'my-app'
-	};
+	export let foo;
+	export let bar;
 </script>
+
+<p>foo: {foo}</p>
+<p>bar: {bar}</p>

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

@@ -1,9 +1,12 @@
+<svelte:meta tag="my-app"/>
+
 <script>
-	export default {
-		tag: 'my-app',
+	import { onmount } from 'svelte';
+
+	export let wasCreated;
 
-		oncreate() {
-			this.wasCreated = true;
-		}
-	};
+	onmount(() => {
+		wasCreated = true;
+	});
 </script>
+

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

@@ -1,15 +1,9 @@
-<my-widget class="foo" {items}/>
+<svelte:meta tag="custom-element"/>
 
 <script>
 	import './my-widget.html';
 
-	export default {
-		tag: 'custom-element',
-
-		data() {
-			return {
-				items: ['a', 'b', 'c']
-			};
-		}
-	};
+	export let items = ['a', 'b', 'c'];
 </script>
+
+<my-widget class="foo" {items}/>

test/custom-elements/samples/props/my-widget.html

@@ -1,14 +1,8 @@
-<p>{items.length} items</p>
-<p>{items.join(', ')}</p>
+<svelte:meta tag="my-widget"/>
 
 <script>
-	export default {
-		tag: 'my-widget',
-
-		data() {
-			return {
-				items: []
-			};
-		}
-	};
+	export let items = [];
 </script>
+
+<p>{items.length} items</p>
+<p>{items.join(', ')}</p>

test/hydration/samples/component-in-element/main.html

@@ -1,13 +1,7 @@
-<div>
-	<Nested/>
-</div>
-
 <script>
 	import Nested from './Nested.html';
-
-	export default {
-		components: {
-			Nested
-		}
-	};
 </script>
+
+<div>
+	<Nested/>
+</div>

test/hydration/samples/component/main.html

@@ -1,11 +1,5 @@
-<Nested/>
-
 <script>
 	import Nested from './Nested.html';
-
-	export default {
-		components: {
-			Nested
-		}
-	};
 </script>
+
+<Nested/>

test/hydration/samples/event-handler/main.html

@@ -1,4 +1,4 @@
-<button on:click='set({ clicked: true })'>click me</button>
+<button on:click='{() => clicked = true}'>click me</button>
 
 {#if clicked}
 	<p>clicked!</p>

test/js/samples/action/input.html

@@ -1,9 +1,5 @@
-<a href="#" use:link>Test</a>
-
 <script>
-  export default {
-    actions: {
-      link(node) {
+  function link(node) {
     
     function onClick(event) {
       event.preventDefault();
@@ -18,6 +14,6 @@
       }
     }
   }
-    }
-  }
 </script>
+
+<a href="#" use:link>Test</a>

test/js/samples/collapses-text-around-comments/input.html

@@ -1,3 +1,6 @@
+<script>
+	export let foo = 42;
+</script>
 
 <!-- a -->
 
@@ -17,13 +20,7 @@
 
 <!-- e -->
 
-<script>
-	export default {
-		data: function () {
-			return { foo: 42 }
-		}
-	};
-</script>
+
 
 <!-- f -->
 

test/js/samples/component-static-array/input.html

@@ -1,9 +1,5 @@
-<Nested foo={[1, 2, 3]}/>
-
 <script>
-	export default {
-		components: {
-			Nested: window.Nested
-		}
-	};
+	const Nested = window.Nested;
 </script>
+
+<Nested foo={[1, 2, 3]}/>

test/js/samples/component-static-immutable/input.html

@@ -1,10 +1,7 @@
-<Nested foo='bar'/>
+<svelte:meta immutable/>
 
 <script>
-	export default {
-		immutable: true,
-		components: {
-			Nested: window.Nested
-		}
-	};
+	const Nested = window.Nested;
 </script>
+
+<Nested foo='bar'/>

test/js/samples/component-static-immutable2/input.html

@@ -1,9 +1,5 @@
-<Nested foo='bar'/>
-
 <script>
-	export default {
-		components: {
-			Nested: window.Nested
-		}
-	};
+	const Nested = window.Nested;
 </script>
+
+<Nested foo='bar'/>

test/js/samples/component-static/input.html

@@ -1,9 +1,5 @@
-<Nested foo='bar'/>
-
 <script>
-	export default {
-		components: {
-			Nested: window.Nested
-		}
-	};
+	const Nested = window.Nested;
 </script>
+
+<Nested foo='bar'/>

test/js/samples/computed-collapsed-if/input.html

@@ -1,8 +1,11 @@
 <script>
-	export default {
-		computed: {
-			a: ({ x }) => x * 2,
-			b: ({ x }) => x * 3
+	export let x;
+
+	function a() {
+		return x * 2;
+	}
+
+	function b() {
+		return x * 3;
 	}
-	};
 </script>

test/js/samples/css-shadow-dom-keyframes/input.html

@@ -1,3 +1,5 @@
+<svelte:meta tag="custom-element"/>
+
 <div>fades in</div>
 
 <style>
@@ -10,9 +12,3 @@
 		100% { opacity: 1; }
 	}
 </style>
-
-<script>
-	export default {
-		tag: 'custom-element'
-	};
-</script>

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

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

test/js/samples/dev-warning-missing-data-computed/input.html

@@ -1,12 +1,12 @@
-<p>
-	{Math.max(0, foo)}
-	{bar}
-</p>
-
 <script>
-	export default {
-		computed: {
-			bar: ({ foo }) => foo * 2
+	export let foo;
+
+	function bar() {
+		return foo * 2;
 	}
-	};
 </script>
+
+<p>
+	{Math.max(0, foo)}
+	{bar()}
+</p>

test/js/samples/dynamic-import/input.html

@@ -1,9 +1 @@
 <LazyLoad load="{() => import('./Foo.html')}"/>
-
-<script>
-	export default {
-		components: {
-			LazyLoad
-		}
-	};
-</script>

test/js/samples/each-block-keyed-animated/input.html

@@ -1,11 +1,7 @@
-{#each things as thing (thing.id)}
-	<div animate:foo>{thing.name}</div>
-{/each}
-
 <script>
-	export default {
-		animations: {
-			foo(node, animation, params) {
+	export let things;
+
+	function foo(node, animation, params) {
 		const dx = animation.from.left - animation.to.left;
 		const dy = animation.from.top - animation.to.top;
 
@@ -18,6 +14,8 @@
 			}
 		};
 	}
-		}
-	};
 </script>
+
+{#each things as thing (thing.id)}
+	<div animate:foo>{thing.name}</div>
+{/each}

test/js/samples/event-handlers-custom/input.html

@@ -1,16 +1,13 @@
-<button on:foo='foo( bar )'>foo</button>
-
 <script>
-	export default {
-		methods: {
-			foo ( bar ) {
+	export let bar;
+
+	function handleFoo(bar) {
 		console.log( bar );
 	}
-		},
-		events: {
-			foo ( node, callback ) {
+
+	function foo(node, callback) {
 		// code goes here
 	}
-		}
-	};
 </script>
+
+<button on:foo='{() => handleFoo( bar )}'>foo</button>

test/js/samples/event-modifiers/input.html

@@ -1,19 +1,15 @@
-<div on:touchstart="handleTouchstart()">
-	<button on:click|stopPropagation|preventDefault="handleClick()">click me</button>
-	<button on:click|once|capture="handleClick()">or me</button>
-	<button on:click|capture="handleClick()">or me!</button>
-</div>
-
 <script>
-	export default {
-		methods: {
-			handleTouchstart() {
+	function handleTouchstart() {
 		// ...
-			},
+	}
 
-			handleClick() {
+	function handleClick() {
 		// ...
 	}
-		}
-	};
 </script>
+
+<div on:touchstart="{handleTouchstart}">
+	<button on:click|stopPropagation|preventDefault="{handleClick}">click me</button>
+	<button on:click|once|capture="{handleClick}">or me</button>
+	<button on:click|capture="{handleClick}">or me!</button>
+</div>

test/js/samples/non-imported-component/input.html

@@ -1,13 +1,6 @@
-<Imported/>
-<NonImported/>
-
 <script>
 	import Imported from 'Imported.html';
-
-	export default {
-		components: {
-			Imported,
-			NonImported
-		}
-	};
 </script>
+
+<Imported/>
+<NonImported/>

test/js/samples/setup-method/input.html

@@ -1,18 +1,9 @@
+<script scope="shared">
+	export const SOME_CONSTANT = 42;
+</script>
+
 <script>
-	export default {
-		methods: {
-			foo ( bar ) {
+	export function foo(bar) {
 		console.log( bar );
 	}
-		},
-		setup: (Component) => {
-			Component.SOME_CONSTANT = 42;
-			Component.factory = function (target) {
-				return new Component({
-					target: target
-				});
-			}
-			Component.prototype.foo( 'baz' );
-		}
-	};
 </script>

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

@@ -1,27 +1,25 @@
+<script scope="shared">
+	export function preload(input) {
+		return output;
+	}
+</script>
+
 <script>
-	export default {
-		oncreate() {
+	import { ondestroy, onmount } from 'svelte';
+
+	onmount(() => {
 		console.log('oncreate');
-		},
+	});
 
-		ondestroy() {
+	ondestroy(() => {
 		console.log('ondestroy');
-		},
+	});
 
-		methods: {
-			foo() {
+	function foo() {
 		console.log('foo');
 	}
-		},
 
-		events: {
-			swipe(node, callback) {
+	function swipe(node, callback) {
 		// TODO implement
 	}
-		},
-
-		preload(input) {
-			return output;
-		}
-	};
 </script>

test/runtime/samples/action-function/main.html

@@ -1,5 +1,3 @@
-<button use:tooltip="t(actionTransKey)">action</button>
-
 <script>
 	const translations = {
 		perform_action: 'Perform an Action'
@@ -9,13 +7,9 @@
 		return translations[key] || `{{${key}}}`;
 	}
 
-	export default {
-		data() {
-			return { t, actionTransKey: 'perform_action' };
-		},
+	export let actionTransKey = 'perform_action';
 
-		actions: {
-			tooltip(node, text) {
+	function tooltip(node, text) {
 		let tooltip = null;
 
 		function onMouseEnter() {
@@ -41,6 +35,6 @@
 			}
 		}
 	}
-		}
-	}
 </script>
+
+<button use:tooltip="{t(actionTransKey)}">action</button>

test/runtime/samples/action-ternary-template/main.html

@@ -1,9 +1,8 @@
-<h1 use:insert="display ? `Hello ${target}` : ''"></h1>
-
 <script>
-	export default {
-		actions: {
-			insert(node, text) {
+	export let display;
+	export let target;
+
+	function insert(node, text) {
 
 		function onClick() {
 			node.textContent = text;
@@ -16,6 +15,6 @@
 			}
 		}
 	}
-		}
-	}
 </script>
+
+<h1 use:insert="{display ? `Hello ${target}` : ''}"></h1>

test/runtime/samples/action-this/main.html

@@ -1,12 +1,10 @@
-<button use:foo>{x}</button>
-
 <script>
-	export default {
-		actions: {
-			foo(node) {
+	export let x;
+
+	function foo(node) {
 		let x = 0;
 
-				const handler = () => this.set({ x: x++ });
+		const handler = () => x = x++;
 
 		node.addEventListener('click', handler);
 		handler();
@@ -17,6 +15,6 @@
 			}
 		};
 	}
-		},
-	};
 </script>
+
+<button use:foo>{x}</button>

test/runtime/samples/action-update/main.html

@@ -1,24 +1,15 @@
-<button use:tooltip="tooltip">action</button>
-<svelte:window on:keydown="checkForCtrl(event)" on:keyup="checkForCtrl(event)"/>
-
 <script>
-	export default {
-		data() {
-			return { tooltip: 'Perform an Action' };
-		},
+	export let tooltip = 'Perform an Action';
 
-		methods: {
-			checkForCtrl(event) {
+	function checkForCtrl(event) {
 		if (event.ctrlKey) {
-					this.set({ tooltip: 'Perform an augmented Action' });
+			tooltip = 'Perform an augmented Action';
 		} else {
-					this.set({ tooltip: 'Perform an Action' });
+			tooltip = 'Perform an Action';
 		}
 	}
-		},
 
-		actions: {
-			tooltip(node, text) {
+	function tooltip(node, text) {
 		let tooltip = null;
 
 		function onMouseEnter() {
@@ -47,6 +38,7 @@
 			}
 		}
 	}
-		}
-	}
 </script>
+
+<button use:tooltip="{tooltip}">action</button>
+<svelte:window on:keydown="{checkForCtrl}" on:keyup="{checkForCtrl}"/>

test/runtime/samples/action/main.html

@@ -1,9 +1,5 @@
-<button use:tooltip="'Perform an Action'">action</button>
-
 <script>
-	export default {
-		actions: {
-			tooltip(node, text) {
+	function tooltip(node, text) {
 		let tooltip = null;
 
 		function onMouseEnter() {
@@ -29,6 +25,6 @@
 			}
 		}
 	}
-		}
-	}
 </script>
+
+<button use:tooltip="{'Perform an Action'}">action</button>

test/runtime/samples/animation-css/main.html

@@ -1,11 +1,7 @@
-{#each things as thing (thing.id)}
-	<div animate:flip>{thing.name}</div>
-{/each}
-
 <script>
-	export default {
-		animations: {
-			flip(node, animation, params) {
+	export let things;
+
+	function flip(node, animation, params) {
 		const dx = animation.from.left - animation.to.left;
 		const dy = animation.from.top - animation.to.top;
 
@@ -14,6 +10,8 @@
 			css: (t, u) => `transform: translate(${u + dx}px, ${u * dy}px)`
 		};
 	}
-		}
-	};
 </script>
+
+{#each things as thing (thing.id)}
+	<div animate:flip>{thing.name}</div>
+{/each}

test/runtime/samples/animation-js-delay/main.html

@@ -1,11 +1,7 @@
-{#each things as thing, i (thing.id)}
-	<div animate:flip="{delay: i * 10}">{thing.name}</div>
-{/each}
-
 <script>
-	export default {
-		animations: {
-			flip(node, animation, params) {
+	export let things;
+
+	function flip(node, animation, params) {
 		const dx = animation.from.left - animation.to.left;
 		const dy = animation.from.top - animation.to.top;
 
@@ -18,6 +14,8 @@
 			}
 		};
 	}
-		}
-	};
 </script>
+
+{#each things as thing, i (thing.id)}
+	<div animate:flip="{delay: i * 10}">{thing.name}</div>
+{/each}

test/runtime/samples/animation-js/main.html

@@ -1,11 +1,7 @@
-{#each things as thing (thing.id)}
-	<div animate:flip>{thing.name}</div>
-{/each}
-
 <script>
-	export default {
-		animations: {
-			flip(node, animation, params) {
+	export let things;
+
+	function flip(node, animation, params) {
 		const dx = animation.from.left - animation.to.left;
 		const dy = animation.from.top - animation.to.top;
 
@@ -17,6 +13,8 @@
 			}
 		};
 	}
-		}
-	};
 </script>
+
+{#each things as thing (thing.id)}
+	<div animate:flip>{thing.name}</div>
+{/each}

test/runtime/samples/attribute-dynamic-shorthand/main.html

@@ -1,9 +1,5 @@
-<div {id}/>
-
 <script>
-	export default {
-		data: () => ({
-			id: 'foo'
-		})
-	};
+	export let id = 'foo';
 </script>
+
+<div {id}/>

test/runtime/samples/attribute-dynamic/main.html

@@ -1,9 +1,5 @@
-<div style='color: {color};'>{color}</div>
-
 <script>
-	export default {
-		data: () => ({
-			color: 'red'
-		})
-	};
+	export let color = 'red';
 </script>
+
+<div style='color: {color};'>{color}</div>

test/runtime/samples/attribute-partial-number/main.html

@@ -1,11 +1,5 @@
-<Component value="10px"/>
-
 <script>
 	import Component from './Component.html';
-
-	export default {
-		components: {
-			Component
-		}
-	};
 </script>
+
+<Component value="10px"/>

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

@@ -1,13 +1,9 @@
-{#await promise then value}
-	<Foo {value} />
-{/await}
-
 <script>
 	import Foo from './Foo.html';
 
-	export default {
-		components: {
-			Foo
-		}
-	};
+	export let promise;
 </script>
+
+{#await promise then value}
+	<Foo {value} />
+{/await}

test/runtime/samples/await-then-catch-event/main.html

@@ -1,7 +1,7 @@
 {#await thePromise}
 	<p>loading...</p>
 {:then theValue}
-	<button ref:button on:click='set({ clicked: theValue })'>click me</button>
+	<button ref:button on:click='{() => clicked = theValue}'>click me</button>
 {:catch theError}
 	<p>oh no! {theError.message}</p>
 {/await}

test/runtime/samples/await-then-catch-in-slot/main.html

@@ -1,3 +1,9 @@
+<script>
+	import Foo from './Foo.html';
+
+	export let thePromise;
+</script>
+
 <Foo>
 	{#await thePromise}
 		<p>loading...</p>
@@ -7,11 +13,3 @@
 		<p>oh no! {theError.message}</p>
 	{/await}
 </Foo>
-
-<script>
-	import Foo from './Foo.html';
-
-	export default {
-		components: { Foo }
-	};
-</script>

test/runtime/samples/binding-indirect-computed/main.html

@@ -1,27 +1,22 @@
-<select bind:value="selected.letter">
-	{#each uppercase as letter}
-		<option value="{letter}">{letter}</option>
-	{/each}
-</select>
-
-{selected.letter}
-
 <script>
-	export default {
-		data() {
-			return {
-				letters: [
+	export let letters = [
 		'a',
 		'b',
 		'c'
-				],
-				selected: {
+	];
+	export let selected = {
 		letter: ''
-				}
-			}
-		},
-		computed:{
-			uppercase: ({ letters }) => letters.map(x => x.toUpperCase())
-		}
 	};
+
+	function uppercase() {
+		return letters.map(x => x.toUpperCase());
+	}
 </script>
+
+<select bind:value="selected.letter">
+	{#each uppercase as letter}
+		<option value="{letter}">{letter}</option>
+	{/each}
+</select>
+
+{selected.letter}

test/runtime/samples/binding-input-checkbox-deep-contextual/main.html

@@ -1,15 +1,13 @@
-{#each items as item}
-	<div><input type='checkbox' bind:checked='item.completed'><p>{item.description}</p></div>
-{/each}
-
-<p>{numCompleted} completed</p>
-
 <script>
-	export default {
-		computed: {
-			numCompleted ({ items }) {
+	export let items;
+
+	function numCompleted() {
 		return items.reduce( ( total, item ) => total + ( item.completed ? 1 : 0 ), 0 );
 	}
-		}
-	};
 </script>
+
+{#each items as item}
+	<div><input type='checkbox' bind:checked='item.completed'><p>{item.description}</p></div>
+{/each}
+
+<p>{numCompleted()} completed</p>

test/runtime/samples/binding-input-checkbox-with-event-in-each/main.html

@@ -1,14 +1,11 @@
-{#each cats as cat (cat.name)}
-	<input type="checkbox" bind:checked="cat.checked" on:change="someCheck()">
-{/each}
-
 <script>
-	export default {
-		oncreate() {},
-		methods: {
-			someCheck() {
+	export let cats;
+
+	function someCheck() {
 		console.log('Check');
 	}
-		},
-	};
 </script>
+
+{#each cats as cat (cat.name)}
+	<input type="checkbox" bind:checked="cat.checked" on:change="{someCheck}">
+{/each}

test/runtime/samples/binding-input-with-event/main.html

@@ -1 +1 @@
-<input bind:value='a' on:input='set({ b: 0 })'>
+<input bind:value='a' on:input='{() => b = 0}'>

test/runtime/samples/binding-select-in-yield/Modal.html

@@ -1,20 +1,11 @@
-{#if !hidden}
-	<slot></slot>
-{/if}
-
 <script>
-	export default {
-		data () {
-			return {
-				hidden: true
-			};
-		},
-		methods: {
-			toggle () {
-				this.set({
-					hidden: !this.get().hidden
-				});
-			}
+	export let hidden = true;
+
+	export function toggle() {
+		hidden = !this.get().hidden;
 	}
-	};
 </script>
+
+{#if !hidden}
+	<slot></slot>
+{/if}

test/runtime/samples/binding-select-in-yield/main.html

@@ -1,3 +1,10 @@
+<script>
+	import Modal from './Modal.html';
+
+	export let letter;
+	export let letters = ['a', 'b', 'c'];
+</script>
+
 <Modal ref:modal>
 	<span>{letter}</span>
 	<select bind:value='letter'>
@@ -6,18 +13,3 @@
 		{/each}
 	</select>
 </Modal>
-
-<script>
-	import Modal from './Modal.html';
-
-	export default {
-		data () {
-			return {
-				letters: ['a', 'b', 'c']
-			};
-		},
-		components: {
-			Modal
-		}
-	};
-</script>

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

@@ -1,15 +1,13 @@
-<Two bind:foo/>
-
 <script>
+	import { onmount } from 'svelte';
 	import Two from './Two.html';
 
-	export default {
-		components: {
-			Two
-		},
+	export let snapshot;
+	export let foo;
 
-		oncreate() {
-			this.snapshot = this.get().foo;
-		}
-	};
+	onmount(() => {
+		snapshot = foo;
+	});
 </script>
+
+<Two bind:foo/>

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

@@ -1,15 +1,7 @@
 <script>
-	export default {
-		data() {
-			return {
-				bar: 1
-			};
-		},
+	export let bar = 1;
 
-		computed: {
-			foo({ bar }) {
+	function foo() {
 		return bar * 2;
 	}
-		}
-	};
 </script>

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

@@ -1,9 +1,5 @@
-<One ref:one/>
-
 <script>
 	import One from './One.html';
-
-	export default {
-		components: { One }
-	};
 </script>
+
+<One ref:one/>

test/runtime/samples/bindings-coalesced/Foo.html

@@ -1,20 +1,12 @@
-<p>bar in Foo: {bar}</p>
-<p>baz in Foo: {baz}</p>
-
 <script>
-	export default {
-		data() {
-			return {
-				bar: 1,
-				baz: 2
-			};
-		},
+	export let bar = 1;
+	export let baz = 2;
 
-		methods: {
-			double() {
-				const { bar, baz } = this.get();
-				this.set({ bar: bar * 2, baz: baz * 2 });
-			}
+	export function double() {
+		bar = bar * 2;
+		baz = baz * 2;
 	}
-	};
 </script>
+
+<p>bar in Foo: {bar}</p>
+<p>baz in Foo: {baz}</p>

test/runtime/samples/bindings-coalesced/main.html

@@ -1,12 +1,9 @@
-<Foo ref:foo bind:bar bind:baz/>
-<p ref:p>{bar + baz}</p>
-
 <script>
 	import Foo from './Foo.html';
 
-	export default {
-		components: {
-			Foo
-		}
-	};
+	export let bar;
+	export let baz;
 </script>
+
+<Foo ref:foo bind:bar bind:baz/>
+<p ref:p>{bar + baz}</p>

test/runtime/samples/class-helper/main.html

@@ -1,11 +1,9 @@
-<div class:active="isActive(user)"></div>
-
 <script>
-export default {
-  helpers: {
-    isActive(user) {
+  export let user;
+
+  function isActive(user) {
   return user.active;
 }
-  }
-}
 </script>
+
+<div class:active="isActive(user)"></div>

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

@@ -1,8 +1,8 @@
-<li>
-	<slot></slot>
-</li>
-
 <script>
+	import { onmount } from 'svelte';
+
+	let id;
+
 	const initialValues = {
 		'id-0': 'zero',
 		'id-1': 'one',
@@ -10,9 +10,11 @@
 		'id-3': 'three'
 	};
 
-	export default {
-		oncreate() {
-			this.set({ value: initialValues[this.get().id] });
-		}
-	};
+	onmount(() => {
+		value = initialValues[id];
+	});
 </script>
+
+<li>
+	<slot></slot>
+</li>

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

@@ -1,33 +1,22 @@
-<input type='number' bind:value='count'>
-
-<ol>
-	{#each ids as id}
-		<Nested {id} bind:value="idToValue[id]">
-			{id}: value is {idToValue[id]}
-		</Nested>
-	{/each}
-</ol>
-
 <script>
 	import Nested from './Nested.html';
 	
-	export default {
-		data() {
-			return {
-				idToValue: Object.create(null)
-			};
-		},
+	export let count;
+	export let idToValue = Object.create(null);
 
-		computed: {
-			ids({ count }) {
+	function ids() {
 		return new Array(count)
 			.fill(null)
 			.map((_, i) => 'id-' + i);
 	}
-		},
-
-		components: {
-			Nested
-		}
-	};
 </script>
+
+<input type='number' bind:value='count'>
+
+<ol>
+	{#each ids as id}
+		<Nested {id} bind:value="idToValue[id]">
+			{id}: value is {idToValue[id]}
+		</Nested>
+	{/each}
+</ol>

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

@@ -1,8 +1,8 @@
-<li>
-	<slot></slot>
-</li>
-
 <script>
+	import { onmount } from 'svelte';
+
+	export let id;
+
 	const initialValues = {
 		'id-0': 'zero',
 		'id-1': 'one',
@@ -10,9 +10,11 @@
 		'id-3': 'three'
 	};
 
-	export default {
-		oncreate() {
-			this.set({ value: initialValues[this.get().id] });
-		}
-	};
+	onmount(() => {
+		value = initialValues[id];
+	});
 </script>
+
+<li>
+	<slot></slot>
+</li>

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

@@ -1,34 +1,23 @@
-<input type='number' bind:value='count'>
-
-<ol>
-	{#each ids as object (object.id)}
-		<Nested bind:value='idToValue[object.id]' id='{object.id}'>
-			{object.id}: value is {idToValue[object.id]}
-		</Nested>
-	{/each}
-</ol>
-
 <script>
 	import Nested from './Nested.html';
 
-	export default {
-		data() {
-			return {
-				idToValue: Object.create(null)
-			};
-		},
+	export let count;
+	export let idToValue = Object.create(null);
 
-		computed: {
-			ids({ count }) {
+	function ids() {
 		return new Array(count)
 			.fill(null)
 			.map((_, i) => ({ id: 'id-' + i}))
 			.reverse();
 	}
-		},
-
-		components: {
-			Nested
-		}
-	};
 </script>
+
+<input type='number' bind:value='count'>
+
+<ol>
+	{#each ids as object (object.id)}
+		<Nested bind:value='idToValue[object.id]' id='{object.id}'>
+			{object.id}: value is {idToValue[object.id]}
+		</Nested>
+	{/each}
+</ol>

test/runtime/samples/component-binding-blowback/main.html

@@ -1,22 +1,12 @@
-{#if x}
-	<Widget bind:foo='bar.baz'/>
-{/if}
-
 <script>
 	import Widget from './Widget.html';
 
-	export default {
-		data: function () {
-			return {
-				x: false,
-				bar: {
+	export let x = false;
+	export let bar = {
 		baz: 42
-				}
-			};
-		},
-
-		components: {
-			Widget
-		}
 	};
 </script>
+
+{#if x}
+	<Widget bind:foo='bar.baz'/>
+{/if}

test/runtime/samples/component-binding-computed/main.html

@@ -1,22 +1,13 @@
-{#each fields as field}
-	<Nested {field} bind:value='values[field]'/>
-{/each}
-
 <script>
 	import Nested from './Nested.html';
 
-	export default {
-		data: function () {
-			return {
-				fields: ['firstname', 'lastname'],
-				values: {
+	export let fields = ['firstname', 'lastname'];
+	export let values = {
 		firstname: '',
 		lastname: ''
-				}
-			};
-		},
-		components: {
-			Nested
-		}
 	};
 </script>
+
+{#each fields as field}
+	<Nested {field} bind:value='values[field]'/>
+{/each}

test/runtime/samples/component-binding-conditional-b/Bar.html

@@ -1,9 +1,5 @@
-<p>y: {y}</p>
-
 <script>
-	export default {
-		data: () => ({
-			y: 'bar'
-		})
-	};
+	export let y = 'bar';
 </script>
+
+<p>y: {y}</p>

test/runtime/samples/component-binding-conditional-b/Baz.html

@@ -1,7 +1,3 @@
 <script>
-	export default {
-		data: () => ({
-			x: true
-		})
-	};
+	export let x = true;
 </script>

test/runtime/samples/component-binding-conditional-b/Foo.html

@@ -1,9 +1,5 @@
-<p>y: {y}</p>
-
 <script>
-	export default {
-		data: () => ({
-			y: 'foo'
-		})
-	};
+	export let y = 'foo';
 </script>
+
+<p>y: {y}</p>

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

@@ -1,3 +1,12 @@
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+	import Baz from './Baz.html';
+
+	export let y;
+	export let x;
+</script>
+
 <p>y: {y}</p>
 
 <Baz bind:x/>
@@ -7,17 +16,3 @@
 {:else}
 	<Bar bind:y/>
 {/if}
-
-<script>
-	import Foo from './Foo.html';
-	import Bar from './Bar.html';
-	import Baz from './Baz.html';
-
-	export default {
-		components: {
-			Foo,
-			Bar,
-			Baz
-		}
-	};
-</script>

test/runtime/samples/component-binding-conditional/Bar.html

@@ -1,9 +1,5 @@
-<p>y: {y}</p>
-
 <script>
-	export default {
-		data: () => ({
-			y: 'bar'
-		})
-	};
+	export let y = 'bar';
 </script>
+
+<p>y: {y}</p>

test/runtime/samples/component-binding-conditional/Baz.html

@@ -1,7 +1,3 @@
 <script>
-	export default {
-		data: () => ({
-			x: true
-		})
-	};
+	export let x = true;
 </script>

test/runtime/samples/component-binding-conditional/Foo.html

@@ -1,9 +1,5 @@
-<p>y: {y}</p>
-
 <script>
-	export default {
-		data: () => ({
-			y: 'foo'
-		})
-	};
+	export let y = 'foo';
 </script>
+
+<p>y: {y}</p>

test/runtime/samples/component-binding-conditional/main.html

@@ -1,3 +1,12 @@
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+	import Baz from './Baz.html';
+
+	export let y;
+	export let x;
+</script>
+
 <p>y: {y}</p>
 
 {#if x}
@@ -7,17 +16,3 @@
 {/if}
 
 <Baz bind:x/>
-
-<script>
-	import Foo from './Foo.html';
-	import Bar from './Bar.html';
-	import Baz from './Baz.html';
-
-	export default {
-		components: {
-			Foo,
-			Bar,
-			Baz
-		}
-	};
-</script>

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

@@ -1,44 +1,37 @@
-<ComponentSelector {components} bind:selectedComponent/>
-<Editor bind:code='selectedComponent.source' />
-
-<pre>
-{compiled}
-</pre>
-
 <script>
+	import { onprops } from 'svelte';
+
 	import Editor from './Editor.html';
 	import ComponentSelector from './ComponentSelector.html';
 
-	export default {
-		components: {
-			ComponentSelector,
-			Editor
-		},
+	export let components;
+	export let selectedComponent;
+	export let compiled;
 
-		onstate({ changed, current }) {
-			const { selectedComponent } = this.get();
+	let previouslySelectedComponent;
 
-			if (changed.components) {
+	onprops(() => {
 		components.forEach(component => {
 			if (component === selectedComponent) return;
 			component.compiled = component.source.toUpperCase();
 		});
-			}
 
-			if (changed.selectedComponent) {
+		if (selectedComponent !== previouslySelectedComponent) {
 			selectedComponent.compiled = selectedComponent.source.toUpperCase();
-				this.updateBundle();
-			}
-		},
-
-		methods: {
-			updateBundle() {
-				const components = this.get('components');
+			updateBundle();
 
-				const compiled = components.map(component => component.compiled).join('\n');
-
-				this.set({ compiled });
-			}
+			previouslySelectedComponent = selectedComponent;
 		}
+	});
+
+	function updateBundle() {
+		compiled = components.map(component => component.compiled).join('\n');
 	}
 </script>
+
+<ComponentSelector {components} bind:selectedComponent/>
+<Editor bind:code='selectedComponent.source' />
+
+<pre>
+{compiled}
+</pre>

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

@@ -1,21 +1,11 @@
-<Widget bind:value='deep.name'/>
-
-<p>{deep.name}</p>
-
 <script>
 	import Widget from './Widget.html';
 
-	export default {
-		data () {
-			return {
-				deep: {
+	export let deep = {
 		name: 'foo'
-				}
-			};
-		},
-
-		components: {
-			Widget
-		}
 	};
 </script>
+
+<Widget bind:value='deep.name'/>
+
+<p>{deep.name}</p>

test/runtime/samples/component-binding-each-nested/main.html

@@ -1,22 +1,12 @@
+<script>
+	import Widget from './Widget.html';
+
+	export let a = [{ name: 'foo' }, { name: 'bar' }, { name: 'baz' }];
+	export let getName = x => x.name;
+</script>
+
 {#each a as x}
 	<Widget bind:value='x.name'/>
 {/each}
 
 <p>{a.map(getName).join(', ')}</p>
-
-<script>
-	import Widget from './Widget.html';
-
-	export default {
-		data () {
-			return {
-				a: [{ name: 'foo' }, { name: 'bar' }, { name: 'baz' }],
-				getName: x => x.name
-			};
-		},
-
-		components: {
-			Widget
-		}
-	};
-</script>

test/runtime/samples/component-binding-each-object/main.html

@@ -1,13 +1,9 @@
-{#each a as x}
-	<Widget bind:value='x'/>
-{/each}
-
 <script>
 	import Widget from './Widget.html';
 
-	export default {
-		components: {
-			Widget
-		}
-	};
+	export let a;
 </script>
+
+{#each a as x}
+	<Widget bind:value='x'/>
+{/each}

test/runtime/samples/component-binding-each/main.html

@@ -1,21 +1,11 @@
+<script>
+	import Widget from './Widget.html';
+
+	export let a = [ 'foo', 'bar', 'baz' ];
+</script>
+
 {#each a as x}
 	<Widget bind:value='x'/>
 {/each}
 
 <p>{a.join(', ')}</p>
-
-<script>
-	import Widget from './Widget.html';
-
-	export default {
-		data () {
-			return {
-				a: [ 'foo', 'bar', 'baz' ]
-			};
-		},
-
-		components: {
-			Widget
-		}
-	};
-</script>

test/runtime/samples/component-binding-infinite-loop/A.html

@@ -1,12 +1,8 @@
-<B bind:currentIdentifier />
-<B bind:currentIdentifier />
-
 <script>
 	import B from './B.html';
 
-export default {
-	components: {
-		B
-	}
-}
+	export let currentIdentifier;
 </script>
+
+<B bind:currentIdentifier />
+<B bind:currentIdentifier />

test/runtime/samples/component-binding-infinite-loop/B.html

@@ -1,3 +1,10 @@
+<script>
+	import C from './C.html';
+
+	export let list = [1, 2, 3, 2, 1];
+	export let currentIdentifier;
+</script>
+
 {#each list as item}
 	<p>
 		<C identifier="{item}" bind:currentIdentifier>
@@ -5,16 +12,3 @@
 		</C>
 	</p>
 {/each}
-
-<script>
-import C from './C.html';
-
-export default {
-	data: () => ({
-		list: [1, 2, 3, 2, 1]
-	}),
-	components: {
-		C
-	}
-}
-</script>

test/runtime/samples/component-binding-infinite-loop/C.html

@@ -1,23 +1,19 @@
-<span
-	on:click="toggle()"
-	class="{isCurrentlySelected ? 'selected' : ''}"
->
-	<slot></slot>
-</span>
-
 <script>
-export default {
-	computed: {
-		isCurrentlySelected: ({ currentIdentifier, identifier }) => currentIdentifier === identifier
-	},
-	methods: {
-		toggle() {
-			const isCurrentlySelected = this.get().isCurrentlySelected
+	export let currentIdentifier;
+	export let identifier;
 
-			this.set({
-				currentIdentifier: isCurrentlySelected ? null : this.get().identifier
-			})
-		}
+	function isCurrentlySelected() {
+		return currentIdentifier === identifier;
 	}
+
+	function toggle() {
+		currentIdentifier = isCurrentlySelected ? null : identifier
 	}
 </script>
+
+<span
+	on:click="{toggle}"
+	class="{isCurrentlySelected() ? 'selected' : ''}"
+>
+	<slot></slot>
+</span>

test/runtime/samples/component-binding-infinite-loop/main.html

@@ -1,17 +1,8 @@
-<A bind:currentIdentifier />
-<A bind:currentIdentifier />
-
 <script>
 	import A from './A.html';
 
-export default {
-	data() {
-		return {
-			currentIdentifier: 2
-		}
-	},
-	components: {
-		A
-	}
-}
+	export let currentIdentifier = 2;
 </script>
+
+<A bind:currentIdentifier />
+<A bind:currentIdentifier />

test/runtime/samples/component-binding-invalid-identifier/Counter.html

@@ -1,14 +1,11 @@
-<button on:click='set({ "x-count": state["x-count"] + 1 })'>+1</button>
-
 <script>
-	export default {
-		data: () => ({
-			"x-count": 0
-		}),
-		computed: {
-			state(arg)  {
+	export let undefined = 0;
+
+	function state() {
+		// [svelte-upgrade warning]
+		// this function needs to be manually rewritten
 		return arg;
 	}
-		}
-	};
 </script>
+
+<button on:click='{() => undefined += 1}'>+1</button>

test/runtime/samples/component-binding-invalid-identifier/main.html

@@ -1,12 +1,8 @@
-<Counter bind:x-count='x'/>
-<p>count: {x}</p>
-
 <script>
 	import Counter from './Counter.html';
 
-	export default {
-		components: {
-			Counter
-		}
-	};
+	export let x;
 </script>
+
+<Counter bind:x-count='x'/>
+<p>count: {x}</p>

test/runtime/samples/component-binding-nested/Bar.html

@@ -1,12 +1,10 @@
-<button class='bar' on:click='set({ x: "q" })'>bar</button>
-<p>bar x: {x}</p>
-
-<Baz bind:x/>
-
 <script>
 	import Baz from './Baz.html';
 
-	export default {
-		components: { Baz }
-	};
+	export let x;
 </script>
+
+<button class='bar' on:click='{() => x = "q"}'>bar</button>
+<p>bar x: {x}</p>
+
+<Baz bind:x/>

test/runtime/samples/component-binding-nested/Baz.html

@@ -1,2 +1,2 @@
-<button class='baz' on:click='set({ x: "r" })'>baz</button>
+<button class='baz' on:click='{() => x = "r"}'>baz</button>
 <p>baz x: {x}</p>

test/runtime/samples/component-binding-nested/Foo.html

@@ -1,12 +1,10 @@
-<button class='foo' on:click='set({ x: "p" })'>foo</button>
-<p>foo x: {x}</p>
-
-<Bar bind:x/>
-
 <script>
 	import Bar from './Bar.html';
 
-	export default {
-		components: { Bar }
-	};
+	export let x;
 </script>
+
+<button class='foo' on:click='{() => x = "p"}'>foo</button>
+<p>foo x: {x}</p>
+
+<Bar bind:x/>

test/runtime/samples/component-binding-nested/main.html

@@ -1,11 +1,9 @@
-<p>x: {x}</p>
-
-<Foo bind:x/>
-
 <script>
 	import Foo from './Foo.html';
 
-	export default {
-		components: { Foo }
-	};
+	export let x;
 </script>
+
+<p>x: {x}</p>
+
+<Foo bind:x/>

test/runtime/samples/component-binding-parent-supercedes-child/Counter.html

@@ -1,9 +1,5 @@
-<button on:click='set({ count: count + 1 })'>+1</button>
-
 <script>
-	export default {
-		data: () => ({
-			count: 0
-		})
-	};
+	export let count = 0;
 </script>
+
+<button on:click='{() => count += 1}'>+1</button>

test/runtime/samples/component-binding-parent-supercedes-child/main.html

@@ -1,16 +1,8 @@
-<Counter bind:count='x'/>
-<p>count: {x}</p>
-
 <script>
 	import Counter from './Counter.html';
 
-	export default {
-		data: () => ({
-			x: 10
-		}),
-
-		components: {
-			Counter
-		}
-	};
+	export let x = 10;
 </script>
+
+<Counter bind:count='x'/>
+<p>count: {x}</p>

test/runtime/samples/component-binding-self-destroying/Nested.html

@@ -1 +1 @@
-<button on:click="set({show:false})">Hide</button>
+<button on:click="{() => show = false}">Hide</button>

test/runtime/samples/component-binding-self-destroying/main.html

@@ -1,14 +1,10 @@
+<script>
+	import Nested from './Nested.html';
+	export let show;
+</script>
+
 {#if show}
 	<Nested bind:show/>
 {:else}
-	<button on:click="set({show:true})">Show</button>
+	<button on:click="{() => show = true}">Show</button>
 {/if}
-
-<script>
-	import Nested from './Nested.html';
-	export default {
-		components: {
-			Nested
-		}
-	};
-</script>

test/runtime/samples/component-binding/Counter.html

@@ -1,9 +1,5 @@
-<button on:click='set({ count: count + 1 })'>+1</button>
-
 <script>
-	export default {
-		data: () => ({
-			count: 0
-		})
-	};
+	export let count = 0;
 </script>
+
+<button on:click='{() => count += 1}'>+1</button>

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

@@ -1,12 +1,8 @@
-<Counter bind:count='x'/>
-<p>count: {x}</p>
-
 <script>
 	import Counter from './Counter.html';
 
-	export default {
-		components: {
-			Counter
-		}
-	};
+	export let x;
 </script>
+
+<Counter bind:count='x'/>
+<p>count: {x}</p>

test/runtime/samples/component-data-dynamic-late/main.html

@@ -1,17 +1,10 @@
-{#if foo}
-	<Widget p='{q}'/>
-{/if}
-
 <script>
 	import Widget from './Widget.html';
 
-	export default {
-		data: () => ({
-			foo: false
-		}),
-
-		components: {
-			Widget
-		}
-	};
+	export let foo = false;
+	export let q;
 </script>
+
+{#if foo}
+	<Widget p='{q}'/>
+{/if}

test/runtime/samples/component-data-dynamic-shorthand/main.html

@@ -1,11 +1,9 @@
-<div>
-	<Widget {foo}/>
-</div>
-
 <script>
 	import Widget from './Widget.html';
 
-	export default {
-		components: { Widget }
-	};
+	export let foo;
 </script>
+
+<div>
+	<Widget {foo}/>
+</div>

test/runtime/samples/component-data-dynamic/main.html

@@ -1,11 +1,12 @@
-<div>
-	<Widget foo='{bar}' baz='{40 + x}' qux='this is a {compound} string' quux='{go.deeper}'/>
-</div>
-
 <script>
 	import Widget from './Widget.html';
 
-	export default {
-		components: { Widget }
-	};
+	export let bar;
+	export let x;
+	export let compound;
+	export let go;
 </script>
+
+<div>
+	<Widget foo='{bar}' baz='{40 + x}' qux='this is a {compound} string' quux='{go.deeper}'/>
+</div>

test/runtime/samples/component-data-empty/main.html

@@ -1,11 +1,7 @@
-<div>
-	<Widget foo=''/>
-</div>
-
 <script>
 	import Widget from './Widget.html';
-
-	export default {
-		components: { Widget }
-	};
 </script>
+
+<div>
+	<Widget foo=''/>
+</div>

test/runtime/samples/component-data-static-boolean-regression/main.html

@@ -1,10 +1,5 @@
-<Link x href="/cool"/>
-
 <script>
 	import Link from './Link.html';
-	export default {
-		components: {
-			Link
-		}
-	};
 </script>
+
+<Link x href="/cool"/>

test/runtime/samples/component-data-static-boolean/main.html

@@ -1,9 +1,5 @@
-<Foo x/>
-
 <script>
 	import Foo from './Foo.html';
-
-	export default {
-		components: { Foo }
-	};
 </script>
+
+<Foo x/>