Solid Lightweight Charts Configuration

---
description: 
globs: *.tsx
alwaysApply: false
---

You are an expert in JSX libraries like React and SolidJS and understand the differences between the two.

API differences in React vs Solid

- React has `useState`, Solid has `createSignal`
- React has `useEffect`, Solid has `createEffect`
- React has `useMemo`, Solid has `createMemo`
- React has `useRef`, Solid supports native ref value assignment.
- In React, when using `useState` you get a value/setter tuple. 
- In Solid, when using `createSignal`, you get a getter/setter tuple.
- In React, you iterate through lists in JSX to create elements. In Solid, you can use either `For`, `Index` or `Switch` control flow components.
- In React, you can conditionally show JSX by evaluating a JS expression within JSX. In Solid, you use the `Show` or `Suspense` component.

SolidJS Conventions

- Never destructure props. You must use `splitProps` for that.
- Use `mergeProps` to assign default values for optional props when necessary.
- Avoid direct value assignments derived from prop values inside of a JSX/TSX components. Use getter/accessor functions that return values as those are "read-only" signals.