lightweight-charts-react-components
Development guidelines for building and maintaining a React library that wraps TradingView's Lightweight Charts with idiomatic React components.
Overview
This skill provides comprehensive instructions for working with a modern, ESM-only React library that wraps TradingView's Lightweight Charts. The library uses functional components, React Hooks, and strict TypeScript typing to provide a tree-shakable, developer-friendly charting solution.
Repository Structure
**Library code**: Located under `lib/` directory (not in root)**Examples**: Separate example usage demonstrations**Tests**: Vitest-based test suite with mocked DOM and chart dependenciesCore Principles
1. Modern ESM-Only Architecture
Use ES modules exclusivelyEnsure all exports are modular and side-effect freeSupport tree-shaking throughout the libraryUse named exports for all components and hooks2. React Patterns
**React version**: 16.8.0+ required**Component style**: Functional components only (no class components)**Hooks**: Use React Hooks exclusively for state and lifecycle management**Internal hooks**: Prefix with `use` (e.g., `useChart`, `useSeries`)**Props**: Keep chart-rendering focused; avoid unrelated state or props3. TypeScript Standards
Use strict TypeScript typing throughoutAvoid `any` unless absolutely necessaryName props interfaces as `ComponentNameProps`Ensure comprehensive type coverageWrite self-documenting code with clear types4. Library Design
**Peer dependency**: lightweight-charts (version 5+ only)**No external CSS**: Library requires no styling**No className/style props**: Unless chart component explicitly needs a wrapper div**Modular exports**: Each component/hook should be independently importableDevelopment Guidelines
Component Structure
```typescript
// Use named exports
export interface ChartComponentProps {
// Clear, typed props
}
// Functional component with hooks
export function ChartComponent(props: ChartComponentProps) {
// Hook-based implementation
}
```
File Naming Conventions
**Components**: `PascalCase.tsx` (e.g., `ChartComponent.tsx`)**Hooks**: `camelCase.ts` (e.g., `useChart.ts`)**Utilities**: `camelCase.ts`Code Style
**Components**: `PascalCase`**Hooks**: `camelCase` with `use` prefix**File extension**: `.tsx` for all component files**Formatting**: Use `eslint` and `prettier`**Documentation**: Write clear JSDoc comments for public APIsTesting Strategy
**Framework**: Vitest**Approach**: Mock DOM and chart dependencies where needed**Coverage**: Test public APIs and critical paths**Isolation**: Ensure tests don't rely on external stateError Handling
Implement comprehensive error handlingProvide meaningful error messagesHandle edge cases gracefullyValidate props where appropriateSecurity & Maintenance
Follow security best practicesWrite maintainable, self-documenting codeKeep dependencies up to dateAvoid default exports unless absolutely necessaryIntegration Requirements
1. **React**: Version 16.8.0 or higher
2. **lightweight-charts**: Version 5+ (peer dependency)
3. **TypeScript**: Strict mode enabled
4. **Build tools**: ESM-compatible bundler
Example Pattern
```typescript
import { useChart, useSeries } from 'lightweight-charts-react-components';
export interface CustomChartProps {
data: SeriesData[];
options?: ChartOptions;
}
export function CustomChart({ data, options }: CustomChartProps) {
const chartRef = useChart(options);
useSeries(chartRef, data);
return <div ref={chartRef} />;
}
```
Anti-Patterns to Avoid
❌ Class components❌ Default exports (unless necessary)❌ External CSS dependencies❌ Using `any` type without justification❌ Placing library files in root directory❌ Side effects in module scope❌ Unrelated state management in chart componentsBest Practices Checklist
✅ Use functional components with hooks✅ Maintain strict TypeScript typing✅ Keep exports modular and tree-shakable✅ Place library code under `lib/` directory✅ Write comprehensive tests with Vitest✅ Document public APIs with JSDoc✅ Follow ESLint and Prettier rules✅ Support only lightweight-charts 5+✅ Use named exports consistently