Redirect automatically to the page/content you just saved.

[bwklein]

Describe the problem

While editing site contents I often jump right into a particular file in routes, or jump around between files and make edits as I go. There is a really nice feature in Hugo that will redirect automatically to the page/content you just saved.

https://gohugo.io/getting-started/usage/#redirect-automatically-to-the-page-you-just-saved

This is very useful as it takes me to view the page I am working on without navigating to that page through the website.

Describe the proposed solution

For Hugo you pass this as a configuration parameter in the config.toml file, or as a command line flag when running hugo server --navigateToChanged.

Something similar to this functionality would be nice, where I can enable this feature intentionally.

svelte-kit dev --navigateToChanged

Or, as a parameter in the svelte.config.js file ( https://kit.svelte.dev/docs/configuration ).

Alternatives considered

Manually navigating to the preview of whatever file I am working on at the time.

Importance

would make my life easier

Additional Information

I am coming to Svelte/SvelteKit from Hugo, and there are a lot of little nice to have features in Hugo that would improve the SvelteKit dev/editing experience.

[jrmoynihan]

Interesting idea... I'm curious how Hugo handles Save All events. Does it navigate to whichever page's file was most recently open in the editor? What would it do when you edit a component that is used in multiple pages?

I agree it could be a nice flag for DX. I think this is more appropriate as a Vite issue though, since the dev server and HMR is not provided by SvelteKit itself.

[zivbk1]

@jrmoynihan here is the relevant section of Hugo code. https://github.com/gohugoio/hugo/blob/5b5dcb8d5a4669e1768951b452cfd53c6b25825c/commands/hugo.go#L1167

If I am reading this right (not a Go master here), It monitors changes to 'content' files, then looks for write or create events in the filesystem notifications stream and triggers a reload to the changed page when it finds one.

It does look like there is a debounce function for multiple changes in a short time frame, and there is a 'pickone' content file function that might find the most recent change from the event log and reload to that.

I don't mind putting this issue in the Vite project. But I thought I would start here first since it would be in the context of a 'SvelteKit' configuration and/or 'dev' flag.

[Renkas]

So this would only work for routes without parameters?

[bwklein]

So this would only work for routes without parameters?

In Hugo it would only redirect to a page that has a 'page' representation on the site. In SvelteKit, I would think these would be for files in 'routes' that render to an HTML page on the site.

The site would still reload on any change to files that are being watched, but the redirect should only happen for pages, not for something like a js endpoint, page (shadow) endpoints, etc.

I am not sure how the difference would be identified and used to filter the redirect action. Maybe only for files with .svelte, .md extensions would be good enough.

[Rich-Harris]

@bwklein what @Renkas is asking is this: if you edit src/routes/blog/[slug].svelte, what page should we redirect to?

If I'm honest this sounds like more complexity than it's worth. Changing a file often isn't an indication that I want to look at it — it could be a result of Save All, it could be a result of git checkout feature-branch, it could be a result of running Prettier, or VSCode updating an import for a file I just moved, or all sorts of other things.

[bwklein]

@Rich-Harris I would see a variable/parameter based endpoint as something to not redirect to either. As you say, the only way you could know what you redirect to would be to identify what data changed that would be reflected at a certain slug passed into the variable.

My primary use case with SvelteKit is with .svelte and .md files in the routes folder. This is where a specific file change correlates to a specific HTML endpoint on the dev preview site. I am using a CMS built into VSCode to manage the files that contain markdown content in pages, blog posts, etc. You can see a bit about how I am working in this video https://youtu.be/F_WC4UxStvs In this environment my request makes more sense to me. As the additional capabilities of SvelteKit pop-up and different use cases arise, the concept gets more fuzzy and/or limited.

Now that I am thinking about it, maybe it would be better to have this be part of the CMS, that knows the data (file or source) that I am modifying and maps that to some modified URL on the preview server to load into view. I am not sure of that mechanism, but something has to be aware of what changed, and what you bring into view because of that modification.

It has been a very useful feature with Hugo's live preview server and they have figured it out in that context, but maybe SvelteKit is so flexible and the complexity of more abstraction makes a feature like this too hard to realize. Fortunately, I can click around the live dev preview manually, so there isn't anything blocking me or my projects.

I appreciate you all taking time to consider this idea.