kit: some properties in type of object returned from ActionData is missing

Describe the bug

This issue is quite hard to explain by words, I would try my best to describe it precisely. But it think it would be the best to look at the screenshots / code below or the repo.

Issue: When the invalid function is used as a return of multiple conditionals, AND if they share properties of the same type, the other properties that they don’t share would be missing. It is even stranger when an object is the value of the property.

+page.server.ts

import { invalid, redirect } from '@sveltejs/kit';
import type { Actions } from './$types';
export const actions: Actions = {
	default: async ({ request, url }) => {
		if (url.searchParams.get('v') === '0') return invalid(400, { first: '1' });
		if (url.searchParams.get('v') === '1') return invalid(400, { first: 1, second: 'second' });
		if (url.searchParams.get('v') === '2') return invalid(400, { first: '3', second: 'second' });
		if (url.searchParams.get('v') === '3') return invalid(400, { first: {}, second: 'second' });
		if (url.searchParams.get('v') === '4') return { third: 3 };
		if (url.searchParams.get('v') === '5') return { third: 'third' };
		if (url.searchParams.get('v') === '6') return { fourth: 'fourth' };
	}
};

CleanShot 2022-09-15 at 10 29 13

+page.svelte

<script lang="ts">
	import type { ActionData } from './$types';
	export let form: ActionData;
	$: console.log(form ?? 'undefined');
</script>

{#each [0, 1, 2, 3, 4, 5, 6] as x}
	<div>
		<a href={'/?v=' + x}>to {x}</a>
	</div>
{/each}
<form method="POST">
	<button>print action output</button>
</form>

CleanShot 2022-09-15 at 10 30 13

Reproduction

https://github.com/harrylaulau/sveltekittest

Logs

No response

System Info

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Max
    Memory: 324.70 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.19 - ~/Library/pnpm/yarn
    npm: 8.12.1 - ~/.nvm/versions/node/v16.15.0/bin/npm
    Watchman: 2022.08.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 105.0.5195.125
    Safari: 16.0
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.74 
    @sveltejs/kit: next => 1.0.0-next.483 
    svelte: ^3.44.0 => 3.50.1 
    vite: ^3.1.0 => 3.1.0

Severity

serious, but I can work around it

Additional Information

It seems to me that the bug occurs from the return type of default.

+page.server.ts CleanShot 2022-09-15 at 10 38 15

proxy+page.server.ts CleanShot 2022-09-15 at 10 50 36

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 25 (19 by maintainers)

Commits related to this issue

Most upvoted comments

I’ve tried to make a better example to highlight the issue.

If I have a form Action with this code:

if (condition)
	return { message: "123", info: "abc" }
else
	return { message: "123", something: 123 }

I get the following type (correct):

(alias) type ActionData = {
    message: string;
    info: string;
    something?: undefined;
} | {
    message: string;
    something: number;
    info?: undefined;
}

But using the invalid helper function:

if (condition)
	return invalid(400,{ message: "123", info: "abc" })
else
	return invalid(400,{ message: "123", something: 123 })

I get this type which is harder to work with and inconsistent with how the load function return types are generated as well:

(alias) type ActionData = {
    message: string;
    info: string;
} | {
    message: string;
    something: number;
}

Are there perks to this or is it a bug?

In the case where it’s intended, would it be easy to opt out of it by let’s say not using the invalid helper function?