@rootreeweb/tsconfigs

Standardized TypeScript configuration files for various project types across the Rootree Web ecosystem.

Getting Started

1. Authentication

Ensure you have authenticated with our private GitHub npm registry. Follow the instructions in the Rootree Web Wiki.

2. Installation

Add the package to your project as a development dependency:

yarn add -D @rootreeweb/tsconfigs

3. Usage

Extend the appropriate configuration in your tsconfig.json file.

{
	"extends": "@rootreeweb/tsconfigs/base.json",
	"compilerOptions": {
		"outDir": "./dist",
		"rootDir": "./src"
	},
	"include": ["src"]
}

Available Configurations

| Configuration | Use Case | | :---------------------------------------- | :-------------------------------------------------------------------- | | @rootreeweb/tsconfigs/base.json | Default configuration for modern Node.js projects (ESM). | | @rootreeweb/tsconfigs/react.json | Optimized for React projects. | | @rootreeweb/tsconfigs/next.json | Tailored for Next.js applications. | | @rootreeweb/tsconfigs/next-package.json | For packages intended for use within Next.js apps. | | @rootreeweb/tsconfigs/tsc.json | Minimal configuration for projects using tsc directly for building. | | @rootreeweb/tsconfigs/typecheck.json | Comprehensive configuration for project-wide type checking. | | @rootreeweb/tsconfigs/webpack.json | Optimized for projects bundled with Webpack. |

Usage Examples

Modern Node.js (ESM)

For a standard Node.js library using ESM:

{
	"extends": "@rootreeweb/tsconfigs/base.json",
	"compilerOptions": {
		"outDir": "./dist",
		"rootDir": "./src"
	},
	"include": ["src"]
}

Next.js Application

In a Next.js project's root tsconfig.json:

{
	"extends": "@rootreeweb/tsconfigs/next.json",
	"compilerOptions": {
		"plugins": [{ "name": "next" }],
		"paths": {
			"@/*": ["./src/*"]
		}
	},
	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
	"exclude": ["node_modules"]
}

React Library

For a shared React component library:

{
	"extends": "@rootreeweb/tsconfigs/react.json",
	"compilerOptions": {
		"outDir": "../dist/esm"
	},
	"include": ["../src"]
}

Advanced Patterns

Project-wide Type Checking vs. Specialized Builds

Modern TypeScript projects benefit from separating the concerns of type checking (all files) and transpilation (only buildable source).

1. Root tsconfig.json (Type Checking)

The root configuration should be used by your IDE and CI for comprehensive type checking of the entire project, including tests, configurations, and internal tools.

{
	"extends": "@rootreeweb/tsconfigs/typecheck.json"
}

2. Specialized Build Configurations

Place build-specific configurations in a configs/ directory. These should only include the files intended for distribution.

Example: configs/tsconfig.build.json

{
	"extends": "@rootreeweb/tsconfigs/tsc.json",
	"compilerOptions": {
		"outDir": "../dist"
	},
	"include": ["../src"]
}

Benefits of this Pattern

• Cleaner dist: No test files or documentation files end up in your production build.
• Faster IDE Feedback: The root config provides immediate type checking for all files, while build configs stay focused.
• Comprehensive Testing: Ensures that your test code and configuration files are also type-safe.