implement elseif

compiler/parse/state/mustache.js

@@ -16,8 +16,7 @@ export default function mustache ( parser ) {
 		let expected;
 
 		if ( block.type === 'ElseBlock' ) {
-			// TODO need to strip whitespace from else blocks
-			block.end = start;
+			// TODO need to strip whitespace from else and elseif blocks
 			parser.stack.pop();
 			block = parser.current();
 		}
@@ -34,6 +33,16 @@ export default function mustache ( parser ) {
 		parser.allowWhitespace();
 		parser.eat( '}}', true );
 
+		while ( block.elseif ) {
+			block.end = parser.index;
+			parser.stack.pop();
+			block = parser.current();
+		}
+
+		if ( block.else ) {
+			block.else.end = start;
+		}
+
 		// strip leading/trailing whitespace as necessary
 		if ( !block.children.length ) parser.error( `Empty block`, block.start );
 		const firstChild = block.children[0];
@@ -57,7 +66,33 @@ export default function mustache ( parser ) {
 	}
 
 	else if ( parser.eat( 'elseif' ) ) {
-		throw new Error( 'TODO elseif' );
+		const block = parser.current();
+		if ( block.type !== 'IfBlock' ) parser.error( 'Cannot have an {{elseif ...}} block outside an {{#if ...}} block' );
+
+		parser.requireWhitespace();
+
+		const expression = readExpression( parser );
+
+		parser.allowWhitespace();
+		parser.eat( '}}', true );
+
+		block.else = {
+			start: parser.index,
+			end: null,
+			type: 'ElseBlock',
+			children: [
+				{
+					start: parser.index,
+					end: null,
+					type: 'IfBlock',
+					elseif: true,
+					expression,
+					children: []
+				}
+			]
+		};
+
+		parser.stack.push( block.else.children[0] );
 	}
 
 	else if ( parser.eat( 'else' ) ) {

test/compiler/if-block-elseif/_config.js

@@ -0,0 +1,23 @@
+export default {
+	data: {
+		x: 11
+	},
+
+	html: `
+		<p>x is greater than 10</p>
+	`,
+
+	test ( assert, component, target ) {
+		component.set({ x: 4 });
+		assert.htmlEqual( target.innerHTML, `
+			<p>x is less than 5</p>
+		` );
+
+		component.set({ x: 6 });
+		assert.htmlEqual( target.innerHTML, `
+			<p>x is between 5 and 10</p>
+		` );
+
+		component.teardown();
+	}
+};

test/compiler/if-block-elseif/main.html

@@ -0,0 +1,7 @@
+{{#if x > 10}}
+	<p>x is greater than 10</p>
+{{elseif x < 5}}
+	<p>x is less than 5</p>
+{{else}}
+	<p>x is between 5 and 10</p>
+{{/if}}

test/parser/if-block-elseif/input.html

@@ -0,0 +1,5 @@
+{{#if x > 10}}
+	<p>x is greater than 10</p>
+{{elseif x < 5}}
+	<p>x is less than 5</p>
+{{/if}}

test/parser/if-block-elseif/output.json

@@ -0,0 +1,113 @@
+{
+	"html": {
+		"start": 0,
+		"end": 93,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 93,
+				"type": "IfBlock",
+				"expression": {
+					"start": 6,
+					"end": 12,
+					"type": "BinaryExpression",
+					"operator": ">",
+					"left": {
+						"start": 6,
+						"end": 7,
+						"type": "Identifier",
+						"name": "x"
+					},
+					"right": {
+						"start": 10,
+						"end": 12,
+						"type": "Literal",
+						"value": 10,
+						"raw": "10"
+					}
+				},
+				"children": [
+					{
+						"start": 16,
+						"end": 43,
+						"type": "Element",
+						"name": "p",
+						"attributes": [],
+						"children": [
+							{
+								"start": 19,
+								"end": 39,
+								"type": "Text",
+								"data": "x is greater than 10"
+							}
+						]
+					}
+				],
+				"else": {
+					"start": 60,
+					"end": 86,
+					"type": "ElseBlock",
+					"children": [
+						{
+							"start": 60,
+							"end": 93,
+							"type": "IfBlock",
+							"elseif": true,
+							"expression": {
+								"start": 53,
+								"end": 58,
+								"type": "BinaryExpression",
+								"operator": "<",
+								"left": {
+									"start": 53,
+									"end": 54,
+									"type": "Identifier",
+									"name": "x"
+								},
+								"right": {
+									"start": 57,
+									"end": 58,
+									"type": "Literal",
+									"value": 5,
+									"raw": "5"
+								}
+							},
+							"children": [
+								{
+									"start": 60,
+									"end": 62,
+									"type": "Text",
+									"data": "\n\t"
+								},
+								{
+									"start": 62,
+									"end": 85,
+									"type": "Element",
+									"name": "p",
+									"attributes": [],
+									"children": [
+										{
+											"start": 65,
+											"end": 81,
+											"type": "Text",
+											"data": "x is less than 5"
+										}
+									]
+								},
+								{
+									"start": 85,
+									"end": 86,
+									"type": "Text",
+									"data": "\n"
+								}
+							]
+						}
+					]
+				}
+			}
+		]
+	},
+	"css": null,
+	"js": null
+}