Improve Intellisense Implementation

[Enteleform]

Is your feature request related to a problem? Please describe.

• VSCode's Rename Symbol only works within a single .svelte file
• component attributes do not have autocompletion or type information

 

Example:

Counter.svelte

<script lang="ts">
  export let count = 0
</script>

index.svelte

<!-- neither of these will update when using VSCode's `Rename Symbol` on the `count` definition @ Counter.svelte -->

<Counter count={5}/>  

<Counter count={"7"}/>  <!-- should result in error "Type 'string' is not assignable to type 'number'. ts(2322)" -->

 

Describe the solution you'd like

• Rename Symbol should update all references within a project
• component attributes should have autocompletion and type information

 

How important is this feature to you?

Absolutely essential. Not being able to use the code intelligence features of TypeScript + VSCode detracts greatly from the development experience and nullifies critical debugging safeguards which are one of the main reasons to use TypeScript in the first place.

[jasonlyu123]

About rename see #110 for more information.

About the component props completion, what exactly is missing? The extension does have this feature. Maybe you can try following the troubleshooting doc here to see if there is any issue.

[dummdidumm]

I can't reproduce any of your issues. Errors diagnostics, rename functionality (when done inside the script of Counter.svelte, see #110 for more info on that) and autocompletion works with the following setup:

Counter.svelte

<script lang="ts">
  export let count = 0
</script>

index.svelte

<script lang="ts">
  import Counter from "./Counter.svelte";
</script>

<Counter count={5}/>  
<Counter count={"7"}/>

[jasonlyu123]

Did you have path alias? That might explain why your language feature only works within the component.

[Enteleform]

@jasonlyu123

Nevermind @ completion, I'm running the svelte@next starter and the included tsconfig.json wasn't synced up with the aliases defined @ @sveltejs/snowpack-config. Added the following and now have functional completion:

"baseUrl": ".",
"paths": {
  "$components/*": ["./src/components/*"],
},

 
However, the types are still not being enforced and there is an extra line that shows undefined for some reason.
(confirmed @ latest stable starter as well)

 
Here's a screenshot of the expected hover info w/ a valid assignment:

 
And the expected hover info w/ an invalid assignment:

[Enteleform]

@dummdidumm

I see that renaming & completion are functional after checking out #110 and updating tsconfig.json as mentioned in my last post.

I'm still not receiving any errors on invalid assignment types though. Also, there are no errors for nonexistent attributes. (e.g. coumt typo does not trigger an error).

[dummdidumm]

You said these errors occur in the context of svelte@next. We do not offer any kind of guarantees/support for it yet, everything is highly experimental at this point and may break at any time, therefore I close this issue. Also, in your screenshot, App.svelte does not have lang="ts" set, so it's treated as JavaScript, not TypeScript, which is the reason why you don't get diagnostics.

About the optional type: Right now it's only required in strict mode, otherwise every prop is marked as optional. We may need to revisit this decision in the future.

[Enteleform]

@dummdidumm
Ok, sorry for the confusion. Adding lang="ts" resolved most of the issues. I was testing this on both next and stable in parallel; just made the error of copying the script tag w/o lang to the stable starter.

 
Is there anywhere to provide feedback for next?
The starter has 2 issues that I'm aware of:

• no lang="ts" @ routes/index.svelte
• tsconfig.json aliases do not match @sveltejs/snowpack-config

 
Also, just found that the count: undefined hover info occurs when using relative imports with inferred types.

// does not show `undefined`
import Counter from "$components/Counter.svelte" // aliased import
export let count: number = 0                     // explicit type

// does not show `undefined`
import Counter from "$components/Counter.svelte" // aliased import
export let count = 0                             // inferred type

// does not show `undefined`
import Counter from "./components/Counter.svelte" // relative import
export let count: number = 0                      // explicit type

// shows `undefined`
import Counter from "./components/Counter.svelte" // relative import
export let count = 0                              // inferred type

[dummdidumm]

There is no official way to give feedback yet, because everything's changing so fast that one's feedback might be obsolete two days later. We will announce when we enter the beta phase where you can give feedback like this.