Resolve relative fetch from +layout relative to the layout's route, not the leaf's route

[elliott-with-the-longest-name-on-github]

Describe the problem

Pardon the dense title. I'm sure someone else could word it better.

Consider the following file structure:

src/
└── routes/
    ├── +layout.svelte
    ├── data/
    │   └── +server.ts
    ├── foo/
    │   └── foo2/
    │       └── foo3/
    │           └── foo4/
    │               └── +page.svelte
    └── bar/
        └── bar2/
            └── bar3/
                └── bar4/
                    └── +page.svelte

Now let's say we make a relative fetch in +layout.svelte: const resp = await fetch('data');

When visiting /foo/foo2/foo3/foo4, where do you suppose that fetch goes?

Something like /foo/foo2/foo3/data. That's confusing. The unfortunate thing is, this becomes more annoying if you have a layout further down the tree, as the only way to reliably fetch an adjacent resource is to specify the whole path from the root manually, whereas if you actually wanted the above relative behavior, you could easily achieve it yourself: await fetch(`${$page.url.pathname}/data`).

Describe the proposed solution

Relative fetches in +layout files should resolve relative to the layout's directory, not relative to whatever leaf happens to be rendering.

Alternatives considered

Just be annoyed. 🤷🏻

Importance

would make my life easier

Additional Information

It's like, almost 3AM. If I've said anything stupid, please correct me.

[Rich-Harris]

This makes intuitive sense, though a surprisingly non-trivial question is 'relative to what'? In a case like this...

src/routes/
├ [project]/
│ ├ [...files]/
│ │ ├ actions/
│ │ │ ├ embed/
│ │ │ │ └ +page.svelte
│ │ └ +layout.svelte

...if you visit /project/foo/bar/baz/actions/embed how does the layout 'know' that it should fetch relative to /project/foo/bar/baz? Obviously it's solvable, but it would require some changes to how we do things internally that might be slightly tricky.

But should it resolve relative to /project/foo/bar/baz, or to /project/foo/bar/baz/? Those are two very different things. Should it be driven by the trailingSlash, and if so what if it's ignore? We need to be able to answer this question, and with a solid rationale.

[Rich-Harris]

We discussed this earlier today and concluded that we should always include the trailing slash, since it's easy to do ../ if you have a trailing slash, but very hard to do the equivalent of ./ if you don't

[benmccann]

I feel a bit conflicted about this. It's kind of the only way relative fetches make sense in layouts, but it's a non-standard way for fetch to behave. I wonder if we might be better off just printing a warning suggesting people to do absolute fetches instead

[elliott-with-the-longest-name-on-github]

I feel a bit conflicted about this. It's kind of the only way relative fetches make sense in layouts, but it's a non-standard way for fetch to behave. I wonder if we might be better off just printing a warning suggesting people to do absolute fetches instead

Absolute fetches (especially when a relative fetch would be just fine) are complete anathema to me, especially when I'm actively developing an app. I'll often copy a folder into another folder or rename a parent folder (changing its route). With relative fetches, I'd have to change nothing in my actual files -- without, I have to go through every file to make sure all of the absolute fetches have switched to the new route.

[Rich-Harris]

What sorts of things are you fetching?

[dummdidumm]

Revisiting this I vote for closing this - as Ben says, this is the standard browser behavior and we shouldn't mess with that (also it's probably a bunch of extra code, also on the client side).

[dummdidumm]

Closing since Rich agreed in Discord