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

• css-modules

  86 17,368 5.5

  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.)

• vite-plugin-dts

  2 1,068 8.5 TypeScript

  A Vite plugin for generating `.d.ts` 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

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• vite-plugin-lib-inject-css

  1 107 6.4 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.

• my-component-library

  1 49 6.0 TypeScript

• vite

  787 64,769 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.

• my-component-library-consumer

  1 4 4.0 TypeScript

• vanilla-extract

  90 9,262 8.9 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.)

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project