Merge branch 'master' into folder-structure

.gitignore

@@ -29,5 +29,6 @@ _actual*.*
 /site/.sessions
 /site/static/svelte-app.json
 /site/static/contributors.jpg
+/site/static/workers
 /site/scripts/svelte-app
 /site/src/routes/_contributors.js

package.json

@@ -6,7 +6,7 @@
   "main": "index",
   "files": [
     "types",
-    "compiler.js",
+    "compiler.*",
     "register.js",
     "index.*",
     "internal",
@@ -63,7 +63,7 @@
     "c8": "^3.4.0",
     "codecov": "^3.0.0",
     "css-tree": "1.0.0-alpha22",
-    "estree-walker": "^0.6.0",
+    "estree-walker": "^0.6.1",
     "is-reference": "^1.1.1",
     "jsdom": "^12.2.0",
     "kleur": "^3.0.0",

site/content/examples/06-lifecycle/02-update/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Eliza from 'elizanode';
+	import Eliza from 'elizabot';
 	import { beforeUpdate, afterUpdate } from 'svelte';
 
 	let div;

site/content/tutorial/07-lifecycle/03-update/app-a/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Eliza from 'elizanode';
+	import Eliza from 'elizabot';
 	import { beforeUpdate, afterUpdate } from 'svelte';
 
 	let div;

site/content/tutorial/07-lifecycle/03-update/app-b/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Eliza from 'elizanode';
+	import Eliza from 'elizabot';
 	import { beforeUpdate, afterUpdate } from 'svelte';
 
 	let div;

site/package.json

@@ -3,9 +3,10 @@
   "version": "1.0.0",
   "description": "Docs and examples for Svelte",
   "scripts": {
-    "dev": "sapper dev",
+    "dev": "npm run copy-workers && sapper dev",
+    "copy-workers": "rm -rf static/workers && cp -r node_modules/@sveltejs/svelte-repl/workers static",
     "migrate": "node-pg-migrate -r dotenv/config",
-    "sapper": "sapper build --legacy",
+    "sapper": "npm run copy-workers && sapper build --legacy",
     "update_shimport": "cp node_modules/shimport/index.js __sapper__/build/client/shimport@0.0.14.js",
     "update": "node scripts/update_template.js && node scripts/get-contributors.js",
     "start": "node __sapper__/build",
@@ -38,7 +39,7 @@
     "@babel/runtime": "^7.4.4",
     "@sindresorhus/slugify": "^0.9.1",
     "@sveltejs/site-kit": "^1.0.4",
-    "@sveltejs/svelte-repl": "0.0.11",
+    "@sveltejs/svelte-repl": "^0.1.2",
     "degit": "^2.1.3",
     "dotenv": "^8.0.0",
     "eslint-plugin-svelte3": "^1.0.0",

site/src/components/Repl/ReplWidget.svelte

@@ -116,6 +116,7 @@
 		{#if process.browser}
 			<Repl
 				bind:this={repl}
+				workersUrl="workers"
 				fixed={mobile}
 				{svelteUrl}
 				{rollupUrl}

site/src/routes/examples/index.svelte

@@ -102,6 +102,7 @@
 		<div class="repl-container" class:loading={isLoading}>
 			<Repl
 				bind:this={repl}
+				workersUrl="workers"
 				{svelteUrl}
 				{rollupUrl}
 				orientation={replOrientation}

site/src/routes/repl/[id]/index.svelte

@@ -206,6 +206,7 @@
 		<div class="viewport" class:offset={checked}>
 			<Repl
 				bind:this={repl}
+				workersUrl="workers"
 				{svelteUrl}
 				{rollupUrl}
 				{relaxed}

site/src/routes/tutorial/[slug]/index.svelte

@@ -302,6 +302,7 @@
 		<div class="tutorial-repl">
 			<Repl
 				bind:this={repl}
+				workersUrl="workers"
 				{svelteUrl}
 				{rollupUrl}
 				orientation={mobile ? 'columns' : 'rows'}

site/src/server.js

@@ -2,11 +2,12 @@ import sirv from 'sirv';
 import * as sapper from '@sapper/server';
 import { API } from './backend/auth';
 
-const { PORT=3000 } = process.env;
+const { PORT = 3000 } = process.env;
 
 API()
 	.use(
 		sirv('static', {
+			dev: process.env.NODE_ENV === 'development',
 			setHeaders(res) {
 				res.setHeader('Access-Control-Allow-Origin', '*');
 				res.hasHeader('Cache-Control') || res.setHeader('Cache-Control', 'max-age=600'); // 10min default

src/runtime/animate/index.ts

@@ -1,7 +1,22 @@
 import { cubicOut } from 'svelte/easing';
 import { is_function } from 'svelte/internal';
 
-export function flip(node, animation, params) {
+// todo: same as Transition, should it be shared?
+export interface AnimationConfig {
+	delay?: number,
+	duration?: number,
+	easing?: (t: number) => number,
+	css?: (t: number, u: number) => string,
+	tick?: (t: number, u: number) => void
+}
+
+interface FlipParams {
+	delay: number;
+	duration: number | ((len: number) => number);
+	easing: (t: number) => number,
+}
+
+export function flip(node: Element, animation: { from: DOMRect, to: DOMRect }, params: FlipParams): AnimationConfig {
 	const style = getComputedStyle(node);
 	const transform = style.transform === 'none' ? '' : style.transform;
 

src/runtime/internal/animations.ts

@@ -1,18 +1,28 @@
 import { identity as linear, noop, now } from './utils';
 import { loop } from './loop';
 import { create_rule, delete_rule } from './style_manager';
+import { AnimationConfig } from '../animate';
 
-export function create_animation(node, from, fn, params) {
+
+//todo: documentation says it is DOMRect, but in IE it would be ClientRect
+type PositionRect = DOMRect|ClientRect;
+
+type AnimationFn = (node: Element, { from, to }: { from: PositionRect, to: PositionRect }, params: any) => AnimationConfig;
+
+export function create_animation(node: Element & ElementCSSInlineStyle, from: PositionRect, fn: AnimationFn, params) {
 	if (!from) return noop;
 
 	const to = node.getBoundingClientRect();
 	if (from.left === to.left && from.right === to.right && from.top === to.top && from.bottom === to.bottom) return noop;
 
+
 	const {
 		delay = 0,
 		duration = 300,
 		easing = linear,
+		// @ts-ignore todo: should this be separated from destructuring? Or start/end added to public api and documentation?
 		start: start_time = now() + delay,
+		// @ts-ignore todo:
 		end = start_time + duration,
 		tick = noop,
 		css
@@ -67,7 +77,7 @@ export function create_animation(node, from, fn, params) {
 	return stop;
 }
 
-export function fix_position(node) {
+export function fix_position(node: Element & ElementCSSInlineStyle) {
 	const style = getComputedStyle(node);
 
 	if (style.position !== 'absolute' && style.position !== 'fixed') {

src/runtime/internal/dom.ts

@@ -53,8 +53,8 @@ export function object_without_properties<T,K extends keyof T>(obj:T, exclude: K
 	return target;
 }
 
-export function svg_element(name:string):SVGElement {
-	return document.createElementNS('http://www.w3.org/2000/svg', name);
+export function svg_element<K extends keyof SVGElementTagNameMap>(name:K):SVGElement {
+	return document.createElementNS<K>('http://www.w3.org/2000/svg', name);
 }
 
 export function text(data:string) {
@@ -95,7 +95,7 @@ export function attr(node: Element, attribute: string, value?: string) {
 	else node.setAttribute(attribute, value);
 }
 
-export function set_attributes(node: HTMLElement, attributes: { [x: string]: string; }) {
+export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string; }) {
 	for (const key in attributes) {
 		if (key === 'style') {
 			node.style.cssText = attributes[key];

src/runtime/internal/loop.ts

@@ -1,6 +1,6 @@
 import { now, raf } from './utils';
 
-export interface Task { abort(): void; promise: Promise<undefined> }
+export interface Task { abort(): void; promise: Promise<void> }
 
 const tasks = new Set();
 let running = false;
@@ -32,7 +32,7 @@ export function loop(fn: (number)=>void): Task {
 	}
 
 	return {
-		promise: new Promise<undefined>(fulfil => {
+		promise: new Promise<void>(fulfil => {
 			tasks.add(task = [fn, fulfil]);
 		}),
 		abort() {

src/runtime/internal/ssr.ts

@@ -1,5 +1,6 @@
 import { set_current_component, current_component } from './lifecycle';
 import { run_all, blank_object } from './utils';
+import { Readable } from 'svelte/store';
 
 export const invalid_attribute_name_character = /[\s'">/=\u{FDD0}-\u{FDEF}\u{FFFE}\u{FFFF}\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3FFFF}\u{4FFFE}\u{4FFFF}\u{5FFFE}\u{5FFFF}\u{6FFFE}\u{6FFFF}\u{7FFFE}\u{7FFFF}\u{8FFFE}\u{8FFFF}\u{9FFFE}\u{9FFFF}\u{AFFFE}\u{AFFFF}\u{BFFFE}\u{BFFFF}\u{CFFFE}\u{CFFFF}\u{DFFFE}\u{DFFFF}\u{EFFFE}\u{EFFFF}\u{FFFFE}\u{FFFFF}\u{10FFFE}\u{10FFFF}]/u;
 // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
@@ -113,7 +114,7 @@ export function create_ssr_component(fn) {
 	};
 }
 
-export function get_store_value(store) {
+export function get_store_value<T>(store: Readable<T>): T | undefined {
 	let value;
 	store.subscribe(_ => value = _)();
 	return value;

src/runtime/internal/style_manager.ts

@@ -6,15 +6,15 @@ let active = 0;
 let current_rules = {};
 
 // https://github.com/darkskyapp/string-hash/blob/master/index.js
-function hash(str) {
+function hash(str: string) {
 	let hash = 5381;
 	let i = str.length;
 
 	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
 	return hash >>> 0;
 }
 
-export function create_rule(node, a, b, duration, delay, ease, fn, uid = 0) {
+export function create_rule(node: Element & ElementCSSInlineStyle, a: number, b: number, duration: number, delay: number, ease: (t: number) => number, fn: (t: number, u: number) => string, uid: number = 0) {
 	const step = 16.666 / duration;
 	let keyframes = '{\n';
 
@@ -44,7 +44,7 @@ export function create_rule(node, a, b, duration, delay, ease, fn, uid = 0) {
 	return name;
 }
 
-export function delete_rule(node, name?) {
+export function delete_rule(node: Element & ElementCSSInlineStyle, name?: string) {
 	node.style.animation = (node.style.animation || '')
 		.split(', ')
 		.filter(name