Creating a Component Library Fast🚀(using Vite's library mode)

1. css-modules

   1 97 17,844 5.2

   Documentation about css-modules

   

   The components are styled with CSS modules. When building the library, these styles will get transformed to normal CSS style sheets. This means that the consuming application will not even be required to support CSS modules. (In the future I want to extend this tutorial to use vanilla-extract instead.)

2. SurveyJS

   surveyjs.io featured

   JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.

   

3. vite-plugin-dts

   2 2 1,431 8.1 TypeScript

   An unplugin for generating declaration (dts) files.

   

   As this is a Typescript library you also want to ship type definitions with your package. Fortunately there is a Vite plugin that does exactly this: vite-plugin-dts

4. vite-plugin-lib-inject-css

   3 1 175 4.7 TypeScript

   Inject css at the top of chunk file in lib mode using import statement, support multiple entries.

   

   For this to work, the transpiled JavaScript bundle must contain an import statement for the CSS file. We are going to use yet another Vite plugin (vite-plugin-lib-inject-css) that does exactly what we need with zero configuration.

5. my-component-library

   4 1 140 2.4 TypeScript

   

6. vite

   5 906 72,829 9.9 TypeScript

   Next generation frontend tooling. It's fast!

   

   If you have never worked with Vite, think of it as a replacement for Create React App. Just a few commands and you are ready to go.

7. my-component-library-consumer

   6 1 8 4.0 TypeScript

   

8. vanilla-extract

   7 97 9,916 8.2 TypeScript

   Zero-runtime Stylesheets-in-TypeScript

   

   The components are styled with CSS modules. When building the library, these styles will get transformed to normal CSS style sheets. This means that the consuming application will not even be required to support CSS modules. (In the future I want to extend this tutorial to use vanilla-extract instead.)

9. InfluxDB

   www.influxdata.com featured

   InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.

   

Suggest a related project