Description
Describe the problem
Svelte's templating syntax is really nice and useful, but it is essentially it's own language. This means that web developers will essentially have to learn at least 4 languages to be able to use Svelte: JS, HTML, CSS and the Svelte Template Language.
Additionally, new features of the JS language will create pressure on maintainers to reimplement those features (or equivalent features) in the Svelte Template Language. See for example the discussion about introducing a range block, the addition of {@const} and some issues with {#each} and iterables.
ASP.NET (C#) solved this problem by introducing something called Razor syntax. The Razor syntax allows developers to switch between C# and HTML easily without developing a new language around templating. Read more here about the Razor syntax.
In essence, the Razor syntax brings the full power of the programming language to HTML templating, without extra effort.
This would be useful in lots of cases, although the addition of {@ const} does cover most of them.
Describe the proposed solution
The Razor like syntax enables context switching between JS and markup with the @ sign and tags (e.g. div). This means that components could be written like this:
<script>
var data = [1, 2, 3, 4, 5]
</script>
<!-- HTML context -->
<h2>This Is the Data</h2>
<!-- JS context begins -->
@for(var d of data)
{
// Still JS context
var dSquared = 0
for(var i = 0; i < d; i++)
{
dSquared += d
}
var dSquaredAlt = d * d
// HTML context begins
<div>d * d = @d * @d = @dSquared = @dSquaredAlt = @(d * d)</div>
// HTML context begins
<h3>Factorial Factors</h3>
<div>
<!-- JS context begins -->
@for(var i = d; i > 0; i--)
{
// HTML context begins
<span>@i</span>
}
</div>
}
How does this differ from JSX? The main difference is that in JSX you essentially have to "return" the HTML, while it in Razor is implicitly handled. Additionally, the Razor syntax has less limitations on how you use the language. Most importantly, it is more Svelte like than JSX.
Alternatives considered
JSX is an alternative in certain cases.
This could be implemented as a plugin.
Importance
would make my life easier