Gelişmiş

Lazy

Dinamik import ya da herhangi bir Promise ile yüklenen içerik; yükleme akışı, seçenekler, yeniden deneme, iptal ve hata raporu.

Lazy, bir Promise üreten fonksiyonu çağırır, sonucu bileşene çevirir ve bir Frame içine yerleştirir. Kod bölme (() => import('./X')) için tasarlanmıştır ama herhangi bir Promise ile çalışır.

Kullanım

Örnekte klasör grafiği, Chart.js yalnız gerektiğinde indirilsin diye tembel yüklenir. Bileşen adlı dışa aktarım olduğu için mapResult onu modülden seçer:

<Lazy
  caller={() => import("../parts/FolderChart")}
  options={{
    mapResult: (m) => m.FolderChart,
    Loaderview: <p class="loading">Grafik yükleniyor…</p>,
    Fallbackview: <p class="error">Grafik yüklenemedi.</p>,
    minDelayMs: 300,
    timeoutMs: 10000,
    retry: 3,
  }}
/>

const chart = Lazy({
  caller: () => import("../parts/FolderChart"),
  options: {
    mapResult: (m) => m.FolderChart,
    Loaderview: motifComponent("p", (p: ComponentBase) => {
      p.class.add("loading");
      p.setText("Grafik yükleniyor…");
    }),
    Fallbackview: motifComponent("p", (p: ComponentBase) => {
      p.class.add("error");
      p.setText("Grafik yüklenemedi.");
    }),
    minDelayMs: 300,
    timeoutMs: 10000,
    retry: 3,
  },
});

<Lazy
  caller={() => import("../parts/FolderChart")}
  options={{
    mapResult: (m) => m.FolderChart,
    Loaderview: <p class="loading">Grafik yükleniyor…</p>,
    Fallbackview: <p class="error">Grafik yüklenemedi.</p>,
    minDelayMs: 300,
    timeoutMs: 10000,
    retry: 3,
  }}
/>

const chart = Lazy({
  caller: () => import("../parts/FolderChart"),
  options: {
    mapResult: (m) => m.FolderChart,
    Loaderview: motifComponent("p", (p) => {
      p.class.add("loading");
      p.setText("Grafik yükleniyor…");
    }),
    Fallbackview: motifComponent("p", (p) => {
      p.class.add("error");
      p.setText("Grafik yüklenemedi.");
    }),
    minDelayMs: 300,
    timeoutMs: 10000,
    retry: 3,
  },
});

Lazy bir fonksiyondur; Lazy({ caller, options }) çağrısı da aynı Frame'i döndürür ve controls.add ile yerleştirilebilir. frame.navigateLazy(caller, options) ve frame.navigate(promise) da aynı yolu kullanır.

Yükleme akışı

Varsa Placeholderview (yoksa Loaderview) hemen gösterilir.
caller() hemen çağrılır (bileşen DOM'a girmeyi beklemez). timeoutMs verildiyse süre dolunca yükleme MJX110 ile başarısız sayılır; signal verildiyse abort() yüklemeyi MJX111 ile keser.
Başarılı sonuç mapResult ile bileşene çevrilir. Varsayılan dönüştürücü modülün default dışa aktarımını alır (import() sonucu için); başka bir dışa aktarım gerekiyorsa örnekteki gibi mapResult: (m) => m.FolderChart yazılır. Dönen değer sınıf ise new ile, fonksiyon ise çağrılarak kurulur; hazır örnek olduğu gibi kullanılır (prop verilmez). Options API nesnesi ya da fabrikası da bileşene çevrilir. default dışa aktarımı olmayan modül ya da bileşen olmayan başka bir nesne yüklemeyi MJX127 ile başarısız sayar ve 5. adıma geçer. null yükleniyor görünümünü korur, metin metin düğümü olarak, promise ya da dizi çözüldüğü gibi yerleştirilir.
minDelayMs verildiyse ve yükleme ondan hızlı bittiyse kalan süre beklenir (kısa yüklemelerde yükleme görünümünün yanıp sönmesini önler). Sonra içerik Frame'e yerleştirilir; Loaderview çıkış geçişini oynatarak serbest bırakılır.
Başarısızlıkta önce onError(err) çağrılır. Fallbackview varsa gösterilir ve hata orada kalır (rapor edilmez). Yoksa kapsayıcı boşaltılır ve hata errorHandler.report ile MJX126 olarak raporlanır — console.error'a yazılır ve errorHandler.addListener dinleyicilerine gider; özgün hata cause alanındadır (bkz. Hata yönetimi - Raporları dinleme). onError verilmiş olması raporu kaldırmaz.

İptal edilen (signal) bir yüklemede onError bir kez MJX111 ile çağrılır; iptalin deneme sürerken ya da yeniden deneme beklemesinde gelmesi fark etmez. Fallbackview gösterilmez, içerik değişmez ve rapor yazılmaz. Kapsayıcı serbest bırakıldığında her şey serbest bırakmanın ilk anında durur: süren zamanlayıcılar ve bekleyen yeniden denemeler temizlenir, onError çağrılmaz, rapor yazılmaz, sonradan biten yükleme yok sayılır ve hiçbir şey kurulmaz.

Seçenekler (`LazyOptions<T>`)

Seçenek	Tip	Açıklama
`Loaderview`	`ComponentBase`	Yükleme sürerken gösterilen içerik.
`Placeholderview`	`ComponentBase`	`Loaderview`'den önceliklidir; ikisi birden verildiğinde yalnız bu gösterilir.
`Fallbackview`	`ComponentBase`	Son deneme de başarısız olunca gösterilen içerik.
`minDelayMs`	`number`	İçeriğin yerleşmesi için geçmesi gereken en az süre.
`timeoutMs`	`number`	Her denemenin üst sınırı; aşılınca `MJX110`.
`signal`	`AbortSignal`	Yüklemeyi dışarıdan iptal etme; `MJX111`. `Frame.navigate(promise)` bunu kendisi verir.
`mapResult`	`(sonuç) => bileşen`	Yükleme sonucunu bileşene çevirir; varsayılan `default` dışa aktarımı.
`onError`	`(hata) => void`	Son deneme de başarısız olunca ve iptalde (`MJX111`), `Fallbackview`'den önce; serbest bırakılırken çağrılmaz.
`retry`	`number \\| LazyRetryOptions`	Yeniden deneme (aşağıda).
`onRetry`	`(deneme, hata) => void`	Her yeniden denemeden önce; `deneme` 1'den başlar.

Yeniden deneme — `retry`

<Lazy caller={caller} options={{ retry: 3 }} />                                              {/* count: 3, delayMs: 500, whenOnline: true */}
<Lazy caller={caller} options={{ retry: { count: 3, delayMs: 500, whenOnline: true } }} />   {/* açık biçim (LazyRetryOptions) */}

Lazy({ caller, options: { retry: 3 } });                                              // count: 3, delayMs: 500, whenOnline: true
Lazy({ caller, options: { retry: { count: 3, delayMs: 500, whenOnline: true } } });   // açık biçim (LazyRetryOptions)

<Lazy caller={caller} options={{ retry: 3 }} />                                              {/* count: 3, delayMs: 500, whenOnline: true */}
<Lazy caller={caller} options={{ retry: { count: 3, delayMs: 500, whenOnline: true } }} />   {/* açık biçim (LazyRetryOptions) */}

Lazy({ caller, options: { retry: 3 } });                                              // count: 3, delayMs: 500, whenOnline: true
Lazy({ caller, options: { retry: { count: 3, delayMs: 500, whenOnline: true } } });   // açık biçim (LazyRetryOptions)

count kadar yeniden denenir; toplam deneme count + 1.
Bekleme her denemede artar: delayMs × deneme (500, 1000, 1500…).
whenOnline: true iken cihaz çevrimdışıysa (navigator.onLine === false) sayaç başlamaz; online olayı gelince bekleme başlar.
Bekleme sırasında signal iptal edilirse deneme bırakılır ve onError MJX111 ile çağrılır; kapsayıcı serbest bırakılırsa deneme sessizce bırakılır.
timeoutMs her denemeye ayrı uygulanır.

Rota sayfalarında

Rota tanımındaki control: () => import('./pages/X') ve fallbacks.notFound/error kendi tembel yükleme yolunu kullanır; Lazy seçenekleri (yükleme görünümü, yeniden deneme) orada geçerli değildir. Bir sayfanın içindeki ağır parçayı tembel yüklemek için Lazy kullanın (bkz. Rota Tablosu - Lazy yükleme).

Sonraki adım

İçeriği başka bir yuvada göstermek için Transport ve TransportTo bölümüne geçin. Çerçevenin hata raporlama modeli için Hata Yönetimi; kapsayıcının zamanlama kuralları için Frame.