Svelte plugin details
Svelte plugin ready
Svelte as a web development framework was quite unknown to me.
And I found it very pleasant to work with.
Also their packaging takes the cake. It is really easy to package a svelte plugin and the development is also quite pleasant.
In this article we shall see how the plugin was implemented for HTML5 upload functionality.
Plugin architecture
Svelte uses several files.
- ProgressUp.svelte
- tab1.svelte
- tab2.svelte
- tab3.svelte
- tab4.svelte
- store.ts
This is a really nice way of dividing up each tab’s code.
I also use store.ts which significantly reduces code reuse.
How it works?
Svelte has reactivity built into its coding and you only have to use the storable properly and you will get it going.
How to use it?
The stackblitz link has the instructions and help needed.
In short, just installing using npm or yarn like this will get you started.
$ yarn install progress-up-svelte
or
$ npm install progress-up-svelte
Then just put this inside the HTML source the tags needed and you are done.
<progress-up></progress-up>
Challenges
For svelte the rendering issues were minor.
And the documentation pretty good.
Still it had to be learnt as I was quite new to svelte syntax.