Don't reload the web page when editing actions in +page.server.ts

[amr3k]

Describe the problem

When developing complex forms, validation becomes hard problem especially when the vite server reloads the whole page every single change in actions.

I made this stackblitz demo to better illustrate this issue.

Describe the proposed solution

I'd love to be able to edit anything inside the actions without having to fill all the data within the form.

Alternatives considered

No response

Importance

would make my life easier

Additional Information

I don't really know if this is a sveltekit issue, or a vite one.

[Rich-Harris]

It's a Vite issue. I assume Vite is sending the reload command to the client every time the server-side code changes. Ideally I think Vite would implement the HMR API for ssrLoadModule (vitejs/vite#7887) and wouldn't trigger a full reload in cases where the hot update was accepted.

I don't think there's anything SvelteKit can do to change this, but I'll leave the issue open for now in case there's a trick I'm missing.

[david-plugge]

What about vite-node? That´s what nuxt is using for running the dev server.

// inside the vite plugin
configureServer(vite) {
    const node = new ViteNodeServer(vite, {
        transformMode: {
            ssr: [/.*/],
            web: [],
        },
    });

    installSourcemapsSupport({
        getSourceMap: (source) => node.getSourceMap(source),
    });

    const runner = new ViteNodeRunner({
        root: vite.config.root,
        base: vite.config.base,
        resolveId: (id, importer) => node.resolveId(id, importer),
        fetchModule: (id) => {
            id = id.replace(/\/\//g, '/');
            return node.fetchModule(id);
        },
    });

	return () => {
        vite.middlewares.use(async (req, res) => {

            const { handle } = await runner.executeFile('path/to/the/server.js');
			
			handle(req, res)
        });
	}
}

Nuxt code:
https://github.com/nuxt/nuxt/blob/main/packages/vite/src/vite-node.ts
https://github.com/nuxt/nuxt/blob/main/packages/vite/src/runtime/vite-node.mjs

[Rich-Harris]

Not sure what that provides beyond ssrLoadModule?

[david-plugge]

I´m not sure how vite-node actually works under the hood and if it can be the solution to this problem, just throwing this in here.

From the README:

The engine powers Vitest and Nuxt 3 Dev SSR.

and in the features list:

Hot module replacement (HMR)

This looks like the HMR alternative to ssrLoadModule

[Rich-Harris]

Interesting. It seems like quite a lot of heft and complexity — would prefer a Vite-native solution.

I'm going to close this as I don't think there's another option besides vite-node and vitejs/vite#7887. One thing that might be of interest though — #8710 will implement 'snapshots' which allow you to recover form state that would otherwise be lost when you navigate away from a page. It works for this case — not as well as HMR, but not terribly:

<script>
  /** @type {HTMLFormElement} */
  let form;

  /** @type {import('./$types').Snapshot} */
  export const snapshot = {
    capture: () => Object.fromEntries(new FormData(form)),
    restore: (data) => {
      for (const key in data) {
        const field = /** @type {HTMLInputElement} */ (form.querySelector(`[name=${key}]`));
        if (field) field.value = data[key];
      }
    }
  };
</script>

<form bind:this={form} method="POST">
  <input type="text" name="name" />
  <button>submit</button>
</form>

[vqt123]

yes, reloading every time you make an API change is excruciating DX. It's also quite difficult to search for a solution. lucky to have come across this thread

[vqt123]

Found a workaround here

#9241