Leverage Vite as much as possible

[benmccann]

There's a transformIndexHtml hook we could invoke to allow plugin authors to edit the template. Because we do SSR, it's difficult to leverage because we don't know the page contents until runtime and so it might be of somewhat limited usefulness compared to doing things in hooks, but we could probably support it for full compatibility. E.g. Joaquin wanted to insert a favicon with his Vite plugin.

After vitejs/vite#6629 is merged we may be able to replace some of our logic for gathering the assets by leveraging these new fields. I'm not sure if it will be a big improvement or not.

Can we do prerendering in closeBundle or towards the end of the build or have a new Vite plugin hook that runs after everything else? Right now we have an issue with generating the service worker. It leaves stuff out because pre-rendering needs to happen first. In #4112, Rich moved it to happen in build/index.js, but if this could happen during Vite's build then things like vite-plugin-pwa could leverage the output.

[CoolOppo]

Different repo, but thought I'd add that using Vite for preprocessing (getting useVitePreprocess out of experimental) instead of individual plugins would also be great. This way Vite can also process the CSS url() stuff too.

Expand Side-Rant on the Build Process

Right now, as a new user of SvelteKit, I've read nearly all the documentation and have been using it for weeks on a project, but there is a lot I don't understand at all about the build process. It seems there is some amalgamation of different preprocessors, Vite doing some transformations and bundling, rollup being used by Vite, and then (in my case at least) adapter-cloudflare is using ESbuild. I also have terser enabled in my config. And it's all very decoupled and confusing. For instance, I have literally no idea how postcss is being run, but I know when I add plugins to postcss.config.cjs, they're enabled. I'm using TypeScript as well, but I don't know how I can even compile it and look at individual files if I wanted to. It's also not clear when CSS is actually minified. I had to add postcss-csso to get it minified, but I thought that was probably supposed to be automagical?

Hopefully using Vite as much as possible takes care of some of these issues so that, essentially, the Vite docs are just what I can reference alone as gospel for my build process or whatever. Right now, as someone very interested in having an optimal build, somewhat annoying (although the output is pretty well optimized anyways).

Regardless, SvelteKit is the best framework I've ever used and I will take it over Angular or React any day of the week, lol.

[Rich-Harris]

Going to close this as it's not specific enough to be actionable — it would be nice to turn SvelteKit into a Vite plugin at some point, but we haven't figured out exactly what that would entail and it won't happen before 1.0

[john-michael-murphy]

Invoking transformIndexHtml would be super helpful in the scenarios where you want to build a vite plugin to modify html payload instead of using sveltekit's src/hooks.js.

[kelvindecosta]

Hey @benmccann @Rich-Harris

Correct me if I'm wrong, with version 0.359, The SvelteKit Vite plug-in not only exists but is no longer experimental.

Does this mean that this issue can be reopened and worked upon?

Furthermore, would this allow minification of HTML responses without the use of a handle hook?
Minification via handle hook also messes with CSP hashes, which is a bit unrelated but could be avoided if this issue is solved.

Thank you for your time!