React ve Next.js

Bir şeklin dosya yerleşimi

components/iso/                 the kit: iso-kit.ts, iso.css, react/draw.tsx, react/live.tsx
components/figures/rig/
  model.ts       pure model: true numbers, springs, readout text (no DOM)
  view.ts        world layout constants, the projection P (fitProjection), helpers like at(point)
  geometry.ts    every static path, computed once at module load
  frame.ts       paths for the parts that change shape: frameOf(state) -> { glass, coils, needle, ... }
  art.tsx        server component: static parts as JSX constants, passed to the live component
  live.tsx       "use client": refs, loop, pointer and keyboard, aria, writes the readout
  rig.css        scoped tokens and styles (e.g. .rig { … })
  figure.tsx     <Plate fig title hint readout keys caption><RigArt /></Plate>

examples/test-rig/ bu yerleşimi izler. rig.ts, view.ts, geometry.ts, pose.ts, art.tsx, live.tsx ve figure.tsx dosyalarını kullanır.

(Dosya açıklamaları: model.ts saf model, yani gerçek sayılar, yaylar ve okuma metni, DOM yok; view.ts dünya yerleşim sabitleri, izdüşüm P ve at(point) gibi yardımcılar; geometry.ts modül yüklenirken bir kez hesaplanan her statik yol; frame.ts şekli değişen parçaların yolları; art.tsx statik parçaları JSX sabitleri olarak canlı bileşene veren sunucu bileşeni; live.tsx ref'ler, döngü, işaretçi ve klavye, aria ve okuma değerini yazan istemci bileşeni; rig.css kapsamlı belirteçler ve stiller; figure.tsx kartı kuran bileşen.)

Sunucu/istemci ayrımı

• Geometri saf TypeScript'tir; bu yüzden sunucuda çalışır ve istemci bitmiş yol dizgilerini alır. Hareket eden bir parçanın her karede yeniden kurulması gerekmedikçe hiçbir geometri kodu gönderilmez. Gerekirse frame.ts, live.tsx tarafından içe aktarılır ve istemciye gider.
• art.tsx statik parçaları JSX olarak kurar (<Solid paths={BASE_ART.slab} tone="mid" /> gibi) ve bunları base, rail, carriage ve dial gibi öğe prop'ları olarak "use client" canlı bileşenine iletir. Canlı bileşen onları ressamın sırasına göre yerleştirir ve hareket edenleri <g ref> ile sarar.
• Yalnızca canlı bileşen ve kit/react/live.tsx istemci kodudur. draw.tsx sunucuda güvenle çalışır.

Büyük sayfalardaki key uyarısı tuzağı

Büyük bir sayfada sunucu yükü büyüktür ve React bazı öğe prop'larını ertelenmiş (lazy) parçalar olarak akıtır. İstemci {props.dial}'i kardeşleri arasında çizer. Bir lazy'yi key'i kontrol edilmiş olarak işaretleyemez; bu yüzden lazy key'siz bir öğeye çözüldüğünde React, canlı bileşeninizi ya da IsoFigure'ı göstererek "Each child in a list should have a unique key" uyarısını basar. Aynı şekil küçük bir test sayfasında hiçbir şey basmaz; bu yüzden şekilleri tek tek kontrol etmek bunu kaçırır.

İki çözüm vardır ve ikisini de baştan uygulamalısınız:

1. Her öğe prop'unun köküne kararlı bir key verin: const DIAL = (<g key="dial">…</g>) ve parçalar (fragment) için <React.Fragment key="sled">. Tek bir öğedeki key'ler hiçbir maliyet getirmez.
2. "use client" bileşenlerini sunucuda kurulan sanatın dışında tutun. Sunucu ağacındaki her istemci bileşeni öğesi lazy bir referansa dönüşür ve bu, tüm atalarını da lazy yapar. Sanatın bazı kısımlarının etkileşime ihtiyacı varsa (örneğin üzerine gelince vurgulama), onları düz <g data-part="…"> yapın ve olayları canlı bileşende delegasyonla yakalayın.

.map ile kurduğunuz her dizi her zamanki gibi key ister.

Stiller

• iso.css'i bir kez, global olarak ya da şekilde içe aktarın. Belirteçler için bir sarmalayıcıya (ya da <body>'ye) className="iso", açık tema için ayrıca data-theme="light" koyun.
• Şekle özgü belirteçleri şeklin sınıfına kapsamlayın (.rig { --rig-glass-top: … }) ve kit belirteçlerini yalnızca kartın ihtiyacı olduğunda .iso-plate içinde geçersiz kılın.
• Şekil belirteçlerini :root'a koymayın.

Okuma değeri

useReadout(), anchor'ından en yakın .iso-plate [data-readout]'u bulur ve say(text) onu yeniden çizim yapmadan yazar. Dinlenme metnini sunucuda çizin ki hidrasyondan önce doğru olsun.

Hidrasyon

Dinlenme pozunu sunucuda ve istemcinin ilk çiziminde çizin; hareketi yalnızca effect'lerde başlatın. Çizim sırasında window okumayın. asksForStillness() güvenlidir çünkü yalnızca effect'ler ve döngüler içinde çağrılır.