feat(react): expose virtual module to simplify hmr preamble setup on ssr

[hi-ogawa]

Description

This PR adds virtual module @vitejs/plugin-react/preamble, which allows SSR app to easily enable HMR by adding import side effect at the top of client entry without handling transformIndexHtml. See playground/ssr-react/src/entry-client.jsx for example.

[hi-ogawa]

superseded by #891

[hi-ogawa]

Okay, I think I want this one instead of #891 as patching react isn't great.

[sapphi-red]

If we add support for options.isEntry in dev, I guess we can inject import '@vitejs/plugin-react-swc/preamble' automatically. I think we can have this utility until we have that feature in Vite.

[ArnaudBarre]

This should be added to SWC deps too (and maybe rsc) because the common package in bundled into react plugins. I'm not a power user of pnpm, but is catalog the best way to unsure it's the same version everywhere?

Also should we use a strict version?

[hi-ogawa]

Ah, this might look weird but I just noticed @rolldown/pluginutils is already in dependencies of all three react packages (and rsc doesn't use it) and they are all pinned with same version. So this should be fine.

[ArnaudBarre]

Yes ok with dependabot this should be done in sync 👍

[hi-ogawa]

If we add support for options.isEntry in dev, I guess we can inject import '@vitejs/plugin-react-swc/preamble' automatically. I think we can have this utility until we have that feature in Vite.

That sounds better, but I'm actually not sure how that works. Would that be something like this?

{
  transform: {
    order: 'post',
    handler(code, id) {
      const info = this.getModuleInfo(id);
      if (info?.isEntry) {
         return `import "..";` + code;
      }
    }
  }
}

[sapphi-red]

If we add support for options.isEntry in dev, I guess we can inject import '@vitejs/plugin-react-swc/preamble' automatically. I think we can have this utility until we have that feature in Vite.

That sounds better, but I'm actually not sure how that works. Would that be something like this?
[omit code]

I was thinking about a code like below as opts.isEntry is available for resolveId.

{
  transform: {
    order: 'post',
    handler(code, id, { isEntry }) {
      if (isEntry) {
         return `import "..";` + code;
      }
    }
  }
}

But turns out opts is not available for transform, so I think it'll be like your code.