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

Generate automatic <slot /> +layout.svelte when +layout.ts is present #5967

Closed
elliott-with-the-longest-name-on-github opened this issue Aug 17, 2022 · 5 comments · Fixed by #7619
Labels
feature / enhancement New feature or request p2-nice-to-have SvelteKit cannot be used by a small number of people, quality of life improvements, etc. router
Milestone

Comments

@elliott-with-the-longest-name-on-github
Copy link
Contributor

Describe the problem

Sometimes, I just want to create "side effects" from visiting a route:

// +layout.ts
import { crumbsStore } from '$lib/components/Breadcrumb';
import type { LayoutLoad } from './$types';

export const load: LayoutLoad = () => {
	crumbsStore.addCrumb({ path: '/data-analytics/operations', name: 'Operations', enabled: true });

	return {
		pageTitle: 'Operations',
	};
};

In this case, there doesn't need to be any +layout.svelte, because all I want to do is add my pageTitle to the rolled-up data object (which my root layout is listening to, setting the page's Title) and add a breadcrumb to a store (which is how my Breadcrumb component works). Right now, I have to create a +layout.svelte with only <slot /> as the content, or nothing will be rendered on or under this route. That seems kind of silly.

Describe the proposed solution

When a +layout.ts or a +layout.server.ts exists but there isn't any +layout.svelte, Kit should just inject a default +layout.svelte containing an empty slot.

Note: If we went this route, we'd have to make an update to how we're generating types, as currently +layout.ts and +layout.server.ts don't get their types generated if there's no +layout.svelte.

Alternatives considered

Just live with the extra files 🤷🏻

Importance

nice to have

Additional Information

No response

@dummdidumm dummdidumm added feature / enhancement New feature or request router p2-nice-to-have SvelteKit cannot be used by a small number of people, quality of life improvements, etc. labels Aug 17, 2022
@benmccann benmccann added this to the whenever milestone Aug 17, 2022
@dummdidumm
Copy link
Member

When implementing this we need to take into account named layouts. So far, the @ sign is only allowed on .svelte files, which would need to be softened here.

@AlbertMarashi
Copy link

AlbertMarashi commented Aug 19, 2022

Also bumped into this issue, was confused why LayoutLoad wasn't appearing in import("./$types"). Creating a +layout.svelte with a <slot/> worked

@LeoDog896
Copy link
Contributor

Also encountered this issue with making a form action. This took me so long to realize, so an error message (at the very least) would be appreciated. (The file errors out when a +page.server.ts is present only, with the error: node.component is not a function)

@ghostdevv
Copy link
Member

Ran into this when I had a layout group without a +layout.svelte the error I got was node.component is not a function

@UnlimitedBytes
Copy link

Ran into this while following the docs: https://kit.svelte.dev/docs/load#input-methods-parent and it was very annoying to find out what the hell was wrong because the docs list it as valid..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature / enhancement New feature or request p2-nice-to-have SvelteKit cannot be used by a small number of people, quality of life improvements, etc. router
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants