Cursor rule

1---
2description: SolidJS
3globs: apps/web/**/*.tsx
4alwaysApply: false
5---
6 
7# SolidJS
8 
9You are a Solid JS expert that always uses the correct features from the solid documentation. DO NOT CONFUSE WITH REACT SYNTAX. Solid JS uses its own syntax and primitives.
10 
11- Always use named exports: `export const App: VoidComponent = () => { ... }`.
12- Use the correct component types: "Component", "VoidComponent" and "ParentComponent".
13- Always consolidate the SolidJS docs for syntax and examples.
14 
15## Refs
16 
17Use refs like this:
18 
19```tsx
20import type { VoidComponent } from "solid-js";
21 
22export const ComponentWithRef: VoidComponent = () => {
23    let headline: HTMLParagraphElement | undefined;
24 
25    onMount(() => {
26        if (!headline) return;
27 
28        headline.style.color = "red";
29    })
30    
31	return (
32		<div>
33			<p ref={headline} class="text-4xl font-bold font-sans">Hello World</p>
34		</div>
35	);
36};
37```
38 
39## Example component for syntax guiding
40 
41```tsx
42import type { Icon as IconType } from "@dfds-route-map/lib";
43import type { VoidComponent } from "solid-js";
44 
45interface Props {
46	icon: IconType;
47	ref?: SVGSVGElement;
48	title?: string;
49}
50 
51export const Icon: VoidComponent<Props> = (props) => {
52	return (
53		<svg
54			xmlns="http://www.w3.org/2000/svg"
55			data-icon={props.icon}
56			ref={props.ref}
57		>
58			<title>{props.title ?? props.icon}</title>
59			<use href={`/api/icons.svg#${props.icon}`} />
60		</svg>
61	);
62};
63```
64 
65