Cannot use records inside new generics="T extends { key: string }" attribute

[Nick-Mazuk]

Describe the bug

Using the new generics notation introduced in #2020, you cannot use records the generics attribute because the generics attribute is parsed as an HTML string, not as TypeScript code.

Reproduction

<script lang='ts' generics='T extends { foo: string }'>

</script>

Gives the error:

Error: Expected } (svelte)
<script lang="ts" generics="T extends { key: string }">

Expected behaviour

This entire string is parsed as JS and not as a string with interpolation.

System Info

• OS: macOS 13.3.1
• IDE: VS Code
• Svelte Check: 3.4.3

Which package is the issue about?

svelte-check

Additional Information, eg. Screenshots

There is a workaround, but I don't think this is ideal.

<script lang='ts' context='module'>
    type Foo = { foo: string }
</script>

<script lang='ts' generics='T extends Foo'>

</script>

[dummdidumm]

The record thing is a good catch, the Svelte parser thinks it's a mustache tag when it shouldn't. Mhm we may need to special-case this inside the parser, or add a change to the typescript preprocessor where it strips the generics attribute. The latter is now easily possible in Svelte 4, so that's probably the most promising route.

[janosh]

What's the official status of the generics attribute? Is $$Generic deprecated and the recommendation for everyone to start using generics? Having trouble piecing this together from GitHub threads. Maybe this could be clarified here https://svelte.dev/docs/typescript#experimental-advanced-typings.

[fedorovvvv]

Hey, guys!✨
Are you guys still working on this?

[kyrregjerstad]

Got the same issue, what's the recommended way to use $$Generic now?

[dummdidumm]

This is fixed in the latest version of Svelte 4. Update to it and the error should go away.

[fedorovvvv]

WOOOOOWWWWW✨✨✨✨✨

[tbdrz]

I still get an error when using:

<script lang="ts" generics="T extends { id: string }">
</script>

Error: Expected } ts(-1)
Svelte: v4.2.8

[ollema]

I can also confirm that this:

<script lang='ts' generics='T extends { foo: string }'>

</script>

does not work for me.

  System:
    OS: macOS 13.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 61.19 MB / 32.00 GB
    Shell: 3.6.4 - /run/current-system/sw/bin/fish
  Binaries:
    Node: 21.5.0 - /etc/profiles/per-user/s0001325/bin/node
    npm: 10.2.4 - /etc/profiles/per-user/s0001325/bin/npm
    pnpm: 8.14.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 121.0.6167.85
    Safari: 16.5
  npmPackages:
    @sveltejs/adapter-node: ^4.0.1 => 4.0.1 
    @sveltejs/kit: ^2.5.0 => 2.5.0 
    @sveltejs/vite-plugin-svelte: ^3.0.1 => 3.0.1 
    svelte: ^4.2.9 => 4.2.9 
    vite: ^5.0.12 => 5.0.12 

[dummdidumm]

These snippets work for me, please make sure that you're running the latest version of the VS Code extension / the svelte language server if you're not using VS Code / svelte-check

[ollema]

These snippets work for me, please make sure that you're running the latest version of the VS Code extension / the svelte language server if you're not using VS Code / svelte-check

I am running this version of the Svelte for VS Code extension: v108.2.1

this seems to me to be the latest version, and I am still seeing these errors

[dummdidumm]

Could you provide a reproduction repository?

[ollema]

Could you provide a reproduction repository?

sure:

https://github.com/ollema/gh-lang-tools-2039-repro

also added system/svelte/extension information in README.md.

opening up this repo in VS Code and selecting the Component.svelte file produces the following error for me in the problems tab:

[{
	"resource": "/Users/s0001325/repos/gh-lang-tools-2039-repro/src/routes/Component.svelte",
	"owner": "_generated_diagnostic_collection_name_#2",
	"code": "-1",
	"severity": 8,
	"message": "Expected }",
	"source": "ts",
	"startLineNumber": 1,
	"startColumn": 44,
	"endLineNumber": 1,
	"endColumn": 44
}]

or

Expected } ts(-1) [Ln 1, Col 44]

[ollema]

is the reproduction working for you @dummdidumm?

[dummdidumm]

Yes, was able to reproduce it, thanks. Fix incoming.