refactor-large-files

Refactoring Large Route Files

Thesis: Split route files at 600+ lines. Extracted components receive data via props and callbacks — they never import the parent's signals.

When to Split

Any route file over 600 lines should be split. Signs it's time:

• Multiple distinct UI sections (KPI bar, table, modal, form)
• Multiple modal components with their own state
• Helper functions / sub-components that don't need the page's signals

How to Split

Co-located Components

Create a _components/ directory next to the route file:

routes/(private)/items/
├── index.tsx              ← Page (signals, data fetching, layout)
├── _components/
│   ├── ItemCard.tsx        ← Presentational (receives props)
│   ├── CreateItemModal.tsx ← Modal with own form state
│   └── ItemDetailModal.tsx ← Detail modal with tabs

The _ prefix tells SolidStart this is NOT a route — it's a co-located module.

What Goes Where

Parent route file keeps:

• Data fetching (onMount, createSignal, createEffect)
• Page-level signals (loading, error, data, filters, pagination)
• alive guard and onCleanup
• Layout structure (Switch/Match for content states)
• Signal-driven modal open/close logic

Extracted components receive:

• Data via props (not by importing shared signals)
• Callbacks via props (onSave, onClose, onDelete)
• They are presentational — they render what they're given

Example Split

Before (800-line items/index.tsx):

export default function ItemsPage() {
  // 50 lines of signals + fetching
  // 100 lines of ItemCard component
  // 200 lines of CreateItemModal
  // 300 lines of ItemDetailModal
  // 150 lines of page layout
}

After:

// items/index.tsx (200 lines)
import { ItemCard } from "./_components/ItemCard";
import { CreateItemModal } from "./_components/CreateItemModal";
import { ItemDetailModal } from "./_components/ItemDetailModal";

export default function ItemsPage() {
  // signals + fetching + layout
  // passes data to components via props
}