Microbundle VS storybook

I discovered microbundle lately, and I would like to share with you a mini template with the bare essentials and comfort to develop your packages with TypeScript.

For package authoring - microbundle is a handy boilerplate (I would avoid tsdx personally - it’s basically been abandoned for turborepo but that’s not apparent at first glance).

My tech stack was React + Typescript, Storybook for docs, vite.js for build instead of webpack, microbundle for bundling (basically a no-config rollup wrapper), and Google's release please bot for handling release/deployment.

Setting up a modern Typescript or Javascript development stack is a daunting task, there are a lot of moving parts, and sometimes the whole process seems like magic, so I switched to Microbundle. While microbundle handles the compilation, there are a lot of other moving parts that need to be set up to start developing with Nodejs/Typescript (CI, tests, linting, etc). So I've created an opinionated template repository with Typescript, Microbundle, Jest, eslint, husky, prettier, github actions, pnpm, and a bunch of other scripts. It enables me to start developing a library immediately by using the repository as a starter template. Let me know what you think and if some processes could be improved, or some valuable tools that could be added. Pull requests and suggestions are welcomed.

I would recommend starting by using https://github.com/developit/microbundle , as it has pretty good default behavior for generating library output.

Check out microbundle, which is what TSDX started as a typescript alternative to.

I’m quite happy with Microbundle

Pick up Microbundle or something similar.

Website: https://storybook.js.org/

Consider adding some testing to the projects. That could be unit tests, component tests using something like Testing Library, Storybook, or Cypress Component Testing. Or even end-to-end (E2E) testing using something like Cypress or Playwright. Btw, I'm giving a talk for @_collab_lab this week on E2E testing with Cypress for anyone interested.

1. Storybook - 77.2k stars

But maybe you'll have a little more luck with Vue/Quasar.

[1] https://storybook.js.org/

If you have a lot of complicated web forms it makes sense to use Storybook and write a storybook test for each such form realised as a dumb component.

Storybook is a tool that allows developers to build and test React components in isolation. This tool provides a visual interface for creating and testing components, making it easier to develop and debug UI components. You can visit its official website to learn more: https://storybook.js.org/.

Storybook is a tool for displaying libraries of components in various states. You could describe it as a gallery for components, but that’s probably selling it short. In reality, Storybook is a tool for component development. It can be associated with React to build a collection of components that can be viewed in isolation and tested independently.

There are hundreds more improvements other than these and you can check them out here if you have the time.

Storybook is great for testing components in an isolated environment