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>
 
@@ -5,14 +9,4 @@
 	.foo {
 		color: red;
 	}
-</style>
+</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 {
+	export function updateFoo(value) {
-		tag: 'custom-element',
+		foo = value;
+	}
 
-		methods: {
+	export let foo;
-			updateFoo(value) {
+</script>
-				this.foo = value;
+
-			}
+<p>{foo}</p>
-		}
-	};
-</script>

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

@@ -1,13 +1,9 @@
+<svelte:meta tag="custom-element"/>
+
 <span class='icon'></span>
 
 <style>
 	.icon::before {
 		content: '\ff'
 	}
-</style>
+</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>
@@ -6,10 +8,4 @@
 	<slot name='foo'>
 		<p>foo fallback content</p>
 	</slot>
-</div>
+</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 {
+	export let name;
-		tag: 'custom-element'
+</script>
-	};
+
-</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 {
+	export let count = 0;
-		tag: 'my-counter',
+</script>
 
-		data() {
+<button on:click='{() => count += 1}'>count: {count}</button>
-			return {
-				count: 0
-			};
-		}
-	};
-</script>

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

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

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

@@ -1,13 +1,9 @@
+<svelte:meta tag="custom-element"/>
+
 <p>styled</p>
 
 <style>
 	p {
 		color: red;
 	}
-</style>
+</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 {
+	export let name;
-		tag: 'custom-element'
+</script>
-	};
+
-</script>
+<h1>Hello {name}!</h1>

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

@@ -1,8 +1,9 @@
-<p>foo: {foo}</p>
+<svelte:meta tag="my-app"/>
-<p>bar: {bar}</p>
 
 <script>
-	export default {
+	export let foo;
-		tag: 'my-app'
+	export let bar;
-	};
+</script>
-</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 {
+	import { onmount } from 'svelte';
-		tag: 'my-app',
+
-
+	export let wasCreated;
-		oncreate() {
+
-			this.wasCreated = true;
+	onmount(() => {
-		}
+		wasCreated = true;
-	};
+	});
-</script>
+</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 {
+	export let items = ['a', 'b', 'c'];
-		tag: 'custom-element',
+</script>
 
-		data() {
+<my-widget class="foo" {items}/>
-			return {
-				items: ['a', 'b', 'c']
-			};
-		}
-	};
-</script>

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

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

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

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

test/hydration/samples/component/main.html

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

test/hydration/samples/each-block-arg-clash/main.html

@@ -2,4 +2,4 @@
 	{#each things.foo as foo}
 		<li>{foo}</li>
 	{/each}
-</ul>
+</ul>

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,23 +1,19 @@
-<a href="#" use:link>Test</a>
-
 <script>
-  export default {
+  function link(node) {
-    actions: {
+    
-      link(node) {
+    function onClick(event) {
-        
+      event.preventDefault();
-        function onClick(event) {
+      history.pushState(null, null, event.target.href);
-          event.preventDefault();
+    }
-          history.pushState(null, null, event.target.href);
-        }
 
-        node.addEventListener('click', onClick);
+    node.addEventListener('click', onClick);
 
-        return {
+    return {
-          destroy() {
+      destroy() {
-            node.removeEventListener('click', onClick);
+        node.removeEventListener('click', onClick);
-          }
-        }
       }
     }
   }
 </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 {
+	const Nested = window.Nested;
-		components: {
+</script>
-			Nested: window.Nested
+
-		}
+<Nested foo={[1, 2, 3]}/>
-	};
-</script>

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

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

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

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

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

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

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

@@ -1,8 +1,11 @@
 <script>
-	export default {
+	export let x;
-		computed: {
+
-			a: ({ x }) => x * 2,
+	function a() {
-			b: ({ x }) => x * 3
+		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>
@@ -9,10 +11,4 @@
 		0% { opacity: 0; }
 		100% { opacity: 1; }
 	}
-</style>
+</style>
-
-<script>
-	export default {
-		tag: 'custom-element'
-	};
-</script>

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

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

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

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

test/js/samples/do-use-dataset/input.html

@@ -1,2 +1,2 @@
 <div data-foo='bar'/>
-<div data-foo='{bar}'/>
+<div data-foo='{bar}'/>

test/js/samples/dont-use-dataset-in-legacy/input.html

@@ -1,2 +1,2 @@
 <div data-foo='bar'/>
-<div data-foo='{bar}'/>
+<div data-foo='{bar}'/>

test/js/samples/dont-use-dataset-in-svg/input.html

@@ -1,4 +1,4 @@
 <svg>
 	<g data-foo='bar'/>
 	<g data-foo='{bar}'/>
-</svg>
+</svg>

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

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

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

@@ -1,23 +1,21 @@
-{#each things as thing (thing.id)}
-	<div animate:foo>{thing.name}</div>
-{/each}
-
 <script>
-	export default {
+	export let things;
-		animations: {
+
-			foo(node, animation, params) {
+	function foo(node, animation, params) {
-				const dx = animation.from.left - animation.to.left;
+		const dx = animation.from.left - animation.to.left;
-				const dy = animation.from.top - animation.to.top;
+		const dy = animation.from.top - animation.to.top;
 
-				return {
+		return {
-					delay: params.delay,
+			delay: params.delay,
-					duration: 100,
+			duration: 100,
-					tick: (t, u) => {
+			tick: (t, u) => {
-						node.dx = u * dx;
+				node.dx = u * dx;
-						node.dy = u * dy;
+				node.dy = u * dy;
-					}
-				};
 			}
-		}
+		};
-	};
+	}
-</script>
+</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 {
+	export let bar;
-		methods: {
+
-			foo ( bar ) {
+	function handleFoo(bar) {
-				console.log( bar );
+		console.log( bar );
-			}
+	}
-		},
+
-		events: {
+	function foo(node, callback) {
-			foo ( node, callback ) {
+		// code goes here
-				// code goes here
+	}
-			}
+</script>
-		}
+
-	};
+<button on:foo='{() => handleFoo( bar )}'>foo</button>
-</script>

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 {
+	function handleTouchstart() {
-		methods: {
+		// ...
-			handleTouchstart() {
+	}
-				// ...
+
-			},
+	function handleClick() {
+		// ...
+	}
+</script>
 
-			handleClick() {
+<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>

test/js/samples/media-bindings/input.html

@@ -1 +1 @@
-<audio bind:buffered bind:seekable bind:played bind:currentTime bind:duration bind:paused bind:volume/>
+<audio bind:buffered bind:seekable bind:played bind:currentTime bind:duration bind:paused bind:volume/>

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

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

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

@@ -1,18 +1,9 @@
-<script>
+<script scope="shared">
-	export default {
+	export const SOME_CONSTANT = 42;
-		methods: {
-			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>
+
+<script>
+	export function foo(bar) {
+		console.log( bar );
+	}
+</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 {
+	import { ondestroy, onmount } from 'svelte';
-		oncreate() {
-			console.log('oncreate');
-		},
 
-		ondestroy() {
+	onmount(() => {
-			console.log('ondestroy');
+		console.log('oncreate');
-		},
+	});
 
-		methods: {
+	ondestroy(() => {
-			foo() {
+		console.log('ondestroy');
-				console.log('foo');
+	});
-			}
-		},
 
-		events: {
+	function foo() {
-			swipe(node, callback) {
+		console.log('foo');
-				// TODO implement
+	}
-			}
-		},
 
-		preload(input) {
+	function swipe(node, callback) {
-			return output;
+		// TODO implement
-		}
+	}
-	};
 </script>

test/js/samples/ssr-preserve-comments/input.html

@@ -1,3 +1,3 @@
 <div>content</div>
 <!-- comment -->
-<div>more content</div>
+<div>more content</div>

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,38 +7,34 @@
 		return translations[key] || `{{${key}}}`;
 	}
 
-	export default {
+	export let actionTransKey = 'perform_action';
-		data() {
-			return { t, actionTransKey: 'perform_action' };
-		},
 
-		actions: {
+	function tooltip(node, text) {
-			tooltip(node, text) {
+		let tooltip = null;
-				let tooltip = null;
 
-				function onMouseEnter() {
+		function onMouseEnter() {
-					tooltip = document.createElement('div');
+			tooltip = document.createElement('div');
-					tooltip.classList.add('tooltip');
+			tooltip.classList.add('tooltip');
-					tooltip.textContent = text;
+			tooltip.textContent = text;
-					node.parentNode.appendChild(tooltip);
+			node.parentNode.appendChild(tooltip);
-				}
+		}
 
-				function onMouseLeave() {
+		function onMouseLeave() {
-					if (!tooltip) return;
+			if (!tooltip) return;
-					tooltip.remove();
+			tooltip.remove();
-					tooltip = null;
+			tooltip = null;
-				}
+		}
 
-				node.addEventListener('mouseenter', onMouseEnter);
+		node.addEventListener('mouseenter', onMouseEnter);
-				node.addEventListener('mouseleave', onMouseLeave);
+		node.addEventListener('mouseleave', onMouseLeave);
-				
+		
-				return {
+		return {
-					destroy() {
+			destroy() {
-						node.removeEventListener('mouseenter', onMouseEnter);
+				node.removeEventListener('mouseenter', onMouseEnter);
-						node.removeEventListener('mouseleave', onMouseLeave);
+				node.removeEventListener('mouseleave', onMouseLeave);
-					}
-				}
 			}
 		}
 	}
-</script>
+</script>
+
+<button use:tooltip="{t(actionTransKey)}">action</button>

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

@@ -1,21 +1,20 @@
-<h1 use:insert="display ? `Hello ${target}` : ''"></h1>
-
 <script>
-	export default {
+	export let display;
-		actions: {
+	export let target;
-			insert(node, text) {
+
+	function insert(node, text) {
 
-				function onClick() {
+		function onClick() {
-					node.textContent = text;
+			node.textContent = text;
-				}
+		}
-				node.addEventListener('click', onClick);
+		node.addEventListener('click', onClick);
 
-				return {
+		return {
-					destroy() {
+			destroy() {
-						node.removeEventListener('click', onClick);
+				node.removeEventListener('click', onClick);
-					}
-				}
 			}
 		}
 	}
-</script>
+</script>
+
+<h1 use:insert="{display ? `Hello ${target}` : ''}"></h1>

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

@@ -1,22 +1,20 @@
-<button use:foo>{x}</button>
-
 <script>
-	export default {
+	export let x;
-		actions: {
+
-			foo(node) {
+	function foo(node) {
-				let x = 0;
+		let x = 0;
 
-				const handler = () => this.set({ x: x++ });
+		const handler = () => x = x++;
 
-				node.addEventListener('click', handler);
+		node.addEventListener('click', handler);
-				handler();
+		handler();
 
-				return {
+		return {
-					destroy() {
+			destroy() {
-						node.removeEventListener('click', handler);
+				node.removeEventListener('click', handler);
-					}
-				};
 			}
-		},
+		};
-	};
+	}
-</script>
+</script>
+
+<button use:foo>{x}</button>

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

@@ -1,52 +1,44 @@
-<button use:tooltip="tooltip">action</button>
-<svelte:window on:keydown="checkForCtrl(event)" on:keyup="checkForCtrl(event)"/>
-
 <script>
-	export default {
+	export let tooltip = 'Perform an Action';
-		data() {
-			return { tooltip: 'Perform an Action' };
-		},
 
-		methods: {
+	function checkForCtrl(event) {
-			checkForCtrl(event) {
+		if (event.ctrlKey) {
-				if (event.ctrlKey) {
+			tooltip = 'Perform an augmented Action';
-					this.set({ tooltip: 'Perform an augmented Action' });
+		} else {
-				} else {
+			tooltip = 'Perform an Action';
-					this.set({ tooltip: 'Perform an Action' });
+		}
-				}
+	}
-			}
-		},
 
-		actions: {
+	function tooltip(node, text) {
-			tooltip(node, text) {
+		let tooltip = null;
-				let tooltip = null;
 
-				function onMouseEnter() {
+		function onMouseEnter() {
-					tooltip = document.createElement('div');
+			tooltip = document.createElement('div');
-					tooltip.classList.add('tooltip');
+			tooltip.classList.add('tooltip');
-					tooltip.textContent = text;
+			tooltip.textContent = text;
-					node.parentNode.appendChild(tooltip);
+			node.parentNode.appendChild(tooltip);
-				}
+		}
 
-				function onMouseLeave() {
+		function onMouseLeave() {
-					if (!tooltip) return;
+			if (!tooltip) return;
-					tooltip.remove();
+			tooltip.remove();
-					tooltip = null;
+			tooltip = null;
-				}
+		}
 
-				node.addEventListener('mouseenter', onMouseEnter);
+		node.addEventListener('mouseenter', onMouseEnter);
-				node.addEventListener('mouseleave', onMouseLeave);
+		node.addEventListener('mouseleave', onMouseLeave);
 
-				return {
+		return {
-					update(text) {
+			update(text) {
-						if (tooltip) tooltip.textContent = text;
+				if (tooltip) tooltip.textContent = text;
-					},
+			},
-					destroy() {
+			destroy() {
-						node.removeEventListener('mouseenter', onMouseEnter);
+				node.removeEventListener('mouseenter', onMouseEnter);
-						node.removeEventListener('mouseleave', onMouseLeave);
+				node.removeEventListener('mouseleave', onMouseLeave);
-					}
-				}
 			}
 		}
 	}
-</script>
+</script>
+
+<button use:tooltip="{tooltip}">action</button>
+<svelte:window on:keydown="{checkForCtrl}" on:keyup="{checkForCtrl}"/>

test/runtime/samples/action/main.html

@@ -1,34 +1,30 @@
-<button use:tooltip="'Perform an Action'">action</button>
-
 <script>
-	export default {
+	function tooltip(node, text) {
-		actions: {
+		let tooltip = null;
-			tooltip(node, text) {
-				let tooltip = null;
 
-				function onMouseEnter() {
+		function onMouseEnter() {
-					tooltip = document.createElement('div');
+			tooltip = document.createElement('div');
-					tooltip.classList.add('tooltip');
+			tooltip.classList.add('tooltip');
-					tooltip.textContent = text;
+			tooltip.textContent = text;
-					node.parentNode.appendChild(tooltip);
+			node.parentNode.appendChild(tooltip);
-				}
+		}
 
-				function onMouseLeave() {
+		function onMouseLeave() {
-					if (!tooltip) return;
+			if (!tooltip) return;
-					tooltip.remove();
+			tooltip.remove();
-					tooltip = null;
+			tooltip = null;
-				}
+		}
 
-				node.addEventListener('mouseenter', onMouseEnter);
+		node.addEventListener('mouseenter', onMouseEnter);
-				node.addEventListener('mouseleave', onMouseLeave);
+		node.addEventListener('mouseleave', onMouseLeave);
-				
+		
-				return {
+		return {
-					destroy() {
+			destroy() {
-						node.removeEventListener('mouseenter', onMouseEnter);
+				node.removeEventListener('mouseenter', onMouseEnter);
-						node.removeEventListener('mouseleave', onMouseLeave);
+				node.removeEventListener('mouseleave', onMouseLeave);
-					}
-				}
 			}
 		}
 	}
-</script>
+</script>
+
+<button use:tooltip="{'Perform an Action'}">action</button>

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

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

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

@@ -1,23 +1,21 @@
-{#each things as thing, i (thing.id)}
-	<div animate:flip="{delay: i * 10}">{thing.name}</div>
-{/each}
-
 <script>
-	export default {
+	export let things;
-		animations: {
+
-			flip(node, animation, params) {
+	function flip(node, animation, params) {
-				const dx = animation.from.left - animation.to.left;
+		const dx = animation.from.left - animation.to.left;
-				const dy = animation.from.top - animation.to.top;
+		const dy = animation.from.top - animation.to.top;
 
-				return {
+		return {
-					delay: params.delay,
+			delay: params.delay,
-					duration: 100,
+			duration: 100,
-					tick: (t, u) => {
+			tick: (t, u) => {
-						node.dx = u * dx;
+				node.dx = u * dx;
-						node.dy = u * dy;
+				node.dy = u * dy;
-					}
-				};
 			}
-		}
+		};
-	};
+	}
-</script>
+</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,22 +1,20 @@
-{#each things as thing (thing.id)}
-	<div animate:flip>{thing.name}</div>
-{/each}
-
 <script>
-	export default {
+	export let things;
-		animations: {
+
-			flip(node, animation, params) {
+	function flip(node, animation, params) {
-				const dx = animation.from.left - animation.to.left;
+		const dx = animation.from.left - animation.to.left;
-				const dy = animation.from.top - animation.to.top;
+		const dy = animation.from.top - animation.to.top;
 
-				return {
+		return {
-					duration: 100,
+			duration: 100,
-					tick: (t, u) => {
+			tick: (t, u) => {
-						node.dx = u * dx;
+				node.dx = u * dx;
-						node.dy = u * dy;
+				node.dy = u * dy;
-					}
-				};
 			}
-		}
+		};
-	};
+	}
-</script>
+</script>
+
+{#each things as thing (thing.id)}
+	<div animate:flip>{thing.name}</div>
+{/each}

test/runtime/samples/attribute-boolean-false/main.html

@@ -1 +1 @@
-<textarea readonly="{false}"></textarea>
+<textarea readonly="{false}"></textarea>

test/runtime/samples/attribute-boolean-true/main.html

@@ -1 +1 @@
-<textarea readonly="{true}"></textarea>
+<textarea readonly="{true}"></textarea>

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

@@ -6,4 +6,4 @@
 
 <svg viewBox='0 0 100 100' id='two'>
 	<text textLength=100>hellooooo</text>
-</svg>
+</svg>

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

@@ -1,3 +1,3 @@
 {#each items as item, i}
 	<div class='{item.foo ? "foo" : ""} {item.bar ? "bar" : ""}'>{i + 1}</div>
-{/each}
+{/each}

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

@@ -1 +1 @@
-<div><div title={'foo'}>bar</div></div>
+<div><div title={'foo'}>bar</div></div>

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

@@ -1 +1 @@
-<span title='{"\"foo\""}'>foo</span>
+<span title='{"\"foo\""}'>foo</span>

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

@@ -1,2 +1,2 @@
 <div class='{class}'></div>{123}
-<div class='{ class }'></div>{ 123 }
+<div class='{ class }'></div>{ 123 }

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

@@ -1,9 +1,5 @@
-<div {id}/>
-
 <script>
-	export default {
+	export let id = 'foo';
-		data: () => ({
-			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 {
+	export let color = 'red';
-		data: () => ({
-			color: 'red'
-		})
-	};
 </script>
+
+<div style='color: {color};'>{color}</div>

test/runtime/samples/attribute-empty-svg/main.html

@@ -1,3 +1,3 @@
 <svg>
 	<g class=''></g>
-</svg>
+</svg>

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

@@ -1 +1 @@
-<div class=''></div>
+<div class=''></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/attribute-prefer-expression/main.html

@@ -1,2 +1,2 @@
 <input type='radio' bind:group='foo' value='{false}'>
-<input type='radio' bind:group='foo' value='{true}'>
+<input type='radio' bind:group='foo' value='{true}'>

test/runtime/samples/attribute-static-boolean/main.html

@@ -1 +1 @@
-<textarea readonly></textarea>
+<textarea readonly></textarea>

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

@@ -1 +1 @@
-<div class='foo'></div>
+<div class='foo'></div>

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 {
+	export let promise;
-		components: {
+</script>
-			Foo
+
-		}
+{#await promise then value}
-	};
+	<Foo {value} />
-</script>
+{/await}

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

@@ -6,4 +6,4 @@
 {:catch theError}
 <p>oh no! {theError.message}</p>
 {/await}
-</div>
+</div>

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-if/main.html

@@ -8,4 +8,4 @@
 	{/await}
 {:else}
 	<p>Else</p>
-{/if}
+{/if}

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>
@@ -6,12 +12,4 @@
 	{:catch theError}
 		<p>oh no! {theError.message}</p>
 	{/await}
-</Foo>
+</Foo>
-
-<script>
-	import Foo from './Foo.html';
-
-	export default {
-		components: { Foo }
-	};
-</script>

test/runtime/samples/await-then-catch-no-values/main.html

@@ -4,4 +4,4 @@
 	resolved
 {:catch}
 	rejected
-{/await}
+{/await}

test/runtime/samples/binding-audio-currenttime-duration-volume/main.html

@@ -1,2 +1,2 @@
 <audio bind:currentTime='t' bind:duration='d' bind:paused bind:volume='v'
-	src='music.mp3'></audio>
+	src='music.mp3'></audio>

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

@@ -1,27 +1,22 @@
+<script>
+	export let letters = [
+		'a',
+		'b',
+		'c'
+	];
+	export let selected = {
+		letter: ''
+	};
+
+	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}
+{selected.letter}
-
-<script>
-	export default {
-		data() {
-			return {
-				letters: [
-					'a',
-					'b',
-					'c'
-				],
-				selected: {
-					letter: ''
-				}
-			}
-		},
-		computed:{
-			uppercase: ({ letters }) => letters.map(x => x.toUpperCase())
-		}
-	};
-</script>

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

@@ -1,15 +1,13 @@
+<script>
+	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>
+<p>{numCompleted()} completed</p>
-
-<script>
-	export default {
-		computed: {
-			numCompleted ({ items }) {
-				return items.reduce( ( total, item ) => total + ( item.completed ? 1 : 0 ), 0 );
-			}
-		}
-	};
-</script>

test/runtime/samples/binding-input-checkbox-indeterminate/main.html

@@ -1,3 +1,3 @@
 <input type='checkbox' bind:checked bind:indeterminate>
 <p>checked? {checked}</p>
-<p>indeterminate? {indeterminate}</p>
+<p>indeterminate? {indeterminate}</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 {
+	export let cats;
-		oncreate() {},
+
-		methods: {
+	function someCheck() {
-			someCheck() {
+		console.log('Check');
-				console.log('Check');
+	}
-			}
+</script>
-		},
+
-	};
+{#each cats as cat (cat.name)}
-</script>
+	<input type="checkbox" bind:checked="cat.checked" on:change="{someCheck}">
+{/each}

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

@@ -1,2 +1,2 @@
 <input type='checkbox' bind:checked='foo'>
-<p>{foo}</p>
+<p>{foo}</p>

test/runtime/samples/binding-input-number/main.html

@@ -1,2 +1,2 @@
 <input type='number' bind:value='count'>
-<p>{typeof count} {count}</p>
+<p>{typeof count} {count}</p>

test/runtime/samples/binding-input-range-change/main.html

@@ -1,2 +1,2 @@
 <input type='range' bind:value='count'>
-<p>{typeof count} {count}</p>
+<p>{typeof count} {count}</p>

test/runtime/samples/binding-input-range/main.html

@@ -1,2 +1,2 @@
 <input type='range' bind:value='count'>
-<p>{typeof count} {count}</p>
+<p>{typeof count} {count}</p>

test/runtime/samples/binding-input-text-contextual/main.html

@@ -1,3 +1,3 @@
 {#each items as item}
 	<div><input bind:value='item'><p>{item}</p></div>
-{/each}
+{/each}

test/runtime/samples/binding-input-text-deep-computed/main.html

@@ -1,2 +1,2 @@
 <input bind:value='user[prop]'>
-<p>hello {user.name}</p>
+<p>hello {user.name}</p>

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

@@ -1,3 +1,3 @@
 {#each items as item}
 	<div><input bind:value='item.description'><p>{item.description}</p></div>
-{/each}
+{/each}

test/runtime/samples/binding-input-text-deep/main.html

@@ -1,2 +1,2 @@
 <input bind:value='user.name'>
-<p>hello {user.name}</p>
+<p>hello {user.name}</p>

test/runtime/samples/binding-input-text/main.html

@@ -1,2 +1,2 @@
 <input bind:value='name'>
-<p>hello {name}</p>
+<p>hello {name}</p>

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

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'>
@@ -5,19 +12,4 @@
 			<option value="{letter}">{letter}</option>
 		{/each}
 	</select>
-</Modal>
+</Modal>
-
-<script>
-	import Modal from './Modal.html';
-
-	export default {
-		data () {
-			return {
-				letters: ['a', 'b', 'c']
-			};
-		},
-		components: {
-			Modal
-		}
-	};
-</script>

test/runtime/samples/binding-select-late/main.html

@@ -4,4 +4,4 @@
 	{/each}
 </select>
 
-<p>selected: {selected || 'nothing'}</p>
+<p>selected: {selected || 'nothing'}</p>

test/runtime/samples/binding-select-multiple/main.html

@@ -4,4 +4,4 @@
 	<option>three</option>
 </select>
 
-<p>selected: {selected.join( ', ' )}</p>
+<p>selected: {selected.join( ', ' )}</p>

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

@@ -6,4 +6,4 @@
 	<option>three</option>
 </select>
 
-<p>selected: {selected}</p>
+<p>selected: {selected}</p>

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

@@ -1,2 +1,2 @@
 <textarea bind:value></textarea>
-<p>{value}</p>
+<p>{value}</p>

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 {
+	export let snapshot;
-		components: {
+	export let foo;
-			Two
+
-		},
+	onmount(() => {
+		snapshot = foo;
+	});
+</script>
 
-		oncreate() {
+<Two bind:foo/>
-			this.snapshot = this.get().foo;
-		}
-	};
-</script>

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

@@ -1,15 +1,7 @@
 <script>
-	export default {
+	export let bar = 1;
-		data() {
-			return {
-				bar: 1
-			};
-		},
 
-		computed: {
+	function foo() {
-			foo({ bar }) {
+		return bar * 2;
-				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';
+</script>
 
-	export default {
+<One ref:one/>
-		components: { One }
-	};
-</script>

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 {
+	export let bar = 1;
-		data() {
+	export let baz = 2;
-			return {
-				bar: 1,
-				baz: 2
-			};
-		},
 
-		methods: {
+	export function double() {
-			double() {
+		bar = bar * 2;
-				const { bar, baz } = this.get();
+		baz = baz * 2;
-				this.set({ bar: bar * 2, baz: baz * 2 });
+	}
-			}
+</script>
-		}
+
-	};
+<p>bar in Foo: {bar}</p>
-</script>
+<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 {
+	export let bar;
-		components: {
+	export let baz;
-			Foo
+</script>
-		}
+
-	};
+<Foo ref:foo bind:bar bind:baz/>
-</script>
+<p ref:p>{bar + baz}</p>

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

@@ -1 +1 @@
-<div class:one="true"></div>
+<div class:one="true"></div>

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

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

test/runtime/samples/class-in-each/main.html

@@ -1,3 +1,3 @@
 {#each things as thing}
 	<div class:selected="selected === thing"></div>
-{/each}
+{/each}

test/runtime/samples/class-shortcut-with-class/main.html

@@ -1 +1 @@
-<div class="{ myClass }" class:is-active class:isSelected class:not-used></div>
+<div class="{ myClass }" class:is-active class:isSelected class:not-used></div>

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

@@ -1 +1 @@
-<div class:is-active class:isSelected class:not-used></div>
+<div class:is-active class:isSelected class:not-used></div>

test/runtime/samples/class-with-attribute/main.html

@@ -1 +1 @@
-<div class="one" class:two="true" class:three="true"></div>
+<div class="one" class:two="true" class:three="true"></div>