docs: add comprehensive README with configuration reference
Document React TypeScript configuration including react-jsx transform, bundler module resolution, DOM types, and composite mode. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
d464ab2908
commit
8e144d2cd2
1 changed files with 175 additions and 0 deletions
175
README.md
Normal file
175
README.md
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
# @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
|
||||
Loading…
Add table
Reference in a new issue