Add "presets" option to Vite config

[aleclarson]

Is your feature request related to a problem? Please describe.
Currently, plugins cannot add other plugins. #2484

Describe the solution you'd like
Add presets array option, which calls mergeConfig on each preset before plugins are processed.

The user config is merged after any presets.

[patak-dev]

Some extra context. If the preset needs to be configured, frameworks and libs tools like tailwind or windicss can provide a factory to build the preset, following the same pattern as plugins.

Example with presets

export default {
  presets: [ preact({ ... }), windiCSS({ ... }) ],
  // user options
})

Preact now provides withPreact() that uses mergeConfig internally

export default withPreact( withWindiCSS({
  // user options
})

SvelteKit is also talking about providing a Preset

@antfu was proposing extending defineConfig to directly take several configs/presets (and use mergeConfig internally)

export default defineConfig(
  preact({ ... }), 
  windiCSS({ ... }),
  {
    // user options
  }
})

(he used the name defineConfigWithPresets, I think it could remain the same)

I think that both adding a presets option, or extending defineConfig are better for users and easier for maintainers than the withXXX utility. And FWIW, I find @antfu's idea easier to read.

[bluwy]

FWIW, a preset can also be written as a plugin. It can add other plugins by having the preset function to return an array of plugins instead, e.g. https://gist.github.com/bluwy/18b8d103cea5f823a95c4ce39d36a048. Vite will flatten the plugins before resolving them.

Though it doesn't look as simple as just exporting a config object/function.

[marvinhagemeister]

@bluwy TIL, didn't know that it was possible to return arrays there!

[atzcl]

on this basis, hope to support async export of userConfig

vite/packages/vite/src/node/config.ts

Line 705 in 5ec13d8

typeof userConfig === 'function' ? userConfig(configEnv) : userConfig

[yyx990803]

What @bluwy pointed out: Vite actually accepts nested array of plugins so you can do:

const myPlugin = () => [subPluginA(), subPluginB()]

export default {
  plugins: [myPlugin()]
}

This is essentially what @vitejs/plugin-legacy is doing (it contains 3 internal sub-plugins). I'm not sure if the concept of presets is really necessary when you can just do that.