feat(react-server): expose external client reference via virtual module during dev

[hi-ogawa]

By wrapping "use client" node_modules with virtual module on RSC server, this will allow only main server to resolve node modules with correct deps optimization hash.

• server (RSC)

//// plugin: server-virtual-use-client-node-modules

// some/page.tsx
import { Balancer } from "react-wrap-balancer";
// ⇓ `resolveId` hook to overwrite Vite's "node resolve"
import { Balancer } from "virtual:use-client-node-module/react-wrap-balancer";

// virtual:use-client-node-module/react-wrap-balancer
// ⇓ `load` hook
export const Balancer = createClientReference(
  "/@id/__x00__virtual:use-client-node-module/react-wrap-balancer::Balancer"
)

• client (SSR and Browser)

//// plugin: client-virtual-use-client-node-modules

// virtual:virtual:use-client-node-module/react-wrap-balancer
// ⇓ `load` hook
export { Balancer } from "react-wrap-balancer";

// client's "node resolve" kicks in, so deps optimization works as usual

react-wrap-balancer example

todo

• update starter to use Link directly
• test react-wrap-balancer https://unpkg.com/browse/[email protected]/package.json
• refactor