Merge branch 'master' into gh-592

.gitignore

@@ -12,4 +12,5 @@ coverage.lcov
 test/sourcemaps/samples/*/output.js
 test/sourcemaps/samples/*/output.js.map
 _actual.*
-_actual-bundle.*
+_actual-bundle.*
+src/generators/dom/shared.ts

src/generators/Generator.ts

@@ -117,11 +117,7 @@ export default class Generator {
 					const { name } = flattenReference( node );
 					if ( scope.has( name ) ) return;
 
-					if ( parent && parent.type === 'CallExpression' && node === parent.callee && helpers.has( name ) ) {
-						code.prependRight( node.start, `${self.alias( 'template' )}.helpers.` );
-					}
-
-					else if ( name === 'event' && isEventHandler ) {
+					if ( name === 'event' && isEventHandler ) {
 						// noop
 					}
 
@@ -135,6 +131,10 @@ export default class Generator {
 						if ( !~usedContexts.indexOf( name ) ) usedContexts.push( name );
 					}
 
+					else if ( helpers.has( name ) ) {
+						code.prependRight( node.start, `${self.alias( 'template' )}.helpers.` );
+					}
+
 					else if ( indexes.has( name ) ) {
 						const context = indexes.get( name );
 						if ( !~usedContexts.indexOf( context ) ) usedContexts.push( context );

src/generators/dom/visitors/Element/Element.ts

@@ -107,6 +107,20 @@ export default function visitElement ( generator: DomGenerator, block: Block, st
 	}
 
 	if ( node.name !== 'select' ) {
+		if ( node.name === 'textarea' ) {
+			// this is an egregious hack, but it's the easiest way to get <textarea>
+			// children treated the same way as a value attribute
+			if ( node.children.length > 0 ) {
+				node.attributes.push({
+					type: 'Attribute',
+					name: 'value',
+					value: node.children
+				});
+
+				node.children = [];
+			}
+		}
+
 		// <select> value attributes are an annoying special case — it must be handled
 		// *after* its children have been updated
 		visitAttributesAndAddProps();

src/generators/dom/visitors/Element/lookup.ts

@@ -109,7 +109,7 @@ const lookup = {
 	title: {},
 	type: { appliesTo: [ 'button', 'input', 'command', 'embed', 'object', 'script', 'source', 'style', 'menu' ] },
 	usemap: { propertyName: 'useMap', appliesTo: [ 'img', 'input', 'object' ] },
-	value: { appliesTo: [ 'button', 'option', 'input', 'li', 'meter', 'progress', 'param', 'select' ] },
+	value: { appliesTo: [ 'button', 'option', 'input', 'li', 'meter', 'progress', 'param', 'select', 'textarea' ] },
 	width: { appliesTo: [ 'canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video' ] },
 	wrap: { appliesTo: [ 'textarea' ] }
 };

src/generators/server-side-rendering/visitors/Element.ts

@@ -10,6 +10,17 @@ const meta = {
 	':Window': visitWindow
 };
 
+function stringifyAttributeValue ( block: Block, chunks: Node[] ) {
+	return chunks.map( ( chunk: Node ) => {
+		if ( chunk.type === 'Text' ) {
+			return chunk.data;
+		}
+
+		const { snippet } = block.contextualise( chunk.expression );
+		return '${' + snippet + '}';
+	}).join( '' )
+}
+
 export default function visitElement ( generator: SsrGenerator, block: Block, node: Node ) {
 	if ( node.name in meta ) {
 		return meta[ node.name ]( generator, block, node );
@@ -21,24 +32,22 @@ export default function visitElement ( generator: SsrGenerator, block: Block, no
 	}
 
 	let openingTag = `<${node.name}`;
+	let textareaContents; // awkward special case
 
 	node.attributes.forEach( ( attribute: Node ) => {
 		if ( attribute.type !== 'Attribute' ) return;
 
-		let str = ` ${attribute.name}`;
+		if ( attribute.name === 'value' && node.name === 'textarea' ) {
+			textareaContents = stringifyAttributeValue( block, attribute.value );
+		} else {
+			let str = ` ${attribute.name}`;
 
-		if ( attribute.value !== true ) {
-			str += `="` + attribute.value.map( ( chunk: Node ) => {
-				if ( chunk.type === 'Text' ) {
-					return chunk.data;
-				}
+			if ( attribute.value !== true ) {
+				str += `="${stringifyAttributeValue( block, attribute.value )}"`;
+			}
 
-				const { snippet } = block.contextualise( chunk.expression );
-				return '${' + snippet + '}';
-			}).join( '' ) + `"`;
+			openingTag += str;
 		}
-
-		openingTag += str;
 	});
 
 	if ( generator.cssId && !generator.elementDepth ) {
@@ -49,13 +58,17 @@ export default function visitElement ( generator: SsrGenerator, block: Block, no
 
 	generator.append( openingTag );
 
-	generator.elementDepth += 1;
+	if ( node.name === 'textarea' && textareaContents !== undefined ) {
+		generator.append( textareaContents );
+	} else {
+		generator.elementDepth += 1;
 
-	node.children.forEach( ( child: Node ) => {
-		visit( generator, block, child );
-	});
+		node.children.forEach( ( child: Node ) => {
+			visit( generator, block, child );
+		});
 
-	generator.elementDepth -= 1;
+		generator.elementDepth -= 1;
+	}
 
 	if ( !isVoidElementName( node.name ) ) {
 		generator.append( `</${node.name}>` );

src/parse/state/tag.ts

@@ -9,7 +9,6 @@ import { Parser } from '../index';
 import { Node } from '../../interfaces';
 
 const validTagName = /^\!?[a-zA-Z]{1,}:?[a-zA-Z0-9\-]*/;
-const invalidUnquotedAttributeCharacters = /[\s"'=<>\/`]/;
 
 const SELF = ':Self';
 
@@ -181,6 +180,11 @@ export default function tag ( parser: Parser ) {
 
 	if ( selfClosing ) {
 		element.end = parser.index;
+	} else if ( name === 'textarea' ) {
+		// special case
+		element.children = readSequence( parser, () => parser.template.slice( parser.index, parser.index + 11 ) === '</textarea>' );
+		parser.read( /<\/textarea>/ );
+		element.end = parser.index;
 	} else {
 		// don't push self-closing elements onto the stack
 		parser.stack.push( element );
@@ -280,28 +284,66 @@ function readAttribute ( parser: Parser, uniqueNames ) {
 }
 
 function readAttributeValue ( parser: Parser ) {
-	let quoteMark;
+	const quoteMark = (
+		parser.eat( `'` ) ? `'` :
+		parser.eat( `"` ) ? `"` :
+		null
+	);
+
+	const regex = (
+		quoteMark === `'` ? /'/ :
+		quoteMark === `"` ? /"/ :
+		/[\s"'=<>\/`]/
+	);
+
+	const value = readSequence( parser, () => regex.test( parser.template[ parser.index ] ) );
+
+	if ( quoteMark ) parser.index += 1;
+	return value;
+}
 
-	if ( parser.eat( `'` ) ) quoteMark = `'`;
-	if ( parser.eat( `"` ) ) quoteMark = `"`;
+function getShorthandValue ( start: number, name: string ) {
+	const end = start + name.length;
 
+	return [{
+		type: 'AttributeShorthand',
+		start,
+		end,
+		expression: {
+			type: 'Identifier',
+			start,
+			end,
+			name
+		}
+	}];
+}
+
+function readSequence ( parser: Parser, done: () => boolean ) {
 	let currentChunk: Node = {
 		start: parser.index,
 		end: null,
 		type: 'Text',
 		data: ''
 	};
 
-	const done = quoteMark ?
-		char => char === quoteMark :
-		char => invalidUnquotedAttributeCharacters.test( char );
-
 	const chunks = [];
 
 	while ( parser.index < parser.template.length ) {
 		const index = parser.index;
 
-		if ( parser.eat( '{{' ) ) {
+		if ( done() ) {
+			currentChunk.end = parser.index;
+
+			if ( currentChunk.data ) chunks.push( currentChunk );
+
+			chunks.forEach( chunk => {
+				if ( chunk.type === 'Text' ) chunk.data = decodeCharacterReferences( chunk.data );
+			});
+
+			return chunks;
+		}
+
+		else if ( parser.eat( '{{' ) ) {
 			if ( currentChunk.data ) {
 				currentChunk.end = index;
 				chunks.push( currentChunk );
@@ -328,39 +370,10 @@ function readAttributeValue ( parser: Parser ) {
 			};
 		}
 
-		else if ( done( parser.template[ parser.index ] ) ) {
-			currentChunk.end = parser.index;
-			if ( quoteMark ) parser.index += 1;
-
-			if ( currentChunk.data ) chunks.push( currentChunk );
-
-			chunks.forEach( chunk => {
-				if ( chunk.type === 'Text' ) chunk.data = decodeCharacterReferences( chunk.data );
-			});
-
-			return chunks;
-		}
-
 		else {
 			currentChunk.data += parser.template[ parser.index++ ];
 		}
 	}
 
 	parser.error( `Unexpected end of input` );
-}
-
-function getShorthandValue ( start: number, name: string ) {
-	const end = start + name.length;
-
-	return [{
-		type: 'AttributeShorthand',
-		start,
-		end,
-		expression: {
-			type: 'Identifier',
-			start,
-			end,
-			name
-		}
-	}];
-}
+}

src/shared/transitions.js

@@ -31,13 +31,21 @@ export function wrapTransition ( node, fn, params, intro, outgroup ) {
 	var obj = fn( node, params );
 	var duration = obj.duration || 300;
 	var ease = obj.easing || linear;
+	var cssText;
 
 	// TODO share <style> tag between all transitions?
 	if ( obj.css ) {
 		var style = document.createElement( 'style' );
 	}
 
-	if ( intro && obj.tick ) obj.tick( 0 );
+	if ( intro ) {
+		if ( obj.css && obj.delay ) {
+			cssText = node.style.cssText;
+			node.style.cssText += obj.css( 0 );
+		}
+
+		if ( obj.tick ) obj.tick( 0 );
+	}
 
 	return {
 		t: intro ? 0 : 1,
@@ -70,6 +78,7 @@ export function wrapTransition ( node, fn, params, intro, outgroup ) {
 			program.end = program.start + program.duration;
 
 			if ( obj.css ) {
+				if ( obj.delay ) node.style.cssText = cssText;
 				generateKeyframes( program.a, program.b, program.delta, program.duration, ease, obj.css, node, style );
 			}
 

src/validate/html/index.ts

@@ -26,6 +26,17 @@ export default function validateHtml ( validator: Validator, html: Node ) {
 			elementDepth += 1;
 
 			validateElement( validator, node );
+		} else if ( node.type === 'EachBlock' ) {
+			if ( validator.helpers.has( node.context ) ) {
+				let c = node.expression.end;
+
+				// find start of context
+				while ( /\s/.test( validator.source[c] ) ) c += 1;
+				c += 2;
+				while ( /\s/.test( validator.source[c] ) ) c += 1;
+
+				validator.warn( `Context clashes with a helper. Rename one or the other to eliminate any ambiguity`, c );
+			}
 		}
 
 		if ( node.children ) {

src/validate/html/validateElement.ts

@@ -77,6 +77,14 @@ export default function validateElement ( validator: Validator, node: Node ) {
 				validator.error( `Missing transition '${attribute.name}'`, attribute.start );
 			}
 		}
+
+		else if ( attribute.type === 'Attribute' ) {
+			if ( attribute.name === 'value' && node.name === 'textarea' ) {
+				if ( node.children.length ) {
+					validator.error( `A <textarea> can have either a value attribute or (equivalently) child content, but not both`, attribute.start );
+				}
+			}
+		}
 	});
 }
 

test/parser/samples/textarea-children/input.html

@@ -0,0 +1,3 @@
+<textarea>
+	<p>not actually an element. {{foo}}</p>
+</textarea>