merge master -> gh-1118

Author: Rich-Harris

CHANGELOG.md

@@ -1,5 +1,24 @@
 # Svelte changelog
 
+## 1.56.4
+
+* Allow `component` and `state` to be context names ([#1213](https://github.com/sveltejs/svelte/issues/1213))
+* Don't remove `@supports` rules when `cascade: false` ([#1215](https://github.com/sveltejs/svelte/issues/1215))
+
+## 1.56.3
+
+* Top-level transitions work inside nested components ([#1188](https://github.com/sveltejs/svelte/issues/1188))
+* Always use internal `_mount` method ([#1201](https://github.com/sveltejs/svelte/issues/1201))
+
+## 1.56.2
+
+* Null out `key` for children of keyed each blocks ([#1202](https://github.com/sveltejs/svelte/issues/1202))
+
+## 1.56.1
+
+* Fix if-in-each bug ([#1195](https://github.com/sveltejs/svelte/issues/1195))
+* Cross-browser `scrollX`/`scrollY` support ([#1175](https://github.com/sveltejs/svelte/issues/1175))
+
 ## 1.56.0
 
 * Internal refactor ([#1122](https://github.com/sveltejs/svelte/issues/1122))

README.md

@@ -21,6 +21,7 @@ This is the Svelte compiler, which is primarily intended for authors of tooling
 * [svelte-hot-loader](https://github.com/ekhaled/svelte-hot-loader) – Webpack loader addon to support HMR
 * [meteor-svelte](https://github.com/klaussner/meteor-svelte) – Meteor build plugin
 * [sveltejs-brunch](https://github.com/StarpTech/sveltejs-brunch) – Brunch build plugin
+* [svelte-dev-store](https://github.com/GarethOates/svelte-dev-store) - Use Redux tools to visualise Svelte store
 * More to come!
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "1.56.0",
+  "version": "1.56.4",
   "description": "The magical disappearing UI framework",
   "main": "compiler/svelte.js",
   "files": [
@@ -66,7 +66,7 @@
     "nyc": "^11.1.0",
     "prettier": "^1.7.0",
     "reify": "^0.12.3",
-    "rollup": "^0.48.2",
+    "rollup": "^0.56.4",
     "rollup-plugin-buble": "^0.15.0",
     "rollup-plugin-commonjs": "^8.0.2",
     "rollup-plugin-json": "^2.1.0",

src/css/Stylesheet.ts

@@ -163,7 +163,7 @@ class Atrule {
 	}
 
 	apply(node: Element, stack: Element[]) {
-		if (this.node.name === 'media') {
+		if (this.node.name === 'media' || this.node.name === 'supports') {
 			this.children.forEach(child => {
 				child.apply(node, stack);
 			});
@@ -199,6 +199,14 @@ class Atrule {
 			if (this.node.expression.start - c > 1) code.overwrite(c, this.node.expression.start, ' ');
 			c = this.node.expression.end;
 			if (this.node.block.start - c > 0) code.remove(c, this.node.block.start);
+		} else if (this.node.name === 'supports') {
+			let c = this.node.start + 9;
+			if (this.node.expression.start - c > 1) code.overwrite(c, this.node.expression.start, ' ');
+			this.node.expression.children.forEach((query: Node) => {
+				// TODO minify queries
+				c = query.end;
+			});
+			code.remove(c, this.node.block.start);
 		}
 
 		// TODO other atrules

src/generators/Generator.ts

@@ -1,10 +1,10 @@
 import MagicString, { Bundle } from 'magic-string';
+import isReference from 'is-reference';
 import { walk, childKeys } from 'estree-walker';
 import { getLocator } from 'locate-character';
 import deindent from '../utils/deindent';
 import CodeBuilder from '../utils/CodeBuilder';
 import getCodeFrame from '../utils/getCodeFrame';
-import isReference from '../utils/isReference';
 import flattenReference from '../utils/flattenReference';
 import reservedNames from '../utils/reservedNames';
 import namespaces from '../utils/namespaces';
@@ -168,7 +168,7 @@ export default class Generator {
 		if (options.customElement === true) {
 			this.customElement = {
 				tag: this.tag,
-				props: this.props // TODO autofill this in
+				props: this.props
 			}
 		} else {
 			this.customElement = options.customElement;
@@ -752,12 +752,6 @@ export default class Generator {
 				if (node.type === 'Element' && (node.name === ':Component' || node.name === ':Self' || generator.components.has(node.name))) {
 					node.type = 'Component';
 					Object.setPrototypeOf(node, nodes.Component.prototype);
-				} else if (node.name === ':Window') { // TODO do this in parse?
-					node.type = 'Window';
-					Object.setPrototypeOf(node, nodes.Window.prototype);
-				} else if (node.name === ':Head') { // TODO do this in parse?
-					node.type = 'Head';
-					Object.setPrototypeOf(node, nodes.Head.prototype);
 				} else if (node.type === 'Element' && node.name === 'title' && parentIsHead(parent)) { // TODO do this in parse?
 					node.type = 'Title';
 					Object.setPrototypeOf(node, nodes.Title.prototype);

src/generators/dom/Block.ts

@@ -112,9 +112,13 @@ export default class Block {
 		this.hasOutroMethod = false;
 		this.outros = 0;
 
-		this.aliases = new Map();
-		this.variables = new Map();
 		this.getUniqueName = this.generator.getUniqueNameMaker();
+		this.variables = new Map();
+
+		this.aliases = new Map()
+			.set('component', this.getUniqueName('component'))
+			.set('state', this.getUniqueName('state'));
+		if (this.key) this.aliases.set('key', this.getUniqueName('key'));
 
 		this.hasUpdateMethod = false; // determined later
 	}
@@ -163,7 +167,7 @@ export default class Block {
 	}
 
 	child(options: BlockOptions) {
-		return new Block(Object.assign({}, this, options, { parent: this }));
+		return new Block(Object.assign({}, this, { key: null }, options, { parent: this }));
 	}
 
 	contextualise(expression: Node, context?: string, isEventHandler?: boolean) {
@@ -308,22 +312,19 @@ export default class Block {
 		if (this.hasOutroMethod) {
 			if (hasOutros) {
 				properties.addBlock(deindent`
-					o: function outro(${this.alias('outrocallback')}) {
+					o: function outro(#outrocallback) {
 						if (${outroing}) return;
 						${outroing} = true;
 						${hasIntros && `${introing} = false;`}
 
-						var ${this.alias('outros')} = ${this.outros};
+						var #outros = ${this.outros};
 
 						${this.builders.outro}
 					},
 				`);
 			} else {
-				// TODO should this be a helper?
 				properties.addBlock(deindent`
-					o: function outro(outrocallback) {
-						outrocallback();
-					},
+					o: @run,
 				`);
 			}
 		}

src/generators/dom/index.ts

@@ -1,7 +1,7 @@
 import MagicString from 'magic-string';
+import isReference from 'is-reference';
 import { parseExpressionAt } from 'acorn';
 import annotateWithScopes from '../../utils/annotateWithScopes';
-import isReference from '../../utils/isReference';
 import { walk } from 'estree-walker';
 import deindent from '../../utils/deindent';
 import { stringify, escape } from '../../utils/stringify';
@@ -259,7 +259,7 @@ export default function dom(
 			this._fragment.c();
 			this._fragment.${block.hasIntroMethod ? 'i' : 'm'}(this.shadowRoot, null);
 
-			if (options.target) this._mount(options.target, options.anchor || null);
+			if (options.target) this._mount(options.target, options.anchor);
 		` : deindent`
 			if (options.target) {
 				${generator.hydratable
@@ -272,7 +272,7 @@ export default function dom(
 						${options.dev && `if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the \`hydratable: true\` option");`}
 						this._fragment.c();
 					`}
-				this._fragment.${block.hasIntroMethod ? 'i' : 'm'}(options.target, options.anchor || null);
+				this._mount(options.target, options.anchor);
 
 				${(generator.hasComponents || generator.hasComplexBindings || templateProperties.oncreate || generator.hasIntroTransitions) && deindent`
 					${generator.hasComponents && `this._lock = true;`}

src/generators/nodes/Component.ts

@@ -320,7 +320,7 @@ export default class Component extends Node {
 						${name} = new ${switch_vars.value}(${switch_vars.props}(state));
 						${name}._fragment.c();
 
-						${this.children.map(child => remount(generator, child, name))}
+						${this.children.map(child => child.remount(name))}
 						${name}._mount(${updateMountNode}, ${anchor});
 
 						${eventHandlers.map(handler => deindent`
@@ -398,6 +398,10 @@ export default class Component extends Node {
 			`);
 		}
 	}
+
+	remount(name: string) {
+		return `${this.var}._mount(${name}._slotted${this.generator.legacy ? `["default"]` : `.default`}, null);`;
+	}
 }
 
 function mungeAttribute(attribute: Node, block: Block): Attribute {
@@ -547,32 +551,4 @@ function isComputed(node: Node) {
 	}
 
 	return false;
-}
-
-function remount(generator: DomGenerator, node: Node, name: string) {
-	// TODO make this a method of the nodes
-
-	if (node.type === 'Component') {
-		return `${node.var}._mount(${name}._slotted${generator.legacy ? `["default"]` : `.default`}, null);`;
-	}
-
-	if (node.type === 'Element') {
-		const slot = node.attributes.find(attribute => attribute.name === 'slot');
-		if (slot) {
-			return `@appendNode(${node.var}, ${name}._slotted.${node.getStaticAttributeValue('slot')});`;
-		}
-
-		return `@appendNode(${node.var}, ${name}._slotted${generator.legacy ? `["default"]` : `.default`});`;
-	}
-
-	if (node.type === 'Text' || node.type === 'MustacheTag' || node.type === 'RawMustacheTag') {
-		return `@appendNode(${node.var}, ${name}._slotted${generator.legacy ? `["default"]` : `.default`});`;
-	}
-
-	if (node.type === 'EachBlock') {
-		// TODO consider keyed blocks
-		return `for (var #i = 0; #i < ${node.iterations}.length; #i += 1) ${node.iterations}[#i].m(${name}._slotted${generator.legacy ? `["default"]` : `.default`}, null);`;
-	}
-
-	return `${node.var}.m(${name}._slotted${generator.legacy ? `["default"]` : `.default`}, null);`;
 }

src/generators/nodes/EachBlock.ts

@@ -594,4 +594,9 @@ export default class EachBlock extends Node {
 
 		block.builders.destroy.addBlock(`@destroyEach(${iterations});`);
 	}
+
+	remount(name: string) {
+		// TODO consider keyed blocks
+		return `for (var #i = 0; #i < ${this.iterations}.length; #i += 1) ${this.iterations}[#i].m(${name}._slotted${this.generator.legacy ? `["default"]` : `.default`}, null);`;
+	}
 }

src/generators/nodes/Element.ts

@@ -677,6 +677,15 @@ export default class Element extends Node {
 	isMediaNode() {
 		return this.name === 'audio' || this.name === 'video';
 	}
+
+	remount(name: string) {
+		const slot = this.attributes.find(attribute => attribute.name === 'slot');
+		if (slot) {
+			return `@appendNode(${this.var}, ${name}._slotted.${this.getStaticAttributeValue('slot')});`;
+		}
+
+		return `@appendNode(${this.var}, ${name}._slotted${this.generator.legacy ? `["default"]` : `.default`});`;
+	}
 }
 
 function getRenderStatement(