Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"magic" layout for resetting #5311

Closed
stephane-vanraes opened this issue Jun 29, 2022 · 4 comments · Fixed by #6174
Closed

"magic" layout for resetting #5311

stephane-vanraes opened this issue Jun 29, 2022 · 4 comments · Fixed by #6174
Labels

Comments

@stephane-vanraes
Copy link
Contributor

Describe the problem

Ever since named layouts it's no longer possible to do __layout.reset.svelte.
A workaround is to define a top level __layout-reset.svelte with just an empty slot, then apply this reset as a named slot: __layout@reset.svelte

Describe the proposed solution

Have reset be a magic named layout that does exactly the same without having to define this file.

Of course this would break for people that use the reset with something else but an empty slot, maybe SvelteKit can check if it is defined and if not fall back to an empty slot ?

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

@dummdidumm
Copy link
Member

Had the same request at a conference from two people. Alternative: bring __layout.reset back. Pro: no danger of collision. Con: you know need to know about both the @ and the . character and their meanings

@dummdidumm dummdidumm added feature request New feature or request router labels Jun 29, 2022
@stephane-vanraes
Copy link
Contributor Author

Had the same request at a conference from two people. Alternative: bring __layout.reset back. Pro: no danger of collision. Con: you know need to know about both the @ and the . character and their meanings

How would this work if people tried to do __layout.reset@something ?

With @reset and the rule you cannot have multiple inheritance this does not pose a problem, with .reset this suddenly becomes an option that could give confusing results.

@furudean
Copy link
Contributor

furudean commented Jun 29, 2022

Named routes are already a very complicated feature. I don't think it's a good idea to introduce more magic to an already commonly misunderstood system.

I think the solution lies in better educating folks on this.

How about adding the @reset layout to the default Svelte Kit template with a short comment on what it's used for? Adding this this would help bring attention to this pattern and raise it to a de-facto standard.

I think the docs are lacking, too. They immediately go off about how named layouts can do a ton of stuff but no common use cases. It's a bit easy to get "lost in the sauce" as one might say. I think putting a tl;dr at the top with some common recipes would go a long way.

@Mlocik97
Copy link
Contributor

Mlocik97 commented Jun 29, 2022

I think from all features that Svelte and SvelteKit offer, layouts are actually the most confusing and complicated feature. So I agree with @furudean . I use it really carefully and a lot of more complicated stuff that someone would typically use layouts for, I do with dynamic content... like:

./src/routes/__layout.svelte:

<script>
    import SomeContainer from '$lib/SomeContainer.svelte';
    import { page } from '$app/stores';
 </script>
 
 {#if $page.url.pathname.startWith('/something')}
     <SomeContainer>
         <slot />
     </SomeContainer>
 {:else}
     <slot />
 {/if}

even tho, doing it with named layouts would make more sense.... and it's just because I find this less chaotic, mainly in more complicated layout structures.

I think, we need to redesign layouts (again),... and I got idea of having ./src/layouts/ folder, where we would be able to create all layouts, use them for pages programatically. In pages, we would have:

<script context="module">
   export const layouts = {
		a: {
			b: {
				c: {}
			}
		}
	};
</script>

and it would render content of that page in layout c that would be in layout b that would be in layout a. Or something like this. (actually that export const layouts is just first idea, it would probably look different, but somehow we would define all layouts like this)

dummdidumm added a commit that referenced this issue Aug 24, 2022
#6124

Closes #6196 (using (groups) and/or composition)
Closes #5763 (root layout guaranteed to always exist + await parent())
Closes #5311 (+page@.svelte)
Closes #4940 (no longer possible to get into this situation)
Closes #2154 (only a single root layout now)

Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
Co-authored-by: Dominik G. <dominik.goepel@gmx.de>
Co-authored-by: Ignatius Bagus <ignatius.mbs@gmail.com>
Co-authored-by: Conduitry <git@chor.date>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants