npm package: @lottiefiles/tsconfig
Description: Shared Typescript config for LottieFiles projects
Author: LottieFiles
Latest version: 2.0.0

# Typescript Config

> Base `tsconfig.json` for using Typescript in the various projects at LottieFiles.

## Table of contents

* [Installation](#installation)
* [Usage](#usage)
* [Changelog](#changelog)

## Installation

#### 1. Install config and Typescript.

Install Typescript and the shared config by running:

```sh
# Normal repository? Install in the project root.
pnpm add -D typescript @lottiefiles/tsconfig

# Monorepo? Install Prettier in the project root workspace.
pnpm add -DW typescript @lottiefiles/tsconfig
```

#### 2. Create configuration file

Create a `tsconfig.json` file in your project root with the contents below:

```json
{
  "extends": "@lottiefiles/tsconfig",

  "compilerOptions": {
    // Compiled output JS and source maps output directory
    "outDir": "./dist",

    // Source root directory
    "rootDir": "./src",
  }
}
```

## Usage

#### Monorepo Recommendation

##### tsconfig.build.json

Create a `tsconfig.build.json` in the project root that extends from `@lottiefiles/tsconfig`. This file will be used for
build processes.

```json
{
  // Extend from the org config
  "extends": "@lottiefiles/tsconfig",

  "compilerOptions": {
    // Use composite mode to enable building using projects and project references
    "composite": true,

    // Allow emit (required for composite mode)
    "noEmit": false
  },

  "exclude": [
    // Exclude tests and snapshots
    "**/test",
    "**/*.test.ts",
    "**/__mocks__",
    "**/__tests__",
    "**/__snapshots__",
    "**/coverage",

    // Exclude builds
    "**/dist",
    "**/dist-dev",
    "**/artifacts"
  ]
}
```

##### tsconfig.dev.json

Create a `tsconfig.dev.json` in the project root that extends from `@lottiefiles/tsconfig`. This file will be used for
linting processes.

```json
{
  // Extend from the org config
  "extends": "@lottiefiles/tsconfig",

  "compilerOptions": {
    // Allow non-module Typescript files (e.g. scripts)
    "isolatedModules": false
  },

  "exclude": [
    // Exclude non-code test resources
    "**/__snapshots__",
    "**/coverage",

    // Exclude builds
    "**/dist",
    "**/dist-dev",
    "**/artifacts"
  ],

  // Include all Javascript, Typescript, JSX, CommonJS and Module files
  "include": ["**/*.js", "**/*.jsx", "**/*.json", "**/*.ts", "**/*.tsx", "**/*.mjs", "**/*.cjs", "**/.*.cjs"]
}
```

##### tsconfig.json

Create a `tsconfig.json` in the root that extends from the `tsconfig.build.json` file and add any development/IDE
relevant customization necessary for Typescript typechecking.

```json
{
  // Must be set to empty [] array
  "files": [],

  "compilerOptions": {
    "disableSourceOfProjectReferenceRedirect": true
  },

  "references": [{ "path": "../path-to-package1" }, { "path": "../path-to-package2" }]
}
```

3. For every package in the workspace, create a `tsconfig.json` file that extends from the root `tsconfig.build.json`
   file (and depending on use case, a `tsconfig.dev.json` that extends from the root `tsconfig.dev.json` file).

```json
{
  // Extend from the build config
  "extends": "../../tsconfig.build.json",

  // Compiler options
  "compilerOptions": {
    // Compiled output JS and source maps output directory
    "outDir": "./dist",

    // Source root directory
    "rootDir": "./src"
  },

  "include": ["./src", "./types"],

  // Setup project references
  "references": [{ "path": "../path-to-package2" }]
}
```

Use `references` path list to allow Typescript to pickup other packages in the workspace and typing information to be
extracted.

## Changelog

See [CHANGELOG.md](CHANGELOG.md) for the latest changes.