change :elseif to :else if - fixes #2137

src/parse/state/mustache.ts

@@ -86,12 +86,23 @@ export default function mustache(parser: Parser) {
 
 		block.end = parser.index;
 		parser.stack.pop();
-	} else if (parser.eat(':elseif')) {
+	} else if (parser.eat(':else')) {
+		if (parser.eat('if')) {
+			parser.error({
+				code: 'invalid-elseif',
+				message: `'elseif' should be 'else if'`
+			});
+		}
+
+		parser.allowWhitespace();
+
+		// :else if
+		if (parser.eat('if')) {
 			const block = parser.current();
 			if (block.type !== 'IfBlock')
 				parser.error({
 					code: `invalid-elseif-placement`,
-				message: 'Cannot have an {:elseif ...} block outside an {#if ...} block'
+					message: 'Cannot have an {:else if ...} block outside an {#if ...} block'
 				});
 
 			parser.requireWhitespace();
@@ -118,7 +129,10 @@ export default function mustache(parser: Parser) {
 			};
 
 			parser.stack.push(block.else.children[0]);
-	} else if (parser.eat(':else')) {
+		}
+
+		// :else
+		else {
 			const block = parser.current();
 			if (block.type !== 'IfBlock' && block.type !== 'EachBlock') {
 				parser.error({
@@ -138,6 +152,7 @@ export default function mustache(parser: Parser) {
 			};
 
 			parser.stack.push(block.else);
+		}
 	} else if (parser.eat(':then')) {
 		// TODO DRY out this and the next section
 		const pendingBlock = parser.current();

test/parser/samples/if-block-elseif/input.svelte

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

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

@@ -1,12 +1,12 @@
 {
 	"html": {
 		"start": 0,
-		"end": 88,
+		"end": 89,
 		"type": "Fragment",
 		"children": [
 			{
 				"start": 0,
-				"end": 88,
+				"end": 89,
 				"type": "IfBlock",
 				"expression": {
 					"type": "BinaryExpression",
@@ -45,45 +45,45 @@
 					}
 				],
 				"else": {
-					"start": 57,
+					"start": 58,
-					"end": 83,
+					"end": 84,
 					"type": "ElseBlock",
 					"children": [
 						{
-							"start": 57,
+							"start": 58,
-							"end": 88,
+							"end": 89,
 							"type": "IfBlock",
 							"elseif": true,
 							"expression": {
 								"type": "BinaryExpression",
-								"start": 51,
+								"start": 52,
-								"end": 56,
+								"end": 57,
 								"left": {
 									"type": "Identifier",
-									"start": 51,
+									"start": 52,
-									"end": 52,
+									"end": 53,
 									"name": "x"
 								},
 								"operator": "<",
 								"right": {
 									"type": "Literal",
-									"start": 55,
+									"start": 56,
-									"end": 56,
+									"end": 57,
 									"value": 5,
 									"raw": "5"
 								}
 							},
 							"children": [
 								{
-									"start": 59,
+									"start": 60,
-									"end": 82,
+									"end": 83,
 									"type": "Element",
 									"name": "p",
 									"attributes": [],
 									"children": [
 										{
-											"start": 62,
+											"start": 63,
-											"end": 78,
+											"end": 79,
 											"type": "Text",
 											"data": "x is less than 5"
 										}
@@ -95,8 +95,5 @@
 				}
 			}
 		]
-	},
+	}
-	"css": null,
-	"instance": null,
-	"module": null
 }

test/runtime/samples/dynamic-component-slot/main.svelte

@@ -17,7 +17,7 @@
 
 	{#if foo}
 		<p>foo</p>
-	{:elseif bar}
+	{:else if bar}
 		<p>bar</p>
 	{:else}
 		<p>neither foo nor bar</p>

test/runtime/samples/if-block-elseif-no-else/main.svelte

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

test/runtime/samples/if-block-elseif-text/main.svelte

@@ -1 +1 @@
-before-{#if x > 10}if{:elseif x < 5}elseif{:else}else{/if}-after
+before-{#if x > 10}if{:else if x < 5}elseif{:else}else{/if}-after

test/runtime/samples/if-block-elseif/main.svelte

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

test/runtime/samples/if-block-outro-nested-else/main.svelte

@@ -7,7 +7,7 @@
 {#if foo}
 	{#if false}
 		<Component/>
-	{:elseif false}
+	{:else if false}
 		<Component/>
 	{/if}
 {/if}

test/runtime/samples/transition-js-if-elseif-block-outro/main.svelte

@@ -17,6 +17,6 @@
 
 {#if x}
 	<div bind:this={yes} out:foo>yes</div>
-{:elseif y}
+{:else if y}
 	<div bind:this={no} out:foo>no</div>
 {/if}