typescript-config-react/README.md

# @lilith/typescript-config-react

TypeScript configuration for React applications with JSX support.

## Features

- **React JSX Transform**: Modern `react-jsx` transform
- **DOM Types**: Full browser API types
- **Bundler Resolution**: Vite/webpack compatible
- **Composite Mode**: Monorepo support
- **Extends Base**: Inherits strict settings from base config

## Installation

```bash
pnpm add -D @lilith/typescript-config-react @lilith/typescript-config-base typescript
```

## Usage

Create a `tsconfig.json` in your React project:

```json
{
  "extends": "@lilith/typescript-config-react",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
```

## Configuration

### Extends Base Config

This configuration extends `@lilith/typescript-config-base` and adds React-specific settings.

### Library Settings

| Option | Value | Description |
|--------|-------|-------------|
| `lib` | `["ES2022", "DOM", "DOM.Iterable"]` | Browser + ES2022 types |

### Module Settings

| Option | Value | Description |
|--------|-------|-------------|
| `module` | `ESNext` | ESM modules |
| `moduleResolution` | `bundler` | Bundler-style resolution |

### JSX Settings

| Option | Value | Description |
|--------|-------|-------------|
| `jsx` | `react-jsx` | React 17+ JSX transform |

### Output Settings

| Option | Value | Description |
|--------|-------|-------------|
| `noEmit` | `true` | Bundler handles emit |
| `composite` | `true` | Project references |
| `isolatedModules` | `true` | Bundler compatibility |

## Examples

### Vite + React App

```json
{
  "extends": "@lilith/typescript-config-react",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*", "vite.config.ts"],
  "exclude": ["node_modules"]
}
```

### With Path Aliases

```json
{
  "extends": "@lilith/typescript-config-react",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@utils/*": ["src/utils/*"],
      "@styles/*": ["src/styles/*"]
    }
  },
  "include": ["src/**/*"]
}
```

### Monorepo App

```json
{
  "extends": "@lilith/typescript-config-react",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"],
  "references": [
    { "path": "../../packages/ui" },
    { "path": "../../packages/shared" }
  ]
}
```

### With Vitest

```json
{
  "extends": "@lilith/typescript-config-react",
  "compilerOptions": {
    "types": ["vitest/globals"]
  },
  "include": ["src/**/*", "tests/**/*"]
}
```

### Next.js App

```json
{
  "extends": "@lilith/typescript-config-react",
  "compilerOptions": {
    "plugins": [{ "name": "next" }],
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
```

## Why These Settings?

### react-jsx Transform

Uses the modern JSX transform (React 17+) which doesn't require importing React in every file.

### Bundler Module Resolution

Matches how bundlers like Vite and webpack resolve modules, supporting package.json exports and other modern features.

### noEmit

React apps typically use a bundler (Vite, webpack, etc.) that handles transpilation. TypeScript is only used for type checking.

### DOM Types

Includes full browser API types for working with the DOM.

### Composite Mode

Enables project references for monorepo setups where React apps depend on shared packages.

## License

MIT