New data props concerns

[zogs]

I really like the new design changes, but i have to say this one is causing me troubles :

First, it adds boilerplates code by using not-so-pretty destructuring assignment

// this is not pretty and is particulary hard to read for beginners
export let data;
let { foo, bar } = data;
$: ({ foo, bar } = data);

Secondly, data is a common variable name i personnaly use a lot in my page logic. So now i can't use something like

let data = computeSomething();

anywhere in my code because it will cause conflict with page data. And even without that, i will now see a lot of data.foo.data or even data.data in my code, which looks pretty bad in my opinion.

Lastly, i'm not sure why this change was needed. I understand it is a matter of type checking but as a non-user of typescript i don't see the benefits ot it, for me it adds only unnecessary complexity.

I dont know, maybe i'm the only one bothered...
Anyway, thanks for reading me

[rcabralc]

I don't use Typescript and I have the same problems. I'm doing the following to avoid renaming my variables (I'm using data because they refer to the "data" part of "data/error" GraphQL results, from a old Sapper app):

let loadedData
export { loadedData as data}
let { data } = loadedData
$: ({ data } = loadedData)

[lukaszpolowczyk]

It looks beautiful:

[zogs]

Sarcasm, right ?

[accuser]

I think one thing to consider is that a page in SvelteKit can be thought of as a higher-order component: it is composed of specialised Svelte components. This is a pattern that I use:

#./src/routes/posts/[id]/+page.svelte
<script lang="ts">
    import type { PageData } from './$types';
    import Post from '$lib/components/Post.svelte';

    export let data: PageData;

    /* PageData: { post: { slug: string, title: string, ... }, ... } */
</script>

<Post {...data.post} />

#./src/lib/components/Post.svelte
<script lang="ts">
    export let slug: string;
    export let title: string;
</script>

<h1>{title}</h1>

This might seem a trivial example (and it is) but when PageData contains other properties (e.g., banner, notifications, etc.) it becomes simple to add these specialised components to the page:

#./src/routes/posts/[id]/+page.svelte
<script lang="ts">
    import type { PageData } from './$types';
    import Post from '$lib/components/Post.svelte';

    export let data: PageData;

    /* PageData: { post: { slug: string, title: string, ... }, banner: { src: string }, ... } */
</script>

{#if data.banner}
    <Banner {...data.banner} />
{/if}

<Post {...data.post} />

[zogs]

You're saying to use components to abstract the page logic, like using PageHome inside home/+page.svelte or WeatherPage inside weather/+page.svelte ?
This indeed could work. But again, it's not going toward simplicity...

[lukaszpolowczyk]

@zogs This is Rich's response on Twitter to this - https://twitter.com/lpwE5Kzc/status/1565271204398862337

Are you satisfied with this answer?

[accuser]

You're saying to use components to abstract the page logic, like using PageHome inside home/+page.svelte or WeatherPage inside weather/+page.svelte ?
This indeed could work. But again, it's not going toward simplicity...

For a small project with a 1:1 mapping between page route and page component, it could be a little more work. However, for a larger project where there are multiple components involved in composing a page this is a simple approach.