Lightweight Charts React Components
Development guidelines for building React wrappers around TradingView's Lightweight Charts library with TypeScript, ESM-only, and strict functional patterns.
Overview
This skill provides coding standards and architectural patterns for developing a modern React library that wraps TradingView's Lightweight Charts. The library is ESM-only, uses functional components with hooks, and supports tree-shaking for optimal bundle sizes.
Architecture Guidelines
Project Structure
**Library code location**: All library files must be placed under the `lib/` directory, NOT in the root**Module system**: ESM-only syntax throughout the codebase**Dependencies**: - React 16.8.0+ as peer dependency
- lightweight-charts 5+ as peer dependency
- No other runtime dependencies
Component Design
Follow these strict architectural patterns:
1. **Functional components only**: No class components are permitted
2. **React Hooks**: All state management and side effects must use hooks
3. **Named exports**: Use named exports for all components, hooks, and utilities
4. **Tree-shaking support**: Keep exports modular and side-effect free
5. **Minimal props**: Components should only accept props directly related to chart rendering
TypeScript Standards
**Strict typing**: Enable strict TypeScript mode and avoid `any` unless absolutely necessary**Props interfaces**: Name all props interfaces as `ComponentNameProps`**Type coverage**: Ensure comprehensive type coverage across the codebase**Exports**: Use named exports with proper type definitionsComponent Development
Naming Conventions
**Components**: Use `PascalCase` (e.g., `ChartComponent`, `SeriesWrapper`)**Hooks**: Use `camelCase` with `use` prefix (e.g., `useChart`, `useSeries`)**Files**: Use `.tsx` extension for all component files**Props interfaces**: Follow `ComponentNameProps` patternReact Patterns
```typescript
// Example component structure
interface ChartComponentProps {
data: SeriesData[];
options?: ChartOptions;
}
export function ChartComponent({ data, options }: ChartComponentProps) {
const chartRef = useChart(options);
// Implementation
}
```
Custom Hooks
Internal library hooks should:
Be named with the `use` prefixEncapsulate chart-specific logicReturn stable references where appropriateHandle cleanup in effect return functionsStyling Guidelines
**No external CSS**: The library should not require any CSS imports**No inline styles**: Avoid using `className` or `style` props unless explicitly needed for a wrapper div**Chart styling**: Use lightweight-charts API for all chart styling**Zero style dependencies**: Library should have no styling side effectsTesting Requirements
Test Framework
Use **Vitest** for all testsMock DOM and chart dependencies where neededTest all public APIs and componentsEnsure hooks behave correctly with React lifecycleTest Coverage
Write unit tests for all components and hooksTest error boundaries and edge casesVerify TypeScript types are correctTest tree-shaking compatibilityCode Quality Standards
Documentation
Write clear **JSDoc comments** for all public components and utilitiesDocument props interfaces comprehensivelyInclude usage examples in component docsKeep comments up-to-date with code changesFormatting & Linting
Use **ESLint** for linting with strict rulesUse **Prettier** for consistent code formattingEnforce formatting in CI/CD pipelineConfigure both tools for TypeScript and ReactError Handling
Implement comprehensive error handling for chart operationsProvide clear error messages for invalid propsHandle chart initialization failures gracefullyUse TypeScript's type system to prevent errors at compile timeCode Maintainability
Write self-documenting code with clear variable namesKeep functions small and focusedExtract reusable logic into custom hooksFollow DRY (Don't Repeat Yourself) principlesPrefer composition over complex abstractionsSecurity & Best Practices
Follow React security best practicesValidate user input before passing to chart APIAvoid dangerous React patterns (e.g., `dangerouslySetInnerHTML`)Keep dependencies up-to-dateReview security advisories for peer dependenciesCompatibility Requirements
**React version**: 16.8.0+ (for hooks support)**Lightweight Charts version**: 5.0.0+ only**Module system**: ESM-only (no CommonJS support)**Browser support**: Modern browsers with ES2015+ supportUsage Examples
When developing components, ensure they can be used idiomatically:
```typescript
import { ChartComponent, useSeries } from 'lightweight-charts-react-components';
function TradingChart() {
const data = [/* chart data */];
return (
<ChartComponent
data={data}
options={{
layout: { background: { color: '#ffffff' } }
}}
/>
);
}
```
Important Constraints
**NO default exports**: Use named exports unless absolutely necessary**NO class components**: Only functional components with hooks**NO external CSS**: All styling through chart API**NO CommonJS**: ESM-only syntax**NO `any` types**: Strict TypeScript unless unavoidable**NO React state unrelated to charts**: Keep components focused**Library code MUST be in `lib/` directory**: Not in root