kit icon indicating copy to clipboard operation
kit copied to clipboard

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

Open elliott-with-the-longest-name-on-github opened this issue 3 years ago • 3 comments

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

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.

dummdidumm avatar Aug 18 '22 14:08 dummdidumm

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

AlbertMarashi avatar Aug 19 '22 07:08 AlbertMarashi

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)

tristan-f-r avatar Sep 16 '22 19:09 tristan-f-r

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

ghostdevv avatar Sep 28 '22 20:09 ghostdevv

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..

UnlimitedBytes avatar Oct 08 '22 17:10 UnlimitedBytes