Nimiq Stores for SvelteJS

Hello everyone!

as a side-project, I created reactive Nimiq stores for the SvelteJS framework.

What is SvelteJS?

SvelteJS is a compiled front-end framework, which has been around for a few years, but completely redesigned itself with version 3 not too long ago. It is a reactive front-end framework with the same goals as React and Vue, but instead of shipping a big runtime library to the browser, this framework compiles an app with only the minimal required code and can thus have a much much smaller download size and better performing DOM updates. Granted, its feature set is smaller than React and Vue, but it also requires much less code.

I recommend to go through the tutorial, which explains Svelte’s concepts step-by-step:

What are Nimiq Stores for Svelte?

Similar to Redux in React, or Vuex in Vue, Svelte also has the concept of app-wide stores that hold state which can be used from all components. These stores are very simple ES6 functional modules that can be extended and combined to do nearly anything, and they are often compared to React Hooks as well.

Nimiq Svelte Stores wrap the Nimiq Client API (available in Nimiq Core v1.5) and provide blockchain state to Svelte apps through these stores, automatically handling network subscriptions for consensus, balances, transactions, etc. and updating state live. That means you don’t have to write any of this code!

Have a look at the example app:
https://nimiq-svelte-stores.netlify.com
and the code for it:

If you have any questions about Svelte or these stores, please ask!

Happy coding!
Sören

5 Likes

I just released version 1.1.0, now with Typescript types!

Nothing changes on how you use the library, but now your editor can automatically pick up the types for the stores, and TS can compile with the correct types.

2 Likes