loading...
Cover image for The simplest Svelte component is an empty file

The simplest Svelte component is an empty file

jesseskinner profile image Jesse Skinner Originally published at codingwithjesse.com Updated on ・3 min read

I discovered something while refactoring my Svelte code that blew my mind:

Being able to use an empty file as a Svelte component was useful during refactoring, because I could just create a placeholder file for the new component, import it and start using it:

<script>
import Empty from './empty.svelte';
</script>

<Empty/>

Sure, it didn't do anything, but it didn't break either.

I think this is very symbolic of what makes Svelte so groundbreaking and powerful. Let's dig deeper and see what this small benefit can teach us about Svelte.

A Svelte component is a file

With Svelte, components and files have a one-to-one relationship. Every file is a component, and files can't have more than one component. This is generally a "best practice" when using most component frameworks. Perhaps this practice comes from the practice of having each class in a separate file in languages like Java or C++.

By enforcing this practice, Svelte can make some assumptions that simplify your code. That brings me to the next observation.

No boilerplate, just make a new file

In most component frameworks, you need to write some code to define your component. With React, the simplest component is an empty function. In other frameworks, you need to import a library and call a special function to define and create your component. With Svelte, you just create a new .svelte file.

The Svelte compiler will take each file and generate a component for it automatically. And that brings us to another important observation.

You don't need Svelte to use a Svelte component

In order to mount a React component, you need to import react-dom. Using a Vue component requires the Vue library. An Angular application absolutely requires loading the Angular framework.

Svelte, on the other hand, is a compiler. In a way, Svelte is more like a programming language than a library. When you're programming in JavaScript, you don't need to import something to use a for loop. Similarly, you don't need to import anything in your Svelte code to use Svelte's template syntax. Your Svelte files get compiled into Javascript and CSS. It's a very different approach.

You might guess that an empty file would compile into an empty JavaScript file, but every Svelte component comes with an API that allows you to use it outside of Svelte and mount it into the DOM. Here's what it looks like to use a compiled Svelte component:

import Empty from './empty.js';

const empty = new Empty({
  target: document.body,
  props: {
    // if we had some, they'd go here
  }
});

If we compile our empty component and bundle it with Svelte internals, it ends up being 2,080 bytes uncompressed, and 1,043 bytes gzipped. So the overhead for using Svelte ends up being only a kilobyte. Compare that to other frameworks that require 10x or 100x that many bytes just to mount an empty component!

Svelte is a new paradigm

At first glance, being able to use an empty file as a component seems like a silly, impractical gimmick. But looking deeper, I think it teaches us a lot about how Svelte differs from most if not all JavaScript component frameworks that came before it.

I imagine it will inspire other framework developers to take a similar approach and reap some of the same benefits. This is the kind of shift in thinking that changes things permanently. Svelte is not just a new framework, but a complete paradigm shift.


Interested in Svelte and web development? Subscribe to the Coding with Jesse newsletter!

Discussion

pic
Editor guide
Collapse
seanmclem profile image
Seanmclem

I'm not sure why, but it makes me want to try out svelte even less than before

Collapse
jesseskinner profile image
Jesse Skinner Author

Interesting, care to elaborate?

Collapse
seanmclem profile image
Seanmclem

I'm just not sure I could jive with a language where 2 or 3 lines of code to initialize a component is just too much boilerplate. My issues with svelte have been mostly philosophical. The problems it tries to solve are not really problems for me. I don't really like the syntax.

Thread Thread
jesseskinner profile image
Jesse Skinner Author

Ah, I don't know if two lines of code is too much boilerplate. I love React functional components for their lack of boilerplate. But having zero boilerplate, I find really interesting.

I know where you're coming from when it comes to syntax, that's such a personal thing. For example I like a lot of things about Vue, but I've never liked the template syntax with Vue-specific html attributes, and that was enough to keep me from ever trying it out.

Collapse
eisenbergeffect_97 profile image
Rob Eisenberg

The simplest Aurelia component is also an empty file. We have something called "HTML-only Components" which our community has been using for about 4.5 years. So, this isn't a new idea. Svelte is coming along with their version quite a few years after a popular framework has already done that. Additionally, the Aurelia components don't require a build step. They can work completely in browser at runtime, using fully standard-based HTML and JavaScript. No special compilation needed.

Collapse
jesseskinner profile image
Jesse Skinner Author

Good point. I've used HTML-only templates in that way in the past with RequireJS' text plugin, or jQuery's .load function for loading partial HTML snippets from the server, and it was also nice to be able to start with an empty file there too.

Collapse
patrickgrey profile image
Patrick Grey

Stupid question but how do you compile your .svelte files to get the empty.js file which you can load into an HTML page with:

import Empty from './empty.js';

const empty = new Empty({
  target: document.body,
  props: {
    // if we had some, they'd go here
  }
});

I used the component-template and built it but the compiled file threw errors when I called it from the code above in an index.js file, linked to in an HTML file. Have I got this all completely wrong (very possible...). Thanks for the great article anyway.

Collapse
jesseskinner profile image
Jesse Skinner Author

Perhaps you need to add type="module" to the <script> tag in your HTML file? The import syntax requires this.

Collapse
murunwas profile image
murunwas

I love svelte soo much... Simple state management unlike react-redux or vuex.

Again, you can use svelte components in react or vue project

Collapse
jesseskinner profile image
Jesse Skinner Author

Absolutely. Since Svelte components are effectively just Vanilla JavaScript, you can use them anywhere :D

Collapse
isaacdlyman profile image
Isaac Lyman

This is very cool, for exactly the reason you say - it's nice to not have to plop in a bunch of boilerplate when you're putting in a placeholder component. I'm going to have to try out Svelte soon.

Collapse
jesseskinner profile image
Jesse Skinner Author

Check out the REPL for a really easy way to play with Svelte in your browser: svelte.dev/repl