u/PuruVJ

React Server Components, for Svelte

React Server Components, for Svelte

Hey all, last week I had launched a library called Ogygia. It provides islands, Server Islands, Lakes, and all that nice stuff which allows making your Page's JS scale according to what you mark as interactive

I have overhauled all that, and realized that Ive built a machinery to render a Svelte Component on the server, send it over the wire to client, and having it hydrate there normally, with proper JS and interactivity rules. Basically, dissolving another aspect of client:server boundary.

Page: https://ogygia.puruvj.dev/docs/regions/held-regions

Ah and Ive launched content collections too, so, just point it at your .md/.svx files, and render them on your page using `<Region of={data.body} />`, and voila! JS-less md-html render, with all island imports within the .svx files preserved. works for builder io blocks as well:

https://ogygia.puruvj.dev/docs/content/collections

u/PuruVJ — 6 days ago

[SELF PROMO] Built bundle-roast.puruvj.dev with SvelteKit – npm bundle analyzer with AI roast + e18e integration

Hey r/sveltejs. Shipped bundle-roast.puruvj.dev today. Built with SvelteKit (svelte 5 runes, remote functions, the works).

It's an npm bundle analyzer — basically the bundlephobia replacement nobody asked for but kinda needed. Bundlephobia hasn't been touched in 3+ years and the ecosystem has moved on (ESM, exports maps, brotli is the default everywhere now). On top of the size stuff there's an AI roast per package, which sounds gimmicky but is the actual reason i finished this and didn't abandon it like the last 5 side projects.

few svelte-flavored things:

- the roast prompt has explicit house bias. AI is literally told "ease up if the package is svelte / sveltekit / `@sveltejs/*`" — try /svelte and then /react back to back, you'll feel it

- the homepage has a featured `react+react-dom | vue | svelte` comparison. svelte doesn't win 😅 compiler makes things heavy

- runes everywhere, remote functions for the search submit + compare graph fetches. honestly underused at the moment, the DX is great

- bits-ui for tooltips, satori for OG cards, upstash for the cache layers

recently added e18e integration. the e18e folks maintain a community catalog of "swap this heavy package for this lighter one" recommendations (axios → ofetch, moment → date-fns, lodash → es-toolkit, etc) and every analyzed package is now checked against it. flagged ones get a red badge, endorsed alts get a flame badge. shows on the result page, the dep matrix, the OG cards, and there's a dedicated section on the homepage with hand-picked head-to-heads.

small confession: one of the e18e-endorsed swaps featured on the site is neotraverse, which is my own package. so basically i built the chart that shows my own thing winning. cope.

things to try:

- /compare?q=traverse|neotraverse (the cope demo)

- /compare?q=react+react-dom|vue|svelte (the framework one)

- /react@19.2.6 (single package with the full treatment)

happy to take feedback / questions. especially curious if anyone has thoughts on the methodology — bundlephobia and pkg-size sometimes disagree on the same package and i want to make sure my numbers are defensible.

https://bundle-roast.puruvj.dev

reddit.com
u/PuruVJ — 3 months ago