Razor Like Template Syntax For Svelte

[Acmion]

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

[Conduitry]

Being able to pull in all features of the language like this is only useful when you are constructing all of the document at once - for example, during server-side rendering or when you are doing something like a virtual DOM where you re-construct the whole tree when there's any change. The compiler needs to have a lot more knowledge about what's happening in the template in order for it to do selective reactive updates in the browser when the application state changes.

So, we wouldn't want to allow the full JS language to be accessible here because we'd lose out on a ton of optimizations that we can currently make, and this would just be another competing syntax that would offer the same features - which is something we don't want to support.

[DaniAcu]

Hi! I was searching some discussion about the template syntax feedback from the community. Despite the fact that allowed the js in template is completely another topic I would like to know if svelte 5 or any future version has a review of the template syntax.
Specially when the approuch of svelte still beeing "You only need to know Js, Css and Html", and I feel a template syntax that angular made more js friendly that the svelte.
Specially for the symbols used and the keywords.

https://angular.dev/guide/templates/control-flow

I love this project, I would like to know about the decisions behind this template syntax.

Thanks in advance! 😊