Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slot prop types from generic components not propagating upwards #1617

Open
AlbertMarashi opened this issue Sep 3, 2022 · 4 comments
Open
Labels
limitation Constraints of the existing architecture make this hard to fix

Comments

@AlbertMarashi
Copy link

AlbertMarashi commented Sep 3, 2022

Describe the bug

When using experimental generics, there is a bug happening where the let:prop type is not being passed up to the parent component, causing type issues within typescript only (the code works).

Reproduction

Main.svelte

<script>
import Foo from "./Foo.svelte"

</script>
<Foo xyz="foo" >
    <div slot="option" let:abc>
        {abc}
    </div>
</Foo>

The type of abc here is unknown when it should be string. This will appear as an error in VSCode

Foo.svelte

<script lang="ts">
import Bar from "./Bar.svelte"

type T = $$Generic
export let xyz: T

</script>
<Bar {xyz}>
    <svelte:fragment slot="option" let:bar>
        <slot name="option" abc={bar}/>
    </svelte:fragment>
</Bar>

Bar.svelte

<script lang="ts">
type T = $$Generic
export let xyz: T

</script>
<slot name="option" bar={xyz} />

Additionally, when you remove the name="option" and use the default to target the default slots the type becomes any instead of unknown. This does not appear as an error in VSCode, since it is any however all the type information is gone

Example using default slot:
Main.svelte

<script>
import Foo from "./Foo.svelte"

</script>
<Foo xyz="foo" let:abc>
    {abc}
</Foo>

Foo.svelte

<script lang="ts">
import Bar from "./Bar.svelte"

type T = $$Generic
export let xyz: T

</script>
<Bar {xyz} let:bar>
    <slot abc={bar}/>
</Bar>

Bar.svelte

<script lang="ts">
type T = $$Generic
export let xyz: T

</script>
<slot bar={xyz}/>

Logs

No response

System Info

System:
    OS: macOS 12.0.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 82.30 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    npm: 8.15.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Firefox Developer Edition: 105.0
    Safari: 15.1

Severity

blocking an upgrade

@AlbertMarashi AlbertMarashi changed the title Slot props from generic components not propagating upwards Slot prop types from generic components not propagating upwards Sep 3, 2022
@AlbertMarashi
Copy link
Author

AlbertMarashi commented Sep 3, 2022

A workaround I have discovered is to force Svelte to adopt a better interface for $$Slots

type T = $$Generic

interface $$Slots {
    default: { abc: T }
}

I still feel as if this should be automatic though

@dummdidumm
Copy link
Member

Probably duplicate of #1344

@bztes
Copy link

bztes commented Sep 30, 2022

In our case using the svelte-checker with '--use-new-transformation' has fixed the problem. No problems with VSCode.

The issue only occurred in some situations (some components worked, others didn't).

@AlbertMarashi
Copy link
Author

In our case using the svelte-checker with '--use-new-transformation' has fixed the problem. No problems with VSCode.

The issue only occurred in some situations (some components worked, others didn't).

How does one apply this change?

@jasonlyu123 jasonlyu123 added the limitation Constraints of the existing architecture make this hard to fix label Feb 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
limitation Constraints of the existing architecture make this hard to fix
Projects
None yet
Development

No branches or pull requests

4 participants