Another Frontend Framework: Svelte with TypeScript

Recently I implemented svelte-draft , which is another way to add complete typescript support to svelte. I rewrote almost all examples in https://svelte.dev/tutorial and the result is repo svelte-draft-tutorial .

The solution is different from others in that it’s in language level, instead of writing tools such as preprocessor, svelte-draft itself is implemented in TypeDraft , which is a superset of typescript with built-in support for DSL extension, code transformation and literate programming.

Language support for reactivity

In example 2-reactivity/reactive-statements , we don’t need to use “$” to denote reactivity, instead we use DSL “watch”. The intention is clear here: watch count, if changed, execute the following statements.

React style component

We still use the React way to write component, and we don’t need to return JSX, just write it as is.

JSX as Template

We use JSX, but in template way, see examples in 4-logic :

We have “await ” tag to deal with promise, which is intuitive and straightforward:

And traditional “if” and “for” logic:

Slot

We can use slot with full power of typescript as well!

Transition & Animation

Let’s take transition as an example: 10-transitions/transition :

Return 0

That’s the basics of svelte-draft , and we also have template project and TodoMVC implementation .

Any feedback is welcome! :)