Lightnews — Scholar-powered news

hiogawa.bsky.social @hiogawa.bsky.social · 5h

`?assets` query import is just a virtual module and it's aimed to be runtime agnostic. You can find examples with `@cloudflare/vite-plugin` github.com/hi-ogawa/vit... and Nitro vite plugin github.com/nitrojs/vite...

feat: add vue-router-ssr example with SSR assets API by hi-ogawa · Pull Request #5 · nitrojs/vite-examples

Hey 👋 This is very early prototype, but I wanted to share with you to get feedback. You can find a rough documentation in https://github.com/hi-ogawa/vite-plugins/tree/main/packages/fullstack. This...

github.com

1

hiogawa.bsky.social @hiogawa.bsky.social · 5h

Also just right time, Remix 3 came out with a builtin concept of "hydrated component", so I ported Preact island demo. The plugin here implements `/islands/` and `/frames/` directories convention to auto wrap component by Remix `hydrated` and `Frame`. github.com/hi-ogawa/vit...

1 1 2

hiogawa.bsky.social @hiogawa.bsky.social · 5h

Here are examples for React router, Vue router, and Preact-based islands. These are super minimal examples, but eventually I'm hoping to be able to provide primitives for higher level meta-frameworks just like `@vitejs/pllugin-rsc` has provided foundation for Waku and React router.

1 2

hiogawa.bsky.social @hiogawa.bsky.social · 5h

I wrote a proposal for improving client assets management on Vite SSR application by introducing `?assets` query import. It includes many examples to demonstrate how it can be used in various routers and frameworks setup. Feedback is appreciated! github.com/vitejs/vite/...

RFC: Client assets metadata API for SSR · vitejs vite · Discussion #20913

This proposal introduces a new API that enables server code to access client runtime assets metadata required for server-side rendering in a framework agnostic way. This feature is currently protot...

github.com

1 3 8

hiogawa.bsky.social @hiogawa.bsky.social · 7d

Here is a PR github.com/facebook/rea...

fix: `React.use` inside `React.lazy`-ed component on SSR by hi-ogawa · Pull Request #33941 · facebook/react

Summary Closes Bug: React.use inside React.lazy-ed component returns other React.use value on SSR #33937 As indicated by the previous issue comment #27731 (comment), it looks like legacy "th...

github.com

3

hiogawa.bsky.social @hiogawa.bsky.social · 7d

I just realized my name is on React 19.2.0 release note. Due to client reference being lazy component, it was super tricky for Vite RSC and Waku (though we ended up finding a workaround). I'm glad I was able to land my first PR on React to fix this!

1 20

hiogawa.bsky.social @hiogawa.bsky.social · 19d

For this use of `"use server"` to work, the route needs to be `ServerComponent` route.

1 1

hiogawa.bsky.social @hiogawa.bsky.social · 19d

Quick improvement to reduce potential confusion of "use server" on React Router RSC framework mode github.com/vitejs/vite-... Previously following "use server" is silently ignored, but this should be flagged as build error as React router inject `"use client"` for `export default` routes.

1 1

hiogawa.bsky.social @hiogawa.bsky.social · 20d

Forgot to mention that this means it works with Waku too (and this is actually what I tested originally) github.com/hi-ogawa/wak...

hiogawa.bsky.social @hiogawa.bsky.social · 20d

This nitro plugin is something I made based on how Tanstack Start integrates Nitro. Now I'm working on making the official Nitro Vite plugin to support RSC plugin out of the box. github.com/nitrojs/nitr... github.com/vitejs/vite-...

Nitro Vite Tracker · Issue #3461 · nitrojs/nitro

🎉 Nitro v3 is becoming "just" a Vite plugin! NoteYou can share feedback and ideas in 💬 Nitro Vite Feedback discusison. This issue is to track the development roadmap and related tasks. Initial PR (...

github.com

2 8

hiogawa.bsky.social @hiogawa.bsky.social · 20d

I've been experimenting with Nitro and made a plugin for `@vitejs/plugin-rsc`-based app
to be deployed anywhere. Here is an example with React Router RSC! github.com/hi-ogawa/rea...

1 6 34

hiogawa.bsky.social @hiogawa.bsky.social · 28d

Read the updated documentation for more info! github.com/vitejs/vite-...
It's good to know Next.js clarifies this as a "framework feature" and not package's own behavior, which I obviously referenced it when adding the doc 😀 nextjs.org/docs/app/get...

hiogawa.bsky.social @hiogawa.bsky.social · 28d

Improved the error message of invalid `server-only` and `client-only` imports on Vite RSC plugin! These "only" packages provide errors only during runtime on their own, but I didn't see any reason not to surface as build time error, so it has been included as a "plugin feature".

1 3

hiogawa.bsky.social @hiogawa.bsky.social · Sep 15

Actually while testing this, I found a bug in rsc plugin, which was causing a weird font flash during dev, but it's now fixed in latest release github.com/vitejs/vite-.... The demo app is found in github.com/hi-ogawa/rep...

fix(rsc): keep server stylesheet link for hmr and avoid injecting css via client js by hi-ogawa · Pull Request #841 · vitejs/vite-plugin-react

github.com

2

hiogawa.bsky.social @hiogawa.bsky.social · Sep 15

Additionally, metric-based fallback font generation can be provided by just adding `fontaine` plugin github.com/unjs/fontaine/

1 1

hiogawa.bsky.social @hiogawa.bsky.social · Sep 15

Not as fancy as `next/font`, but simple font optimization (self hosted font + preload link) is super easy thanks to fontsource fontsource.org/docs/getting...

1 4

hiogawa.bsky.social @hiogawa.bsky.social · Sep 9

It may be possible to implement "use cache" like feature using `transformHoistInlineDirective`, which is exported from `@vitejs/plugin-rsc/transforms`. My minimal example is found here github.com/vitejs/vite-...

2

hiogawa.bsky.social @hiogawa.bsky.social · Sep 9

RSC transform utility is available from `@vitejs/plugin-rsc/transforms` since v0.4.29 (just released). github.com/vitejs/vite-... This utility was initially in `@hiogawa/transforms` but moved inside `@vitejs/plugin-rsc` for easier maintenance, and then now it became usable standalone again 😀

1 4

hiogawa.bsky.social @hiogawa.bsky.social · Sep 9

For example, this is how it looks before and after the change on Waku website waku.gg More info in github.com/wakujs/waku/...

4

hiogawa.bsky.social @hiogawa.bsky.social · Sep 9

Inspired by Parcel, `@vitejs/plugin-rsc` recently changed `"use client"` chunking strategy and it's now optimized based on how they are imported on server. This works nicely with route created by `import.meta.glob` since it merges client components based on page usages. github.com/vitejs/vite-...

feat(rsc): ability to merge client reference chunks based on server chunk usage by hi-ogawa · Pull Request #767 · vitejs/vite-plugin-react

Description follow up to feat(rsc): ability to merge client reference chunks #766 It should be already possible on user land, but this PR adds pass more metadata to clientChunks option to do it e...

github.com

1 3

hiogawa.bsky.social @hiogawa.bsky.social · Sep 9

RSC support is now included in Vite documentation! vite.dev/plugins/#vit... It's mostly just a link to the plugin readme though. Any feedback on documentation is welcome! 🙂

1 20

hiogawa.bsky.social @hiogawa.bsky.social · Aug 16

Great demo! Yes, RSC should mostly work on Stackblitz but with minor caveats. Since AsyncLocalStorage is not entirely reliable, `React.cache`, `ReactDOM.preinit` etc. can do odd stuff. Another one is `TextEncoder.decode`, which can break rsc-html-stream with this edge case github.com/stackblitz/w...

1

hiogawa.bsky.social @hiogawa.bsky.social · Jul 14

Thanks for testing out! I'm reading this github.com/the-guild-or... and it looks like this is data mode setup (i.e. non framework mode). In this case, you probably don't need "react router" plugin. For this, you can take a look at example like here github.com/remix-run/re...

1

hiogawa.bsky.social @hiogawa.bsky.social · Jun 2

After I saw Qwik team's Rollup PR for merging merging `this.emitFile` chunks github.com/rollup/rollu...,
I was interested to try out the same idea for optimizing `"use client"` chunks and it looks like this works beautifully! github.com/hi-ogawa/vit...

6

hiogawa.bsky.social @hiogawa.bsky.social · Jun 2

Yup, hopefully we will be able to remove anything with `Proxy` in `react-server-dom-vite` 😅 But this use case of `createFromReadableStream` on the server was just totally new to me, so I'm not sure what's the proper solution.