Vite Vanilla Ts Lib Starter
The starter is built on top of Vite 7.x and prepared for writing libraries in TypeScript. It generates a package with support for ESM modules and IIFE.
Overview
The vite-vanilla-ts-lib-starter is a starter template built on top of Vite 4.x and designed for writing libraries in TypeScript. It provides support for both CommonJS and ESM modules, as well as an IIFE bundle for direct browser support without a bundler. The starter also includes various tools such as ESLint, Stylelint, Prettier, Vitest (a test framework), Husky, and lint-staged for pre-commit git hooks.
Features
- Hybrid support - The starter template supports both CommonJS and ESM modules, allowing you to choose the module system that best suits your needs.
- IIFE bundle - An IIFE (Immediately Invoked Function Expression) bundle is included, which enables direct browser support without the need for a bundler.
- Typings bundle - The starter template includes typings bundled with the library, providing better support for TypeScript users.
- ESLint - ESLint is integrated into the template, making it easy to lint your TypeScript scripts and ensure code quality.
- Stylelint - Stylelint is included for linting CSS and SCSS files, helping to maintain consistent styles and code formatting.
- Prettier - Prettier is integrated to format your TypeScript, HTML, JSON, CSS, and SCSS files automatically, ensuring consistent code style.
- Vitest - The starter template comes with Vitest, a test framework for testing your library, making it easy to write and run tests.
- Husky + lint-staged - Husky and lint-staged are set up as pre-commit git hooks to automatically format your code before committing it.
Summary
The vite-vanilla-ts-lib-starter is a powerful starter template for writing libraries in TypeScript. It provides support for both CommonJS and ESM modules, as well as an IIFE bundle for direct browser support. With built-in tools like ESLint, Stylelint, Prettier, and Vitest, it helps you maintain code quality, consistent styles, and automated testing. The template also includes pre-commit git hooks with Husky and lint-staged for automatic code formatting. By using this template, you can jumpstart your library development process and ensure a solid foundation for your project.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Templates & Themes
A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.