React's Odyssey: Harnessing the Titans of Animation and Performance
summary
Shows how to mount Svelte components inside React by wrapping Svelte files with a bridge that passes reactive props (using Svelte 5’s $state reactivity), compiles Svelte via the compiler, and automates everything with a NEOS Vite plugin that rewrites ?react imports into virtual modules (resolveId + load). Demoed a real case where a dock “dog” component drops from 37.9KB → 6.3KB (minified+gzipped), the plugin works live, and remaining gaps are SSR handling and generated type safety.
AI-written summary · about
chapters (15)
- 0:00Introduction and setup
- 2:08Why combine React and Svelte
- 3:09Mounting Svelte in React
- 5:16Making props reactive
- 6:40Svelte 5 runes and reactivity
- 9:27Compiling Svelte for React
- 10:51Simplifying component wrappers
- 12:36Automating with Vite plugin
- 17:39Performance and animation benefits
- 20:51Svelte as framework WebAssembly
- 21:54Bundle size comparison demo
- 24:46Microservices at component level
- 26:09When to use this approach
- 27:55Limitations and future work
- 28:16Q&A and closing
