In the following post I will show how to create a treeview using Svelte. I will also compile the treeview with the closure compiler (ADVANCED_OPTIMIZATION).
I randomly heard about Svelte on Twitter. The concept behind Svelte seemed pretty interesting, so I decided to give it a try.
This is in some ways similar to Ahead of Time compilation in Angular, but one major difference is that you don't have to ship any framework bits with your application.
The compiler ships with a CLI that can be installed by running
Below is the template for my treeview:
In all my previous treeview implementations I've used a recursive template with a tag based self reference.
Svelte's approach to creating recursive templates is using a :Self tag.
:Self effectively allows you to create a template where the component calls itself.
Next I am including the treeview component in my main App component:
Finally I have wired up the App component.
All I am doing here is make an instance of the App component and add it to the page.
To do the bundling I am using Rollup since it makes it very easy to create optimized application bundles.
In addition to regular application bundling I also wanted to see how compatible Svelte is with the closure compiler. Specifically I was interested in the closure compiler's ADVANCED_OPTIMIZATION.
However, here is good news if you are using Svelte!
The fact that there is no runtime is also good for closure since you don't have to worry about the runtime being incompatible with closure, which is likely if it was not written with the closure compiler in mind.
Obviously this is just a simple implementation and I have only scratched the surface of Svelte.
I am definitely very inexperienced with Svelte, but I already see a lot of merit to the idea behind the framework. I particularly love how well it works with the closure compiler.
As you can tell from the demo, my closure compiled treeview is only 2.8kb :-)