thoughts on server component package with internal client boundary

[hi-ogawa]

• fix: partial support of server-client-mixed package + chore: add react-tweet demo #384

Also the series of the issues related to client boundary resolution

• feat(react-server): expose external client reference via virtual module during dev #187
• fix(react-server): fix ?import query dual package when client module is used at both boundary and non-boundary #315
• fix(react-server): noramlize client reference with ?t= query (hmr timestamp) #316

todo

• is it possible to see the original import source during transform? (though this doesn't really help anything)
• is it possible to force stripping ?v=... certain dependenceis? (assuming they are not cjs and can put it in optimizeDeps.exclude)
• setup artificial packages to demonstrate issue (also test it on Next.js)
  • legitimate one (self referential exports)
  • shaky-but-works one (like react-tweet)
  • broken one
  • deep dep
• fully non-externalize deps
  • vendering? make it free from /node_modules/
• try virtual:normalize-url/... like in https://github.com/hi-ogawa/vite-environment-examples/blob/c08e7e7f697e5b0734940f4111735b4727c78049/examples/react-server/vite.config.ts#L216-L265

[hi-ogawa]

Examples

probably impossible to support

• package.json
  • externally only server.js is accesible as a package
  • "type": "module" or "commonjs" doesn't matter

{
  "name": "xxx",
  "type": "module",
  "exports": "./server.js"
}

• server.js

import { SomeClientComponent } from "./client.js"

export function SomeServerComponent() {
  return <div>
    <div>Server</div>
    <SomeClientComponent />
  </div>
}

• client.js

"use client"

export function SomeClientComponent() {
  return <div>client</div>
}

For browser, Vite needs to optimize client.js but is it possible for Vite to reference client.js which is not a public export entry?

Vite-friendly way to write the same package

• package.json

{
  "name": "xxx",
  "type": "module",
  "exports": {
     ".": "./server.js",
     "./client": "./client.js" // 👈 expose client
  }
}

• server.js

import { SomeClientComponent } from "xxx/client" // 👈 reference via package export even internally 

export function SomeServerComponent() {
  return <div>
    <div>Server</div>
    <SomeClientComponent />
  </div>
}

• client.js

"use client"

export function SomeClientComponent() {
  return <div>client</div>
}