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

Bind to component instance - types missing in runes mode #13430

Closed
sbmw opened this issue Sep 29, 2024 · 1 comment
Closed

Bind to component instance - types missing in runes mode #13430

sbmw opened this issue Sep 29, 2024 · 1 comment

Comments

@sbmw
Copy link

sbmw commented Sep 29, 2024

Describe the bug

Typescript types don't seem to be generated for use when binding a component instance via bind:this - but only when the bound component is in runes mode.

Edit to add: this is a tooling issue only. The component instance binding and use of exported functions works great in both cases.

Reproduction

Simple repro here - https://github.com/sbmw/bind-component - but details also listed below for ease.

Create two components, exporting a function. Use runes in one.

<script lang="ts">
	export function saySimpleComponent() {
		alert('Simple Component');
	}
</script>
<script lang="ts">
	let message = $state('Runes Mode Component');
	export function sayRunesModeComponent() {
		alert(message);
	}
</script>

Import and bind to the components from a parent component/page.

<script lang="ts">
        import SimpleComponent from '$lib/Simple.svelte';
	import RunesModeComponent from '$lib/RunesMode.svelte';
	let simpleComponent: SimpleComponent;
	let runesModeComponent: RunesModeComponent;
</script>
<SimpleComponent bind:this={simpleComponent}></SimpleComponent>
<RunesModeComponent bind:this={runesModeComponent}></RunesModeComponent>
<button
	onclick={() => {
		simpleComponent.saySimpleComponent();
	}}>Simple Component</button
>
<button
	onclick={() => {
		runesModeComponent.sayRunesModeComponent();
	}}>Runes Mode Component</button
>

Result:

SimpleComponent is identified as a SvelteComponent type, providing intellisense etc.

let runesModeComponent: RunesModeComponent throws "'RunesModeComponent' refers to a value, but is being used as a type here. Did you mean 'typeof RunesModeComponent'? ts(2749)". No intellisense for the exports on runesModeComponent.

Logs

No response

System Info

System:
    OS: Linux 6.10 Fedora Linux 40 (KDE Plasma)
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 41.73 GB / 62.50 GB
    Container: Yes
    Shell: 5.2.26 - /bin/bash
  Binaries:
    Node: 22.9.0 - ~/.n/bin/node
    npm: 10.8.3 - ~/.n/bin/npm
    pnpm: 9.11.0 - ~/.local/share/pnpm/pnpm
  npmPackages:
    svelte: 5.0.0-next.260 => 5.0.0-next.260

Severity

annoyance

@sbmw
Copy link
Author

sbmw commented Sep 29, 2024

Ahhhh - I thought it hadn't been throwing this TS error previously. This is the issue I was looking for: sveltejs/language-tools#2522

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant