TanStack Config

TanStack Config is an opinionated toolkit designed for building, versioning, and publishing high-quality JS/TS packages. It aims to provide minimal setup and consistent results for package maintainers through several key features:

• Vite-powered builds: Uses Vite for efficient builds with extendable workflows.
• Automated workflows: Handles publishing, versioning, and changelog generation automatically.
• Compliance: Built to be Publint-compliant with sensible defaults.
• Ease of use: Designed for minimal configuration to allow for faster setup.

The project follows specific conventions regarding:

• CI/CD: Continuous Integration and Deployment workflows.
• Dependencies: Management and declaration of dependencies.
• Package Structure: The organization and layout of packages within the repository.

TanStack Config provides several utility packages to simplify configuration across different parts of the development lifecycle:

• ESLint: Configuration for linting.
• Publish: Tools for managing package publishing.
• Vite: Configuration for the Vite build tool.

To use the shared TanStack ESLint configuration in your project, install the package as a development dependency using pnpm.

pnpm add -D @tanstack/eslint-config

To see exactly which rules are enabled by the TanStack configuration, you can use the @eslint/config-inspector tool. Run the following command in your terminal:

pnpm dlx @eslint/config-inspector

To install the TanStack publishing configuration package as a development dependency, use pnpm.

pnpm add -D @tanstack/publish-config

Trusted publishing allows you to publish packages using OIDC authentication instead of npm tokens. This requires a one-time setup per package.

Setup Workflow

1. Initial Publication: If the package has never been published, you must publish a "placeholder" package first. You can use setup-npm-trusted-publish to streamline this.
2. Bulk Management: If managing multiple packages (5+), tools like open-packages-on-npm or sxzz's userscript can help.
3. Configure npm Settings: Navigate to the package's settings page on npm and fill in the required fields for trusted publishing. You will need to authenticate with MFA to save these changes.

To use the TanStack Vite build configuration for your project, install the package as a development dependency using pnpm.

pnpm add -D @tanstack/vite-config

To ensure optimal build performance and prevent cache invalidation in the Nx monorepo, follow this directory structure:

• ./src: Place only the code that is intended to be built and shipped to users here. Do not place tests in this folder, as they bloat the shipped package and can unintentionally invalidate the Nx cache.
• ./tests: Place all test files and framework-specific test setup files here.

To use TanStack Config packages, ensure your environment meets the following requirements:

• Node.js: version v20.17.0 or higher.
• Git CLI: installed and configured.
• GitHub CLI: installed (note: this is pre-installed on GitHub Actions environments).
• pnpm: version v10 or higher.

Important: pnpm is the only supported package manager for TanStack Config.

The @tanstack/eslint-config package is designed for ESLint v9+. To apply the configuration, import tanstackConfig in your eslint.config.js file and spread it into the exported array. You can append a configuration object after the spread to define custom rules.

import { tanstackConfig } from '@tanstack/eslint-config'

export default [
  ...tanstackConfig,
  {
    // Custom rules go here
  },
]

To apply the standard TanStack ESLint configuration to a Vite-based project, import tanstackConfig from @tanstack/eslint-config and spread it into your eslint.config.ts (or .js) file. This allows you to extend the pre-defined TanStack linting rules within your flat configuration array.

// @ts-check

import { tanstackConfig } from '@tanstack/eslint-config'

export default [...tanstackConfig]