chore: Use @preact/preset-vite for Preact templates

[marvinhagemeister]

We've just released a preset for vite so that it's even easier for Preact users to get started with vite. With this we want it to make easier for us to keep the templates up to date and make it less painful for users to upgrade when we add new features to our preset.

Before:

import { defineConfig } from 'vite'
import preactRefresh from '@prefresh/vite'

// https://vitejs.dev/config/
export default defineConfig({
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: `import { h, Fragment } from 'preact'`
  },
  plugins: [preactRefresh()]
})

After:

import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact()]
})

See: https://github.com/preactjs/preset-vite

EDIT: Updated for the new preset version which returns an array of plugins now.

[yyx990803]

While this is nice, I somewhat would like to keep the convention of "just using plugins". See #2500 (comment) - I believe you can achieve what the preset is doing with a plugin that returns an array of sub plugins.

[PuruVJ]

Is there a consensus yet about using this method or the proposed presets property?

[marvinhagemeister]

@yyx990803 Agree, with your assessment of favoring return an array of plugins. I didn't know this was possible when creating the preset. I'll update the preset to use that and update this PR later today.

Happy to have sparked that discussion and to see that everyone came around to work out a fantastic solution! Love this community!

[marvinhagemeister]

@yyx990803 @antfu Published a new version of our preset with your suggested API changes and updated this PR accordingly.

[patak-dev]

Thanks for migrating the preset to a plugin, just tested and it worked great!