Merge branch 'master' into gh-290-b

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## 1.6.11
+
+* Initialise dynamic `<option>` value correctly ([#291](https://github.com/sveltejs/svelte/issues/291))
+
 ## 1.6.10
 
 * Ensure `sources` and `sourcesContent` are populated in sourcemaps, even if none of the original code is used ([#295](https://github.com/sveltejs/svelte/pull/295))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "1.6.10",
+  "version": "1.6.11",
   "description": "The magical disappearing UI framework",
   "main": "compiler/svelte.js",
   "files": [

src/generators/dom/visitors/Component.js

@@ -24,6 +24,36 @@ export default {
 
 		addComponentAttributes( generator, node, local );
 
+		if ( local.allUsedContexts.size ) {
+			const contextNames = [...local.allUsedContexts];
+
+			const initialProps = contextNames.map( contextName => {
+				if ( contextName === 'root' ) return `root: root`;
+
+				const listName = generator.current.listNames[ contextName ];
+				const indexName = generator.current.indexNames[ contextName ];
+
+				return `${listName}: ${listName},\n${indexName}: ${indexName}`;
+			}).join( ',\n' );
+
+			const updates = contextNames.map( contextName => {
+				if ( contextName === 'root' ) return `${name}._context.root = root;`;
+
+				const listName = generator.current.listNames[ contextName ];
+				const indexName = generator.current.indexNames[ contextName ];
+
+				return `${name}._context.${listName} = ${listName};\n${name}._context.${indexName} = ${indexName};`;
+			}).join( '\n' );
+
+			local.init.addBlock( deindent`
+				${name}._context = {
+					${initialProps}
+				};
+			` );
+
+			local.update.addBlock( updates );
+		}
+
 		const componentInitProperties = [
 			`target: ${!isToplevel ? generator.current.target: 'null'}`,
 			'_root: component._root || component'

src/generators/dom/visitors/attributes/addComponentAttributes.js

@@ -94,12 +94,12 @@ export default function addComponentAttributes ( generator, node, local ) {
 
 			// TODO hoist event handlers? can do `this.__component.method(...)`
 			const declarations = [...usedContexts].map( name => {
-				if ( name === 'root' ) return 'var root = this.__svelte.root;';
+				if ( name === 'root' ) return 'var root = this._context.root;';
 
 				const listName = generator.current.listNames[ name ];
 				const indexName = generator.current.indexNames[ name ];
 
-				return `var ${listName} = this.__svelte.${listName}, ${indexName} = this.__svelte.${indexName}, ${name} = ${listName}[${indexName}]`;
+				return `var ${listName} = this._context.${listName}, ${indexName} = this._context.${indexName}, ${name} = ${listName}[${indexName}]`;
 			});
 
 			const handlerBody = ( declarations.length ? declarations.join( '\n' ) + '\n\n' : '' ) + `[✂${attribute.expression.start}-${attribute.expression.end}✂];`;

src/generators/dom/visitors/attributes/addElementAttributes.js

@@ -142,7 +142,11 @@ export default function addElementAttributes ( generator, node, local ) {
 			}
 
 			if ( isBoundOptionValue ) {
-				( dynamic ? local.update : local.init ).addLine( `${local.name}.value = ${local.name}.__value` );
+				local.init.addLine( `${local.name}.value = ${local.name}.__value` );
+
+				if (dynamic) {
+					local.update.addLine( `${local.name}.value = ${local.name}.__value` );
+				}
 			}
 		}
 

test/generator/component-events-each/Widget.html

@@ -0,0 +1 @@
+<button on:click='fire("foo")'>click me</button>

test/generator/component-events-each/_config.js

@@ -0,0 +1,27 @@
+export default {
+	data: {
+		items: [ 'a', 'b', 'c' ]
+	},
+
+	html: `
+		<div><button>click me</button><button>click me</button><button>click me</button></div>
+	`,
+
+	test ( assert, component, target, window ) {
+		const buttons = target.querySelectorAll( 'button' );
+
+		const clicks = [];
+
+		component.on( 'foo', item => {
+			clicks.push( item );
+		});
+
+		const event = new window.MouseEvent( 'click' );
+
+		buttons[0].dispatchEvent( event );
+		buttons[2].dispatchEvent( event );
+
+		assert.deepEqual( clicks, [ 'a', 'c' ]);
+		component.teardown();
+	}
+};

test/generator/component-events-each/main.html

@@ -0,0 +1,19 @@
+<div>
+	{{#each items as item}}
+		<Widget on:foo='foo(item)'/>
+	{{/each}}
+</div>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: { Widget },
+
+		methods: {
+			foo ( item ) {
+				this.fire( 'foo', item );
+			}
+		}
+	};
+</script>

test/generator/select/_config.js

@@ -0,0 +1,31 @@
+export default {
+	data: {
+		item: {
+			name: 'One',
+			key: 'a'
+		}
+	},
+
+	html: `
+		<select>
+			<option value="a">One</option>
+			<option value="b">Two</option>
+			<option value="c">Three</option>
+		</select>
+	`,
+
+	test ( assert, component, target ) {
+		assert.htmlEqual( target.innerHTML,`
+			<select>
+				<option value="a">One</option>
+				<option value="b">Two</option>
+				<option value="c">Three</option>
+			</select>
+		`);
+
+		assert.equal( target.querySelector( 'select' ).value, 'a' );
+
+		component.teardown();
+		assert.htmlEqual( target.innerHTML, '' );
+	}
+};

test/generator/select/main.html

@@ -0,0 +1,5 @@
+<select>
+	<option value="{{item.key}}">{{item.name}}</option>
+	<option value="b">Two</option>
+	<option value="c">Three</option>
+</select>