Accessors are throwing type errors and there's no autocomplete for them

[vatro]

Describe the bug
Accessors work, but are throwing type errors and there's no autocomplete for them.

To Reproduce
Install Svelte-ts-template, update all dependencies and test with this simple App while using the latest Svelte for VSCode (v104.6.4):

Expected behavior
No type errors.
Autocomplete: ability to select accessors from the list.

System (please complete the following information):

• Windows 10
• VSCode
• Svelte for VSCode v104.6.4

Additional context

"devDependencies": {
    "@rollup/plugin-commonjs": "^17.1.0",
    "@rollup/plugin-node-resolve": "^11.2.0",
    "@rollup/plugin-typescript": "^8.2.0",
    "@tsconfig/svelte": "^1.0.10",
    "rollup": "^2.41.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.35.0",
    "svelte-check": "^1.2.5",
    "svelte-preprocess": "^4.6.9",
    "tslib": "^2.1.0",
    "typescript": "^4.2.3"
  },
  "dependencies": {
    "sirv-cli": "^1.0.11"
  }

[dummdidumm]

Could you please provide copy-pasteable code snippets for App.svelte and AccComponent.svelte? From the description it's not clear to me what the problem is.

[vatro]

Sure!

<!-- App.svelte -->
<script lang="ts">
	import {onMount} from "svelte"
	import AccComponent from "./AccComponent.svelte"
	let accComp:AccComponent

	onMount(()=>{
		accComp.accProp = 1
		console.log("accComp.accProp: ", accComp.accProp)
	})

</script>

<AccComponent bind:this={accComp}/>

<!-- AccComponent.svelte -->
<svelte:options accessors={true} />

<script lang="ts">
	export let accProp: number = undefined
</script>

[vatro]

@dummdidumm
I gave it a try myself, it'd be cool if you could take a look at my solution:
https://github.com/vatro/language-tools/tree/add-accessors-autocomplete (branch deleted after PR merge)
Thanks!

[dummdidumm]

Looks good overall except for the TS type definition - that can't be added because this could also be a Javascript and therefore JSX file which cannot contain type definitions. If you can resolve that and add a test we are good to go I think.

[vatro]

... except for the TS type definition - that can't be added

Do you mean type SvelteTsxRender only?
Or should I also remove types from setter-parameters / shouldn't put any typings inside the default class? 🤔

[dummdidumm]

any typings are forbidden so to speak. Both type SvelteTsxRender` as well as its usage inside the setter file.

[vatro]

ah, ok, thanks!

[vatro]

@dummdidumm Ok, I'm done! 👉 add-accessors-autocomplete (branch deleted after PR merge)

Remarks:

• Turns out type SvelteTsxRender is not even needed to infer the type of the setter, since corresponding getters are also always generated for accessors, so they can be used for that. With this solution there's an adjacent-overload-signatures eslint error in the generated tsx class, but I guess this is not important, right?
• There are 5 new 'use-accessors' tests and I had to change a bunch of existing tests (113) because of the new setters: {} object in the render() output. All 217 svelte2tsx tests are passing.

Feedback much appreciated + I'm awaiting further instructions. Thanks!

[dummdidumm]

Yes the eslint error does not matter, we can do all kinds of dirty stuff in there 😄
One thing I noticed is that the generated code for a setter is set foo(foo) without {} afterwards which is invalid syntax. This needs to be added. Also one more test to check if there's no setter for things like export const foo = '' is created would be good. Other than this looks good, you might as well go ahead and open a PR and we can put the finishing touches to it over there 👍