The word-fade engine ships with every app, whether or not it animates

Aperta
#681 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@xyrolle ci sta già lavorando.

Dal 16/10/2026.

  • #682 di @xyrolle — aperta

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
1/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
react, rollup, typescript

Direzione di ricerca

The issue identifies index.tsx imports from lib/animate and the proposed streamdown/animate entry; read those alongside the existing opt-in plugin entries and #680's Mermaid deferral. Check the linked PR #682 for the implementation and tests. Done means apps without animated do not request the animation engine, while both described animation configurations work as specified.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Problem Statement

index.tsx imports createAnimateTimeline and createRenderAnimatePlugin from lib/animate statically. The word-fade engine is therefore in the main bundle of every app, including apps that never set animated. In an app that imports only Streamdown, the engine is about 2.1 KiB gzip with Rolldown and 2.3 KiB with esbuild.

Proposed Solution

Code highlighting, math, CJK and Mermaid are already opt-in plugins. The animation could follow the same pattern:

  • Build the engine as its own entry, streamdown/animate, which the main bundle reaches only through import().
  • animated together with plugins={{ animate }} bundles it and animates from the first render.
  • animated alone loads it on demand, after the component's first commit on the client.
    • Text renders without the fade until the engine arrives.
    • The words already on screen when it arrives stay put, so on a cold start the first words of the first animated message appear without the fade.
  • Components without animated never request it.

createAnimatePlugin stays importable from streamdown.

Alternatives Considered
  • Making animated require plugins.animate. That's simpler, but it breaks existing code, so it would wait for a major.
  • Leaving the engine in the main bundle, as it is today.
Use Case

Chat UIs that render settled answers, or that pace text with their own reveal, never use the word fade but ship it with every page that renders Markdown.

Priority

Nice to have

Contribution
  • I am willing to help implement this feature
Additional Context

I have an implementation with tests and will open a PR after this issue.

Related: #619 (animation lifetime and history), #625 (smooth streaming), #626 (animation effects) and #678 (animation after isAnimating ends) touch the same engine; #663 adds another entry to the package; #680 defers the Mermaid block the same way.

Lingua principale
TypeScript
Stelle
5.7k
Fork
319
Merge medio
2g 14h
PR unite (30g)
24

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di vercel/streamdown

Tutte le issue di vercel/streamdown

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.