Clean up dev mode

[wmertens]

What is it about?

Vite dev mode can be done better

What's the motivation for this proposal?

Right now, dev mode replaces the vite devserver with a custom one. This is done in the qwikVite plugin. It uses src/entry.ssr to implement SSR, and adds dev helpers like checking image sizing, click-to-component etc.
Furthermore, there's a devserver for qwik router, which mostly duplicates what the qwikRouter plugin does.

Proposed Solution / Feature

Instead, there should be two dev approaches:

1. (default) use the new environment dev runner to render with entry.ssr and then use transformhtml hooks to add the image sizing and click-to-component.
2. (optional) run the production server somehow in a dev environment, TBD

Start with 1:

• remove the dev server from qwikVite
• add transformHtml hooks
• set up a RunnableDevEnvironment that calls entry.ssr to get the HTML that vite will transform
• remove the dev server from qwikRouter, everything should still work (I did a bunch of changes to make that happen)
• use server.watcher to watch the route directories for changes, invalidating the qwik router BuildContext when index/layout files are added/removed/changed
• add a template for CSR under starters/: a src/index.html with an embedded render script that renders src/root and a vite config that uses it as an entry point, no runnableDevEnvironment needed

For 2:

• one option is to export a middleware or fetch function factory from entry.server, and call that from vite for every ssr request
  • this requires injecting the imported css as well as the dev helpers
• another option is to run the entire server, expecting it on some port, and to proxy traffic to it from vite, which then gathers html responses and transforms them
• a variation is to still use the middleware approach, but to provide a fake response object that will collect the response stream and transform it on completion
• another option is to run vite in middleware mode, but that means that vite transforms and runs the server which then runs vite for the client files.
• there is also the problem of websockets, which I have a solution for in the case of middleware

A note on CSS: in production, qwik serves all css files it finds in assets. In dev mode, vite serves all css that is imported without ?inline by the used files.

Links / References

No response