Build your own component library with Svelte

• component-template

  7 552 0.0 JavaScript

  A base for building shareable Svelte components

  

But what would it be like to build your own Svelte component library? Fortunately, there are several templates that you could start with, like the official template provided by Svelte and Svelte 3 Component Template, which are considered the go-to for building your own component library.

• Snowpack

  69 19,787 8.4 JavaScript

  Discontinued ESM-powered frontend build tool. Instant, lightweight, unbundled development. ✌️ [Moved to: https://github.com/FredKSchott/snowpack] (by withastro)

  

SvelteKit uses Vite under the hood, which is quite surprising, as Sapper and most tools are developed using Snowpack. Vite 2 is framework-agnostic and designed with SSR at its core.

• SurveyJS

  surveyjs.io featured

  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.

  

• svelte-component-template

  1 348 4.5 JavaScript

  Discontinued A highly-opinionated base for building shareable Svelte 3 components

But what would it be like to build your own Svelte component library? Fortunately, there are several templates that you could start with, like the official template provided by Svelte and Svelte 3 Component Template, which are considered the go-to for building your own component library.

• vite

  801 65,358 9.8 TypeScript

  Next generation frontend tooling. It's fast!

  

SvelteKit uses Vite under the hood, which is quite surprising, as Sapper and most tools are developed using Snowpack. Vite 2 is framework-agnostic and designed with SSR at its core.

• sveltio

  1 2 0.0 Svelte

In a similar manner, you can create other web components and create stories for other components to continue building your component library. You can find the whole code for the components we built through this link.

• jest-dom

  23 4,322 7.1 JavaScript

  :owl: Custom jest matchers to test the state of the DOM

  

We will also use an additional plugin with Testing Library called user-event, which allows us to mimic user events, like typing inside an input or clicking on a button. We will also use a plugin called jest-dom, which extends the DOM-related matching capabilities of Jest, which we require because we are dealing with web components.

• svelte-material-ui

  34 3,263 7.3 Svelte

  Svelte Material UI Components

Due to this popularity, devs have introduced several awesome UI component frameworks/libraries like Svelte Material UI, Smelt, Svelte Materialify and Sveltestrap.

• InfluxDB

  www.influxdata.com featured

  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.

  

• svelte-materialify

  5 611 1.0 Svelte

  Discontinued A Material UI Design Component library for Svelte heavily inspired by vuetify.

Due to this popularity, devs have introduced several awesome UI component frameworks/libraries like Svelte Material UI, Smelt, Svelte Materialify and Sveltestrap.

• Sapper

  33 7,187 5.3 TypeScript

  Discontinued The next small thing in web development, powered by Svelte

  

SvelteKit can be considered the successor to Sapper or NextJS for Svelte. It is packed with tons of cool features, like server side rendering, routing, and code splitting.

• jest

  479 43,703 9.5 TypeScript

  Delightful JavaScript Testing.

  

There are several tools to write and run tests like Mocha, Karma, Jasmine, and Jest. For this project, we will be using Jest as our test runner. However, even Jest falls slightly short, because we need to render our component and check how it's behaving after executing actions on them.

Suggest a related project