transition directive doesn't accept undefined values with exactOptionalPropertyTypes enabled

[macmillen]

Describe the problem

In TypeScript 4.4 the flag exactOptionalPropertyTypes was introduced which fixed some weak typing mechanics for the Partial<> utility type. When enabling this flag in a Svelte project it is throwing errors when passing undefined to transition directives.

<script lang="ts">
  import { crossfade } from "svelte/transition";

  // send and receive functions can be undefined
  const [send, receive] = crossfade({ duration: 400 });
</script>

<div
  in:receive={{ key }}
  out:send={{ key }}
/>

Describe the proposed solution

Make undefined a valid prop type for svelte transition directives.

Alternatives considered

Make the crossfade function not return possibly undefined values but maybe an empty function. (I think this would be a bad alternative though)

Importance

would make my life easier

[dummdidumm]

I guess you mean noUncheckedIndexedAccess . We need to adjust the index signature so that it's a tuple, not an array.

[macmillen]

I think I got confused a bit about the actual problem and I thought the crossfade was related but it's nice that it's fixed anyway 😄

The actual feature request that I meant to describe was the following:

Imagine I have a component that can apply a transition conditionally like this:

<script lang="ts">
  type Transition = (node: Element, params: SvelteTransitionConfig) => SvelteTransitionReturnType;

  export let myTransition: Transition | undefined = undefined;
</script>

<div in:myTransition>
  <div>content</div>
</div>

<MyComponent
  myTransition={(node, params) => ({
    ...params,
    css: (t, u) => `transform: scale(${t}) translateY(${u * 4}px);`,
  })}
/>

Because sometimes I want the component to have a transition and sometimes not. My idea was to make the transition directive accept an undefined value to make that possible.

If you want I can create another GitHub Issue if that makes things easier for you. Anyhow thank you for looking into it @dummdidumm 🙏

[dummdidumm]

I created #6942 for this.

[macmillen]

awesome, thank you!