Astro doesn't aware about svelte props

[Leniorko]

What version of astro are you using?

2.8.3

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

pnpm

What operating system are you using?

Linux

What browser are you using?

Chrome

Describe the Bug

I add svelte into my new project with pnpm astro add svelte

After writing some component with svelte using TS, I have a couple of typed props like position and whereTo:

<script lang="ts">
  import Home from "svelte-material-icons/Home.svelte"; 

  export let position:
    | "top-left"
    | "top-right"
    | "bottom-left"
    | "bottom-right" = "bottom-right";

  export let whereTo: string = "#";

  const positionClass = `FAB-${position}`;
</script>

I'm adding this component directly to Astro page. But Astro doesn't seem to be aware about defined props because when I'm hovering over a component in .astro file typing looks like this:

(alias) function FAB(_props: any): any
import FAB

Types when importing svelte component into another svelte component works perfectly fine. Type when hovering over looks like this:

(alias) class FAB
import FAB

What's the expected result?

Proper types in .astro file. Or at least the opportunity to define them manually. I'm sorry if there is one, but I can't find information about it.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-njqqdd?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[kwshi]

I've run into the same issue, and after an hour of pulling my hair out I seem to have narrowed the issue to pnpm's (non-)hoisting behavior. Can you try adding a .npmrc file with the contents

shamefully-hoist=true

then rerun pnpm install (to rebuild the node_modules/ directory), then open the file and hover again to see if the type information has improved? This fixed the issue for me.

Alternatively, you might also try removing node_modules/ and then installing using only vanilla npm, and see if that fixes the problem.

If it's the same for you, then we're running into the same problem, where it seems like pnpm's default non-hoisting is causing problems for Astro's tooling-- this seems to be a recurring issue with Astro. The following issues seem relevant:

• Astro 2.4.2 requires shamefully-hoist when using pnpm, markdown pages, and assets astro#7022
• Remove shamefully-hoist astro#4842
  • Note: astro's starter templates used to include a .npmrc with a shamefully-hoist=true directive, presumably to "fix"/workaround whatever issues Astro has with pnpm's non-hoisted structure. Then it looks like this PR came along and removed that, presumably because those issues were fixed-- except they weren't, or at least those fixes didn't propagate to the language server tooling.

I'm not familiar with the astro codebase, so that's the extent to which I can trace back the origin/history/context of the issue; perhaps someone more in-the-know than me might now be able to help out here.

[kwshi]

On a somewhat related note: with shamefully-hoist disabled (the new default setting), Svelte isn't the only thing that breaks-- trying to open any astro file and thereby launch the astro language server fails with the following error:

Cannot find typescript.js or tsserverlibrary.js in (path-to-project)/node_modules/typescript/lib

unless typescript is explicitly installed as a project-level dependency. Weirdly, the astro language server insists on loading typescript only from the project-level node_modules/, and not from, e.g., the global paths. This is an issue that only Astro seems to have (other language servers I have installed, e.g., svelte, do not have this issue), and it is also "fixed" by shamefully-hoist=true.

[Leniorko]

I tried stuff that @kwshi suggested.
Adding shamefully-hoist or switching to the vanilla npm did, in fact, change the type signature to:

(alias) function FAB(_props: typeof Component.props): any
import FAB

This fixes the problem with prop types for me. Astro components are aware of them, and IDE shows correct errors.

But there is still an issue with code auto-completion. It seems to work quite inconsistently. One time props show up, the other time they don't. They never show up if you press Ctrl + Space in VSCode before typing. But if you start typing them manually, they'll show up.

Note: Ctrl + Space is the default shortcut for Trigger Suggestion action that shows code suggestions.

UPD: Updated project to the Astro 3 with @astrojs/svelte 4. Same behaviour.

[ishamf]

I also encountered this issue on Astro 3.4.3,

I managed to fix it using just public-hoist-pattern[]=svelte2tsx (based on the config on this repo), so at least I don't need shamefully-hoist.