merge master -> gh-7

Author: Rich-Harris

src/generators/dom/index.js

@@ -5,11 +5,10 @@ import isReference from '../../utils/isReference.js';
 import { walk } from 'estree-walker';
 import deindent from '../../utils/deindent.js';
 import CodeBuilder from '../../utils/CodeBuilder.js';
-import toSource from '../../utils/toSource.js';
 import visit from './visit.js';
+import { nameMap, sharedMap } from './sharedNames.js';
 import Generator from '../Generator.js';
 import preprocess from './preprocess.js';
-import * as shared from '../../shared/index.js';
 
 class DomGenerator extends Generator {
 	constructor ( parsed, source, name, options ) {
@@ -26,7 +25,7 @@ class DomGenerator extends Generator {
 	}
 
 	helper ( name ) {
-		if ( this.options.dev && `${name}Dev` in shared ) {
+		if ( this.options.dev && sharedMap.has( `${name}Dev` ) ) {
 			name = `${name}Dev`;
 		}
 
@@ -276,8 +275,7 @@ export default function dom ( parsed, source, options ) {
 		);
 	} else {
 		generator.uses.forEach( key => {
-			const value = shared[ key ]; // eslint-disable-line import/namespace
-			const str = toSource( value );
+			const str = sharedMap.get( key );
 			const code = new MagicString( str );
 			const fn = parseExpressionAt( str, 0 );
 
@@ -288,11 +286,12 @@ export default function dom ( parsed, source, options ) {
 					if ( node._scope ) scope = node._scope;
 
 					if ( node.type === 'Identifier' && isReference( node, parent ) && !scope.has( node.name ) ) {
-						if ( node.name in shared ) {
+						if ( nameMap.has( node.name ) ) {
 							// this helper function depends on another one
-							generator.uses.add( node.name );
+							const dependency = nameMap.get( node.name );
+							generator.uses.add( dependency );
 
-							const alias = generator.alias( node.name );
+							const alias = generator.alias( dependency );
 							if ( alias !== node.name ) code.overwrite( node.start, node.end, alias );
 						}
 					}

src/generators/dom/sharedNames.js

@@ -0,0 +1,12 @@
+import * as shared from '../../shared/index.js';
+
+export const nameMap = new Map();
+export const sharedMap = new Map();
+
+Object.keys(shared).forEach( key => {
+	const value = shared[ key ]; // eslint-disable-line import/namespace
+	if ( typeof value === 'function' ) {
+		nameMap.set( value.name, key );
+	}
+	sharedMap.set( key, value.toString() );
+});

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

@@ -30,7 +30,7 @@ export default function visitBinding ( generator, block, state, node, attribute
 	// <select> special case
 	if ( node.name === 'select' ) {
 		if ( !isMultipleSelect ) {
-			setter = `var selectedOption = ${state.parentNode}.selectedOptions[0] || ${state.parentNode}.options[0];\n${setter}`;
+			setter = `var selectedOption = ${state.parentNode}.querySelector(':checked') || ${state.parentNode}.options[0];\n${setter}`;
 		}
 
 		const value = block.getUniqueName( 'value' );
@@ -160,7 +160,7 @@ function getBindingEventName ( node, attribute ) {
 function getBindingValue ( generator, block, state, node, attribute, isMultipleSelect, bindingGroup, type ) {
 	// <select multiple bind:value='selected>
 	if ( isMultipleSelect ) {
-		return `[].map.call( ${state.parentNode}.selectedOptions, function ( option ) { return option.__value; })`;
+		return `[].map.call( ${state.parentNode}.querySelectorAll(':checked'), function ( option ) { return option.__value; })`;
 	}
 
 	// <select bind:value='selected>

test/runtime/samples/binding-select-initial-value/_config.js

@@ -1,6 +1,4 @@
 export default {
-	skip: true, // selectedOptions doesn't work in JSDOM???
-
 	html: `
 		<p>selected: b</p>
 

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

@@ -1,9 +1,9 @@
 <p>selected: {{selected}}</p>
 
 <select bind:value='selected'>
-	<option value="a">a</option>
-	<option value="b">b</option>
-	<option value="c">c</option>
+	<option>a</option>
+	<option>b</option>
+	<option>c</option>
 </select>
 
 <p>selected: {{selected}}</p>

test/runtime/samples/binding-select-multiple/_config.js

@@ -1,12 +1,12 @@
 export default {
-	skip: true, // selectedOptions doesn't work in JSDOM???
+	skip: true, // JSDOM
 
 	data: {
 		selected: [ 'two', 'three' ]
 	},
 
 	html: `
-		<select>
+		<select multiple>
 			<option>one</option>
 			<option>two</option>
 			<option>three</option>
@@ -26,7 +26,7 @@ export default {
 
 		assert.deepEqual( component.get( 'selected' ), [ 'three' ] );
 		assert.htmlEqual( target.innerHTML, `
-			<select>
+			<select multiple>
 				<option>one</option>
 				<option>two</option>
 				<option>three</option>
@@ -40,7 +40,7 @@ export default {
 
 		assert.deepEqual( component.get( 'selected' ), [ 'one', 'three' ] );
 		assert.htmlEqual( target.innerHTML, `
-			<select>
+			<select multiple>
 				<option>one</option>
 				<option>two</option>
 				<option>three</option>
@@ -56,7 +56,7 @@ export default {
 		assert.ok( !options[2].selected );
 
 		assert.htmlEqual( target.innerHTML, `
-			<select>
+			<select multiple>
 				<option>one</option>
 				<option>two</option>
 				<option>three</option>

test/runtime/samples/binding-select/_config.js

@@ -1,6 +1,4 @@
 export default {
-	skip: true, // selectedOptions doesn't work in JSDOM???
-
 	html: `
 		<p>selected: one</p>
 
@@ -13,6 +11,10 @@ export default {
 		<p>selected: one</p>
 	`,
 
+	data: {
+		selected: 'one'
+	},
+
 	test ( assert, component, target, window ) {
 		const select = target.querySelector( 'select' );
 		const options = [ ...target.querySelectorAll( 'option' ) ];

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

@@ -1,6 +1,4 @@
 export default {
-	skip: true, // JSDOM
-
 	data: {
 		options: [ { id: 'a' }, { id: 'b' }, { id: 'c' } ],
 		selected: 'b'

test/runtime/samples/select-one-way-bind-object/_config.js

@@ -1,8 +1,6 @@
 const items = [ {}, {} ];
 
 export default {
-	skip: true, // JSDOM quirks
-
 	'skip-ssr': true,
 
 	data: {