Gelenekler

Carats az sayıda yolu ve dosya adını geleneksel yollarla çözer. Bunlardan sapmak işe yarar ama her zaman yaramaz; bu yüzden onlara uymaya değer.

Sayfa Klasörleri

Her rota, src/client/pages altında kendi klasöründe yaşar ve klasör, aynı adı taşıyan bir stil dosyasının yanında index.tsx dosyasından varsayılan bir bileşen dışa aktarır. Alt çizgiyle başlayan klasörler rota değildir; bunlar ihtiyaç duyan rotaların referans verdiği paylaşılan yapı taşlarıdır.

src/client/pages/
├── _layout/          # shared building block, not a route
│   ├── index.tsx
│   └── _layout.sass
├── _error/           # suspense.error
│   └── index.tsx
├── _not_found/       # suspense.notFound
│   └── index.tsx
├── home/             # '/'
│   ├── index.tsx
│   └── home.sass
├── market/           # '/market'
│   ├── index.tsx
│   └── market.sass
├── profile/          # '/profile'
│   ├── index.tsx
│   └── profile.sass
└── trade/            # '/trade/:symbol'
    ├── index.tsx
    └── trade.sass

Baştaki alt çizgi, bir klasörü sayfa değil yapı taşı olarak işaretleyen şeydir. Paylaşılan bileşenleri dosya ağacının dışında tutar ve bunlara yönlendirilmeleri amaçlanmadığını gösterir.

Paylaşılan Layout

Next.js'teki gibi dosya geleneğine dayalı bir layout yoktur. Bir _layout bileşeni, ihtiyaç duyan sayfalar tarafından içe aktarılır; bu, bileşimi açık kılar ve bir sayfanın dışarıda kalmasına izin verir. Referans şablon, başlığı, altbilgiyi ve mobil menüyü paylaşmak için her sayfayı aynı layout'un içine sarar.

// src/client/pages/profile/index.tsx
import { Burnish } from '@carats/render';
import Layout from '../_layout';
import './profile.sass';

export default Burnish(function (user: User) {
    this.head = <>
        <title>Profile for {user.name}</title>
    </>;
    return (
        <Layout>
            <h1>{user.name}</h1>
        </Layout>
    );
});

Layout, sayfa içeriğinin gelmesi gereken yerde `props.children` işler; bu, tek bileştirme mekanizmasıdır. İç içe rota ağacı ve otomatik sarma yoktur; bu yüzden bağımlılık içe aktarmada görünürdür.

Hata ve Bulunamadı Sayfaları

error ve notFound suspense bileşenleri sıradan bileşenlerdir. error olanı fırlatılan Error'ı alır, böylece message ve stack okuyabilir; notFound olanı hiçbir şey almaz. Bir hatanın site kabuğunu yine de işlemesi için ikisini de paylaşılan layout'un içine sarmaya değer.

Global DTO'lar

src/dto içine yerleştirilen arayüzler globaldir, çünkü typeRoots o klasörü gösterir. Bir culet'in sunucu giriş noktasında da sayfa bileşeninde de içe aktarma olmadan culetolarak yazılabilmesinin nedeni budur. Bu dosyaları içe aktarmalardan ve çalışma zamanı kodundan arındırın; yalnızca bildirimlerdir.

// src/dto/user.d.ts
interface User {
  id: string
  name: string
  username: string
  email: string
  phone: string
  website: string
}

Arayüzde `export` yoktur; onu global yapan da budur. `typeRoots` `src/dto` klasörünü gösterdiğinde `culet` ve `Burnish` her dosyada içe aktarma olmadan çözülür ve bir yerde yapılan yeniden adlandırma her yerde fark edilir.

Stil Dosyaları

Bir sayfa veya bileşen kendi SASS dosyasını içe aktarır ve o dosya base.sass'ı @use ... as * ile içe aktarır. Yoldaki uzantı isteğe bağlıdır. Global sıfırlamaları ve token'ları base.sass'ta ve yalnızca orada tutun.

// src/client/pages/trade/trade.sass
@use '../../base' as *

#trade
  .trade-header
    display: flex

`@use` yolundaki uzantı isteğe bağlıdır ve yol bileşene değil, stil dosyasına göredir. Token tanımlayan tek dosya `base.sass` tır; diğer tüm dosyalar onları tüketir.

Adlandırma

Rota klasörleri rota segmentine göre adlandırılır ve dinamik parametre adı facet'te ile culet'te birebir aynı olmalıdır. Culet dosyaları gerçekleştirdikleri işleme göre adlandırılır ve culet'i varsayılan olarak dışa aktarır; culet daha sonra sunucu giriş noktasında oturtulur.