Merge branch 'master' into gh-3

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Svelte changelog
 
+## 1.17.2
+
+* Replace bad characters when creating variable names based on element names ([#516](https://github.com/sveltejs/svelte/issues/516))
+
+## 1.17.1
+
+* Fixes for static each-else and yield blocks ([#509](https://github.com/sveltejs/svelte/issues/509)), ([#514](https://github.com/sveltejs/svelte/issues/514))
+* Code generation tweaks ([#504](https://github.com/sveltejs/svelte/issues/504)), ([#507](https://github.com/sveltejs/svelte/issues/507))
+
 ## 1.17.0
 
 * Add `currentTime`, `duration` and `paused` bindings for media elements ([#406](https://github.com/sveltejs/svelte/issues/406))
@@ -43,7 +52,7 @@
 * Add `bind:online` to window ([#404](https://github.com/sveltejs/svelte/issues/404))
 * In dev mode, throw if read-only properties are set ([#404](https://github.com/sveltejs/svelte/issues/404))
 * Prevent conflicts with component name ([#464](https://github.com/sveltejs/svelte/pull/464))
-* Ensure event handler names are deconflicted ([#466https://github.com/sveltejs/svelte/issues/466
+* Ensure event handler names are deconflicted ([#466](https://github.com/sveltejs/svelte/issues/466))
 
 ## 1.13.7
 
@@ -279,7 +288,7 @@
 
 ## 1.2.4
 
-* SSR compiler: Implement `{{{tripes}}}` ([#197](https://github.com/sveltejs/svelte/issues/197))
+* SSR compiler: Implement `{{{triples}}}` ([#197](https://github.com/sveltejs/svelte/issues/197))
 * SSR compiler: Escape HTML in tags ([#197](https://github.com/sveltejs/svelte/issues/197))
 
 ## 1.2.3

package.json

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

src/generators/dom/visitors/Component/Component.js

@@ -111,9 +111,11 @@ export default function visitComponent ( generator, block, state, node ) {
 			`var ${yieldFragment} = ${childBlock.name}( ${params}, ${block.component} );`
 		);
 
+		if ( childBlock.hasUpdateMethod ) {
 			block.builders.update.addLine(
 				`${yieldFragment}.update( changed, ${params} );`
 			);
+		}
 
 		componentInitProperties.push( `_yield: ${yieldFragment}`);
 	}

src/generators/dom/visitors/Element/Element.js

@@ -49,21 +49,20 @@ export default function visitElement ( generator, block, state, node ) {
 		block.builders.create.addLine( `${generator.helper( 'setAttribute' )}( ${name}, '${generator.cssId}', '' );` );
 	}
 
-	let selectValueAttribute;
-
+	function visitAttributes () {
 		node.attributes
 			.sort( ( a, b ) => order[ a.type ] - order[ b.type ] )
 			.forEach( attribute => {
+				visitors[ attribute.type ]( generator, block, childState, node, attribute );
+			});
+	}
+
+	if ( node.name !== 'select' ) {
 		// <select> value attributes are an annoying special case — it must be handled
 		// *after* its children have been updated
-			if ( ( attribute.type === 'Attribute' || attribute.type === 'Binding' ) && attribute.name === 'value' && node.name === 'select' ) {
-				selectValueAttribute = attribute;
-				return;
+		visitAttributes();
 	}
 
-			visitors[ attribute.type ]( generator, block, childState, node, attribute );
-		});
-
 	// special case – bound <option> without a value attribute
 	if ( node.name === 'option' && !node.attributes.find( attribute => attribute.type === 'Attribute' && attribute.name === 'value' ) ) { 	// TODO check it's bound
 		const statement = `${name}.__value = ${name}.textContent;`;
@@ -109,9 +108,8 @@ export default function visitElement ( generator, block, state, node ) {
 		block.builders.update.addLine( node.lateUpdate );
 	}
 
-	if ( selectValueAttribute ) {
-		const visitor = selectValueAttribute.type === 'Attribute' ? visitAttribute : visitBinding;
-		visitor( generator, block, childState, node, selectValueAttribute );
+	if ( node.name === 'select' ) {
+		visitAttributes();
 	}
 
 	if ( node.initialUpdate ) {

test/runtime/samples/component-yield-static/Widget.html

@@ -0,0 +1 @@
+<b>{{yield}}</b>

test/runtime/samples/component-yield-static/_config.js

@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<b>Hello</b>
+	`,
+
+	test ( assert, component, target ) {
+		component.set( { name: 'World' } );
+		assert.htmlEqual( target.innerHTML, `
+			<b>Hello</b> World
+		` );
+	}
+};

test/runtime/samples/component-yield-static/main.html

@@ -0,0 +1,12 @@
+<Widget>Hello</Widget> {{name}}
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: { Widget },
+		data() {
+			return { name: '' };
+		}
+	};
+</script>

test/runtime/samples/element-invalid-name/_config.js

@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<foo-bar>Hello</foo-bar>
+	`
+}

test/runtime/samples/element-invalid-name/main.html

@@ -0,0 +1 @@
+<foo-bar>Hello</foo-bar>

test/runtime/samples/select-change-handler/_config.js

@@ -0,0 +1,24 @@
+export default {
+	skip: true, // JSDOM
+
+	data: {
+		options: [ { id: 'a' }, { id: 'b' }, { id: 'c' } ],
+		selected: 'b'
+	},
+
+	test ( assert, component, target, window ) {
+		const select = target.querySelector( 'select' );
+		assert.equal( select.value, 'b' );
+
+		const event = new window.Event( 'change' );
+
+		select.value = 'c';
+		select.dispatchEvent( event );
+
+		assert.equal( select.value, 'c' );
+		assert.equal( component.get( 'lastChangedTo' ), 'c' );
+		assert.equal( component.get( 'selected' ), 'c' );
+
+		component.destroy();
+	}
+};

test/runtime/samples/select-change-handler/main.html

@@ -0,0 +1,15 @@
+<select bind:value="selected" on:change="updateLastChangedTo(selected)">
+	{{#each options as option}}
+		<option value="{{option.id}}">{{option.id}}</option>
+	{{/each}}
+</select>
+
+<script>
+	export default {
+		methods: {
+			updateLastChangedTo(result) {
+				this.set({ lastChangedTo: result });
+			}
+		}
+	};
+</script>