Blog
Announcing v1

Announcing micro-stacks v1 and more!

Today I'm very happy to announce the release of micro-stacks@1.0.0 (and a bunch of new libraries)!

This has been a nights and weekends project for me for over a year and a half, first starting as a project to better understand the inner-workings of Stacks and to be able to build apps with modern frontend tooling like Vite, Parcel, and SkyPack.

Now micro-stacks is widely considered to be the go-to JavaScript tooling for building modern, robust Stacks applications and libraries, used by the fine folks at Gamma, Ryder, StackerDAOs, CityCoins, Mechanism, Zest, Magic, and more everyday.

With this release, there are many important updates that I'm excited to share!

tl;dr

  • micro-stacks@1.0.0 - stable, audited release
  • new @micro-stacks/client library for managing app-state
  • new framework specific bindings:
    • React - @micro-stacks/react
    • Svelte - @micro-stacks/svelte
    • Vue - @micro-stacks/vue
    • Solidjs - @micro-stacks/solidjs
  • brand new docs -> check them out!
  • new guides, example projects, and npx create-ustx

New client library

While working on earlier versions of the library, there has always been just one package: micro-stacks. This package contains many sub-modules that are separate, and are broken out based on function, e.g.: micro-stacks/clarity for handling Clarity related stuff, micro-stacks/transactions for Stacks transactions, etc. This is great when you know what each module does, but it's less great when you have no idea and there aren't docs explaining all the different functions and what they do. Often I would get feedback from folks that there were too many things to have to think about when wanting to accomplish the common functionality that is found in all Stacks apps: authentication, transaction signing, and using Gaia.

With that in mind, I wanted to create a new abstraction on top of the more primitive libraries that would make these functions really easy to use, while also pushing developers towards building apps with more of a focus towards user experience. What I mean by this are things like properly handling sessions in the context of server side rendered applications, or providing feedback when certain actions happen, such as authenticating or signing a transaction.

This abstraction is a new library: @micro-stacks/client. This package is what handles all user session state within Stacks apps, exposes easy-to-use functions that make use of the current user session like signing transactions, signing messages, Gaia related functions, and encryption/decryption.

This package is the foundation for all framework-specific bindings and provides a much better developer-experience when compared to implementing these functions by hand with the lower-level micro-stacks package.

New framework-specific libraries

With the creation of @micro-stacks/client, we now have a much higher ability to create framework specific libraries for micro-stacks. This means we now have first-class support for all major JavaScript frameworks: React, Jotai, Preact, Svelte, Vue, and even Solid.js.

The API between the framework-specific libraries are all very similar, so if you're working on multiple projects that have different requirements, you don't need to re-learn how to interact with micro-stacks.

The framework-specific libraries all use the best-practices for each specific framework, offering reactive state values and performant functions to accomplish everything you need when building apps: authentication, transaction signing, message signing, storage, and more!

Starter kits

In addition to new framework-specific libraries, there are now up-to-date examples for all of these frameworks. You can explore the source files for these projects here.

In addition to viewing the examples on GitHub, you can quickly create a new Stacks app with the command npx create-ustx or with your package manager of choice:

pnpm create ustx

Example projects

React & Preact

React has always been widely supported by micro-stacks, but now there are specific examples and design choices made to support new features like React 18 concurrent mode and more!

Vue

Vue is a very popular frontend framework that many Stackers want to use to build out Stacks apps. @micro-stacks/vue exposes the same API as the React bindings, but made for Vue and the reactive stores found within Vue.

  • Vue (javascript)
  • Vue (typescript)
  • nuxt coming soon (typescript)

Svelte

Svelte is a framework created by Rich Harris that is quite popular and is also sponsored by Vercel. Many teams in the Stacks ecosystem opt for Svelte (or SvelteKit) because they prefer the fundamentals of the framework and care about frontend performance. @micro-stacks/svelte is built specifically for Svelte stores and follows the conventions such that developers familiar with Svelte should have no issue picking this library up.

Solid

Solid.js is a new up and coming reactive javascript framework that boasts insane performance specs and shares a similar API to React/Preact. @micro-stacks/solidjs shares the same API as the react package, but built specific for how Solidjs handles state and updates.

New documentation

In addition to the new starter kits, the documentation for micro-stacks has been completely re-written from the ground up, with a focus on the most common path a developer will take when building out a new Stacks app.

Every section within the docs contains content specific to whichever library you're looking to use: React, Svelte, Vue, Solid, or the Vanilla client module. Each framework integration will have its own set of examples specific to the library you've selected. Here is an overview of the new content:

Outside of the common patterns and features of most apps, there are two new in-depth guides that you can check out if you're building a React-based Stacks app. These are great because they dig into how to handle state on the server, and provide a much better end user experience for folks using your apps. Check them out:

Security audit

The core micro-stacks package successfully completed a security audit (paid for by the Stacks foundation, thank you!) from CoinFabrik. Thankfully nothing of concern was found. To read the audit, check out this directory in the GitHub repository.

Looking forward

My primary goal in working on micro-stacks and all of the additional libraries/documentation has always been to help folks build better Stacks apps. With that in mind, there is so much more I'm excited to build:

  • Example apps with Sponsored Transactions
  • Example apps with Clarinet built-in
  • New ways to build Post Conditions
  • New tooling to work with projects like clarigen
  • 100% deno support
  • React native support -> with RN v0.70.0 micro-stacks will simply work :)
  • Advanced recipes and more tooling improvements, like code generation and static analysis tools
  • and much more!

Thanks for reading and please reach out with any questions/comments/feature requests on GitHub!