feat(preset): add react dedupe and optimizeDeps hints

Author: unadlib

README.md

@@ -258,11 +258,14 @@ Creates an action ref from a raw QRL string.
 
 Returns Vite plugins that scope the React JSX transform to a directory.
 
-| Option    | Type                 | Default                        | Description                               |
-| --------- | -------------------- | ------------------------------ | ----------------------------------------- |
-| `include` | `FilterPattern`      | `[/src\/react\/.*\.[jt]sx?$/]` | Files to transform with React JSX         |
-| `exclude` | `FilterPattern`      | —                              | Files to exclude                          |
-| `react`   | `ReactPluginOptions` | —                              | Additional `@vitejs/plugin-react` options |
+| Option                     | Type                 | Default                        | Description                               |
+| -------------------------- | -------------------- | ------------------------------ | ----------------------------------------- |
+| `include`                  | `FilterPattern`      | `[/src\/react\/.*\.[jt]sx?$/]` | Files to transform with React JSX         |
+| `exclude`                  | `FilterPattern`      | —                              | Files to exclude                          |
+| `react`                    | `ReactPluginOptions` | —                              | Additional `@vitejs/plugin-react` options |
+| `optimizeReactDeps`        | `boolean`            | `true`                         | Add React `dedupe` + `optimizeDeps` hints |
+| `reactDedupe`              | `string[]`           | `['react', 'react-dom']`       | Override dedupe package list              |
+| `reactOptimizeDepsInclude` | `string[]`           | React runtime modules          | Override optimizeDeps include list        |
 
 ## Host Attributes
 

src/preset.ts

@@ -1,6 +1,16 @@
 import react, { type Options as ReactPluginOptions } from '@vitejs/plugin-react'
 import type { PluginOption } from 'vite'
 
+const DEFAULT_REACT_DEDUPE = ['react', 'react-dom']
+const DEFAULT_REACT_OPTIMIZE_DEPS_INCLUDE = [
+  'react',
+  'react-dom',
+  'react-dom/client',
+  'react-dom/server',
+  'react/jsx-runtime',
+  'react/jsx-dev-runtime',
+]
+
 export interface FictReactPresetOptions {
   /**
    * React transform include filter. Keep it narrow so Fict TSX can use Fict compiler/runtime.
@@ -16,6 +26,20 @@ export interface FictReactPresetOptions {
    * `include` and `exclude` are controlled by this preset.
    */
   react?: Omit<ReactPluginOptions, 'include' | 'exclude'>
+  /**
+   * Inject Vite React dependency hints (`resolve.dedupe` + `optimizeDeps.include`).
+   * Helps avoid duplicate React instances and missing pre-bundles in mixed projects.
+   * @default true
+   */
+  optimizeReactDeps?: boolean
+  /**
+   * React packages to dedupe when `optimizeReactDeps` is enabled.
+   */
+  reactDedupe?: string[]
+  /**
+   * Dependencies to include in Vite pre-bundling when `optimizeReactDeps` is enabled.
+   */
+  reactOptimizeDepsInclude?: string[]
 }
 
 /**
@@ -34,5 +58,23 @@ export function fictReactPreset(options: FictReactPresetOptions = {}): PluginOpt
     reactOptions.exclude = options.exclude
   }
 
-  return [react(reactOptions)]
+  const plugins: PluginOption[] = [react(reactOptions)]
+
+  if (options.optimizeReactDeps !== false) {
+    plugins.push({
+      name: 'fict-react-deps',
+      config() {
+        return {
+          resolve: {
+            dedupe: options.reactDedupe ?? DEFAULT_REACT_DEDUPE,
+          },
+          optimizeDeps: {
+            include: options.reactOptimizeDepsInclude ?? DEFAULT_REACT_OPTIMIZE_DEPS_INCLUDE,
+          },
+        }
+      },
+    })
+  }
+
+  return plugins
 }

test/preset.test.ts

@@ -17,13 +17,30 @@ describe('fictReactPreset', () => {
 
     const plugins = fictReactPreset()
 
-    expect(plugins).toHaveLength(1)
+    expect(plugins).toHaveLength(2)
     expect(reactPluginMock).toHaveBeenCalledTimes(1)
     expect(reactPluginMock).toHaveBeenCalledWith(
       expect.objectContaining({
         include: [/src\/react\/.*\.[jt]sx?$/],
       }),
     )
+
+    const depsPlugin = plugins[1] as { config: () => Record<string, unknown> }
+    expect(depsPlugin.config()).toEqual({
+      resolve: {
+        dedupe: ['react', 'react-dom'],
+      },
+      optimizeDeps: {
+        include: [
+          'react',
+          'react-dom',
+          'react-dom/client',
+          'react-dom/server',
+          'react/jsx-runtime',
+          'react/jsx-dev-runtime',
+        ],
+      },
+    })
   })
 
   it('passes through include/exclude/extra options', async () => {
@@ -45,4 +62,28 @@ describe('fictReactPreset', () => {
       }),
     )
   })
+
+  it('allows disabling and overriding dependency optimization hints', async () => {
+    const { fictReactPreset } = await import('../src/preset')
+
+    const disabled = fictReactPreset({
+      optimizeReactDeps: false,
+    })
+    expect(disabled).toHaveLength(1)
+
+    const customized = fictReactPreset({
+      reactDedupe: ['react'],
+      reactOptimizeDepsInclude: ['react', 'react/jsx-runtime'],
+    })
+    expect(customized).toHaveLength(2)
+    const depsPlugin = customized[1] as { config: () => Record<string, unknown> }
+    expect(depsPlugin.config()).toEqual({
+      resolve: {
+        dedupe: ['react'],
+      },
+      optimizeDeps: {
+        include: ['react', 'react/jsx-runtime'],
+      },
+    })
+  })
 })