Átadási lista

Rövid lista indulás előttre. Menj végig rajta, mielőtt élesítenéd az integrációt.

Akkor használd, ha

• Készen vagy egy Lupian .riv integrálásával, és élesítés előtt állsz.
• Csak meg akarsz győződni róla, hogy nem maradt ki semmi.

Mire lesz szükséged

• A .riv fájl éles helyen.
• Az oldal, ahova be van ágyazva, staging vagy éles környezetben.
• DevTools.

Fájl és hosting

• [ ] A .riv fájl stabil helyen van hostolva (saját CDN, app bundle vagy statikus origin).
• [ ] Az URL HTTP 200-at ad vissza.
• [ ] Ha az origin eltér az oldalétól, az Access-Control-Allow-Origin helyesen van beállítva.
• [ ] A Cache-Control be van állítva — hosszú cache + fájlnév-verziózás vagy ?v=... query.
• [ ] A fallback kép (PNG/SVG) a .riv mellett van hostolva.

Kód

• [ ] @rive-app/webgl2 (vagy a React / -single változata) van használva, hacsak a handoff.md mást nem mond.
• [ ] A stateMachines érték pontosan egyezik a handoff.md-ben szereplővel (kis- és nagybetűérzékeny).
• [ ] Az artboard be van állítva, ha a fájlban több artboard van.
• [ ] A resizeDrawingSurfaceToCanvas() az onLoad-on belül van meghívva.
• [ ] Egy window.addEventListener("resize", ...) (vagy useRive / wrapper megfelelő) újra meghívja.
• [ ] Sehol nincs <canvas width="..." height="..."> attribútum.
• [ ] A cleanup() meghívódik unmountkor / route-váltáskor / beforeunload-kor (a useRive és a kész Framer komponens ezt automatikusan kezeli).
• [ ] Az onLoadError legalább a konzolra logol (vagy fallbacket mutat).

Elrendezés

• [ ] A canvas wrappernek explicit mérete van (pl. aspect-ratio + width: 100%).
• [ ] A fit és alignment egyezik a handoff.md-vel (alap: Fit.Contain, Alignment.Center).
• [ ] Retina / 4K kijelzőn éles a kép — nem homályos.
• [ ] Mobilon a canvasen touch-action: none van.

Interakciók

• [ ] A handoff.md-ben felsorolt minden input be van kötve (ha az integrációd használja).
• [ ] A handoff.md-ben felsorolt minden eseményt kezelsz (ha szükséged van rá).
• [ ] Az onRiveEventReceived (vagy a React-megfelelője) regisztrálva van, ha eseményeket használsz.

Teljesítmény és memória

• [ ] Ha több Rive animáció van egy oldalon → minden példányon useOffscreenRenderer: true.
• [ ] A nem látható animációk lazy-loadolva vannak (IntersectionObserver), ha az oldal hosszú.
• [ ] SPA-navigációkor nincs konzolfigyelmeztetés, és a memória több route-váltás után sem kúszik el.

Böngésző és eszköz mátrix

• [ ] Tesztelve Chrome (latest), Safari (latest + iOS), Firefox (latest), Edge alatt.
• [ ] Tesztelve legalább egy valódi mobil eszközön.
• [ ] Tesztelve Retina / 4K kijelzőn.
• [ ] Ha az oldalon van CSP, a 'wasm-unsafe-eval' szerepel a script-src-ben.

SSR (Next.js / Nuxt / Astro / Remix)

• [ ] A Rive komponens kliensoldali ("use client", dynamic(..., { ssr: false }) vagy a keretrendszer megfelelője).
• [ ] A build logban nincs SSR hiba.

Verziózás

• [ ] Amikor a Lupian új .riv-et küld, változik a fájlnév vagy a ?v= query.
• [ ] A handoff.md az éles .riv aktuális verziójához tartozik.

Ha kész vagy

• Az animáció egyezik a preview.mp4-fel (vagy a demo.lupian.studio demóval).
• A konzol tiszta.
• A Network fülön a .riv második töltődéskor cache-ből jön.

Ha valami nem stimmel

• Tünet alapján: Hibakeresés.
• Aztán: Mit küldj a Lupiannek.

Kapcsolódó

• QA lista
• Mit küldj a Lupiannek