npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ozkar-tpl

v0.0.9

Published

[![trunk](https://github.com/jasonkuhrt/template-typescript-lib/actions/workflows/trunk.yaml/badge.svg)](https://github.com/jasonkuhrt/template-typescript-lib/actions/workflows/trunk.yaml)

Downloads

4

Readme

template-typescript-lib

trunk

Project template for Node libraries. Features:

  • Modules: Hybrid ESM/CJS
  • Types: TypeScript
  • Tests: Vitest
  • Linting: ESLint
  • Formatting: dprint
  • Publishing: Dripip
  • Continuous Integration: GitHub Actions
  • Dependency Management: Renovate
  • Community: Issue Templates

Quick Start

Make sure you have corepack enabled:

$ corepack enable

Used as a GitHub Template Repo

The following will get you a ready to go new repository on GitHub based on this one.

  1. Run:

    gh repo create foobar --template jasonkuhrt/template-typescript-lib --clone --public && \
    cd foobar && \
    pnpm install && \
    pnpm bootstrap
  2. Setup a repo secret called NPM_TOKEN containing an npm token for CI package publishing.

Used With Manual Git Setup

The following will get you a ready to go new repository on GitHub based on this one.

  1. Run:

    gh repo clone jasonkuhrt/template-typescript-lib <directory> && \
    cd <directory> && \
    pnpm install && \
    pnpm bootstrap
  2. Setup a repo secret called NPM_TOKEN containing an npm token for CI package publishing.

Details

TypeScript for Type Safety & Productivity

  1. Optimal settings for type safety via @tsconfig/node18 and @tsconfig/strictest

  2. .tsbuildinfo cache setup, output discretely into node_modules/.cache

  3. Base tsconfig.json shared across tests and src.

  4. Optimal output setup for your users

    1. declaration so your users can power their intellisense with your packages typings.
    2. declarationMap enabled to make your published source code be navigated to when your users use "go to definition".
    3. package.json typeVersions used to emit only one set of declaration files shared by both CJS and ESM builds.
    4. sourceMap enabled to allow your users' tools to base off the source for e.g. stack traces instead of the less informative derived built JS.
    5. Publish src with build files so that jump-to-definition tools work optimally for users.
  5. tsx for running TypeScript scripts/modules.

ESLint For Linting

  1. TypeScript integration
  2. TS type-checker powered eslint checks enabled
  3. Setup as a CI check for PRs
  4. Always display as warning to keep IDE error feedback for TypeScript (CI enforces warnings).
  5. Auto-fixable import sorting

Vitest for Testing

Just Works :)

Dripip for Releasing

Simple succinct friendly low-barrier issue templates

  1. Emojis ✈️
  2. Feature / bug / docs / something-else
  3. Config to display discussions link right in new issue type listing UI

dprint for code formatting

  1. Setup as a CI check for PRs
  2. VSCode extension in recommended extensions list so that when collaborators open the project they'll get prompted to install it if they haven't already.
  3. npm script

npm scripts for development lifecycle

  1. clean to remove cache and build files
  2. build that runs clean beforehand
  3. prepublishOnly that runs build beforehand
  4. format to run dprint over whole codebase
  5. lint to run eslint over whole codebase

CI with GitHub Actions

  1. Separate trunk and pull-request (PR) workflows.
  2. Dependency install cache enabled.
  3. On PR:
    1. Formatting Check
    2. Lint Check
    3. Type Check
    4. Tests across matrix of mac/linux/windows for Node 14/16
  4. On trunk:
    1. Tests across matrix of mac/linux/windows for Node 14/16
    2. Automated canary release

Renovate configuration

  1. JSON Schema setup for optimal intellisense
  2. Group all non-major devDependency updates into single PR (which "chore" conventional commit type)
  3. Group all major devDependency updates into single PR (with "chore" conventional commit type)
  4. Group all non-major dependency updates into single PR (with "deps" conventional commit type)
  5. Each major dependency update in own PR (with "deps" conventional commit type)

PnPM for package management

  1. Using Corepack. This means the PnPM specified in package.json will be used. And note this is a PnPM binary shipped with Node now. In a future version of Node you will not need to even opt-in into Corepack. Make sure you've done corepack enable at least once.

CJS+ESM Hybrid package build

An actually working hybrid CJS/ESM build.

VSCode Settings

  1. Optimize project search by recursively (ready for monorepo) ignoring build/*, snapshots, lock files, and more.
  2. On-Save actions for optimal editing experience (e.g. ESLint auto-fix to organize imports automatically)
  3. List of VSCode extensions that users who open the project will be prompted to install if they don't already.
  4. Enable typescript.enablePromptUseWorkspaceTsdk so that oneself and collaborators will get prompted to use the workspace version of TypeScript instead of the one in the editor.

Readme Table of Contents

  1. Using markdown-toc

Useful TypeScript Libraries

Here are some TypeScript libraries you might want to use for your new project:

https://github.com/stars/jasonkuhrt/lists/typescript

Alt