Web Socket Support + HMR support

[nvh95]

Is your feature request related to a problem? Please describe.

No HMR for watching index.html on disk. (chokidar watches => HMR trigger full-reload on *.html file changes - default behavior)

Vitest running too fas.

If use watch (#56),

I did a load test: 10,000 DOM updates can only see 6 UI on browser => We can see more updates on browser if we use websocket, proper HMR?

Describe the solution you'd like

Reloads faster. HMR experience.

Describe how should we implement this feature

(Just my quick thought at 0:35AM)

Send UI updates directly to Vitest Preview server

Vitest Preview server has a webhook /ui-change

call debug() => Vitest Preview server POST /ui-change

Vitest Preview server => send websocket

by doing that, instead of watching for files changes on disk => send events over the requests (HTTP/ WS)

however, probably still trigger full load (since it's index.html). HMR does not work on .html changes.

=> find a way to make HMR work

=> Can we send js code to rebuild vitest preview server to document.documentElement.outerHTML?

Describe alternatives you've considered

Additional context

Load test here, clicks button 10,000 times, with watch on

https://github.com/nvh95/vitest-preview/blob/38005f8f6a52db8a9047eaca2b12cf5f4e40938c/examples/vue-test-utils/App.watch.test.ts#L42-L44

[nvh95]

You can duplicate the contents of one Document object into another using documentElement.cloneNode(true) (deep clone) or by serializing with documentElement.outerHTML. Here are two common approaches:

1. Deep clone with cloneNode

// Assume you already have both document objects
// originalDocument: Document
// newDocument: Document

const clonedDoc = originalDocument.documentElement.cloneNode(true);

// Replace newDocument's root with the cloned one
newDocument.replaceChild(
  newDocument.importNode(clonedDoc, true),
  newDocument.documentElement
);

2. Copy via outerHTML

// Serialize originalDocument's content
const htmlString = originalDocument.documentElement.outerHTML;

// Write into newDocument
newDocument.write(htmlString);