vite-vanilla-ts-template-extended (AKA vite-vanilla-ts-module)

Update: If you prefer a minimalist vite-vanilla-ts-template, check out https://github.com/entwurfhaus/vite-vanilla-ts-template.

A starter vanilla-ts (extended) template that began with Vite 3.x, prepared for writing node utility libraries in typescript. This starter is meant to provide rapid node package development and publishing onto npm.

What is in this template?

Below are notable dependencies bundled (and configured) in this library template:

1. husky
2. vitest
3. vitest ui
4. vite
5. vite-plugin-dts
6. vite-plugin-eslint
7. eslint
8. prettier

Optional dependencies

And notable optional dependencies, great to use for improved DX etc:

1. commitlint - optional, remove if yourself / team does not require enforcing conventional commits.
2. vite-plugin-progress - optional, remove if yourself / team does not require ✨ fancy ✨ progress bar in terminal.
3. @trivago/prettier-plugin-sort-imports - optional, auto-sort your import order in each file, set your own "sort rules".

Goal of included dependencies

Know that the above dependencies are (mostly) optional, and you may extend or remove them to your preference. The goal of introducing these dependencies as part of the template, is to:

1. Easily build a custom node library, fast (with some style).
2. Easily integrate the built custom node library, into any monorepo framework - primarily turborepo and nx.
3. Reduce overhead management of dependencies. For example, you can add taze library.
4. Providing comfort in utilising efficient (linting, auto-sort, etc) productivity features.
5. Improving the overall developer experience (DX) with this template.

Getting Started

Let's install our dependencies, then pre-setup our husky pre-commits:

yarn
yarn prepare
npx husky add .husky/pre-commit "yarn build"
npx husky add .husky/pre-commit "yarn prettier"

Then, your .husky/pre-commit file should look like below:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn build
yarn prettier

And since we introduced commitlint, we can enforce "conventional commit" messages with husky:

echo "export default { extends: ["@commitlint/config-conventional"] };" > commitlint.config.js

Testing with Vitest

Run yarn test or yarn test:coverage to produce code coverage report.

The code coverage report will indicate, if all test cases are 100% covered, flawed logic and so on.

Running vite

Run yarn dev to open index.html via http://localhost:5174.

It contains some quick links, to the stats.html and coverage index.html files.

Build your package

Run yarn build, and check the dist folder for the final build output.

If there are issues with the package, check package.json (props main, module, typings, files and etc), tsconfig.json (such as allowJs) and dependency versions (especially vite) to narrow down the build or typings errors you're experiencing.

Publishing

And when ready to publish to npm:

npm login
npm publish

Also, since typedoc is used here - this is an example of the generated docs folder, see https://vite-vanilla-ts-template-extended.vercel.app.

If you would like to preview an example of how your NPM package is published, take a look at https://entwurfhaus-demo-react-app.vercel.app/ that have this template installed & used.