Typescript Support not working with Async-Stack

[lecramr]

Hey together,

I got a quick question, somehow my typings are not working when I try to push a custom component to the async stack:

Dialog:

<script lang="ts" module>
import type { StackItemProps } from '@svelte-put/async-stack';

export interface NotificationProps extends StackItemProps<{ reason: string }> {
  content?: string;
  special?: boolean;
}
</script>

<script lang="ts">
import * as AlertDialog from '$lib/components/ui/alert-dialog';

let {
  content = 'Placeholder',
  special = false,
  item, // injected by @svelte-put/async-stack
}: NotificationProps = $props();
...

Caller:

let test = dialogStack.push('custom', {
              component: CommonDialog,
              props: {

              },
            }).resolution // => any;

Am I doing something wrong?
Neither the props nor the resolution is typed.. :/

Thanks in advance!

[lecramr]

Looks like it's working if I add a variant to the stack, but not if it's a "custom" StackItem. Is there any trick to get it working as I do not want to define all dialogs I have in my application and would like to call them dynamically?

[lecramr]

Okay, so I just went ahead and defined all my application dialogs, to get the typings right, it has some minor performance impacts, because the application is now loading all dialogs beforehand, but the bigger problem is, that HMR is breaking, because some dialogs are themselves referencing the dialog-stack and opening other dialogs, which causes HMR to detect a circular dependency and break. I think the easiest way would be to get the actual return value type for a custom component, is this somehow possible, maybe even with a wrapper function?

[vnphanquang]

Hi @lecramr, apologies for the late response. Defining variants will indeed create overhead and often targeted for use cases where multiple variants reuse the same components, e.g. notification toast. For dialog / modal, I recommend sticking with custom push.

I just pushed a patch that should improve the type inference for custom push, available in async-stack@1.0.1. Please give it another go and let me know if that helps. FYI typescript may yield misleading error about the variant until you have passed in the necessary props for the custom-pushed component.

The inference wasn't working previously because dts-buddy didn't seem to be able to output the correct type for the overloaded method. Sorry about the oversight.

[vnphanquang]

In the event it is necessary to provide explicit type for custom push, please try the following pattern:

import CustomDialog from './CustomDialog.svelte';

const pushed = stack.push<typeof CustomDialog>('custom', {
  component: CustomDialog,
  props: {
    // ...
  };
});

[lecramr]

Hey @vnphanquang,

awesome thank you really much for the quick help! It's working now exactly as it should lean and quick!
Yeah thats exactly my use case having a bunch of custom dialogs / modals. For me it even works without providing explicit types now! 💯

Interesting, will have a look at dts-buddy, didn't even knew it before!

Thanks again! :)