Svelte Lexer Improvements (#478)

Author: CIAvash

Diff for: README.md

@@ -53,7 +53,7 @@ O | Objective-C, OCaml, Octave, OpenSCAD, Org Mode
 P | PacmanConf, Perl, PHP, PHTML, Pig, PkgConfig, PL/pgSQL, plaintext, Pony, PostgreSQL SQL dialect, PostScript, POVRay, PowerShell, Prolog, PromQL, Protocol Buffer, Puppet, Python, Python 3
 Q | QBasic
 R | R, Racket, Ragel, Raku, react, ReasonML, reg, reStructuredText, Rexx, Ruby, Rust
-S | SAS, Sass, Scala, Scheme, Scilab, SCSS, Smalltalk, Smarty, Snobol, Solidity, SPARQL, SQL, SquidConf, Standard ML, Stylus, Swift, SYSTEMD, systemverilog
+S | SAS, Sass, Scala, Scheme, Scilab, SCSS, Smalltalk, Smarty, Snobol, Solidity, SPARQL, SQL, SquidConf, Standard ML, Stylus, Svelte, Swift, SYSTEMD, systemverilog
 T | TableGen, TASM, Tcl, Tcsh, Termcap, Terminfo, Terraform, TeX, Thrift, TOML, TradingView, Transact-SQL, Turing, Turtle, Twig, TypeScript, TypoScript, TypoScriptCssData, TypoScriptHtmlData
 V | VB.net, verilog, VHDL, VimL, vue
 W | WDTE

Diff for: lexers/s/svelte.go

@@ -22,18 +22,52 @@ var Svelte = internal.Register(DelegatingLexer(h.HTML, MustNewLazyLexer(
 func svelteRules() Rules {
 	return Rules{
 		"root": {
-			{`(<\s*script\s*lang\s*=\s*['"](?:ts|typescript)['"]\s*>)(.+?)(<\s*/\s*script\s*>)`, ByGroups(Other, Using(t.TypeScript), Other), nil},
-			{`\{`, Punctuation, Push("templates")},
-			{`[^{]`, Other, nil},
+			// Let HTML handle the comments, including comments containing script and style tags
+			{`<!--`, Other, Push("comment")},
+			{
+				// Highlight script and style tags based on lang attribute
+				// and allow attributes besides lang
+				`(<\s*(?:script|style).*?lang\s*=\s*['"])` +
+					`(.+?)(['"].*?>)` +
+					`(.+?)` +
+					`(<\s*/\s*(?:script|style)\s*>)`,
+				UsingByGroup(internal.Get, 2, 4, Other, Other, Other, Other, Other),
+				nil,
+			},
+			{
+				// Make sure `{` is not inside script or style tags
+				`(?<!<\s*(?:script|style)(?:(?!(?:script|style)\s*>).)*?)` +
+					`{` +
+					`(?!(?:(?!<\s*(?:script|style)).)*?(?:script|style)\s*>)`,
+				Punctuation,
+				Push("templates"),
+			},
+			// on:submit|preventDefault
+			{`(?<=\s+on:\w+(?:\|\w+)*)\|(?=\w+)`, Operator, nil},
+			{`.+?`, Other, nil},
+		},
+		"comment": {
+			{`-->`, Other, Pop(1)},
+			{`.+?`, Other, nil},
 		},
 		"templates": {
 			{`}`, Punctuation, Pop(1)},
+			// Let TypeScript handle strings and the curly braces inside them
+			{`(?<!(?<!\\)\\)(['"` + "`])" + `.*?(?<!(?<!\\)\\)\1`, Using(t.TypeScript), nil},
+			// If there is another opening curly brace push to templates again
+			{"{", Punctuation, Push("templates")},
 			{`@(debug|html)\b`, Keyword, nil},
-			{`(#|/)(await|each|if)\b`, Keyword, nil},
+			{
+				`(#await)(\s+)(\w+)(\s+)(then|catch)(\s+)(\w+)`,
+				ByGroups(Keyword, Text, Using(t.TypeScript), Text,
+					Keyword, Text, Using(t.TypeScript),
+				),
+				nil,
+			},
+			{`(#|/)(await|each|if|key)\b`, Keyword, nil},
 			{`(:else)(\s+)(if)?\b`, ByGroups(Keyword, Text, Keyword), nil},
 			{`:(catch|then)\b`, Keyword, nil},
-			{`then\b`, Keyword, nil},
-			{`[^}]+`, Using(t.TypeScript), nil},
+			{`[^{}]+`, Using(t.TypeScript), nil},
 		},
 	}
 }

Diff for: lexers/testdata/svelte.actual

@@ -20,14 +20,67 @@
 	}
 </style>
 
+<style lang="sass">
+$color: red
+h1
+  color: $color
+  font-family: Arial, Helvetica, sans-serif
+  font-size: 2em
+</style>
+
 <h1>Hello {name}!</h1>
 <img {src} alt="Example image">
 
 <!-- import external component -->
 <Nested/>
 
 <ul>
-	{#each names as { id, name }}
-		<li>{name} ({id})</li>
+    {#each names as { id, name }, i}
+	<li>{name} ({id})</li>
 	{/each}
 </ul>
+
+<template>
+    <form on:submit|preventDefault="{submitSearch}">
+        <input type="search" bind:value="{name}" required />
+        <button type="submit">Search</button>
+    </form>
+
+    {#if porridge.temperature > 100}
+	<p>too hot!</p>
+    {:else if 80 > porridge.temperature}
+	<p>too cold!</p>
+    {:else}
+	<p>just right!</p>
+    {/if}
+
+    {#await promise}
+	<!-- promise is pending -->
+	<p>waiting for the promise to resolve...</p>
+    {:then value}
+	<!-- promise was fulfilled -->
+	<p>The value is {value}</p>
+    {:catch error}
+	<!-- promise was rejected -->
+	<p>Something went wrong: {error.message}</p>
+    {/await}
+
+    {#await promise then value}
+	<p>The value is {value}</p>
+    {/await}
+
+    {#await promise catch error}
+	<p>The error is {error}</p>
+    {/await}
+
+    {#key value}
+	<div transition:fade>{value}</div>
+    {/key}
+
+    <div class="blog-post">
+	    <h1>{post.title}</h1>
+	    {@html post.content}
+    </div>
+
+    {@debug user}
+</template>