useNewTransformation Feedback Thread

[dummdidumm]

We introduced a new transformation which powers the Svelte intellisense under the hood. The goal is to get rid of a tsx-style transformation and simplify transformations along the way.

Advantages for users:

• no messing with projects who use JSX for some other reason and then have conflicting JSX definitions (Typescript cannot see prop types with tsconfig JSX setting as "react" #1256, Svelte for VS Code extension crushes react project #1149)
• better type inference in some cases, for example around svelte:component

Internal advantages:

• TS control flow easier to keep flowing
• overall easier transformations of Svelte specific syntax like await, each etc.

You can try out the new transformation using

• "Svelte for VS Code" version 105.11.1 and setting svelte.plugin.svelte.useNewTransformation to true
• svelte-check version 2.4.0 with the --use-new-transformation flag.

Please provide feedback in here about any improvements or regressions.

[dummdidumm]

Note for myself: We need to make the "no type definition found" or "type definition is wrong" error which we enhance for the old transformation here better for the new transformation and possibly also wrap the new Component call in a function which falls back to some defaults - don't know yet.

[TomTomB]

Hi, so far I've found 3 issues when using the new transformation.

Data attributes
Using a data attribute (e.g. data-popper-arrow for popper.js) results in the following error

Argument of type '{ class: string; "data-popper-arrow": boolean; }' is not assignable to parameter of type 'HTMLProps<HTMLDivElement>'.
  Object literal may only specify known properties, and '"data-popper-arrow"' does not exist in type 'HTMLProps<HTMLDivElement>'

Some attributes got renamed
This is a kind of breaking one. Before you could use something like xlink:href="someId" inside a svg. now it needs to be xlinkHref="someId". The same applys for xmlns:xlink and tabIndex (now tabindex).

Typing custom events from actions is a total loss
Before, there was a workaround to type custom events dispatched via use:someAction.

// custom-events.d.ts
declare namespace svelte.JSX {
 interface HTMLAttributes<T> {
    'onclick-outside'?: (
      event: CustomEvent & {
        target: EventTarget & T;
      },
    ) => void;
  }
}

svelte component

<script>
  import { clickOutside } from 'somewhere';

  const onClickOutside = () => {
    console.log('foo')
  };
</script>

<div
  on:click-outside={onClickOutside}
/>

This now results in errors like

 The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

',' expected 

 Argument expression expected

Declaration or statement expected

Cannot find name 'outside'

[dummdidumm]

Thank you @TomTomB for the valuable feedback! I adressed all issues in the latest version.

[swyxio]

@dummdidumm found this while using the new setting:

it appears that it is not parsing multiline classnames properly? i can replicate whenever i just add an arbitrary newline in the middle of any classname, and it also goes away when i get rid of the newline.

[ignatiusmb]

<Nested.Component /> usage error seems to appear again

[dummdidumm]

Thanks @sw-yx and @ignatiusmb ! Both issues are hopefully fixed with the latest version.

[ignatiusmb]

Lightning fast as always @dummdidumm! Can confirm it's working again now. No more regressions detected in all the apps that uses the new transformation.

[ignatiusmb]

Oops, might've spoken too early. svelte-check indeed doesn't seem to report any more errors, but autocompletion are now a bit overzealous and treats everything as JavaScript, even outside <script> and { ... }, where emmet is supposed to take control.

To reproduce, try triggering autocompletion, or start writing HTML in markup. It works in an empty .svelte as well.

[dummdidumm]

Could you provide a reproducible in a new issue? Can't reproduce this.

[ZerdoX-x]

for me it appears "randomly". it even appears in empty file with span only

it's an vscode error only. it doesn't appear in check tool

and I don't understand how do i find cause of this

[dummdidumm]

This sounds like a bug which is fixed in the latest version which was released a few hours ago. Try updating the extension and then reload VS Code.

[ZerdoX-x]

Hmm.. maybe yeah, it is fixed now. I will let you know if it will come back

[ZerdoX-x]

So I've made an issue for some another issue appeared for me after upgrading to new transformation.
I've made it external because I thought it existed without using new transformation.

[dummdidumm]

The new transformation is now enabled by default

You can turn it off by setting svelte.plugin.svelte.useNewTransformation to false. The new transformation brings improved intellisense. If you find bugs, please report them. You can also provide feedback in here. After a testing phase, the old transformation will be removed an svelte-check version 3 with only the new transformation will be released. You can use the new transformation with svelte-check now already by running it with the flag --use-new-transformation true

[jrmoynihan]

Destructured object props are incorrectly identified as constants in {#each} blocks

Here's a simplified version of what I'm seeing:

Seems to be correctly identified when I disable the new transformation setting:

[samuelstroschein]

With "svelte.plugin.svelte.useNewTransformation" set to false, defining custom web components works as follows:

// app.d.ts
declare namespace svelte.JSX {
	interface IntrinsicElements {
		"example-element": {
			name: number;
		};
	}
}

Problem

Setting useNewTransformations to true results in no type errors as if the namespace declaration is ignored.

Question

Is this a bug or am I supposed to declare custom web components in a different manner?

[dummdidumm]

You should be able to do the following:

// app.d.ts
declare namespace svelteHTML {
  interface IntrinsicElements: { .. }
}

That said, we probably should add backwards-compatibility for the typings. They exist for others, but not this case.

[aradalvand]

Hi, I have this in my app.d.ts:

type Stringable = string | { toString(): string };

declare namespace svelte.JSX {
  interface HTMLAttributes {
    class?: Stringable;
  }
  interface SVGAttributes {
    class?: Stringable;
  }
}

This is so that the "class" attribute accepts any object with that a toString method — I have a custom class builder that is a fluent API, and has a toString() method that actually produces the class list, I don't want to have to call toString() all the time because that happens automatically when the object is being set as the value of the attribute anyway, so I did this to get rid of the type errors; and it used to work prior to this change. Now it doesn't, and I'm getting type errors:

What should I do?

[samuelstroschein]

@aradalvand You seem to have the same problem I had. See #1352 (comment)

Try changing declare namespace svelte.JSX to declare namespace svelteHTML.

[aradalvand]

@samuelstroschein I did that but sadly it makes no difference.

I think the problem in my case is that the language server concatenates the types with an &, for some reason, which makes no sense, I want to replace the type of that property/attribute entirely, just like how it previously used to behave.

[dummdidumm]

Backwards compatibility should be better now, both these case should work without errors now, but you can also switch to the new svelteHTML namespace and it should work the same.

[amartens181]

Backwards compatibility should be better now, both these case should work without errors now, but you can also switch to the new svelteHTML namespace and it should work the same.

I have Svelte for VS Code v106.1.0 and neither my old declare namespace svelte.JSX export interface HTMLProps<T> nor the new declare namespace svelteHTML worked with the new transformation.

[dummdidumm]

Could you please share a code snippet along with more details what doesn't work so we can reproduce this?

[dummdidumm]

svelte-check version 3 has been released which uses the new transformation