5 outcomes from building a Chrome extension with Svelte
Tags: svelte, chrome, extension
Published: 2020-03-12 17:37:11

Even though I was happy with React and a huge fun of Vue, I still wanted to check out what's Svelte and why it is so awesome. And since the best way to try a tool is by building something with it, I decided to build a small Chromium extension (actually for the awesome Microsoft Edge browser). You can find sources [here](https://github.com/LexSwed/edge-translate) and my learnings in this article.

## What's Svelte?

First things first, a quick introduction of Svelte. I will cite [this awesome article by @bholmesdev](https://dev.to/bholmesdev/why-sveltejs-may-be-the-best-framework-for-new-web-devs-205i)

>So let's go over some of the main selling points for learning web development with Svelte:
- It's a component-based framework with 0 extra plugins
- It handles state management without all the usual cruft
- It uses scoped styling without needing CSS-in-JS (so no editor extensions or wacky syntax)
- It only needs a dead simple build script to get going
- Hardly any files are needed in a base project

And give you some example:

![Svelte Counter](https://dev-to-uploads.s3.amazonaws.com/i/s5drolze8dn0j80uk2lc.png)
<figcaption><a href="https://svelte.dev/repl/5d2edc49838f479eb1a784be0cb01f43?version=3.10.0" target="_blank" rel="noopener noreferrer">The source</a> in Svelte REPL</figcaption>

## How's experience?

### You should go over Svelte Tutorial at least once

[Svelte Tutorial](https://svelte.dev/tutorial/basics) is an awesome place to learn everything you need to start building apps. At first, you will probably need some patience, annoyed by HTML-template helpers. For Vue fans it's avoiding the question "Why not use the same directives as Vue does?" and for React fans it's "Why to use it at all?". But keep going and you'll get to the point when the magic of Svelte makes you feel its power.
But even after the tutorial, you will need to google sometimes, for example how to spread undeclared props to the root of your component.

### Initial setup

I heard already about React fatigue, which is understandable, having all these [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.org/), [Redwood](https://redwoodjs.com/), various CSS-in-JS solutions, appearing [data management solutions](https://github.com/tannerlinsley/react-query) and upcoming React features. But it's just picking the tool. With Svelte you don't have much choice but cloning the [official template](https://github.com/sveltejs/template) which uses `rollup`, but you can find `Webpack` configs as well.

However, there is no [`vue-cli`](https://cli.vuejs.org/) or `create-react-app` alternative that hides the setup from you. If you just learn Svelte – it's okay. But as soon as you start building something, you need to dig in. And so instead of building the product straight away, maybe tweaking some [plugins](https://cli.vuejs.org/guide/plugins-and-presets.html), you start learning rollup and how it works with Svelte, and there aren't many resources. For example, I still didn't figure out how to generate `.html` file with included `<script>`'s and `<link>`'s. At least in my case, I didn't find how to have `css` files generated by `rollup-plugin-svelte` listed in my custom plugin's `onGenerateBundle` hook (hence none of the existing plugins can't include `link` to `css`, there is no such file). I guess it's me not knowing `rollup` though.

I don't want much from young framework, but it's very frustrating when I want to work on my app but instead have to spend time Googling how to setup something and do not find it. Shout out to [`parcel`](https://parceljs.org/), [`Next.js`](https://nextjs.org/) and others for making our lives easier.

### `eslint` + `prettier` + `svelte` = ❓

After few attempts I didn't manage to make [`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier) work with `.svelte` files. It continuously complained on bindings in `html` syntax, taking it as `js` and so trying to add semicolons.

`eslint` also has no way to understand that `Svelte` creates magic variables for you. Here I import `text`, which is a `writable` from `svelte/store` and use it in my JS as `$text` to extract its value.

![eslint issue](https://dev-to-uploads.s3.amazonaws.com/i/2y5c0i4b3zskswttdqcb.png)

Because (citation from [Svelte Tutorial](https://svelte.dev/tutorial/auto-subscriptions)):
>Any name beginning with $ is assumed to refer to a store value. It's effectively a reserved character — Svelte will prevent you from declaring your own variables with a $ prefix.

Prettier itself works flawlessly, you can even setup how to arrange `<script>`, `<style>` and `template` blocks in `.svelte` files (which maybe isn't a good thing, as it's one more thing to agree with the team on)

### No TypeScript yet

The popularity of TypeScript is only growing and I've been a huge fan of it. It was the first thing I've searched after scaffolding the project, but it isn't there yet. There is a [proposed solution](https://github.com/sveltejs/svelte/issues/4518), so let's hope we will see a full support at some point.

### Too late to be young

Usually, I support the appearance of new libraries and frameworks since they all bring something new and shiny, something that popular frameworks can borrow, some functionality or ideas. I liked how different CSS-in-JS solutions continuously [regress to the mean](https://en.wikipedia.org/wiki/Regression_toward_the_mean) in terms of features and performance, making it possible to have few final solutions at some point. The same goes to React and Vue. You can build your business logic [separated from your UI](https://xstate.js.org/docs/) and use very similar hooks (I'm sure you can write a babel plugin that will make your hooks reusable for both frameworks).
But on the field of FE frameworks you have to propose something very different, like [`Flutter for Web`](https://flutter.dev/web). It enables you to have native apps on many platforms. And what I love the most - you don't have to design your components and you most probably won't screw up with theming, as Flutter provides you all needed widgets.
React is making huge promises with [`Suspense`](https://reactjs.org/docs/concurrent-mode-suspense.html) improving end-user and developer experience. Vue.js is [soon to release `3.0`](https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf) with hooks and load of optimizations and features. And many other frameworks continuously improve. Svelte on the other hand is still very young and I don't see how big companies can start betting on it. Vue.js is still considered by some as a niche framework, even being extremely popular.
The issue is obvious: being young means having no usage examples, best practices, learning resources. How do I build my stores? How do I scale and reuse routes? Which component library to use? How to build an accessible Select component? How to build static pages? While all these questions will be answered and the "ecosystem" will be developed, other FE frameworks will be way ahead.