test(rsc): test react compiler

[hi-ogawa]

Description

• cf. Waku example https://github.com/wakujs/waku/blob/main/examples/05_compiler/waku.config.ts

@vitejs/plugin-react enables babel transform on all environments when plugins exist and this actually breaks rsc environment. It's possible to workaround but we should have friction-less setup. For now, I'll only add a test as an example and create a separate issue for improve ergonomics.

• Option 1: functional babel config (looks verbose)
  • this misses auto config of optimizeDeps.include: ["react/compiler-runtime"].

react({
  babel: (_, { ssr }) =>
    ssr ? {} : { plugins: ['babel-plugin-react-compiler'] },
})

• Option 2: ViteReactPluginApi (works but verbose)

[
  react({ babel: { plugins: ['babel-plugin-react-compiler'] } }),
  {
    name: 'react-babel-override',
    api: {
      reactBabel: (babelConfig, context) => {
        if (context.ssr) {
          babelConfig.plugins = []
        }
      },
    } satisfies ViteReactPluginApi,
  },
]

• Option 3: works but hacky (type errors or any)

react({ babel: { plugins: ['babel-plugin-react-compiler'] } })
  .map(p => ({ ...p, applyToEnvironment: e => e.name === 'client' }))

• Option 4: doesn't work
  • because config hook is not called?

perEnvironmentPlugin(
  'react',
  (e) =>
    e.name === 'client' &&
    react({ babel: { plugins: ['babel-plugin-react-compiler'] } }),
)