A love story of Svelte and JSX 💖

Anyone who is a web developer has come across Svelte and JSX at some point in their life. Wait! What are they and what is the love story between them? 🤔 In this blog post, I will give you a brief introduction to them and tell you their secret affair which only very few know. 🤫

Svelte is a revolutionary technology in the web space. Unlike other popular UI libraries and frameworks like React and Vue, which use VDOM for UI, Svelte is a compiler which compiles the svelte code into highly optimized vanilla JavaScript code. 🚀

On the other hand, JSX is an extended version (syntactic sugar) of JavaScript, originally proposed and used by the React team in their React library. JSX enables us to write HTML-like markup directly into JavaScript and makes things more simple than ever before. 🙌

Despite their divergent methods, Svelte and JSX complement each other nicely. 💛

For Svelte files in your editor, the Svelte language tools and its VS Code extension offer capabilities like syntax highlighting, formatting, linting, auto-completion, type checking, and many more. 💻

How do they do that?

By using JSX! 🤯

What am I talking about now? Svelte is built completely differently from JSX, but what’s with my statement? Actually, many don’t know that Svelte secretly uses/borrows JSX features for its rich Developer Experience. We all know that currently most of the code editors and IDEs provide auto-completions and type checking out of the box. We have a very strong and reliable type checking and auto-completions in JavaScript and TypeScript, thanks to the wonderful magic done by TypeScript. ✨

In the initial stages of Svelte, when it started getting some traction, most of the developers who transitioned from other frameworks and libraries wanted to have those features in Svelte as well. To maintain and increase their retention rate, the Svelte team was cornered to make Svelte also have those features. What they decided to use is quite clever. Instead of building things from scratch, they used lots of existing independent and separate open source projects into one single project for their language server. One of such projects is halfnelson/svelte2tsx.

svelte2tsx 🤔🤔🤔

svelte2tsx is a transpiler that transpiles Svelte code into a valid TypeScript code, which is later consumed by the TypeScript language server. Then, finally, we get our fancy type-checking and auto-completions. 🎉

But how does it work? svelte2tsx converts Svelte components to TSX (TypeScript + JSX) for type checking. The TSX can be type checked using the included svelte-jsx.d.ts and svelte-shims.d.ts files. It also handles Svelte-specific syntax such as reactive declarations, stores, slots, etc.

svelte2tsx is a core part of the Svelte language tools and its VS Code extension. It enables features like syntax highlighting, formatting, linting, diagnostics, and more for Svelte files in your editor

import svelte2tsx from 'svelte2tsx';

const svelteCode = `
<script lang="ts">
export let h: boolean = false;
</script>

{#if h}
h is True
{:else}
h is False
{/if}
`;
const {code: tsxCode} = svelte2tsx(svelteCode);

console.log(tsxCode);
/*
///<reference types="svelte" />
<></>;function render() {

 let h: boolean = false;h = __sveltets_any(h);;
;
() => (<>

{(h) ? <>
h is True
</> : <>
h is False
</> }</>);
return { props: {h: h}, slots: {}, getters: {}, events: {} }}

export default class extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
}
*/

Play with this Svelte → TSX here

This is a clever and inventive approach of giving Svelte IDE functionality without reinventing the wheel. It also demonstrates how, despite their seeming hostility, Svelte and JSX can coexist together. 🤝

I hope this blog post has given you some interesting and fun insights into Svelte and JSX. If you want to learn more, I recommend checking out their official websites: 🌐

• https://svelte.dev
• https://github.com/sveltejs/language-tools
• https://react.dev/learn/writing-markup-with-jsx

Happy coding! 🎉